sard-uniapp 1.1.4 → 1.1.6

package/changelog.md

@@ -1,3 +1,21 @@
+## [1.1.6](https://github.com/sutras/sard-uniapp/compare/v1.1.5...v1.1.6) (2024-05-19)
+
+
+### Bug Fixes
+
+* 修复 notify 组件显示问题、优化文档 ([7ed66fd](https://github.com/sutras/sard-uniapp/commit/7ed66fd09870b24d485fd82ed6f152373b665f3c))
+
+
+
+## [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/notify-agent/common.d.ts

@@ -9,10 +9,11 @@ export declare const notifyAgentPropsDefaults: {
     duration: number;
     timeout: number;
 };
-export declare const mapIdImperative: Record<string, {
-    show(props: Record<string, any>): void;
+export declare const imperativeName = "notify";
+export interface NotifyImperative {
+    show(newProps: Record<string, any>): void;
     hide(): void;
-}>;
+}
 export type NotifyOptions = NotifyAgentProps;
 export interface NotifySimpleShowFunction {
     (options: NotifyOptions): void;

package/components/notify-agent/common.js

@@ -1,9 +1,11 @@
+import { notifyPropsDefaults } from '../notify/common';
 import { defaultConfig } from '../config';
+import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
 export const notifyAgentPropsDefaults = {
-    ...defaultConfig.notify,
+    ...notifyPropsDefaults,
     ...defaultConfig.notifyAgent,
 };
-export const mapIdImperative = {};
+export const imperativeName = 'notify';
 const show = (optionsOrMessage, options = {}, internalType) => {
     if (optionsOrMessage && typeof optionsOrMessage === 'object') {
         options = optionsOrMessage;
@@ -12,8 +14,8 @@ const show = (optionsOrMessage, options = {}, internalType) => {
         options.message = optionsOrMessage;
     }
     options.type = internalType;
-    const { id = 'notify' } = options;
-    const imperative = mapIdImperative[id];
+    const { id = defaultConfig.notifyAgent.id } = options;
+    const imperative = getAvailableImperative(imperativeName, id);
     if (imperative) {
         imperative.show(options);
     }
@@ -30,14 +32,19 @@ const warning = (optionsOrMessage, options) => {
 const error = (optionsOrMessage, options) => {
     show(optionsOrMessage, options, 'error');
 };
-const hide = (id = 'notify') => {
-    const imperative = mapIdImperative[id];
-    if (imperative) {
-        imperative.hide();
+const hide = (id = defaultConfig.notifyAgent.id) => {
+    const imperatives = getImperatives(imperativeName, id);
+    if (imperatives && imperatives.length > 0) {
+        imperatives.forEach((item) => {
+            item.imperative.hide();
+        });
     }
 };
 const hideAll = () => {
-    Object.keys(mapIdImperative).forEach(hide);
+    const mapImperatives = getAllImperatives()[imperativeName];
+    if (mapImperatives) {
+        Object.keys(mapImperatives).forEach(hide);
+    }
 };
 notify.success = success;
 notify.warning = warning;

package/components/notify-agent/notify-agent.vue

@@ -15,12 +15,13 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 import SarNotify from "../notify/notify.vue";
 import {
-  mapIdImperative,
+  imperativeName,
   notifyAgentPropsDefaults
 } from "./common";
+import { useImperative } from "../../use/useImperative";
 export default  _defineComponent({
   ...{
     options: {
@@ -64,16 +65,11 @@ export default  _defineComponent({
         elRef.value?.cancelHide();
       }
     };
-    onMounted(() => {
-      if (innerProps.value.id) {
-        mapIdImperative[innerProps.value.id] = imperative;
-      }
-    });
-    onUnmounted(() => {
-      if (innerProps.value.id) {
-        delete mapIdImperative[innerProps.value.id];
-      }
-    });
+    useImperative(
+      imperativeName,
+      imperative,
+      computed(() => innerProps.value.id)
+    );
     const __returned__ = { props, innerProps, elRef, imperative, SarNotify };
     return __returned__;
   }

package/components/popover/index.d.ts

@@ -1,3 +1,3 @@
-import { Position } from './utils';
+import type { Position } from './utils';
 export { usePopover } from './usePopover';
 export type PopoverPosition = Position;

package/components/toast/common.d.ts

@@ -19,7 +19,7 @@ export declare const toastPropsDefaults: {
     duration: number;
 };
 export interface ToastEmits {
-    (e: 'update:visible', event: any): void;
+    (e: 'update:visible', visible: boolean): void;
 }
 export interface ToastExpose {
     reHideLater: () => void;

package/components/toast/toast.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     reHideLater: () => void;
     cancelHide: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:visible": (event: any) => void;
+    "update:visible": (visible: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ToastProps>, {
     type: "text";
     position: "center";
@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     timeout: number;
     duration: number;
 }>>> & {
-    "onUpdate:visible"?: ((event: any) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }, {
     type: "success" | "text" | "loading" | "fail";
     overlay: boolean;

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,8 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.1.4",
+  "version": "1.1.6",
+  "type": "module",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "keywords": [
     "uniapp",
@@ -24,8 +25,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@dcloudio/types": "^3.3.2",
-    "vue": "^3.3.11"
+    "@dcloudio/types": "^3.4.8",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
     "@sard/uniapp-cli": "workspace:*",

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;
+}