@globalbrain/sefirot 3.50.0 → 4.0.0-0

package/lib/components/SInputCheckbox.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import IconCheck from '@iconify-icons/ph/check-bold'
-import IconMinus from '@iconify-icons/ph/minus-bold'
-import { computed } from 'vue'
-import { type Validatable } from '../composables/V'
-import SIcon from './SIcon.vue'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
+import IconCheck from '~icons/ph/check-bold'
+import IconMinus from '~icons/ph/minus-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -16,7 +14,7 @@ const props = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   text?: string
@@ -81,10 +79,8 @@ function onClick() {
       >
         <div class="box">
           <div class="check">
-            <SIcon
-              :icon="isIndeterminate ? IconMinus : IconCheck"
-              class="check-icon"
-            />
+            <IconMinus v-if="isIndeterminate" class="check-icon" />
+            <IconCheck v-else class="check-icon" />
           </div>
         </div>
 

package/lib/components/SInputCheckboxes.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
@@ -23,7 +22,7 @@ const props = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   options: Option[]

package/lib/components/SInputDate.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
-import { computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
@@ -16,7 +15,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   block?: boolean

package/lib/components/SInputDropdown.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
-import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import xor from 'lodash-es/xor'
-import { type DefineComponent, computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { type Validatable } from '../composables/V'
-import { isArray } from '../support/Utils'
+import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
-import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
+import IconCaretDown from '~icons/ph/caret-down-bold'
+import IconCaretUp from '~icons/ph/caret-up-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -46,7 +43,7 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   options: Option[]
@@ -82,7 +79,7 @@ const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
 }])
 
 const selected = computed(() => {
-  if (isArray(props.modelValue)) {
+  if (Array.isArray(props.modelValue)) {
     return props.options.filter((o) => (props.modelValue as ArrayValue).includes(o.value))
   }
 
@@ -96,7 +93,7 @@ const hasSelected = computed(() => {
 })
 
 const removable = computed(() => {
-  if (isArray(props.modelValue)) {
+  if (Array.isArray(props.modelValue)) {
     return props.nullable || selected.value.length > 1
   }
 
@@ -113,7 +110,7 @@ async function handleOpen() {
 function handleSelect(value: OptionValue) {
   props.validation?.$touch()
 
-  isArray(props.modelValue) ? handleArray(value) : handlePrimitive(value)
+  Array.isArray(props.modelValue) ? handleArray(value) : handlePrimitive(value)
 }
 
 function handlePrimitive(value: OptionValue) {
@@ -174,8 +171,8 @@ function handleArray(value: OptionValue) {
         </div>
 
         <div class="box-icon">
-          <SIcon :icon="IconCaretUp" class="box-icon-svg up" />
-          <SIcon :icon="IconCaretDown" class="box-icon-svg down" />
+          <IconCaretUp class="box-icon-svg up" />
+          <IconCaretDown class="box-icon-svg down" />
         </div>
       </div>
 

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
 import SAvatar from './SAvatar.vue'
-import SIcon from './SIcon.vue'
+import IconX from '~icons/ph/x-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 
@@ -36,7 +35,7 @@ const avatarSizeDict = {
 
     <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
       <div class="remove-box">
-        <SIcon :icon="IconX" class="remove-icon" />
+        <IconX class="remove-icon" />
       </div>
     </div>
   </div>

package/lib/components/SInputDropdownItemText.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
-import SIcon from './SIcon.vue'
+import IconX from '~icons/ph/x-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 
@@ -23,7 +22,7 @@ defineEmits<{
 
     <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
       <div class="remove-box">
-        <SIcon :icon="IconX" class="remove-icon" />
+        <IconX class="remove-icon" />
       </div>
     </div>
   </div>

package/lib/components/SInputFile.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -17,7 +16,7 @@ const props = defineProps<{
   placeholder?: string
   accept?: string
   multiple?: boolean
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   value?: File | File[] | null

package/lib/components/SInputHMS.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -28,7 +27,7 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: Placeholder
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   noHour?: boolean
@@ -97,7 +96,7 @@ function updateSecond(e: FocusEvent): void {
 }
 
 function update(type: ValueType, value: string | null) {
-  if (_value.value === null) {
+  if (_value.value == null) {
     return
   }
 

package/lib/components/SInputImage.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import IconImage from '@iconify-icons/ph/image-bold'
-import { computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
-import { type Validatable } from '../composables/V'
+import { type Validatable } from '../composables/Validation'
 import SButton from './SButton.vue'
-import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
+import IconImage from '~icons/ph/image-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -18,7 +16,7 @@ const props = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   imageType?: ImageType
@@ -108,7 +106,7 @@ function onFileDelete() {
           </div>
           <div v-else class="image-empty">
             <div class="image-empty-inner">
-              <SIcon class="image-empty-icon" :icon="IconImage" />
+              <IconImage class="image-empty-icon" />
             </div>
           </div>
         </div>

package/lib/components/SInputNumber.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/V'
-import { isNullish, isString } from '../support/Utils'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
+import { isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -20,7 +19,7 @@ const props = defineProps<{
   placeholder?: string
   unitBefore?: any
   unitAfter?: any
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   textColor?: TextColor | ((value: number | null) => TextColor)
@@ -58,27 +57,27 @@ const _textColor = computed(() => {
 })
 
 const valueWithSeparator = computed(() => {
-  if (isNullish(_value.value)) {
+  if (_value.value == null) {
     return null
   }
 
-  return _value.value >= 100000000000000000000
+  return _value.value >= Number.MAX_SAFE_INTEGER
     ? 'The number is too big'
     : _value.value.toLocaleString('en-US', { maximumSignificantDigits: 20 })
 })
 
 const displayValue = computed(() => {
-  if (!isNullish(props.displayValue)) {
+  if (props.displayValue != null) {
     return props.displayValue
   }
 
-  return (!props.separator || valueWithSeparator.value === null)
+  return (!props.separator || valueWithSeparator.value == null)
     ? null
     : valueWithSeparator.value
 })
 
 function emitUpdate(value: string | null) {
-  const v = isNullish(value) ? null : Number(value)
+  const v = value == null ? null : Number(value)
   emit('update:model-value', v)
   emit('input', v)
 }
@@ -105,7 +104,7 @@ function emitUpdate(value: string | null) {
     :disabled="disabled"
     :hide-error="hideError"
     :display-value="displayValue"
-    :model-value="_value === null ? null : String(_value)"
+    :model-value="_value == null ? null : String(_value)"
     :validation="validation"
     @update:model-value="emitUpdate"
     @input="emitUpdate"

package/lib/components/SInputRadio.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -14,7 +13,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   text?: string

package/lib/components/SInputRadios.vue

@@ -6,9 +6,8 @@
     Nullable extends boolean = false
   "
 >
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
@@ -32,7 +31,7 @@ const props = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   options: Option<ValueType>[]

package/lib/components/SInputSegments.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 
@@ -23,7 +22,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   options: Option<T>[]

package/lib/components/SInputSelect.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
-import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
-import SIcon from './SIcon.vue'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
+import IconCaretDown from '~icons/ph/caret-down-bold'
+import IconCaretUp from '~icons/ph/caret-up-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -24,7 +22,7 @@ const props = withDefaults(defineProps<{
   note?: string
   help?: string
   placeholder?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   options: Option[]
@@ -124,8 +122,8 @@ function emitChange(e: any): void {
       </select>
 
       <div class="icon" role="button">
-        <SIcon :icon="IconCaretUp" class="icon-svg up" />
-        <SIcon :icon="IconCaretDown" class="icon-svg down" />
+        <IconCaretUp class="icon-svg up" />
+        <IconCaretDown class="icon-svg down" />
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>

package/lib/components/SInputSwitch.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -17,7 +16,7 @@ const props = withDefaults(defineProps<{
   text?: string
   color?: ActiveColor
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   disabled?: boolean

package/lib/components/SInputSwitches.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
@@ -20,7 +19,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   options: Option[]

package/lib/components/SInputText.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import { isString } from '../support/Utils'
-import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 export interface Props {
@@ -15,9 +13,9 @@ export interface Props {
   help?: string
   type?: string
   placeholder?: string
-  unitBefore?: any
-  unitAfter?: any
-  checkIcon?: IconifyIcon | DefineComponent
+  unitBefore?: Component | string
+  unitAfter?: Component | string
+  checkIcon?: Component
   checkText?: string
   checkColor?: CheckColor
   textColor?: TextColor | ((value: string | null) => TextColor)
@@ -137,7 +135,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
       <div class="value">
         <div v-if="unitBefore" class="unit before">
           <span v-if="isString(unitBefore)" class="unit-text">{{ unitBefore }}</span>
-          <SIcon v-else class="unit-icon" :icon="unitBefore" />
+          <component v-else :is="unitBefore" class="unit-icon" />
         </div>
 
         <div class="area">
@@ -162,7 +160,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
         <div v-if="unitAfter" class="unit after">
           <span v-if="isString(unitAfter)" class="unit-text">{{ unitAfter }}</span>
-          <SIcon v-else class="unit-icon" :icon="unitAfter" />
+          <component v-else :is="unitAfter" class="unit-icon" />
         </div>
       </div>
 

package/lib/components/SInputTextarea.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSegments from './SInputSegments.vue'
 
@@ -15,7 +14,7 @@ const props = withDefaults(defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   placeholder?: string

package/lib/components/SInputYMD.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/V'
+import { type Component, computed, ref } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -28,7 +27,7 @@ const props = defineProps<{
   note?: string
   help?: string
   placeholder?: Placeholder
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   noYear?: boolean
@@ -98,7 +97,7 @@ function updateDate(e: FocusEvent) {
 }
 
 function update(type: ValueType, value: string) {
-  if (_value.value === null) {
+  if (_value.value == null) {
     return
   }
 

package/lib/components/SLink.vue

@@ -15,7 +15,7 @@ const isExternal = computed(() => {
     return false
   }
 
-  if (props.external !== null) {
+  if (props.external != null) {
     return props.external
   }
 

package/lib/components/SLocalNavMenu.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import SIcon from './SIcon.vue'
+import { type Component } from 'vue'
 import SLink from './SLink.vue'
 
 export interface MenuItem {
-  icon?: IconifyIcon
+  icon?: Component
   text: string
   link: string
   active?: boolean
@@ -20,7 +19,7 @@ defineProps<{
     <div v-for="nav, index in menu" :key="index" class="group">
       <div v-for="item in nav" :key="item.text" class="item">
         <SLink class="link" :class="{ active: item.active }" :href="item.link">
-          <SIcon v-if="item.icon" class="icon-svg" :icon="item.icon" />
+          <component v-if="item.icon" :is="item.icon" class="icon-svg" />
           <span class="text">{{ item.text }}</span>
         </SLink>
       </div>

package/lib/components/SLoginPage.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import LockKey from '@iconify-icons/ph/lock-key-fill'
-import IconGoogle from '@iconify-icons/ri/google-fill'
 import { computed, ref } from 'vue'
 import { usePower } from '../composables/Power'
 import SButton from './SButton.vue'
@@ -8,6 +6,8 @@ import SLink from './SLink.vue'
 import SLoginPagePasswordDialog from './SLoginPagePasswordDialog.vue'
 import SModal from './SModal.vue'
 import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
+import IconLockKey from '~icons/ph/lock-key-fill'
+import IconGoogle from '~icons/ri/google-fill'
 
 export interface CoverTitle {
   text: string
@@ -60,7 +60,7 @@ function getActionLabel(type: ActionType) {
 function getIconComponent(type: ActionType) {
   switch (type) {
     case 'password':
-      return LockKey
+      return IconLockKey
     case 'google':
       return IconGoogle
   }

package/lib/components/SLoginPagePasswordDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useD } from '../composables/D'
-import { useV } from '../composables/V'
+import { useData } from '../composables/Data'
+import { useValidation } from '../composables/Validation'
 import { email, maxLength, required } from '../validation/rules'
 import SAlert from './SAlert.vue'
 import SCard from './SCard.vue'
@@ -22,12 +22,12 @@ const emit = defineEmits<{
   submit: [email: string, password: string]
 }>()
 
-const { data } = useD({
+const { data } = useData({
   email: null as string | null,
   password: null as string | null
 })
 
-const { validation, validateAndNotify } = useV(data, {
+const { validation, validateAndNotify } = useValidation(data, {
   email: {
     required: required(),
     maxLength: maxLength(255),

package/lib/components/SPagination.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
-import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { useTrans } from '../composables/Lang'
 import { format } from '../support/Num'
 import SButton from './SButton.vue'
+import IconCaretLeft from '~icons/ph/caret-left-bold'
+import IconCaretRight from '~icons/ph/caret-right-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'