chore: install prettier

app/components/datatable/FormatOption.vue

@@ -5,7 +5,12 @@
     </p>
     <div class="tabs is-boxed">
       <ul>
-        <li v-for="(v, i) in tabs" :key="i" :class="tab.code === v.code ? 'is-active' : ''" @click="tab = v">
+        <li
+          v-for="(v, i) in tabs"
+          :key="i"
+          :class="tab.code === v.code ? 'is-active' : ''"
+          @click="tab = v"
+        >
           <a>{{ v.name }}</a>
         </li>
       </ul>
@@ -14,17 +19,37 @@
 
   <template v-if="tab.code === 'expression' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
     <template v-if="radio ? radio.code === 'condition' && sideBar === 'bgcolor' : false">
-      <div v-for="(v, i) in bgcolorFilter" :key="v.id" class="px-4">
+      <div
+        v-for="(v, i) in bgcolorFilter"
+        :key="v.id"
+        class="px-4"
+      >
         <FilterOption
-          v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
+          v-bind="{
+            filterObj: v,
+            filterType: 'color',
+            pagename: pagename,
+            field: openField,
+          }"
           :ref="v.id"
           @databack="doConditionFilter($event, 'bgcolor', v.id)"
         />
-        <p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
-          <a class="has-text-primary mr-5" @click="addCondition(bgcolorFilter)" v-if="bgcolorFilter.length <= 30">
+        <p
+          class="fs-14 mt-1"
+          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+        >
+          <a
+            class="has-text-primary mr-5"
+            @click="addCondition(bgcolorFilter)"
+            v-if="bgcolorFilter.length <= 30"
+          >
             Thêm
           </a>
-          <a class="has-text-danger" @click="removeCondition(bgcolorFilter, i)" v-if="bgcolorFilter.length > 1">
+          <a
+            class="has-text-danger"
+            @click="removeCondition(bgcolorFilter, i)"
+            v-if="bgcolorFilter.length > 1"
+          >
             Bớt
           </a>
         </p>
@@ -32,29 +57,77 @@
     </template>
 
     <template v-else-if="radio ? radio.code === 'condition' && sideBar === 'color' : false">
-      <div v-for="(v, i) in colorFilter" :key="v.id" class="px-4">
+      <div
+        v-for="(v, i) in colorFilter"
+        :key="v.id"
+        class="px-4"
+      >
         <FilterOption
-          v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
+          v-bind="{
+            filterObj: v,
+            filterType: 'color',
+            pagename: pagename,
+            field: openField,
+          }"
           :ref="v.id"
           @databack="doConditionFilter($event, 'color', v.id)"
         />
-        <p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
-          <a class="has-text-primary mr-5" @click="addCondition(colorFilter)" v-if="colorFilter.length <= 30"> Thêm </a>
-          <a class="has-text-danger" @click="removeCondition(colorFilter, i)" v-if="colorFilter.length > 1"> Bớt </a>
+        <p
+          class="fs-14 mt-1"
+          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+        >
+          <a
+            class="has-text-primary mr-5"
+            @click="addCondition(colorFilter)"
+            v-if="colorFilter.length <= 30"
+          >
+            Thêm
+          </a>
+          <a
+            class="has-text-danger"
+            @click="removeCondition(colorFilter, i)"
+            v-if="colorFilter.length > 1"
+          >
+            Bớt
+          </a>
         </p>
       </div>
     </template>
 
     <template v-else-if="radio ? radio.code === 'condition' && sideBar === 'textsize' : false">
-      <div v-for="(v, i) in sizeFilter" :key="v.id" class="px-4">
+      <div
+        v-for="(v, i) in sizeFilter"
+        :key="v.id"
+        class="px-4"
+      >
         <FilterOption
-          v-bind="{ filterObj: v, filterType: 'size', pagename: pagename, field: openField }"
+          v-bind="{
+            filterObj: v,
+            filterType: 'size',
+            pagename: pagename,
+            field: openField,
+          }"
           :ref="v.id"
           @databack="doConditionFilter($event, 'textsize', v.id)"
         />
-        <p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
-          <a class="has-text-primary mr-5" @click="addCondition(sizeFilter)" v-if="sizeFilter.length <= 30"> Thêm </a>
-          <a class="has-text-danger" @click="removeCondition(sizeFilter, i)" v-if="sizeFilter.length > 1"> Bớt </a>
+        <p
+          class="fs-14 mt-1"
+          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+        >
+          <a
+            class="has-text-primary mr-5"
+            @click="addCondition(sizeFilter)"
+            v-if="sizeFilter.length <= 30"
+          >
+            Thêm
+          </a>
+          <a
+            class="has-text-danger"
+            @click="removeCondition(sizeFilter, i)"
+            v-if="sizeFilter.length > 1"
+          >
+            Bớt
+          </a>
         </p>
       </div>
     </template>
@@ -62,21 +135,39 @@
 
   <template v-else-if="tab.code === 'script' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
     <p class="my-4 mx-4">
-      <a @click="copyContent(script ? script : '')" class="mr-6">
+      <a
+        @click="copyContent(script ? script : '')"
+        class="mr-6"
+      >
         <span class="icon-text">
-          <SvgIcon class="mr-2" v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"></SvgIcon>
+          <SvgIcon
+            class="mr-2"
+            v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"
+          ></SvgIcon>
           <span class="fs-16">Copy</span>
         </span>
       </a>
-      <a @click="paste()" class="mr-6">
+      <a
+        @click="paste()"
+        class="mr-6"
+      >
         <span class="icon-text">
-          <SvgIcon class="mr-2" v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"></SvgIcon>
+          <SvgIcon
+            class="mr-2"
+            v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"
+          ></SvgIcon>
           <span class="fs-16">Paste</span>
         </span>
       </a>
     </p>
     <div class="mx-4">
-      <textarea class="textarea fs-14" rows="8" v-model="script" @change="checkScript()" @dblclick="doCheck"></textarea>
+      <textarea
+        class="textarea fs-14"
+        rows="8"
+        v-model="script"
+        @change="checkScript()"
+        @dblclick="doCheck"
+      ></textarea>
     </div>
     <p class="mt-5 mx-4">
       <span class="icon-text fsb-18">
@@ -87,14 +178,29 @@
     <div class="field is-grouped mx-4 mt-4">
       <div class="control">
         <p class="fsb-14 mb-1">Đoạn text</p>
-        <input class="input" type="text" placeholder="" v-model="source" />
+        <input
+          class="input"
+          type="text"
+          placeholder=""
+          v-model="source"
+        />
       </div>
       <div class="control">
         <p class="fsb-14 mb-1">Thay bằng</p>
-        <input class="input" type="text" placeholder="" v-model="target" />
+        <input
+          class="input"
+          type="text"
+          placeholder=""
+          v-model="target"
+        />
       </div>
       <div class="control pl-5">
-        <button class="button is-primary is-rounded is-outlined mt-5" @click="replace()">Replace</button>
+        <button
+          class="button is-primary is-rounded is-outlined mt-5"
+          @click="replace()"
+        >
+          Replace
+        </button>
       </div>
     </div>
     <p class="mt-5 pt-2 mx-4">
@@ -103,10 +209,24 @@
         <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
       </span>
     </p>
-    <p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="changeScript()">Cập nhật</button></p>
+    <p class="mx-4 mt-4">
+      <button
+        class="button is-primary is-rounded"
+        @click="changeScript()"
+      >
+        Cập nhật
+      </button>
+    </p>
   </template>
-  <TableOption v-bind="{ pagename: pagename }" v-else-if="sideBar === 'option'"> </TableOption>
-  <CreateTemplate v-else-if="sideBar === 'template'" v-bind="{ pagename: pagename, field: openField }">
+  <TableOption
+    v-bind="{ pagename: pagename }"
+    v-else-if="sideBar === 'option'"
+  >
+  </TableOption>
+  <CreateTemplate
+    v-else-if="sideBar === 'template'"
+    v-bind="{ pagename: pagename, field: openField }"
+  >
   </CreateTemplate>
 </template>
 <script setup>