sard-uniapp 1.16.0 → 1.17.1

package/components/popup/popup.vue

@@ -5,7 +5,7 @@
     <!-- #ifdef MP -->
     <root-portal>
       <!-- #endif -->
-      <view class="sar-portal">
+      <view v-show="pageVisible" class="sar-portal">
         <sar-overlay
           v-if="overlay"
           :visible="visible"
@@ -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>
@@ -36,7 +48,8 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, reactive, ref, toRef } from "vue";
-import { classNames, stringifyStyle, createBem } from "../../utils";
+import { onHide, onShow } from "@dcloudio/uni-app";
+import { classNames, stringifyStyle, createBem, isWeb } from "../../utils";
 import { useTransition, useZIndex } from "../../use";
 import SarOverlay from "../overlay/overlay.vue";
 import {
@@ -51,7 +64,8 @@ export default  _defineComponent({
     options: {
       virtualHost: true,
       styleIsolation: "shared"
-    }
+    },
+    inheritAttrs: false
   },
   __name: "popup",
   props:  _mergeDefaults({
@@ -100,6 +114,17 @@ export default  _defineComponent({
     const onOverlayClick = (event) => {
       emit("overlay-click", event);
     };
+    const pageVisible = ref(true);
+    onShow(() => {
+      if (isWeb) {
+        pageVisible.value = true;
+      }
+    });
+    onHide(() => {
+      if (isWeb) {
+        pageVisible.value = false;
+      }
+    });
     const popupClass = computed(() => {
       return classNames(
         bem.b(),
@@ -116,7 +141,7 @@ export default  _defineComponent({
         transitionDuration: props.duration + "ms"
       });
     });
-    const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, keepRenderClass, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, popupClass, popupStyle, SarOverlay };
+    const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, keepRenderClass, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, pageVisible, popupClass, popupStyle, SarOverlay };
     return __returned__;
   }
 });

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 || 'sari'"
+            :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';

package/components/steps/index.scss

@@ -8,224 +8,8 @@
     align-items: flex-start;
   }
 
-  @include e(step) {
-    @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: column;
     align-items: stretch;
-
-    @include e(step) {
-      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) {
-    @include e(step) {
-      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) {
-    @include e(step) {
-      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;
-    }
   }
 }