changes

app/components/datatable/CreateTemplate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="docid">
+  <div v-if="$id()">
     <div class="field is-horizontal">
       <div class="field-body">
         <div class="field">
@@ -74,17 +74,21 @@
           v-if="type.code !== 'tag'"
         >
           <label class="label">Outline</label>
-          <p class="control fs-14">
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
               v-for="(v, i) in outlines"
               :key="i"
-              v-model="outline"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
             >
+              <input
+                v-model="outline"
+                @change="changeType(v)"
+                type="radio"
+                name="outline"
+              />
               {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -367,39 +371,41 @@
       </div>
     </template>
     <template v-else-if="tab.code === 'template'">
-      <div class="buttons has-addons mb-3">
-        <button
-          @click="copyContent()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-copy-outline-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Copy</span>
-        </button>
-        <button
-          @click="paste()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-paste-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Paste</span>
-        </button>
+      <div class="block">
+        <div class="buttons has-addons mb-3">
+          <button
+            @click="copyContent()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-copy-outline-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Copy</span>
+          </button>
+          <button
+            @click="paste()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-paste-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Paste</span>
+          </button>
+        </div>
+        <textarea
+          class="textarea fs-13 is-family-monospace"
+          rows="4"
+          v-model="text"
+          @dblclick="doCheck"
+        ></textarea>
       </div>
-      <textarea
-        class="textarea fs-13 is-family-monospace"
-        rows="4"
-        v-model="text"
-        @dblclick="doCheck"
-      ></textarea>
-      <p class="mt-5">
+      <div class="block">
         <span class="icon-text">
           <span class="fs-17 font-semibold">Replace</span>
           <span class="icon">
@@ -409,8 +415,8 @@
             />
           </span>
         </span>
-      </p>
-      <div class="field is-grouped mt-4">
+      </div>
+      <div class="field is-grouped">
         <div class="control">
           <label class="label">Đoạn text</label>
           <input
@@ -441,14 +447,12 @@
           </button>
         </div>
       </div>
-      <p class="mt-5">
-        <button
-          class="button is-primary has-text-white"
-          @click="changeTemplate()"
-        >
-          Áp dụng
-        </button>
-      </p>
+      <button
+        class="button is-primary has-text-white"
+        @click="changeTemplate()"
+      >
+        Áp dụng
+      </button>
     </template>
   </div>
 </template>
@@ -456,61 +460,61 @@
 import { ref } from "vue";
 const store = useStore();
 const { $id, $copy, $empty, $calc, $remove, $copyToClipboard } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
   pagename: String,
   field: Object,
 });
-var colorscheme = store.colorscheme;
-var colorchoice = store.colorchoice;
-var pageData = store[props.pagename];
-var field = props.field;
-var type = undefined;
-var size = undefined;
-var types = [
+let colorscheme = store.colorscheme;
+let colorchoice = store.colorchoice;
+let pageData = store[props.pagename];
+let field = props.field;
+let type = undefined;
+let size = undefined;
+const types = [
   { code: "span", name: "span" },
   { code: "tag", name: "tag" },
 ];
-var sizes = [
+const sizes = [
   { code: "is-small", name: "Nhỏ", value: "is-size-6" },
   { code: "is-normal", name: "Trung bình", value: "is-size-5" },
   { code: "is-medium", name: "Lớn", value: "is-size-4" },
 ];
-var shapes = [
+const shapes = [
   { code: "default", name: "Mặc định" },
   { code: "is-rounded", name: "Tròn góc" },
 ];
-var shape = undefined;
-var outlines = [
+let shape = undefined;
+const outlines = [
   { code: "default", name: "Mặc định" },
   { code: "is-outlined", name: "Outline" },
 ];
-var outline = undefined;
-var conditions = [
+let outline = undefined;
+const conditions = [
   { code: "no", name: "Không áp dụng" },
   { code: "yes", name: "Có áp dụng" },
 ];
-var condition = undefined;
+let condition = undefined;
 const tags = ref([]);
-var selected = undefined;
-var tabs = [
+let selected = undefined;
+const tabs = [
   { code: "selected", name: "Bước 1: Tạo nội dung" },
   { code: "condition", name: "Bước 2: Đặt điều kiện" },
   { code: "option", name: "Bước 3: Chọn màu, cỡ chữ" },
   { code: "template", name: "Bước 4: Mã lệnh & áp dụng" },
 ];
-var tab = ref(undefined);
-var tagsField = [];
-var errors = [];
-var expression = "";
-var text = ref(null);
-var radioBGcolor = undefined;
-var radioColor = undefined;
-var radioSize = undefined;
-var bgcolor = undefined;
-var color = undefined;
-var textsize = undefined;
-var source = undefined;
-var target = $copy(field.name);
+const tab = ref(undefined);
+let tagsField = [];
+let errors = [];
+let expression = "";
+const text = ref(null);
+let radioBGcolor = undefined;
+let radioColor = undefined;
+let radioSize = undefined;
+let bgcolor = undefined;
+let color = undefined;
+let textsize = undefined;
+let source = undefined;
+let target = $copy(field.name);
 
 const initData = function () {
   type = types.find((v) => v.code === "tag");
@@ -653,5 +657,4 @@ const getSpanClass = function (v) {
   return value;
 };
 initData();
-var docid = $id();
 </script>