From 9b34d7eff72d641ea8065a9812c83164a664fd84 Mon Sep 17 00:00:00 2001
From: kewcoder <kewcoder@gmail.com>
Date: Wed, 15 Nov 2023 00:23:22 +0700
Subject: [PATCH] run format

---
 .../src/Builder/DataTable/OcDataTable.vue     |  4 +--
 .../DataDisplay/Pagination/OcPagination.vue   |  8 +++---
 .../src/DataDisplay/Table/OcTableCell.vue     |  4 +--
 .../Accordion/OcAccordion.stories.js          |  2 +-
 .../src/Disclosure/Tabs/OcTabs.vue            |  4 +--
 .../src/Elements/Header/OcTabToSelect.vue     |  2 +-
 .../Elements/PageTitle/OcPrimaryActions.vue   |  2 +-
 .../src/Form/Button/OcButton.vue              |  6 ++--
 .../src/Form/Calendar/OcCalendar.vue          | 28 +++++++++----------
 .../src/Form/Checkbox/OcCheckbox.vue          |  8 +++---
 .../OcCheckboxesGroup.stories.js              |  2 +-
 .../CheckboxesGroup/OcCheckboxesGroup.vue     |  2 +-
 .../ComplexDatePicker/OcComplexDatePicker.vue |  2 +-
 .../src/Form/LinkInput/OcLinkInput.vue        |  2 +-
 .../src/Form/PhoneInput/OcPhoneInput.vue      |  6 ++--
 .../src/Form/Select/OcSelect.vue              |  6 ++--
 .../Form/SingleFileUpload/ModalCropper.vue    |  4 ++-
 .../SingleFileUpload/SingleFileUpload.vue     |  2 +-
 .../src/Form/Slider/OcSlider.vue              |  2 +-
 .../src/Form/TextEditor/QuillEditor.js        |  4 +--
 .../src/Form/TextEditor/snow.css              | 20 ++++++++++---
 .../src/Form/TimePicker/OcTimePicker.vue      |  4 +--
 .../src/Form/TimePicker/OcTimePopup.vue       | 22 +++++++--------
 .../src/Overlay/Popper/OcPopper.vue           |  4 +--
 .../src/Overlay/Tooltip/OcTooltip.vue         |  5 ++--
 packages/@orchidui-vue/src/Theme/OcTheme.vue  |  2 +-
 .../src/composables/uploadFileProgress.js     |  8 +++---
 27 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/packages/@orchidui-vue/src/Builder/DataTable/OcDataTable.vue b/packages/@orchidui-vue/src/Builder/DataTable/OcDataTable.vue
index df906c5cf..9ec3e5643 100644
--- a/packages/@orchidui-vue/src/Builder/DataTable/OcDataTable.vue
+++ b/packages/@orchidui-vue/src/Builder/DataTable/OcDataTable.vue
@@ -230,8 +230,8 @@ const displayFilterData = computed(() => {
               !filterOptions
                 ? 'w-full justify-end'
                 : isSearchExpanded
-                ? 'md:w-fit w-full'
-                : ''
+                  ? 'md:w-fit w-full'
+                  : ''
             "
           >
             <FilterSearch
diff --git a/packages/@orchidui-vue/src/DataDisplay/Pagination/OcPagination.vue b/packages/@orchidui-vue/src/DataDisplay/Pagination/OcPagination.vue
index aa2ca24a5..7d1f2eeec 100644
--- a/packages/@orchidui-vue/src/DataDisplay/Pagination/OcPagination.vue
+++ b/packages/@orchidui-vue/src/DataDisplay/Pagination/OcPagination.vue
@@ -37,7 +37,7 @@ const pagination = computed(() => {
     return [
       ...Array.from(
         { length: Math.min(totalVisible - 1, props.maxPage) },
-        (_, index) => index + 1
+        (_, index) => index + 1,
       ),
       "...",
       props.maxPage,
@@ -51,7 +51,7 @@ const pagination = computed(() => {
       "...",
       ...Array.from(
         { length: totalVisible - 1 },
-        (_, index) => props.maxPage - (totalVisible - 2) + index
+        (_, index) => props.maxPage - (totalVisible - 2) + index,
       ),
     ];
   }
@@ -76,7 +76,7 @@ const pagination = computed(() => {
         @click="
           $emit(
             'update:modelValue',
-            modelValue > 1 ? modelValue - 1 : modelValue
+            modelValue > 1 ? modelValue - 1 : modelValue,
           )
         "
       />
@@ -106,7 +106,7 @@ const pagination = computed(() => {
         @click="
           $emit(
             'update:modelValue',
-            modelValue < Number(maxPage) ? modelValue + 1 : Number(maxPage)
+            modelValue < Number(maxPage) ? modelValue + 1 : Number(maxPage),
           )
         "
       />
diff --git a/packages/@orchidui-vue/src/DataDisplay/Table/OcTableCell.vue b/packages/@orchidui-vue/src/DataDisplay/Table/OcTableCell.vue
index 70e057406..c4c01bf15 100644
--- a/packages/@orchidui-vue/src/DataDisplay/Table/OcTableCell.vue
+++ b/packages/@orchidui-vue/src/DataDisplay/Table/OcTableCell.vue
@@ -102,8 +102,8 @@ const copyToClipboard = async (text) => {
             isSelected
               ? 'block'
               : isSimple
-              ? ''
-              : 'md:hidden group-hover/row:block'
+                ? ''
+                : 'md:hidden group-hover/row:block'
           "
           @update:model-value="$emit('selected')"
         />
diff --git a/packages/@orchidui-vue/src/Disclosure/Accordion/OcAccordion.stories.js b/packages/@orchidui-vue/src/Disclosure/Accordion/OcAccordion.stories.js
index e94a01473..ed4a8c949 100644
--- a/packages/@orchidui-vue/src/Disclosure/Accordion/OcAccordion.stories.js
+++ b/packages/@orchidui-vue/src/Disclosure/Accordion/OcAccordion.stories.js
@@ -28,7 +28,7 @@ export const OcAccordion = {
       const isOpen = ref(false);
       watch(
         () => args.isExpandable,
-        (val) => (isOpen.value = args.isDisabled ? false : val)
+        (val) => (isOpen.value = args.isDisabled ? false : val),
       );
       return { isOpen, args };
     },
diff --git a/packages/@orchidui-vue/src/Disclosure/Tabs/OcTabs.vue b/packages/@orchidui-vue/src/Disclosure/Tabs/OcTabs.vue
index 09dadce6b..c9030fd61 100644
--- a/packages/@orchidui-vue/src/Disclosure/Tabs/OcTabs.vue
+++ b/packages/@orchidui-vue/src/Disclosure/Tabs/OcTabs.vue
@@ -32,8 +32,8 @@ const isPillVariant = computed(() => props.variant === "pills");
             ? 'bg-oc-gray-200 text-oc-text-500'
             : 'border-oc-primary-500 text-oc-text-500'
           : isPillVariant
-          ? 'text-oc-text-400'
-          : 'border-transparent text-oc-text-400',
+            ? 'text-oc-text-400'
+            : 'border-transparent text-oc-text-400',
       ]"
       @click="$emit('update:modelValue', tab.value)"
     >
diff --git a/packages/@orchidui-vue/src/Elements/Header/OcTabToSelect.vue b/packages/@orchidui-vue/src/Elements/Header/OcTabToSelect.vue
index ea741c82f..30875e238 100644
--- a/packages/@orchidui-vue/src/Elements/Header/OcTabToSelect.vue
+++ b/packages/@orchidui-vue/src/Elements/Header/OcTabToSelect.vue
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 const isDropdownOpened = ref(false);
 const activeMenu = computed(() =>
-  props.menus.find((menu) => menu.value === props.modelValue)
+  props.menus.find((menu) => menu.value === props.modelValue),
 );
 </script>
 <template>
diff --git a/packages/@orchidui-vue/src/Elements/PageTitle/OcPrimaryActions.vue b/packages/@orchidui-vue/src/Elements/PageTitle/OcPrimaryActions.vue
index 640fb47de..59b549139 100644
--- a/packages/@orchidui-vue/src/Elements/PageTitle/OcPrimaryActions.vue
+++ b/packages/@orchidui-vue/src/Elements/PageTitle/OcPrimaryActions.vue
@@ -12,7 +12,7 @@ const emit = defineEmits({
 const isDropdownOpened = ref(false);
 const isCopied = ref(false);
 const hasDropdownOptions = computed(
-  () => props.primaryActions?.dropdownOptions
+  () => props.primaryActions?.dropdownOptions,
 );
 const copyToClipBoard = () => {
   isCopied.value = true;
diff --git a/packages/@orchidui-vue/src/Form/Button/OcButton.vue b/packages/@orchidui-vue/src/Form/Button/OcButton.vue
index a4d5df184..e8ae415fd 100644
--- a/packages/@orchidui-vue/src/Form/Button/OcButton.vue
+++ b/packages/@orchidui-vue/src/Form/Button/OcButton.vue
@@ -25,7 +25,7 @@ const props = defineProps({
 });
 const isPressed = ref(false);
 const isIconOnly = computed(
-  () => (props.leftIcon || props.rightIcon) && !props.label
+  () => (props.leftIcon || props.rightIcon) && !props.label,
 );
 const additionalAreaSize = computed(() => ({
   default: "w-10 h-[36px]",
@@ -54,7 +54,7 @@ const showShadow = computed(
     !props.isDisabled &&
     !props.isLoading &&
     !props.isActive &&
-    shadowContainer.value[props.variant]
+    shadowContainer.value[props.variant],
 );
 
 const buttonTypeClasses = computed(() => ({
@@ -86,7 +86,7 @@ const buttonSizeClasses = computed(() => ({
       : "py-3 ") + " text-lg h-[44px]",
 }));
 const roundedClasses = computed(() =>
-  props.isRoundedFull ? "rounded-full" : "rounded"
+  props.isRoundedFull ? "rounded-full" : "rounded",
 );
 
 const iconSize = computed(() => ({
diff --git a/packages/@orchidui-vue/src/Form/Calendar/OcCalendar.vue b/packages/@orchidui-vue/src/Form/Calendar/OcCalendar.vue
index e29c15a40..c8c1538da 100644
--- a/packages/@orchidui-vue/src/Form/Calendar/OcCalendar.vue
+++ b/packages/@orchidui-vue/src/Form/Calendar/OcCalendar.vue
@@ -37,7 +37,7 @@ const emit = defineEmits(["update:modelValue"]);
 const selectedDate = ref(
   props.type === "range"
     ? props.modelValue?.[0] || new Date()
-    : props.modelValue || new Date()
+    : props.modelValue || new Date(),
 );
 
 const selectedStartDate = ref(selectedDate.value);
@@ -47,23 +47,23 @@ const selectedEndDate = ref(
     ? props.modelValue?.[1] ||
         new Date(
           new Date(selectedStartDate.value).setDate(
-            selectedStartDate.value.getDate() + 2
-          )
+            selectedStartDate.value.getDate() + 2,
+          ),
         )
-    : null
+    : null,
 );
 
 const selectedStartDay = ref(
   selectedStartDate.value?.getMonth() === selectedDate.value?.getMonth()
     ? selectedStartDate.value?.getDate()
-    : null
+    : null,
 );
 const selectedEndDay = ref(
   props.type === "range"
     ? selectedEndDate.value?.getMonth() === selectedDate.value?.getMonth()
       ? selectedEndDate.value?.getDate()
       : null
-    : null
+    : null,
 );
 
 const daysInMonth = computed(() => {
@@ -73,7 +73,7 @@ const daysInMonth = computed(() => {
   const lastDay = new Date(
     date?.getFullYear(),
     date?.getMonth() + 1,
-    0
+    0,
   ).getDate();
 
   return Array.from({ length: lastDay }, (_, i) => i + 1);
@@ -101,10 +101,10 @@ const selectDay = (day) => {
   if (
     props.type !== "range" ||
     Math.abs(
-      currentMonth.getTime() - new Date(selectedEndDate.value).getTime()
+      currentMonth.getTime() - new Date(selectedEndDate.value).getTime(),
     ) >
       Math.abs(
-        currentMonth.getTime() - new Date(selectedStartDate.value).getTime()
+        currentMonth.getTime() - new Date(selectedStartDate.value).getTime(),
       )
   ) {
     selectedStartDay.value = day;
@@ -141,7 +141,7 @@ const prevMonth = () => {
     selectedDate.value = new Date(
       selectedDate.value?.getFullYear(),
       selectedDate.value?.getMonth() - 1,
-      1
+      1,
     );
 
     selectedStartDay.value =
@@ -157,7 +157,7 @@ const prevMonth = () => {
       selectedStartDate.value = new Date(
         selectedStartDate.value?.getFullYear(),
         selectedStartDate.value?.getMonth() - 1,
-        1
+        1,
       );
       selectedStartDay.value = null;
     }
@@ -169,7 +169,7 @@ const nextMonth = () => {
     selectedDate.value = new Date(
       selectedDate.value?.getFullYear(),
       selectedDate.value?.getMonth() + 1,
-      1
+      1,
     );
     selectedStartDay.value =
       selectedDate.value?.getMonth() === selectedStartDate.value?.getMonth()
@@ -184,7 +184,7 @@ const nextMonth = () => {
       selectedStartDate.value = new Date(
         selectedStartDate.value?.getFullYear(),
         selectedStartDate.value?.getMonth() + 1,
-        1
+        1,
       );
       selectedStartDay.value = null;
     }
@@ -236,7 +236,7 @@ const doneSelecting = () => {
     "update:modelValue",
     props.type === "range"
       ? [selectedStartDate.value, selectedEndDate.value]
-      : new Date(selectedStartDate.value)
+      : new Date(selectedStartDate.value),
   );
 };
 </script>
diff --git a/packages/@orchidui-vue/src/Form/Checkbox/OcCheckbox.vue b/packages/@orchidui-vue/src/Form/Checkbox/OcCheckbox.vue
index 47a484152..ca566cd91 100644
--- a/packages/@orchidui-vue/src/Form/Checkbox/OcCheckbox.vue
+++ b/packages/@orchidui-vue/src/Form/Checkbox/OcCheckbox.vue
@@ -26,10 +26,10 @@ const onInput = () =>
               ? 'border-oc-primary-100 bg-oc-primary-100'
               : 'border-oc-primary bg-oc-primary'
             : isError
-            ? 'border-oc-error'
-            : isDisabled
-            ? 'bg-oc-primary-50 border-oc-primary-200'
-            : 'border-oc-primary-200',
+              ? 'border-oc-error'
+              : isDisabled
+                ? 'bg-oc-primary-50 border-oc-primary-200'
+                : 'border-oc-primary-200',
           isError && modelValue && !isDisabled ? '!bg-oc-error ' : '',
           isError && !isDisabled ? '!border-oc-error' : '',
           isPartial
diff --git a/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.stories.js b/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.stories.js
index b2f2d9ef4..cbb7257f3 100644
--- a/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.stories.js
+++ b/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.stories.js
@@ -41,7 +41,7 @@ export const Default = {
       const selectedCheckboxes = ref([]);
       watch(
         () => args.modelValue,
-        (val) => (selectedCheckboxes.value = val)
+        (val) => (selectedCheckboxes.value = val),
       );
       return { args, selectedCheckboxes };
     },
diff --git a/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.vue b/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.vue
index 84a48e57e..6fa8c3b47 100644
--- a/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.vue
+++ b/packages/@orchidui-vue/src/Form/CheckboxesGroup/OcCheckboxesGroup.vue
@@ -30,7 +30,7 @@ const toggleCheckbox = (value) => {
     "update:modelValue",
     isSelectedCheckbox(value)
       ? props.modelValue.filter((v) => v !== value)
-      : [...props.modelValue, value]
+      : [...props.modelValue, value],
   );
 };
 </script>
diff --git a/packages/@orchidui-vue/src/Form/ComplexDatePicker/OcComplexDatePicker.vue b/packages/@orchidui-vue/src/Form/ComplexDatePicker/OcComplexDatePicker.vue
index 9814c230f..774536162 100644
--- a/packages/@orchidui-vue/src/Form/ComplexDatePicker/OcComplexDatePicker.vue
+++ b/packages/@orchidui-vue/src/Form/ComplexDatePicker/OcComplexDatePicker.vue
@@ -42,7 +42,7 @@ const isOpen = ref(false);
   <Dropdown v-model="isOpen" position="bottom" class="w-full">
     <Input
       :model-value="`${dayjs(modelValue.start).format(formatDate)} - ${dayjs(
-        modelValue.end
+        modelValue.end,
       ).format(formatDate)}`"
       icon="calendar"
       readonly
diff --git a/packages/@orchidui-vue/src/Form/LinkInput/OcLinkInput.vue b/packages/@orchidui-vue/src/Form/LinkInput/OcLinkInput.vue
index e286f572a..7e486840e 100644
--- a/packages/@orchidui-vue/src/Form/LinkInput/OcLinkInput.vue
+++ b/packages/@orchidui-vue/src/Form/LinkInput/OcLinkInput.vue
@@ -21,7 +21,7 @@ defineEmits({
 const isDropdownOpened = ref(false);
 const selectedLink = ref(props.links?.[0]?.value || "");
 const selectedLinkProps = computed(() =>
-  props.links.find((link) => link.value === selectedLink.value)
+  props.links.find((link) => link.value === selectedLink.value),
 );
 </script>
 
diff --git a/packages/@orchidui-vue/src/Form/PhoneInput/OcPhoneInput.vue b/packages/@orchidui-vue/src/Form/PhoneInput/OcPhoneInput.vue
index f841aca98..1d3129cda 100644
--- a/packages/@orchidui-vue/src/Form/PhoneInput/OcPhoneInput.vue
+++ b/packages/@orchidui-vue/src/Form/PhoneInput/OcPhoneInput.vue
@@ -29,13 +29,13 @@ const query = ref("");
 const filteredCountryCodes = computed(() =>
   props.countryCodes
     .filter((country) =>
-      country.country.toLowerCase().includes(query.value.toLowerCase())
+      country.country.toLowerCase().includes(query.value.toLowerCase()),
     )
-    .sort((a, b) => a.country.localeCompare(b.country))
+    .sort((a, b) => a.country.localeCompare(b.country)),
 );
 const getCountryObject = (iso) =>
   props.countryCodes.find(
-    (country) => country.iso.toLowerCase() === iso.toLowerCase()
+    (country) => country.iso.toLowerCase() === iso.toLowerCase(),
   ) || null;
 
 const getCountryCode = (iso) => getCountryObject(iso)?.code || "";
diff --git a/packages/@orchidui-vue/src/Form/Select/OcSelect.vue b/packages/@orchidui-vue/src/Form/Select/OcSelect.vue
index e791b2fd3..f11f40821 100644
--- a/packages/@orchidui-vue/src/Form/Select/OcSelect.vue
+++ b/packages/@orchidui-vue/src/Form/Select/OcSelect.vue
@@ -34,7 +34,7 @@ const emit = defineEmits({
 });
 
 const localValue = ref(
-  props.modelValue ? props.modelValue : props.multiple ? [] : ""
+  props.modelValue ? props.modelValue : props.multiple ? [] : "",
 );
 
 const query = ref("");
@@ -45,7 +45,7 @@ const filterOptions = (options, query) => {
   for (const option of options) {
     if (option.values) {
       const filteredGroup = option.values.filter((subOption) =>
-        subOption.label.toLowerCase().includes(query.toLowerCase())
+        subOption.label.toLowerCase().includes(query.toLowerCase()),
       );
 
       if (filteredGroup.length > 0) {
@@ -64,7 +64,7 @@ const filterOptions = (options, query) => {
   return filteredOptions;
 };
 const filterableOptions = computed(() =>
-  filterOptions(props.options, query.value)
+  filterOptions(props.options, query.value),
 );
 const selectOption = (option) => {
   const result = props.multiple
diff --git a/packages/@orchidui-vue/src/Form/SingleFileUpload/ModalCropper.vue b/packages/@orchidui-vue/src/Form/SingleFileUpload/ModalCropper.vue
index 6f4c8cc86..a53807c4e 100644
--- a/packages/@orchidui-vue/src/Form/SingleFileUpload/ModalCropper.vue
+++ b/packages/@orchidui-vue/src/Form/SingleFileUpload/ModalCropper.vue
@@ -70,7 +70,9 @@ const zoom = (zoom) => cropper.value.zoom(zoom);
 
 <style lang="scss">
 .test {
-  background: url("./assets/empty-space.png"), lightgray 0 0% / 50px 50px repeat;
+  background:
+    url("./assets/empty-space.png"),
+    lightgray 0 0% / 50px 50px repeat;
 }
 
 .vue-simple-handler {
diff --git a/packages/@orchidui-vue/src/Form/SingleFileUpload/SingleFileUpload.vue b/packages/@orchidui-vue/src/Form/SingleFileUpload/SingleFileUpload.vue
index 83d3a0fe0..0f8c3e4de 100644
--- a/packages/@orchidui-vue/src/Form/SingleFileUpload/SingleFileUpload.vue
+++ b/packages/@orchidui-vue/src/Form/SingleFileUpload/SingleFileUpload.vue
@@ -34,7 +34,7 @@ const { currentFiles, onChangeFile, onDeleteFile } =
   useUploadFileProgress(emit);
 
 const videoUrl = computed(() =>
-  URL.createObjectURL(currentFiles.value?.[0].file)
+  URL.createObjectURL(currentFiles.value?.[0].file),
 );
 const currentFile = computed(() => currentFiles.value?.[0]);
 onMounted(() => {
diff --git a/packages/@orchidui-vue/src/Form/Slider/OcSlider.vue b/packages/@orchidui-vue/src/Form/Slider/OcSlider.vue
index 33aeb46bc..ce9a95667 100644
--- a/packages/@orchidui-vue/src/Form/Slider/OcSlider.vue
+++ b/packages/@orchidui-vue/src/Form/Slider/OcSlider.vue
@@ -74,7 +74,7 @@ const fillColor = () => {
     "update:modelValue",
     props.type === "range"
       ? [sliderOne.value?.value, sliderTwo.value?.value]
-      : sliderOne.value.value
+      : sliderOne.value.value,
   );
 };
 const updateSlider = (value) => {
diff --git a/packages/@orchidui-vue/src/Form/TextEditor/QuillEditor.js b/packages/@orchidui-vue/src/Form/TextEditor/QuillEditor.js
index aaee9930b..6fe58a1f9 100644
--- a/packages/@orchidui-vue/src/Form/TextEditor/QuillEditor.js
+++ b/packages/@orchidui-vue/src/Form/TextEditor/QuillEditor.js
@@ -48,7 +48,7 @@ export const QuillEditor = defineComponent({
       required: false,
       validator: (value) => {
         if (typeof value === "string" && value !== "") {
-          return value.charAt(0) === "#"
+          return value.charAt(0) === "#";
         }
         return true;
       },
@@ -139,7 +139,7 @@ export const QuillEditor = defineComponent({
       if (props.id && props.id !== "") {
         clientOptions.modules = {
           toolbar: (() => {
-            return props.id
+            return props.id;
           })(),
         };
       }
diff --git a/packages/@orchidui-vue/src/Form/TextEditor/snow.css b/packages/@orchidui-vue/src/Form/TextEditor/snow.css
index 41f681478..d35d32877 100644
--- a/packages/@orchidui-vue/src/Form/TextEditor/snow.css
+++ b/packages/@orchidui-vue/src/Form/TextEditor/snow.css
@@ -353,10 +353,16 @@
   color: #93f;
 }
 .ql-editor .ql-font-serif {
-  font-family: Georgia, Times New Roman, serif;
+  font-family:
+    Georgia,
+    Times New Roman,
+    serif;
 }
 .ql-editor .ql-font-monospace {
-  font-family: Monaco, Courier New, monospace;
+  font-family:
+    Monaco,
+    Courier New,
+    monospace;
 }
 .ql-editor .ql-size-small {
   font-size: 0.75em;
@@ -786,10 +792,16 @@
   content: "Monospace";
 }
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
-  font-family: Georgia, Times New Roman, serif;
+  font-family:
+    Georgia,
+    Times New Roman,
+    serif;
 }
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
-  font-family: Monaco, Courier New, monospace;
+  font-family:
+    Monaco,
+    Courier New,
+    monospace;
 }
 .ql-snow .ql-picker.ql-size {
   width: 98px;
diff --git a/packages/@orchidui-vue/src/Form/TimePicker/OcTimePicker.vue b/packages/@orchidui-vue/src/Form/TimePicker/OcTimePicker.vue
index 82ca997db..e02738db1 100644
--- a/packages/@orchidui-vue/src/Form/TimePicker/OcTimePicker.vue
+++ b/packages/@orchidui-vue/src/Form/TimePicker/OcTimePicker.vue
@@ -3,8 +3,8 @@ import { Input, Dropdown } from "@/orchidui";
 import { defineAsyncComponent, ref } from "vue";
 import dayjs from "dayjs";
 
-const TimePopup = defineAsyncComponent(() =>
-  import("@/orchidui/Form/TimePicker/OcTimePopup.vue")
+const TimePopup = defineAsyncComponent(
+  () => import("@/orchidui/Form/TimePicker/OcTimePopup.vue"),
 );
 const time = ref();
 const popup = ref();
diff --git a/packages/@orchidui-vue/src/Form/TimePicker/OcTimePopup.vue b/packages/@orchidui-vue/src/Form/TimePicker/OcTimePopup.vue
index d8569e9bd..6fea88e15 100644
--- a/packages/@orchidui-vue/src/Form/TimePicker/OcTimePopup.vue
+++ b/packages/@orchidui-vue/src/Form/TimePicker/OcTimePopup.vue
@@ -13,7 +13,7 @@ const emit = defineEmits(["update:modelValue"]);
 const hour = ref(
   props.modelValue.getHours() <= 12
     ? props.modelValue.getHours()
-    : props.modelValue.getHours() - 12
+    : props.modelValue.getHours() - 12,
 );
 const minutes = ref(props.modelValue.getMinutes());
 const period = ref(props.modelValue.getHours() >= 12 ? "PM" : "AM");
@@ -36,13 +36,13 @@ const scrollIntoActiveDate = () => {
   };
 
   const activeHourElement = hourList.value.querySelector(
-    `.w-7:nth-child(${hour.value})`
+    `.w-7:nth-child(${hour.value})`,
   );
   const activeMinuteElement = minutesList.value.querySelector(
-    `.w-7:nth-child(${minutes.value})`
+    `.w-7:nth-child(${minutes.value})`,
   );
   const activePeriodElement = periodList.value.querySelector(
-    `.w-7:nth-child(${period.value === "AM" ? 1 : 2})`
+    `.w-7:nth-child(${period.value === "AM" ? 1 : 2})`,
   );
 
   scrollToCenter(hourList.value, activeHourElement);
@@ -60,12 +60,12 @@ const scrollIntoActiveDate = () => {
           ? 0
           : hour.value
         : hour.value === 12
-        ? 12
-        : hour.value + 12,
+          ? 12
+          : hour.value + 12,
       minutes.value - 1,
       59,
-      0
-    )
+      0,
+    ),
   );
 };
 
@@ -94,7 +94,7 @@ const scrollToNearestHour = () => {
   hours.forEach((h, i) => {
     if (
       Math.abs(
-        h.getBoundingClientRect().top - box.getBoundingClientRect().top
+        h.getBoundingClientRect().top - box.getBoundingClientRect().top,
       ) < 12
     ) {
       hour.value = i + 1;
@@ -108,7 +108,7 @@ const scrollToNearestMinute = () => {
   minutesArray.forEach((m, i) => {
     if (
       Math.abs(
-        m.getBoundingClientRect().top - box.getBoundingClientRect().top
+        m.getBoundingClientRect().top - box.getBoundingClientRect().top,
       ) < 12
     ) {
       minutes.value = i + 1;
@@ -122,7 +122,7 @@ const scrollToNearestPeriod = () => {
   periods.forEach((p, i) => {
     if (
       Math.abs(
-        p.getBoundingClientRect().top - box.getBoundingClientRect().top
+        p.getBoundingClientRect().top - box.getBoundingClientRect().top,
       ) < 12
     ) {
       period.value = i === 0 ? "AM" : "PM";
diff --git a/packages/@orchidui-vue/src/Overlay/Popper/OcPopper.vue b/packages/@orchidui-vue/src/Overlay/Popper/OcPopper.vue
index 69819b204..835fb0065 100644
--- a/packages/@orchidui-vue/src/Overlay/Popper/OcPopper.vue
+++ b/packages/@orchidui-vue/src/Overlay/Popper/OcPopper.vue
@@ -54,7 +54,7 @@ onMounted(() => {
   popperInstance.value = createPopper(
     reference.value,
     popper.value,
-    getPopperOptions()
+    getPopperOptions(),
   );
 
   // Need add setTimeout because placement is not updated immediately from props when component is mounted
@@ -67,7 +67,7 @@ watch(
     popperInstance.value.setOptions(getPopperOptions());
     popperInstance.value.update();
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
 
diff --git a/packages/@orchidui-vue/src/Overlay/Tooltip/OcTooltip.vue b/packages/@orchidui-vue/src/Overlay/Tooltip/OcTooltip.vue
index f8d7ee265..c3c52de8b 100644
--- a/packages/@orchidui-vue/src/Overlay/Tooltip/OcTooltip.vue
+++ b/packages/@orchidui-vue/src/Overlay/Tooltip/OcTooltip.vue
@@ -74,7 +74,7 @@ onMounted(() => {
     });
   } else {
     triggerEl.value.addEventListener("click", () =>
-      isShow.value ? hide() : show()
+      isShow.value ? hide() : show(),
     );
   }
 });
@@ -109,7 +109,8 @@ const onClickOutside = () => {
 
 <style scoped lang="scss">
 .oc-tooltip {
-  box-shadow: 0 3px 22px 0 rgba(38, 42, 50, 0.09),
+  box-shadow:
+    0 3px 22px 0 rgba(38, 42, 50, 0.09),
     0 1px 3px 0 rgba(0, 0, 0, 0.1);
   @apply rounded-sm z-[1006];
 
diff --git a/packages/@orchidui-vue/src/Theme/OcTheme.vue b/packages/@orchidui-vue/src/Theme/OcTheme.vue
index a56c77ac4..e5fdee4fb 100644
--- a/packages/@orchidui-vue/src/Theme/OcTheme.vue
+++ b/packages/@orchidui-vue/src/Theme/OcTheme.vue
@@ -15,7 +15,7 @@ watch(
       document.querySelector("body").setAttribute("class", "light");
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 
diff --git a/packages/@orchidui-vue/src/composables/uploadFileProgress.js b/packages/@orchidui-vue/src/composables/uploadFileProgress.js
index 1c8068e7a..8d5de0711 100644
--- a/packages/@orchidui-vue/src/composables/uploadFileProgress.js
+++ b/packages/@orchidui-vue/src/composables/uploadFileProgress.js
@@ -41,7 +41,7 @@ export const useUploadFileProgress = (emit) => {
     const progressFile = () => {
       currentFiles.value[index].progress =
         Number(
-          (event.loaded / currentFiles.value[index].totalSize).toFixed(2)
+          (event.loaded / currentFiles.value[index].totalSize).toFixed(2),
         ) * 100;
     };
 
@@ -56,14 +56,14 @@ export const useUploadFileProgress = (emit) => {
 
   const addListeners = (reader, index) => {
     reader.addEventListener("loadstart", (e) =>
-      handleEventFile(e, reader, index)
+      handleEventFile(e, reader, index),
     );
     reader.addEventListener("load", (e) => handleEventFile(e, reader, index));
     reader.addEventListener("loadend", (e) =>
-      handleEventFile(e, reader, index)
+      handleEventFile(e, reader, index),
     );
     reader.addEventListener("progress", (e) =>
-      handleEventFile(e, reader, index)
+      handleEventFile(e, reader, index),
     );
     reader.addEventListener("error", (e) => handleEventFile(e, reader, index));
     reader.addEventListener("abort", (e) => handleEventFile(e, reader, index));