changes

app/components/datatable/CreateTemplate.vue

@@ -93,11 +93,11 @@
       v-if="type.code === 'tag'"
     >
       <a
-        :class="getClass(v)"
         v-for="(v, i) in colorscheme"
         :key="i"
-        @click="doSelect(v)"
         :ref="'tag' + i"
+        :class="getClass(v)"
+        @click="doSelect(v)"
       >
         {{ v.name }}
       </a>
@@ -117,15 +117,15 @@
         {{ v.name }}
       </a>
     </div>
-    <div :class="`tabs is-boxed mt-5 mb-5 ${tab.code === 'template' ? '' : 'pb-2'}`">
+    <div :class="['tabs is-boxed', tab.code !== 'template' && 'pb-2']">
       <ul>
         <li
-          :class="tab.code === v.code ? 'is-active' : ''"
           v-for="(v, i) in tabs"
           :key="i"
+          :class="tab.code === v.code && 'is-active'"
           @click="changeTab(v)"
         >
-          <a class="">{{ v.name }}</a>
+          <a class="has-text-inherit">{{ v.name }}</a>
         </li>
       </ul>
     </div>
@@ -151,14 +151,21 @@
           </p>
           <p class="control">
             <a @click="remove(i)">
-              <SvgIcon v-bind="{ name: 'close.svg', type: 'danger', size: 22 }"></SvgIcon>
+              <Icon
+                name="material-symbols:close-rounded"
+                :size="20"
+                class="has-text-danger"
+              />
             </a>
           </p>
           <p
-            class="control has-text-right ml-5"
-            v-if="selected ? selected.id === v.id : false"
+            v-if="selected?.id === v.id"
+            class="control has-text-right"
           >
-            <SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 22 }"></SvgIcon>
+            <Icon
+              name="material-symbols:check-rounded"
+              :size="20"
+            />
           </p>
         </div>
       </a>
@@ -166,18 +173,23 @@
 
     <template v-else-if="tab.code === 'condition'">
       <div
-        class="mb-5"
         v-if="selected"
+        class="mb-5 control"
       >
-        <b-radio
+        <label
           v-for="(v, i) in conditions"
           :key="i"
-          v-model="condition"
-          :native-value="v"
-          @input="changeCondition(v)"
+          class="radio is-block"
         >
+          <input
+            type="radio"
+            name="condition"
+            :value="v"
+            v-model="condition"
+            @change="changeCondition(v)"
+          />
           {{ v.name }}
-        </b-radio>
+        </label>
       </div>
 
       <template v-if="condition ? condition.code === 'yes' : false">
@@ -482,7 +494,7 @@ var conditions = [
   { code: "yes", name: "Có áp dụng" },
 ];
 var condition = undefined;
-var tags = [];
+const tags = ref([]);
 var selected = undefined;
 var tabs = [
   { code: "selected", name: "Bước 1: Tạo nội dung" },
@@ -623,17 +635,17 @@ const checkExpression = function () {
 };
 const changeType = function (v) {};
 const doSelect = function (v) {
-  tags.push({ id: $id(), name: v.name, class: getClass(v) });
-  tab = tabs.find((v) => v.code === "selected");
-  selected = tags[tags.length - 1];
+  tags.value.push({ id: $id(), name: v.name, class: getClass(v) });
+  tab.value = tabs.find((v) => v.code === "selected");
+  selected = tags.value[tags.value.length - 1];
 };
 const doSelectSpan = function (v) {
-  tags.push({ id: $id(), name: v.name, class: getSpanClass(v) });
-  tab = tabs.find((v) => v.code === "selected");
-  selected = tags[tags.length - 1];
+  tags.value.push({ id: $id(), name: v.name, class: getSpanClass(v) });
+  tab.value = tabs.find((v) => v.code === "selected");
+  selected = tags.value[tags.value.length - 1];
 };
 const remove = function (i) {
-  $remove(tags, i);
+  tags.value.splice(i, 1);
 };
 const getClass = function (v) {
   let value = type.code + " " + v.code + " " + size.code + (shape.code === "default" ? "" : " " + shape.code);