changes

app/components/datatable/TableSetting.vue

@@ -1,132 +1,190 @@
 <template>
-  <div class="field is-horizontal">
-    <div class="field-body">
-      <div class="field">
-        <label class="label fs-14"> Cỡ chữ của bảng <span class="has-text-danger"> * </span></label>
-        <p class="control fs-14">
-          <input
-            class="input is-small"
-            type="text"
-            :value="tablesetting.find((v) => v.code === 'table-font-size').detail"
-            @change="changeSetting($event.target.value, 'table-font-size')"
-          />
-        </p>
+  <div class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-4">
+        <div class="box">
+          <label class="label fs-14">Cỡ chữ của bảng</label>
+          <p class="control fs-14">
+            <input
+              class="input fs-13"
+              type="text"
+              :value="tablesetting.find((v) => v.code === 'table-font-size').detail"
+              @change="changeSetting($event.target.value, 'table-font-size')"
+            />
+          </p>
+        </div>
       </div>
-      <div class="field">
-        <label class="label fs-14"> Cỡ chữ tiêu đề <span class="has-text-danger"> * </span></label>
-        <p class="control fs-14">
-          <input
-            class="input is-small"
-            type="text"
-            :value="tablesetting.find((v) => v.code === 'header-font-size').detail"
-            @change="changeSetting($event.target.value, 'header-font-size')"
-          />
-        </p>
+      <div class="cell is-col-span-4">
+        <div class="box">
+          <label class="label fs-14">Cỡ chữ tiêu đề</label>
+          <p class="control">
+            <input
+              class="input fs-13"
+              type="text"
+              :value="tablesetting.find((v) => v.code === 'header-font-size').detail"
+              @change="changeSetting($event.target.value, 'header-font-size')"
+            />
+          </p>
+        </div>
       </div>
-      <div class="field">
-        <label class="label fs-14"> Số dòng trên 1 trang <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            class="input is-small"
-            type="text"
-            :value="tablesetting.find((v) => v.code === 'per-page').detail"
-            @change="changeSetting($event.target.value, 'per-page')"
-          />
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="field is-horizontal mt-5">
-    <div class="field-body">
-      <div class="field">
-        <label class="label fs-14"> Màu nền bảng <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            type="color"
-            :value="tablesetting.find((v) => v.code === 'table-background').detail"
-            @change="changeSetting($event.target.value, 'table-background')"
-          />
-        </p>
-      </div>
-      <div class="field">
-        <label class="label fs-14"> Màu chữ <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            type="color"
-            :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
-            @change="changeSetting($event.target.value, 'table-font-color')"
-          />
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="field is-horizontal mt-5">
-    <div class="field-body">
-      <div class="field">
-        <label class="label fs-14"> Màu chữ tiêu đề <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            type="color"
-            :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
-            @change="changeSetting($event.target.value, 'header-font-color')"
-          />
-        </p>
-      </div>
-      <div class="field">
-        <label class="label fs-14"> Màu nền tiêu đề <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            type="color"
-            :value="tablesetting.find((v) => v.code === 'header-background').detail"
-            @change="changeSetting($event.target.value, 'header-background')"
-          />
-        </p>
-      </div>
-      <div class="field">
-        <label class="label fs-14"> Màu chữ khi filter<span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            type="color"
-            :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
-            @change="changeSetting($event.target.value, 'header-filter-color')"
-          />
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="field is-horizontal mt-5">
-    <div class="field-body">
-      <div class="field">
-        <label class="label fs-14"> Đường viền <span class="has-text-danger"> * </span> </label>
-        <p class="control fs-14">
-          <input
-            class="input is-small"
-            type="text"
-            :value="
-              tablesetting.find((v) => v.code === 'td-border')
-                ? tablesetting.find((v) => v.code === 'td-border').detail
-                : undefined
-            "
-            @change="changeSetting($event.target.value, 'td-border')"
-          />
-        </p>
+      <div class="cell is-col-span-4">
+        <div class="box">
+          <label class="label fs-14">Số dòng trên 1 trang</label>
+          <p class="control">
+            <input
+              class="input fs-13"
+              type="text"
+              :value="tablesetting.find((v) => v.code === 'per-page').detail"
+              @change="changeSetting($event.target.value, 'per-page')"
+            />
+          </p>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Màu nền bảng</label>
+          <p class="control is-flex is-gap-1">
+            <input
+              type="color"
+              :value="tablesetting.find((v) => v.code === 'table-background').detail"
+              @change="changeSetting($event.target.value, 'table-background')"
+            />
+            <input
+              class="input fs-13"
+              type="text"
+              placeholder="#f29384, var(--bulma-blue)"
+              :value="tablesetting.find((v) => v.code === 'table-background').detail"
+              @change="changeSetting($event.target.value, 'table-background')"
+            />
+          </p>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Màu chữ</label>
+          <p class="control is-flex is-gap-1">
+            <input
+              type="color"
+              :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
+              @change="changeSetting($event.target.value, 'table-font-color')"
+            />
+            <input
+              class="input fs-13"
+              type="text"
+              placeholder="#f29384, var(--bulma-blue)"
+              :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
+              @change="changeSetting($event.target.value, 'table-font-color')"
+            />
+          </p>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Màu chữ tiêu đề</label>
+          <p class="control is-flex is-gap-1">
+            <input
+              type="color"
+              :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
+              @change="changeSetting($event.target.value, 'header-font-color')"
+            />
+            <input
+              class="input fs-13"
+              type="text"
+              placeholder="#f29384, var(--bulma-blue)"
+              :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
+              @change="changeSetting($event.target.value, 'header-font-color')"
+            />
+          </p>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Màu nền tiêu đề</label>
+          <div class="control is-flex is-gap-1 is-align-items-stretch">
+            <input
+              type="color"
+              :value="rgbToHex(headerBg)"
+              @change="changeSetting($event.target.value, 'header-background')"
+            />
+            <input
+              class="input fs-13 h-full"
+              type="text"
+              placeholder="#f29384, var(--bulma-blue)"
+              :value="tablesetting.find((v) => v.code === 'header-background').detail"
+              @change="changeSetting($event.target.value, 'header-background')"
+            />
+
+            <div
+              ref="renderedHeaderBg"
+              class="is-hidden"
+              :style="{
+                backgroundColor: tablesetting.find((v) => v.code === 'header-background').detail,
+              }"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Màu chữ khi filter</label>
+          <p class="control is-flex is-gap-1">
+            <input
+              type="color"
+              :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
+              @change="changeSetting($event.target.value, 'header-filter-color')"
+            />
+            <input
+              class="input fs-13"
+              type="text"
+              placeholder="#f29384, var(--bulma-blue)"
+              :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
+              @change="changeSetting($event.target.value, 'header-filter-color')"
+            />
+          </p>
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="box">
+          <label class="label fs-14">Đường viền</label>
+          <p class="control fs-14">
+            <input
+              class="input fs-13"
+              type="text"
+              :value="
+                tablesetting.find((v) => v.code === 'td-border')
+                  ? tablesetting.find((v) => v.code === 'td-border').detail
+                  : undefined
+              "
+              @change="changeSetting($event.target.value, 'td-border')"
+            />
+          </p>
+        </div>
       </div>
     </div>
   </div>
+  <button
+    class="button is-primary"
+    @click="emit('close')"
+  >
+    Cập nhật
+  </button>
 </template>
 <script setup>
-import { useStore } from "@/stores/index";
-const store = useStore();
-var props = defineProps({
+const props = defineProps({
   pagename: String,
 });
-const { $copy, $clone, $empty } = useNuxtApp();
-var pagedata = $clone(store[props.pagename]);
-var errors = [];
-var radioNote = "no";
+const emit = defineEmits(["close"]);
+const { $copy, $clone, $empty, $store } = useNuxtApp();
+var pagedata = $clone($store[props.pagename]);
+if (!Array.isArray(pagedata.tablesetting)) {
+  pagedata.tablesetting = Object.values(pagedata.tablesetting);
+}
+const errors = ref([]);
+let radioNote = "no";
 var tablesetting = pagedata.tablesetting;
 let found = tablesetting.find((v) => v.code === "note");
 if (found ? found.detail !== "@" : false) radioNote = "yes";
+
 function changeSetting(value, code) {
   if (code === "note" && $empty(value)) return;
   let copy = $copy(tablesetting);
@@ -139,6 +197,45 @@ function changeSetting(value, code) {
   }
   tablesetting = copy;
   pagedata.tablesetting = tablesetting;
-  store.commit(props.pagename, pagedata);
+  $store.commit(props.pagename, pagedata);
+}
+
+const renderedHeaderBg = useTemplateRef("renderedHeaderBg");
+const headerBg = ref("#000000");
+
+onMounted(() => {
+  headerBg.value = window.getComputedStyle(renderedHeaderBg.value).backgroundColor;
+});
+watch();
+
+function rgbToHex(rgb) {
+  const [r, g, b] = rgb.match(/\d+/g);
+  return "#" + [r, g, b].map((x) => Number(x).toString(16).padStart(2, "0")).join("");
 }
 </script>
+<style scoped>
+input[type="color"] {
+  width: var(--bulma-control-height);
+  min-width: var(--bulma-control-height);
+  max-width: var(--bulma-control-height);
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+input[type="color"]::-webkit-color-swatch {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none;
+}
+
+.box {
+  box-shadow: none;
+  border: 1px solid var(--bulma-grey-90);
+  background-color: var(--bulma-grey-95);
+  height: 100%;
+}
+</style>