changes

app/components/datatable/CreateTemplate.vue

@@ -4,33 +4,41 @@
       <div class="field-body">
         <div class="field">
           <label class="label">Đối tượng</label>
-          <p class="control fs-14">
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
               v-for="(v, i) in types"
               :key="i"
-              v-model="type"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
             >
+              <input
+                v-model="type"
+                @input="changeType(v)"
+                type="radio"
+                name="type"
+              />
               {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
         </div>
         <div class="field">
           <label class="label">Kích cỡ</label>
-          <p class="control fs-14">
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
               v-for="(v, i) in sizes.filter((v) =>
                 type ? (type.code === 'tag' ? v.code !== 'is-small' : 1 > 0) : true,
               )"
               :key="i"
-              v-model="size"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
             >
+              <input
+                v-model="size"
+                @input="changeType(v)"
+                type="radio"
+                name="size"
+              />
               {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
         </div>
         <div class="field">
           <label
@@ -38,20 +46,21 @@
             v-if="['tag'].find((v) => v === type.code)"
             >Hình khối</label
           >
-          <p
-            class="control fs-14"
-            v-if="['tag'].find((v) => v === type.code)"
-          >
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
               v-for="(v, i) in shapes"
               :key="i"
-              v-model="shape"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
             >
+              <input
+                v-model="shape"
+                @input="changeType(v)"
+                type="radio"
+                name="shape"
+              />
               {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -116,7 +125,7 @@
           :key="i"
           @click="changeTab(v)"
         >
-          <a class="fs-15">{{ v.name }}</a>
+          <a class="">{{ v.name }}</a>
         </li>
       </ul>
     </div>
@@ -346,68 +355,77 @@
       </div>
     </template>
     <template v-else-if="tab.code === 'template'">
-      <p class="mb-3">
-        <a
+      <div class="buttons mb-3">
+        <button
           @click="copyContent()"
-          class="mr-6"
+          class="button is-primary is-light fs-14"
         >
-          <span class="icon-text">
-            <SvgIcon
-              class="mr-2"
-              v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"
-            ></SvgIcon>
-            <span class="fs-16">Copy</span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:content-copy-outline-rounded"
+              :size="18"
+            />
           </span>
-        </a>
-        <a
+          <span>Copy</span>
+        </button>
+        <button
           @click="paste()"
-          class="mr-6"
+          class="button is-primary is-light fs-14"
         >
-          <span class="icon-text">
-            <SvgIcon
-              class="mr-2"
-              v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"
-            ></SvgIcon>
-            <span class="fs-16">Paste</span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:content-paste-rounded"
+              :size="18"
+            />
           </span>
-        </a>
-      </p>
+          <span>Paste</span>
+        </button>
+      </div>
       <div>
         <textarea
-          class="textarea fs-14"
-          rows="8"
+          class="textarea fs-13"
+          style="font-family: monospace"
+          rows="4"
           v-model="text"
           @dblclick="doCheck"
         ></textarea>
       </div>
       <p class="mt-5">
-        <span class="icon-text fsb-18">
-          Replace
-          <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
+        <span class="icon-text">
+          <span class="fs-17 font-semibold">Replace</span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:arrow-forward-ios-rounded"
+              :size="18"
+            />
+          </span>
         </span>
       </p>
       <div class="field is-grouped mt-4">
         <div class="control">
-          <p class="fsb-14 mb-1">Đoạn text</p>
+          <label class="label">Đoạn text</label>
           <input
             class="input"
             type="text"
-            placeholder=""
             v-model="source"
           />
         </div>
         <div class="control">
-          <p class="fsb-14 mb-1">Thay bằng</p>
+          <label class="label">Thay bằng</label>
           <input
             class="input"
             type="text"
-            placeholder=""
             v-model="target"
           />
         </div>
-        <div class="control pl-5">
+        <div class="control">
+          <label
+            class="label"
+            style="opacity: 0"
+            >Hidden</label
+          >
           <button
-            class="button is-primary is-outlined mt-5"
+            class="button is-primary is-light"
             @click="replace()"
           >
             Replace