Initial commit

app/components/viewer/LayerSetting.vue

@@ -0,0 +1,65 @@
+<script setup>
+import Modal from '@/components/Modal.vue';
+const showLayerSettingListModal = ref(null);
+const showLayerSettingSaveModal = ref(null);
+
+function openLayerSettingList() {
+  showLayerSettingListModal.value = {
+    component: 'viewer/LayerSettingList',
+    title: 'Chọn thiết lập layer',
+    width: '400px',
+    height: 'auto',
+  };
+}
+
+function openLayerSettingSave() {
+  showLayerSettingSaveModal.value = {
+    component: 'viewer/LayerSettingSave',
+    title: 'Lưu thiết lập layer',
+    width: '400px',
+    height: 'auto',
+  };
+}
+</script>
+<template>
+  <div class="is-flex is-gap-1">
+    <button 
+      class="button is-small p-2 is-white" 
+      title="Mở thiết lập"
+      @click="openLayerSettingList"
+    >
+      <SvgIcon v-bind="{ name: 'folder.svg', type: 'primary', size: 20 }" />
+    </button>
+    <button 
+      class="button is-small p-2 is-white" 
+      title="Lưu thiết lập"
+      @click="openLayerSettingSave"
+    >
+      <SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 20 }" />
+    </button>
+  </div>
+  <Modal 
+    v-bind="showLayerSettingListModal"
+    v-if="showLayerSettingListModal"
+    @close="showLayerSettingListModal = null"
+  />
+  <Modal 
+    v-bind="showLayerSettingSaveModal"
+    v-if="showLayerSettingSaveModal"
+    @close="showLayerSettingSaveModal = null"
+  />
+</template>
+<style>
+#layerSettingSFCContainer {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 75px;
+  height: 50px;
+  z-index: 1;
+
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+} 
+</style>