sard-uniapp 1.1.4 → 1.1.5

package/changelog.md

@@ -1,3 +1,12 @@
+## [1.1.5](https://github.com/sutras/sard-uniapp/compare/v1.1.4...v1.1.5) (2024-05-18)
+
+
+### Bug Fixes
+
+* 修复toast&dialog不显示问题 ([9e49c67](https://github.com/sutras/sard-uniapp/commit/9e49c6772e7d0cff8976133b1dc05fa69b51d7ea))
+
+
+
 ## [1.1.4](https://github.com/sutras/sard-uniapp/compare/v1.1.3...v1.1.4) (2024-05-17)
 
 

package/components/accordion/variables.scss

@@ -10,6 +10,10 @@ page {
   --sar-accordion-item-title-font-size: var(--sar-text-base);
   --sar-accordion-item-title-line-height: var(--sar-leading-snug);
 
+  --sar-accordion-item-arrow-margin-left: 16rpx;
+  --sar-accordion-item-arrow-font-size: var(--sar-text-base);
+  --sar-accordion-item-arrow-color: var(--sar-tertiary-color);
+
   --sar-accordion-item-body-padding-x: 32rpx;
   --sar-accordion-item-body-padding-y: 32rpx;
 }

package/components/accordion-item/accordion-item.vue

@@ -8,8 +8,8 @@
     >
       <view :class="bem.e('title')">{{ title }}</view>
       <view v-if="value" :class="bem.e('value')">{{ value }}</view>
-      <view :class="bem.e('icon')">
-        <sar-icon :name="iconName" />
+      <view :class="bem.e('arrow')">
+        <sar-icon :name="arrowName" />
       </view>
     </view>
     <sar-collapse :visible="visible">
@@ -66,7 +66,7 @@ export default  _defineComponent({
     const visible = computed(() => {
       return context.multiple ? (context.value || []).includes(props.name) : context.value === props.name;
     });
-    const iconName = computed(() => {
+    const arrowName = computed(() => {
       return visible.value ? "up" : "down";
     });
     const accordionItemClass = computed(() => {
@@ -75,7 +75,7 @@ export default  _defineComponent({
     const accordionItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, context, onClick, visible, iconName, accordionItemClass, accordionItemStyle, get classNames() {
+    const __returned__ = { props, emit, bem, context, onClick, visible, arrowName, accordionItemClass, accordionItemStyle, get classNames() {
       return classNames;
     }, SarCollapse, SarIcon };
     return __returned__;

package/components/accordion-item/index.scss

@@ -42,6 +42,15 @@
     line-height: var(--sar-accordion-item-title-line-height);
   }
 
+  @include e(arrow) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--sar-accordion-item-arrow-margin-left);
+    font-size: var(--sar-accordion-item-arrow-font-size);
+    color: var(--sar-accordion-item-arrow-color);
+  }
+
   @include e(body) {
     @include universal;
     padding: var(--sar-accordion-item-body-padding-y)

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

@@ -11,10 +11,11 @@ export declare const dialogAgentPropsDefaults: {
     overlayClosable: boolean;
     duration: number;
 };
-export declare const mapIdImperatives: Record<string, {
-    show(props: Record<string, any>): void;
+export declare const imperativeName = "dialog";
+export interface DialogImperative {
+    show(newProps: Record<string, any>): void;
     hide(): void;
-}[]>;
+}
 export type DialogOptions = DialogAgentProps;
 export interface DialogSimpleShowFunction {
     (options: DialogOptions): void;

package/components/dialog-agent/common.js

@@ -1,10 +1,11 @@
 import { dialogPropsDefaults } from '../dialog/common';
 import { defaultConfig } from '../config';
+import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
 export const dialogAgentPropsDefaults = {
     ...dialogPropsDefaults,
     ...defaultConfig.dialogAgent,
 };
-export const mapIdImperatives = {};
+export const imperativeName = 'dialog';
 const defaultDialogOptions = {
     headed: false,
     buttonType: 'text',
@@ -19,9 +20,9 @@ const show = (optionsOrTitle, options = {}, internalOptions) => {
     }
     options = Object.assign({}, defaultDialogOptions, options, internalOptions);
     const { id = defaultConfig.dialogAgent.id } = options;
-    const imperatives = mapIdImperatives[id];
-    if (imperatives && imperatives.length > 0) {
-        imperatives[imperatives.length - 1].show(options);
+    const imperative = getAvailableImperative(imperativeName, id);
+    if (imperative) {
+        imperative.show(options);
     }
 };
 const dialog = (optionsOrTitle, options) => {
@@ -36,15 +37,18 @@ const confirm = (optionsOrTitle, options) => {
     });
 };
 const hide = (id = defaultConfig.dialogAgent.id) => {
-    const imperatives = mapIdImperatives[id];
+    const imperatives = getImperatives(imperativeName, id);
     if (imperatives && imperatives.length > 0) {
-        imperatives.forEach((imperative) => {
-            imperative.hide();
+        imperatives.forEach((item) => {
+            item.imperative.hide();
         });
     }
 };
 const hideAll = () => {
-    Object.keys(mapIdImperatives).forEach(hide);
+    const mapImperatives = getAllImperatives()[imperativeName];
+    if (mapImperatives) {
+        Object.keys(mapImperatives).forEach(hide);
+    }
 };
 dialog.alert = alert;
 dialog.confirm = confirm;

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

@@ -18,12 +18,13 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 import SarDialog from "../dialog/dialog.vue";
 import {
   dialogAgentPropsDefaults,
-  mapIdImperatives
+  imperativeName
 } from "./common";
+import { useImperative } from "../../use/useImperative";
 export default  _defineComponent({
   ...{
     options: {
@@ -68,23 +69,11 @@ export default  _defineComponent({
         };
       }
     };
-    onMounted(() => {
-      const id = innerProps.value.id;
-      if (id) {
-        mapIdImperatives[id] ??= [];
-        mapIdImperatives[id].push(imperative);
-      }
-    });
-    onUnmounted(() => {
-      const id = innerProps.value.id;
-      if (id) {
-        const imperatives = mapIdImperatives[id];
-        const index = imperatives.indexOf(imperative);
-        if (index !== -1) {
-          imperatives.splice(imperatives.indexOf(imperative), 1);
-        }
-      }
-    });
+    useImperative(
+      imperativeName,
+      imperative,
+      computed(() => innerProps.value.id)
+    );
     const __returned__ = { props, innerProps, imperative, SarDialog };
     return __returned__;
   }

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

@@ -10,10 +10,11 @@ export declare const toastAgentPropsDefaults: {
     timeout: number;
     duration: number;
 };
-export declare const mapIdImperatives: Record<string, {
-    show(props: Record<string, any>): void;
+export declare const imperativeName = "toast";
+export interface ToastImperative {
+    show(newProps: Record<string, any>): void;
     hide(): void;
-}[]>;
+}
 export type ToastOptions = ToastAgentProps;
 export interface ToastSimpleShowFunction {
     (options: ToastOptions): void;

package/components/toast-agent/common.js

@@ -1,10 +1,11 @@
+import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
 import { defaultConfig } from '../config';
 import { toastPropsDefaults } from '../toast/common';
 export const toastAgentPropsDefaults = {
     ...toastPropsDefaults,
     ...defaultConfig.toastAgent,
 };
-export const mapIdImperatives = {};
+export const imperativeName = 'toast';
 const show = (optionsOrTitle, options = {}, internalType) => {
     if (optionsOrTitle && typeof optionsOrTitle === 'object') {
         options = optionsOrTitle;
@@ -14,9 +15,9 @@ const show = (optionsOrTitle, options = {}, internalType) => {
     }
     options.type = internalType;
     const { id = defaultConfig.toastAgent.id } = options;
-    const imperatives = mapIdImperatives[id];
-    if (imperatives && imperatives.length > 0) {
-        imperatives[imperatives.length - 1].show(options);
+    const imperative = getAvailableImperative(imperativeName, id);
+    if (imperative) {
+        imperative.show(options);
     }
 };
 const toast = (optionsOrTitle, options) => {
@@ -32,15 +33,18 @@ const loading = (optionsOrTitle, options) => {
     show(optionsOrTitle, options, 'loading');
 };
 const hide = (id = defaultConfig.toastAgent.id) => {
-    const imperatives = mapIdImperatives[id];
+    const imperatives = getImperatives(imperativeName, id);
     if (imperatives && imperatives.length > 0) {
-        imperatives.forEach((imperative) => {
-            imperative.hide();
+        imperatives.forEach((item) => {
+            item.imperative.hide();
         });
     }
 };
 const hideAll = () => {
-    Object.keys(mapIdImperatives).forEach(hide);
+    const mapImperatives = getAllImperatives()[imperativeName];
+    if (mapImperatives) {
+        Object.keys(mapImperatives).forEach(hide);
+    }
 };
 toast.success = success;
 toast.fail = fail;

package/components/toast-agent/toast-agent.vue

@@ -14,12 +14,13 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 import SarToast from "../toast/toast.vue";
 import {
-  mapIdImperatives,
+  imperativeName,
   toastAgentPropsDefaults
 } from "./common";
+import { useImperative } from "../../use/useImperative";
 export default  _defineComponent({
   ...{
     options: {
@@ -63,23 +64,11 @@ export default  _defineComponent({
         elRef.value?.cancelHide();
       }
     };
-    onMounted(() => {
-      const id = innerProps.value.id;
-      if (id) {
-        mapIdImperatives[id] ??= [];
-        mapIdImperatives[id].push(imperative);
-      }
-    });
-    onUnmounted(() => {
-      const id = innerProps.value.id;
-      if (id) {
-        const imperatives = mapIdImperatives[id];
-        const index = imperatives.indexOf(imperative);
-        if (index !== -1) {
-          imperatives.splice(imperatives.indexOf(imperative), 1);
-        }
-      }
-    });
+    useImperative(
+      imperativeName,
+      imperative,
+      computed(() => innerProps.value.id)
+    );
     const __returned__ = { props, innerProps, elRef, imperative, SarToast };
     return __returned__;
   }

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "keywords": [
     "uniapp",

package/use/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useTransition';
 export * from './useSetTimeout';
 export * from './useZIndex';
+export * from './useImperative';

package/use/index.js

@@ -1,3 +1,4 @@
 export * from './useTransition';
 export * from './useSetTimeout';
 export * from './useZIndex';
+export * from './useImperative';

package/use/useImperative.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+type ImperativeItem<T = any> = {
+    show: boolean;
+    imperative: T;
+};
+type AllImperatives<T = any> = Record<string, Record<string, ImperativeItem<T>[] | undefined> | undefined>;
+export declare function useImperative<T = any>(name: string, imperative: T, id: Ref<string>): void;
+export declare function getAvailableImperative<T = any>(name: string, id: string): T | void;
+export declare function getImperatives<T = any>(name: string, id: string): ImperativeItem<T>[] | undefined;
+export declare function getAllImperatives<T = any>(): AllImperatives<T>;
+export {};

package/use/useImperative.js

@@ -0,0 +1,70 @@
+import { onMounted, onUnmounted } from 'vue';
+import { onHide, onShow } from '@dcloudio/uni-app';
+const allImperatives = {};
+export function useImperative(name, imperative, id) {
+    onMounted(() => {
+        if (id.value) {
+            const imperativeItems = ((allImperatives[name] ??= {})[id.value] ??= []);
+            const index = imperativeItems.findIndex((item) => item.imperative === imperative);
+            if (index === -1) {
+                imperativeItems.push({
+                    imperative,
+                    show: true,
+                });
+            }
+        }
+    });
+    onUnmounted(() => {
+        if (id.value) {
+            const imperativeItems = allImperatives[name]?.[id.value];
+            if (imperativeItems) {
+                const index = imperativeItems.findIndex((item) => item.imperative === imperative);
+                if (index !== -1) {
+                    imperativeItems.splice(index, 1);
+                    if (imperativeItems.length === 0) {
+                        delete allImperatives[name]?.[id.value];
+                    }
+                }
+            }
+        }
+    });
+    onShow(() => {
+        if (id.value) {
+            const imperativeItems = allImperatives[name]?.[id.value];
+            if (imperativeItems) {
+                const imperativeItem = imperativeItems.find((item) => item.imperative === imperative);
+                if (imperativeItem) {
+                    imperativeItem.show = true;
+                }
+            }
+        }
+    });
+    onHide(() => {
+        if (id.value) {
+            const imperativeItems = allImperatives[name]?.[id.value];
+            if (imperativeItems) {
+                const imperativeItem = imperativeItems.find((item) => item.imperative === imperative);
+                if (imperativeItem) {
+                    imperativeItem.show = false;
+                }
+            }
+        }
+    });
+}
+export function getAvailableImperative(name, id) {
+    const imperativeItems = allImperatives[name]?.[id];
+    if (imperativeItems) {
+        for (let i = imperativeItems.length - 1; i >= 0; i--) {
+            const imperativeItem = imperativeItems[i];
+            if (imperativeItem.show) {
+                return imperativeItem.imperative;
+            }
+        }
+    }
+}
+export function getImperatives(name, id) {
+    return allImperatives[name]?.[id];
+}
+export function getAllImperatives() {
+    return allImperatives;
+}