sard-uniapp 1.17.0 → 1.18.0

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/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;
@@ -40,7 +41,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-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

@@ -128,7 +128,7 @@ export default  _defineComponent({
     separator: { type: String, required: false },
     placeholder: { type: String, 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;
@@ -254,6 +254,8 @@ export default  _defineComponent({
           if (name === "after-leave") {
             onAfterLeave();
           }
+          emit("visible-hook", name);
+          emit(name);
         }
       })
     );

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/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>

package/components/menu-item/menu-item.vue

@@ -4,7 +4,7 @@
       v-if="icon || (withIcon && direction === 'vertical')"
       :class="bem.e('icon')"
     >
-      <sar-icon v-if="icon" :name="icon" :family="iconFamily || 'sari'" />
+      <sar-icon v-if="icon" :name="icon" :family="iconFamily" />
     </view>
     <view v-if="text" :class="bem.e('text')">
       {{ text }}

package/components/navbar-item/navbar-item.vue

@@ -9,7 +9,7 @@
         v-if="icon"
         :class="bem.e('item-icon')"
         :name="icon"
-        :family="iconFamily || 'sari'"
+        :family="iconFamily"
         :size="iconSize"
       />
 

package/components/popup/popup.vue

@@ -17,13 +17,25 @@
           :root-class="overlayClass"
           @click="onOverlayClick"
         />
+        <!-- #ifndef MP -->
         <view
+          v-bind="$attrs"
           :class="popupClass"
           :style="popupStyle"
           @transitionend="onTransitionEnd"
         >
           <slot></slot>
         </view>
+        <!-- #endif -->
+        <!-- #ifdef MP -->
+        <view
+          :class="popupClass"
+          :style="popupStyle"
+          @transitionend="onTransitionEnd"
+        >
+          <slot></slot>
+        </view>
+        <!-- #endif -->
       </view>
       <!-- #ifdef MP -->
     </root-portal>
@@ -52,7 +64,8 @@ export default  _defineComponent({
     options: {
       virtualHost: true,
       styleIsolation: "shared"
-    }
+    },
+    inheritAttrs: false
   },
   __name: "popup",
   props:  _mergeDefaults({

package/components/rate/rate.vue

@@ -31,7 +31,7 @@
           <template v-if="voidText">
             {{ voidText }}
           </template>
-          <sar-icon v-else :name="voidIcon" :family="iconFamily || 'sari'" />
+          <sar-icon v-else :name="voidIcon" :family="iconFamily" />
         </view>
         <view
           :class="bem.e('star')"
@@ -45,7 +45,7 @@
           <template v-if="text">
             {{ text }}
           </template>
-          <sar-icon v-else :name="icon" :family="iconFamily || 'sari'" />
+          <sar-icon v-else :name="icon" :family="iconFamily" />
         </view>
       </view>
     </view>

package/components/result/result.vue

@@ -4,7 +4,7 @@
       <view :class="iconClass">
         <sar-icon
           :name="icon || mapStatusIcon[status]"
-          :family="iconFamily || 'sari'"
+          :family="iconFamily"
           :color="iconColor"
         />
       </view>

package/components/share-sheet/share-sheet.vue

@@ -47,7 +47,7 @@
                   <sar-icon
                     v-else
                     :name="item.icon"
-                    :family="item.iconFamily || 'sari'"
+                    :family="item.iconFamily"
                   />
                 </view>
                 <view :class="bem.e('item-name')">{{ item.name }}</view>

package/components/step/common.d.ts

@@ -0,0 +1,22 @@
+import { type StyleValue } from 'vue';
+import { type StepsStatus } from '../steps/common';
+export interface StepProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    status?: StepsStatus;
+    name?: string;
+    description?: string;
+    index: number;
+}
+export interface StepSlots {
+    default?(props: {
+        status: StepsStatus;
+    }): any;
+    icon?(props: {
+        status: StepsStatus;
+    }): any;
+}
+export interface StepEmits {
+}
+export interface StepExpose {
+}

package/components/step/common.js

@@ -0,0 +1 @@
+export {};

package/components/step/index.d.ts

@@ -0,0 +1 @@
+export type { StepProps, StepSlots, StepEmits, StepExpose } from './common';

package/components/step/index.js

@@ -0,0 +1 @@
+export {};

package/components/step/index.scss

@@ -0,0 +1,215 @@
+@use '../style/base' as *;
+
+@include bem(step) {
+  @include b() {
+    @include universal;
+    flex: 1;
+    font-size: var(--sar-steps-step-font-size);
+
+    &:first-child {
+      @include e(line-before) {
+        opacity: 0;
+      }
+    }
+
+    &:last-child {
+      flex: none;
+      white-space: nowrap;
+
+      @include e(line) {
+        display: none;
+      }
+
+      @include e(line-after) {
+        opacity: 0;
+      }
+    }
+
+    @include m(behind) {
+      @include e(line) {
+        background-color: var(--sar-steps-line-active-color);
+      }
+    }
+
+    @include m(self) {
+      @include e(line-before) {
+        background-color: var(--sar-steps-line-active-color);
+      }
+    }
+
+    @include m(finish) {
+      @include e(icon) {
+        color: var(--sar-steps-icon-finish-color);
+      }
+
+      @include e(body) {
+        color: var(--sar-steps-text-finish-color);
+      }
+    }
+
+    @include m(process) {
+      @include e(icon) {
+        color: var(--sar-steps-icon-process-color);
+      }
+
+      @include e(body) {
+        color: var(--sar-steps-text-process-color);
+      }
+    }
+
+    @include m(wait) {
+      @include e(icon) {
+        color: var(--sar-steps-icon-wait-color);
+      }
+
+      @include e(body) {
+        color: var(--sar-steps-text-wait-color);
+      }
+    }
+
+    @include m(error) {
+      @include e(icon) {
+        color: var(--sar-steps-icon-error-color);
+      }
+
+      @include e(body) {
+        color: var(--sar-steps-text-error-color);
+      }
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    padding-top: var(--sar-steps-header-gap-y);
+    padding-bottom: var(--sar-steps-header-gap-y);
+  }
+
+  @include e(line) {
+    @include universal;
+    height: var(--sar-steps-line-thickness);
+    width: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    margin-left: var(--sar-steps-line-gap);
+    margin-right: var(--sar-steps-line-gap);
+    background-color: var(--sar-steps-line-color);
+  }
+
+  @include e(line-before) {
+    display: none;
+  }
+
+  @include e(icon) {
+    @include universal;
+    font-size: var(--sar-steps-icon-font-size);
+  }
+
+  @include e(body) {
+    @include universal;
+  }
+
+  @include e(name) {
+    font-size: var(--sar-steps-name-font-size);
+  }
+
+  @include e(description) {
+    margin-top: var(--sar-steps-description-margin-top);
+    font-size: var(--sar-steps-description-font-size);
+    color: var(--sar-steps-description-color);
+  }
+
+  @include m(vertical) {
+    flex-direction: row;
+    min-height: var(--sar-steps-step-min-height);
+
+    &:last-child {
+      @include e(line) {
+        white-space: unset;
+      }
+    }
+
+    @include e(header) {
+      top: calc(
+        var(--sar-steps-header-vertical-top) + var(--sar-steps-body-padding-y)
+      );
+      flex: none;
+      flex-direction: column;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: var(--sar-steps-header-gap-x);
+      padding-right: var(--sar-steps-header-gap-x);
+    }
+
+    @include e(line) {
+      width: var(--sar-steps-line-thickness);
+      height: 0;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: var(--sar-steps-line-gap);
+      margin-bottom: var(--sar-steps-line-gap);
+    }
+
+    @include e(body) {
+      flex: 1;
+      padding-top: var(--sar-steps-body-padding-y);
+      padding-bottom: var(--sar-steps-body-padding-y);
+    }
+  }
+
+  @include m(center) {
+    justify-content: center;
+
+    &:last-child {
+      flex: 1;
+      white-space: unset;
+
+      @include e(line) {
+        display: flex;
+      }
+    }
+
+    @include e(line-before) {
+      display: flex;
+      margin-left: 0;
+    }
+
+    @include e(line-after) {
+      margin-right: 0;
+    }
+
+    @include e(body) {
+      align-items: center;
+    }
+  }
+
+  @include m-intersect(center, vertical) {
+    justify-content: center;
+    align-items: center;
+
+    &:last-child {
+      flex: 1;
+      white-space: unset;
+    }
+
+    @include e(header) {
+      top: 0;
+      align-self: stretch;
+    }
+
+    @include e(line-before) {
+      margin-top: 0;
+    }
+
+    @include e(line-after) {
+      margin-bottom: 0;
+    }
+
+    @include e(body) {
+      justify-content: center;
+      align-items: flex-start;
+    }
+  }
+}

package/components/step/step.d.ts

@@ -0,0 +1,10 @@
+import { type StepProps, type StepSlots } from './common';
+declare function __VLS_template(): Readonly<StepSlots> & StepSlots;
+declare const __VLS_component: import("vue").DefineComponent<StepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/step/step.vue

@@ -0,0 +1,97 @@
+<template>
+  <view :class="stepClass" :style="stepStyle">
+    <view :class="bem.e('header')">
+      <view :class="classNames(bem.e('line'), bem.e('line-before'))"></view>
+      <view :class="bem.e('icon')">
+        <slot name="icon" :status="currentStatus">
+          <sar-icon
+            :family="context.iconFamily"
+            :name="statusIcon"
+            :size="context.iconSize"
+          />
+        </slot>
+      </view>
+      <view :class="classNames(bem.e('line'), bem.e('line-after'))"></view>
+    </view>
+    <view :class="bem.e('body')">
+      <slot :status="currentStatus">
+        <view :class="bem.e('name')">{{ name }}</view>
+        <view v-if="description" :class="bem.e('description')">
+          {{ description }}
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed, inject } from "vue";
+import SarIcon from "../icon/icon.vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import { stepsContextSymbol } from "../steps/common";
+export default  _defineComponent({
+  components: {
+    SarIcon,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "step",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    status: { type: String, required: false },
+    name: { type: String, required: false },
+    description: { type: String, required: false },
+    index: { type: Number, required: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    __expose({});
+    const bem = createBem("step");
+    const context = inject(stepsContextSymbol);
+    if (!context) {
+      throw new Error("Step must be included in Steps.");
+    }
+    const currentStatus = computed(() => {
+      return props.status ?? (props.index < context.current ? "finish" : props.index === context.current ? context.status ?? "process" : "wait");
+    });
+    const statusIcon = computed(() => {
+      return {
+        finish: context.finishIcon,
+        process: context.processIcon,
+        wait: context.waitIcon,
+        error: context.errorIcon
+      }[currentStatus.value];
+    });
+    const position = computed(() => {
+      return props.index < context.current ? "behind" : context.current === props.index ? "self" : "front";
+    });
+    const stepClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("center", context.center),
+        bem.m(currentStatus.value),
+        bem.m(position.value),
+        bem.m(context.direction),
+        props.rootClass
+      );
+    });
+    const stepStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, context, currentStatus, statusIcon, position, stepClass, stepStyle, SarIcon, get classNames() {
+      return classNames;
+    } };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/steps/common.d.ts

@@ -1,4 +1,4 @@
-import { type StyleValue } from 'vue';
+import { InjectionKey, type StyleValue } from 'vue';
 export type StepsStatus = 'wait' | 'process' | 'error' | 'finish';
 export interface StepsItem {
     status?: StepsStatus;
@@ -23,9 +23,26 @@ export interface StepsProps {
 export declare const defaultStepsProps: {
     current: number;
     center: boolean;
+    itemList: () => never[];
     direction: StepsProps["direction"];
     finishIcon: string;
     processIcon: string;
     waitIcon: string;
     errorIcon: string;
 };
+export interface StepsSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface StepsContext {
+    current: number;
+    center?: boolean;
+    direction?: StepsProps['direction'];
+    iconFamily?: string;
+    iconSize?: string;
+    finishIcon?: string;
+    processIcon?: string;
+    waitIcon?: string;
+    errorIcon?: string;
+    status?: StepsStatus;
+}
+export declare const stepsContextSymbol: InjectionKey<StepsContext>;

package/components/steps/common.js

@@ -1,2 +1,3 @@
 import { defaultConfig } from '../config';
 export const defaultStepsProps = defaultConfig.steps;
+export const stepsContextSymbol = Symbol('steps-context');

package/components/steps/index.d.ts

@@ -1 +1 @@
-export type { StepsStatus, StepsItem, StepsProps } from './common';
+export type { StepsProps, StepsSlots, StepsContext, StepsStatus, StepsItem, } from './common';