sard-uniapp 1.17.1 → 1.19.0

package/components/datetime-picker/datetime-picker.vue

@@ -11,7 +11,14 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, formatDate, stringifyStyle, toDate } from "../../utils";
+import {
+  classNames,
+  formatDate,
+  lunarToSolar,
+  solarToLunar,
+  stringifyStyle,
+  toDate
+} from "../../utils";
 import SarPicker from "../picker/picker.vue";
 import {
   correctDate,
@@ -39,6 +46,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     modelValue: { type: [Date, String], required: false },
@@ -53,14 +61,20 @@ export default  _defineComponent({
     const emit = __emit;
     const { t } = useTranslate("datetimePicker");
     const createColumnData = (types, currentDate) => {
-      minValues = getBoundaryValue(false, minDate.value, currentDate);
-      maxValues = getBoundaryValue(true, maxDate.value, currentDate);
+      minValues = getBoundaryValue(
+        props.calendar,
+        false,
+        minDate.value,
+        currentDate
+      );
+      maxValues = getBoundaryValue(props.calendar, true, maxDate.value, currentDate);
       const getColumnDataByType = (letter) => {
         const strategy = strategies[letter];
         const index = strategy[0];
         return getColumnData(
-          maxValues[index] - minValues[index] + 1,
+          props.calendar,
           minValues[index],
+          maxValues[index],
           strategy[1],
           letter,
           currentDate,
@@ -74,14 +88,24 @@ export default  _defineComponent({
       );
     };
     const getChangedLetter = (currentDate) => {
-      const min = getBoundaryValue(false, minDate.value, currentDate);
-      const max = getBoundaryValue(true, maxDate.value, currentDate);
+      const min = getBoundaryValue(
+        props.calendar,
+        false,
+        minDate.value,
+        currentDate
+      );
+      const max = getBoundaryValue(props.calendar, true, maxDate.value, currentDate);
       return letterArray.filter(
         (_, i) => min[i] !== minValues[i] || max[i] !== maxValues[i]
       );
     };
+    let lunarYearChanged = false;
     const updateColumns = (currentDate) => {
       const changedLetter = getChangedLetter(currentDate);
+      if (props.calendar === "lunar" && !changedLetter.includes("M") && innerType.value.includes("M") && lunarYearChanged) {
+        changedLetter.push("M");
+        lunarYearChanged = false;
+      }
       if (changedLetter.length) {
         const changedColumns = createColumnData(changedLetter, currentDate);
         const nextColumns = innerType.value.map((letter) => {
@@ -96,18 +120,66 @@ export default  _defineComponent({
       }
     };
     const getDateByPickerValue = (value) => {
-      const currEvery = letterArray.map((letter) => {
-        const stratery = strategies[letter];
-        for (let i = 0, l = innerType.value.length; i < l; i++) {
-          if (innerType.value[i] === letter) {
-            return value[i];
+      let currEvery;
+      if (props.calendar === "solar") {
+        currEvery = letterArray.map((letter) => {
+          const stratery = strategies[letter];
+          for (let i = 0, l = innerType.value.length; i < l; i++) {
+            if (innerType.value[i] === letter) {
+              return value[i];
+            }
           }
+          return stratery[4](innerValue.value);
+        });
+      } else {
+        const lunarDate = solarToLunar(
+          innerValue.value.getFullYear(),
+          innerValue.value.getMonth() + 1,
+          innerValue.value.getDate()
+        );
+        const yearIndex = innerType.value.indexOf("y");
+        if (yearIndex !== -1) {
+          lunarYearChanged = lunarDate.year !== value[yearIndex];
         }
-        return stratery[4](innerValue.value);
-      });
-      correctDate(currEvery, minDate.value, maxDate.value);
-      currEvery[1]--;
-      const date = new Date(...currEvery);
+        currEvery = letterArray.map((letter) => {
+          for (let i = 0, l = innerType.value.length; i < l; i++) {
+            if (innerType.value[i] === letter) {
+              return value[i];
+            }
+          }
+          switch (letter) {
+            case "y":
+              return lunarDate.year;
+            case "M":
+              return lunarDate.month;
+            case "d":
+              return lunarDate.day;
+            default:
+              return strategies[letter][4](innerValue.value);
+          }
+        });
+      }
+      correctDate(
+        props.calendar,
+        currEvery,
+        minDate.value,
+        maxDate.value
+      );
+      let date;
+      if (props.calendar === "solar") {
+        currEvery[1]--;
+        date = new Date(...currEvery);
+      } else {
+        const solarDate = lunarToSolar(currEvery[0], currEvery[1], currEvery[2]);
+        date = new Date(
+          solarDate.year,
+          solarDate.month - 1,
+          solarDate.day,
+          currEvery[3],
+          currEvery[4],
+          currEvery[5]
+        );
+      }
       return date;
     };
     const normalizeValue = (value) => {
@@ -153,9 +225,29 @@ export default  _defineComponent({
       }
     });
     const pickerValue = computed(() => {
-      return innerType.value.map((letter) => {
-        return strategies[letter][4](innerValue.value);
-      });
+      if (props.calendar === "solar") {
+        return innerType.value.map((letter) => {
+          return strategies[letter][4](innerValue.value);
+        });
+      } else {
+        const lunarDate = solarToLunar(
+          innerValue.value.getFullYear(),
+          innerValue.value.getMonth() + 1,
+          innerValue.value.getDate()
+        );
+        return innerType.value.map((letter) => {
+          switch (letter) {
+            case "y":
+              return lunarDate.year;
+            case "M":
+              return lunarDate.month;
+            case "d":
+              return lunarDate.day;
+            default:
+              return strategies[letter][4](innerValue.value);
+          }
+        });
+      }
     });
     const columnsMap = {};
     let minValues = [];
@@ -168,7 +260,11 @@ export default  _defineComponent({
       updateColumns(nextValue);
       emitChange();
     };
-    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
+    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, get lunarYearChanged() {
+      return lunarYearChanged;
+    }, set lunarYearChanged(v) {
+      lunarYearChanged = v;
+    }, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
       return currentEmitValue;
     }, set currentEmitValue(v) {
       currentEmitValue = v;

package/components/datetime-picker-input/common.d.ts

@@ -6,6 +6,7 @@ export interface DatetimePickerInputProps extends DatetimePickerPopoutProps, Omi
 export declare const defaultDatetimePickerInputProps: () => {
     validateEvent: boolean;
     type: string;
+    calendar: "solar";
 };
 export interface DatetimePickerInputSlots extends DatetimePickerPopoutSlots {
 }

package/components/datetime-picker-input/datetime-picker-input.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_component: import("vue").DefineComponent<DatetimePickerInput
 }>, {
     type: string;
     validateEvent: boolean;
+    calendar: "solar" | "lunar";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/datetime-picker-input/datetime-picker-input.vue

@@ -24,6 +24,7 @@
       :formatter="formatter"
       :value-format="valueFormat"
       :validate-event="validateEvent"
+      :calendar="calendar"
       @change="onChange"
     />
   </sar-popout-input>
@@ -62,6 +63,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     modelValue: { type: [Date, String], required: false },

package/components/datetime-picker-popout/common.d.ts

@@ -10,6 +10,7 @@ export interface DatetimePickerPopoutProps extends DatetimePickerProps {
 export declare const defaultDatetimePickerPopoutProps: () => {
     validateEvent: boolean;
     type: string;
+    calendar: "solar";
 };
 export interface DatetimePickerPopoutSlots extends DatetimePickerSlots {
 }

package/components/datetime-picker-popout/datetime-picker-popout.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_component: import("vue").DefineComponent<DatetimePickerPopou
 }>, {
     type: string;
     validateEvent: boolean;
+    calendar: "solar" | "lunar";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/datetime-picker-popout/datetime-picker-popout.vue

@@ -18,6 +18,7 @@
         :filter="filter"
         :formatter="formatter"
         :value-format="valueFormat"
+        :calendar="calendar"
         @change="onChange"
       />
     </template>
@@ -60,6 +61,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     modelValue: { type: [Date, String], required: false },

package/components/datetime-range-picker/datetime-range-picker.vue

@@ -69,6 +69,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     filter: { type: Function, required: false },

package/components/datetime-range-picker-input/datetime-range-picker-input.vue

@@ -66,6 +66,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     filter: { type: Function, required: false },

package/components/datetime-range-picker-popout/datetime-range-picker-popout.vue

@@ -63,6 +63,7 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
+    calendar: { type: String, required: false },
     min: { type: [Date, String], required: false },
     max: { type: [Date, String], required: false },
     filter: { type: Function, required: false },

package/components/dialog-agent/common.d.ts

@@ -1,6 +1,9 @@
 import { type DialogProps } from '../dialog/common';
 export interface DialogAgentProps extends DialogProps {
     id?: string;
+    onClose?: () => void;
+    onCancel?: () => void;
+    onConfirm?: () => void;
 }
 export declare const defaultDialogAgentProps: () => {
     id: string;

package/components/dialog-agent/dialog-agent.vue

@@ -1,5 +1,11 @@
 <template>
-  <sar-dialog v-bind="innerProps" v-model:visible="innerProps.visible" />
+  <sar-dialog
+    v-bind="innerProps"
+    v-model:visible="innerProps.visible"
+    @confirm="innerProps.onConfirm"
+    @close="innerProps.onClose"
+    @cancel="innerProps.onCancel"
+  />
 </template>
 
 <script>
@@ -24,6 +30,9 @@ export default  _defineComponent({
   __name: "dialog-agent",
   props:  _mergeDefaults({
     id: { type: String, required: false },
+    onClose: { type: Function, required: false },
+    onCancel: { type: Function, required: false },
+    onConfirm: { type: Function, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     popupStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },

package/components/dropdown/common.d.ts

@@ -1,4 +1,5 @@
 import { type StyleValue, type Ref } from 'vue';
+import { type TransitionHookEmits } from '../popup/common';
 export interface DropdownProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -22,6 +23,8 @@ export interface DropdownOption {
     label?: string;
     value?: any;
 }
+export type DropdownCloseType = 'overlay' | 'away' | 'other-button' | 'option' | 'button';
+export type DropdownBeforeClose = (type: DropdownCloseType) => any | Promise<any>;
 export interface DropdownItemProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -33,6 +36,7 @@ export interface DropdownItemProps {
     visible?: boolean;
     separator?: string;
     placeholder?: string;
+    beforeClose?: DropdownBeforeClose;
 }
 export declare const defaultDropdownItemProps: {
     options: () => never[];
@@ -40,7 +44,7 @@ export declare const defaultDropdownItemProps: {
 export interface DropdownItemSlots {
     default?(props: Record<string, never>): any;
 }
-export interface DropdownItemEmits {
+export interface DropdownItemEmits extends TransitionHookEmits {
     (e: 'update:model-value', value: any): void;
     (e: 'change', value: any): void;
     (e: 'update:visible', visible: boolean): void;

package/components/dropdown/index.d.ts

@@ -1 +1 @@
-export type { DropdownProps, DropdownSlots, DropdownItemProps, DropdownItemSlots, DropdownItemEmits, } from './common';
+export type { DropdownProps, DropdownSlots, DropdownItemProps, DropdownItemSlots, DropdownItemEmits, DropdownCloseType, DropdownBeforeClose, } from './common';

package/components/dropdown-item/dropdown-item.d.ts

@@ -1,13 +1,11 @@
 import { type DropdownItemProps, type DropdownItemSlots, type DropdownOption } from '../dropdown/common';
 declare function __VLS_template(): Readonly<DropdownItemSlots> & DropdownItemSlots;
-declare const __VLS_component: import("vue").DefineComponent<DropdownItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: any) => any;
-    change: (value: any) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<DropdownItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<DropdownItemProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: any) => any) | undefined;
-    onChange?: ((value: any) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     options: DropdownOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/components/dropdown-item/dropdown-item.vue

@@ -47,17 +47,17 @@
       <slot>
         <sar-list inlaid>
           <sar-list-item
-            v-for="(item, i) in options"
+            v-for="(option, i) in options"
             :key="i"
-            :title="item.label"
+            :title="option.label"
             hover
             :root-class="
               classNames(
                 bem.e('option'),
-                bem.em('option', 'active', item.value === innerValue),
+                bem.em('option', 'active', option.value === innerValue),
               )
             "
-            @click="onOptionClick(item)"
+            @click="onOptionClick(option)"
           >
             <template #arrow>
               <view :class="bem.e('option-icon')">
@@ -91,7 +91,10 @@ import {
   uniqid,
   getBoundingClientRect,
   getWindowInfo,
-  isNullish
+  isNullish,
+  isFunction,
+  isObject,
+  noop
 } from "../../utils";
 import SarList from "../list/list.vue";
 import SarListItem from "../list-item/list-item.vue";
@@ -126,9 +129,10 @@ export default  _defineComponent({
     modelValue: { type: null, required: false },
     visible: { type: Boolean, required: false },
     separator: { type: String, required: false },
-    placeholder: { type: String, required: false }
+    placeholder: { type: String, required: false },
+    beforeClose: { type: Function, required: false }
   }, defaultDropdownItemProps),
-  emits: ["update:model-value", "change", "update:visible"],
+  emits: ["update:model-value", "change", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -206,34 +210,55 @@ export default  _defineComponent({
         emit("update:visible", visible);
       }
     };
+    let isClosing = false;
+    const perhapsClose = (type) => {
+      if (isClosing) {
+        return;
+      }
+      if (isFunction(props.beforeClose)) {
+        const result = props.beforeClose(type);
+        if (isObject(result) && isFunction(result.then)) {
+          isClosing = true;
+          return result.then(() => {
+            setInnerVisible(false);
+          }).catch(noop);
+        } else if (result === false) {
+          return;
+        }
+      }
+      setInnerVisible(false);
+    };
     const onItemClick = () => {
       if (!context.disabled && !props.disabled) {
-        setInnerVisible(!innerVisible.value);
+        if (innerVisible.value) {
+          perhapsClose("button");
+        } else {
+          setInnerVisible(true);
+        }
       }
     };
-    const onOptionClick = (item) => {
-      if (item.value !== innerValue.value) {
-        innerValue.value = item.value;
-        emit("update:model-value", item.value);
-        emit("change", item.value);
+    const onOptionClick = (option) => {
+      if (option.value !== innerValue.value) {
+        innerValue.value = option.value;
+        emit("update:model-value", option.value);
+        emit("change", option.value);
       }
-      setInnerVisible(false);
+      perhapsClose("option");
     };
     const onOverlayClick = () => {
       if (context.overlayClosable) {
-        setInnerVisible(false);
+        perhapsClose("overlay");
       }
     };
     const onAwayClick = () => {
       if (context.awayClosable) {
-        setInnerVisible(false);
+        perhapsClose("away");
       }
     };
-    const onAfterLeave = () => {
-      wholeVisible.value = false;
-    };
     const hide = () => {
-      setInnerVisible(false);
+      if (innerVisible.value) {
+        perhapsClose("other-button");
+      }
     };
     onMounted(() => {
       context.register(instance, {
@@ -252,8 +277,13 @@ export default  _defineComponent({
             increaseZIndex();
           }
           if (name === "after-leave") {
-            onAfterLeave();
+            wholeVisible.value = false;
+          }
+          if (name === "leave-cancelled" || name === "after-leave") {
+            isClosing = false;
           }
+          emit("visible-hook", name);
+          emit(name);
         }
       })
     );
@@ -296,7 +326,11 @@ export default  _defineComponent({
     const dropdownItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, onItemClick, onOptionClick, onOverlayClick, onAwayClick, onAfterLeave, hide, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, popupClass, popupStyle, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
+    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, get isClosing() {
+      return isClosing;
+    }, set isClosing(v) {
+      isClosing = v;
+    }, perhapsClose, onItemClick, onOptionClick, onOverlayClick, onAwayClick, hide, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, popupClass, popupStyle, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
       return classNames;
     }, get isNullish() {
       return isNullish;

package/components/empty/empty.vue

@@ -2,7 +2,7 @@
   <view :class="emptyClass" :style="emptyStyle">
     <view :class="bem.e('icon')" :style="iconStyle">
       <slot name="icon">
-        <sar-icon :family="iconFamily || 'sari'" :name="icon" />
+        <sar-icon :family="iconFamily" :name="icon" />
       </slot>
     </view>
     <slot name="description">

package/components/fab/fab.vue

@@ -27,7 +27,7 @@
             stringifyStyle({ background: item.background, color: item.color })
           "
         >
-          <sar-icon :family="item.iconFamily || 'sari'" :name="item.icon" />
+          <sar-icon :family="item.iconFamily" :name="item.icon" />
         </view>
       </view>
     </view>

package/components/floating-bubble/floating-bubble.vue

@@ -28,7 +28,7 @@ import {
 import {
   defaultFloatingBubbleProps
 } from "./common";
-import { useMouseDown, useSetTimeout } from "../../use";
+import { useMouseDown, useTimeout } from "../../use";
 export default  _defineComponent({
   ...{
     options: {
@@ -74,9 +74,9 @@ export default  _defineComponent({
       }
     );
     const animated = ref(false);
-    const [nonAnimatedLater, cancelNonAnimated] = useSetTimeout(() => {
+    const { start: nonAnimatedLater, stop: cancelNonAnimated } = useTimeout(() => {
       animated.value = false;
-    });
+    }, 500);
     function getMinX() {
       return props.gapX;
     }
@@ -154,7 +154,7 @@ export default  _defineComponent({
         }
       }
       animated.value = true;
-      nonAnimatedLater(500);
+      nonAnimatedLater();
       bubbleRect = void 0;
     };
     const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);

package/components/form/form.vue

@@ -116,7 +116,10 @@ export default  _defineComponent({
       fields.push(formItemContext);
     };
     const removeField = (formItemContext) => {
-      fields.splice(fields.indexOf(formItemContext), 1);
+      const index = fields.indexOf(formItemContext);
+      if (index !== -1) {
+        fields.splice(index, 1);
+      }
     };
     const validator = markRaw(new Validator());
     const { select } = useTranslate("form.defaultValidateMessages");

package/components/form-item/index.scss

@@ -6,6 +6,16 @@
     flex-direction: row;
     padding: var(--sar-form-item-padding-y) var(--sar-form-item-padding-x);
 
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
     &:not(:first-child) {
       &::before {
         @include border-top(var(--sar-form-item-border-color));

package/components/grid-item/grid-item.vue

@@ -14,7 +14,7 @@
                   :name="icon"
                   :color="iconColor"
                   :size="iconSize"
-                  :family="iconFamily || 'sari'"
+                  :family="iconFamily"
                 />
               </slot>
             </view>

package/components/icon/icon.vue

@@ -33,12 +33,17 @@ export default  _defineComponent({
       return isFileUrl(props.name);
     });
     const iconClass = computed(() => {
+      if (isImg.value) {
+        return classNames(bem.b(), props.rootClass);
+      }
+      if (props.name.includes(":")) {
+        const [family, name] = props.name.split(":");
+        return classNames(bem.b(), family, `${family}-${name}`, props.rootClass);
+      }
       return classNames(
         bem.b(),
-        {
-          [props.family]: !isImg.value,
-          [`${props.family}-${props.name}`]: !isImg.value
-        },
+        props.family,
+        `${props.family}-${props.name}`,
         props.rootClass
       );
     });

package/components/list-item/list-item.vue

@@ -11,7 +11,7 @@
             :name="icon"
             :color="iconColor"
             :size="iconSize"
-            :family="iconFamily || 'sari'"
+            :family="iconFamily"
           />
         </slot>
       </view>