cosey 0.3.23 → 0.4.1

package/components/components.d.ts

@@ -35,6 +35,7 @@ import { Panel } from './panel';
 import { Row } from './row';
 import { ScrollView } from './scroll-view';
 import { SnugMenu, SnugMenuItem } from './snug-menu';
+import { StackDialog } from './stack-dialog';
 import { SvgIcon } from './svg-icon';
 import { Table } from './table';
 import { TableAction } from './table-action';
@@ -88,6 +89,7 @@ declare module 'vue' {
         CoScrollView: typeof ScrollView;
         CoSnugMenu: typeof SnugMenu;
         CoSnugMenuItem: typeof SnugMenuItem;
+        CoStackDialog: typeof StackDialog;
         CoSvgIcon: typeof SvgIcon;
         CoTable: typeof Table;
         CoTableAction: typeof TableAction;
@@ -99,4 +101,4 @@ declare module 'vue' {
         CoVideoViewer: typeof VideoViewer;
     }
 }
-export { AudioCard, AudioViewer, Card, Close, Col, ConfigProvider, Container, ContextMenu, ContextMenuItem, ContextSubMenu, Copy, DndSort, DndSortItem, Editor, Field, FileCard, Form, FormDialog, FormDrawer, FormGroup, FormItem, FormList, FormQuery, Highlight, HorizontalTree, Icon, IconifyIcon, ImageCard, InputNumberRange, LongText, Mask, MediaCard, MediaCardGroup, MediaViewer, NumberFormat, OnlyChild, OptionalWrapper, Panel, Row, ScrollView, SnugMenu, SnugMenuItem, SvgIcon, Table, TableAction, Toggle, Transition, TransitionGroup, Upload, VideoCard, VideoViewer, };
+export { AudioCard, AudioViewer, Card, Close, Col, ConfigProvider, Container, ContextMenu, ContextMenuItem, ContextSubMenu, Copy, DndSort, DndSortItem, Editor, Field, FileCard, Form, FormDialog, FormDrawer, FormGroup, FormItem, FormList, FormQuery, Highlight, HorizontalTree, Icon, IconifyIcon, ImageCard, InputNumberRange, LongText, Mask, MediaCard, MediaCardGroup, MediaViewer, NumberFormat, OnlyChild, OptionalWrapper, Panel, Row, ScrollView, SnugMenu, SnugMenuItem, StackDialog, SvgIcon, Table, TableAction, Toggle, Transition, TransitionGroup, Upload, VideoCard, VideoViewer, };

package/components/components.js

@@ -35,6 +35,7 @@ export { Panel } from './panel/index.js';
 export { Row } from './row/index.js';
 export { ScrollView } from './scroll-view/index.js';
 export { SnugMenu, SnugMenuItem } from './snug-menu/index.js';
+export { StackDialog } from './stack-dialog/index.js';
 export { SvgIcon } from './svg-icon/index.js';
 export { Table } from './table/index.js';
 export { TableAction } from './table-action/index.js';

package/components/form-dialog/form-dialog.d.ts

@@ -183,7 +183,7 @@ export declare const formDialogProps: {
     };
 };
 export type FormDialogProps = ExtractPropTypes<typeof formDialogProps>;
-export interface FormDialogSlots {
+export interface ElDialogSlots {
     default?: (props: Record<string, never>) => any;
     header?: (props: {
         close?: () => void;
@@ -191,6 +191,8 @@ export interface FormDialogSlots {
         titleClass?: string;
     }) => any;
     footer?: (props: Record<string, never>) => any;
+}
+export interface FormDialogSlots extends ElDialogSlots {
     button?: (props: {
         submitting: boolean;
         confirm: () => any | Promise<any>;

package/components/form-dialog/index.d.ts

@@ -1,7 +1,6 @@
-import { Component } from 'vue';
+import { type Plugin, Component } from 'vue';
 import { useFormDialogWidth } from './useFormDialogWidth';
 import { FormDialogProps } from './form-dialog';
-import { type Plugin } from 'vue';
 export * from './form-dialog';
 declare const _FormDialog: Component<FormDialogProps> & Plugin;
 export { _FormDialog as FormDialog, useFormDialogWidth };

package/components/index.d.ts

@@ -36,6 +36,7 @@ export * from './panel';
 export * from './row';
 export * from './scroll-view';
 export * from './snug-menu';
+export * from './stack-dialog';
 export * from './style';
 export * from './svg-icon';
 export * from './table';

package/components/index.js

@@ -35,6 +35,7 @@ export { Panel } from './panel/index.js';
 export { Row } from './row/index.js';
 export { ScrollView } from './scroll-view/index.js';
 export { SnugMenu, SnugMenuItem } from './snug-menu/index.js';
+export { StackDialog } from './stack-dialog/index.js';
 export { SvgIcon } from './svg-icon/index.js';
 export { Table } from './table/index.js';
 export { TableAction } from './table-action/index.js';
@@ -79,6 +80,7 @@ export { defaultMediaViewerBaseProps, defaultMediaViewerProps } from './media-vi
 export { defaultNumberFormatProps } from './number-format/number-format.js';
 export { defaultBreakpoints, defaultRowProps, generateAlgorithms, rowColumns, rowContextSymbol, rowSizes } from './row/row.js';
 export { snugMenuContextSymbol } from './snug-menu/snug-menu.js';
+export { createStackDialogInfo, stackDialogProps, useStackDialog, useStackDialogProvide } from './stack-dialog/stack-dialog.js';
 export { getFocusVisibleStyle, getLineClampStyle, getTruncateStyle } from './style/mixins.js';
 export { contrarotation, rotation, rotation45, spinner } from './style/animation.js';
 export { defaultTableConfig, elSlotsName, omittedTableProps, tableEmitEvents, tableEmitOnEvents, tableEmitOnProps, tableExposeKeys, tableProps } from './table/table.js';

package/components/stack-dialog/index.d.ts

@@ -0,0 +1,6 @@
+import { Component, type Plugin } from 'vue';
+import { type StackDialogProps } from './stack-dialog';
+export * from './stack-dialog';
+declare const _StackDialog: Component<StackDialogProps> & Plugin;
+export { _StackDialog as StackDialog };
+export default _StackDialog;

package/components/stack-dialog/index.js

@@ -0,0 +1,8 @@
+import { withInstall } from '../utils.js';
+import stdin_default$1 from './stack-dialog.vue.js';
+export { createStackDialogInfo, stackDialogProps, useStackDialog, useStackDialogProvide } from './stack-dialog.js';
+
+const _StackDialog = withInstall(stdin_default$1);
+var stdin_default = _StackDialog;
+
+export { _StackDialog as StackDialog, stdin_default as default };

package/components/stack-dialog/stack-dialog.d.ts

@@ -0,0 +1,161 @@
+import { type DialogEmits, type DialogInstance } from 'element-plus';
+import { EmitFn, ExtractPropTypes } from 'vue';
+import { type ElDialogSlots } from '../form-dialog';
+export declare const stackDialogProps: {
+    appendToBody: BooleanConstructor;
+    appendTo: {
+        readonly type: import("vue").PropType<string | HTMLElement>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "body";
+    };
+    beforeClose: {
+        readonly type: import("vue").PropType<import("element-plus").DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: BooleanConstructor;
+    closeOnClickModal: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    closeOnPressEscape: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    lockScroll: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    modal: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    openDelay: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    closeDelay: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    top: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: BooleanConstructor;
+    modalClass: StringConstructor;
+    headerClass: StringConstructor;
+    bodyClass: StringConstructor;
+    footerClass: StringConstructor;
+    width: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: BooleanConstructor;
+    headerAriaLevel: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+    center: BooleanConstructor;
+    alignCenter: BooleanConstructor;
+    closeIcon: {
+        readonly type: import("vue").PropType<string | import("vue").Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
+    fullscreen: BooleanConstructor;
+    showClose: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    title: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    ariaLevel: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+};
+export type StackDialogProps = ExtractPropTypes<typeof stackDialogProps>;
+export interface StackDialogSlots extends ElDialogSlots {
+}
+export interface StackDialogEmits extends /* @vue-ignore */ EmitFn<DialogEmits> {
+}
+export interface StackDialogExpose extends DialogInstance {
+}
+export interface StackDialogInfo {
+    transform: string;
+}
+export declare function createStackDialogInfo(): {
+    transform: string;
+};
+export interface StackDialogContext {
+    addInfo: (info: StackDialogInfo) => void;
+    removeInfo: (info: StackDialogInfo) => void;
+}
+export declare function useStackDialogProvide(): void;
+export declare function useStackDialog(): {
+    onShow: () => void;
+    onHide: () => void;
+    info: {
+        transform: string;
+    };
+};

package/components/stack-dialog/stack-dialog.js

@@ -0,0 +1,61 @@
+import { dialogProps } from 'element-plus';
+import { inject, onBeforeUnmount, reactive, provide, toRaw } from 'vue';
+
+const stackDialogProps = {
+  ...dialogProps
+};
+function createStackDialogInfo() {
+  return reactive({
+    transform: ""
+  });
+}
+const stackDialogContextKey = Symbol("stackDialogContext");
+function useStackDialogProvide() {
+  const infoList = [];
+  const updateInfo = () => {
+    const count = 10;
+    const total = 10;
+    infoList.forEach((info, index) => {
+      const x = index / count;
+      const t = 1 - Math.pow(1 - x, 4);
+      const scale = 1 - index / infoList.length * 0.05;
+      info.transform = `translateY(${t * total}vh) scale(${scale})`;
+    });
+  };
+  const addInfo = (info) => {
+    if (!infoList.includes(toRaw(info))) {
+      infoList.unshift(info);
+      updateInfo();
+    }
+  };
+  const removeInfo = (info) => {
+    if (infoList.includes(toRaw(info))) {
+      infoList.splice(infoList.indexOf(info), 1);
+      updateInfo();
+    }
+  };
+  provide(stackDialogContextKey, {
+    addInfo,
+    removeInfo
+  });
+}
+function useStackDialog() {
+  const context = inject(stackDialogContextKey, null);
+  const info = createStackDialogInfo();
+  const onShow = () => {
+    context?.addInfo(info);
+  };
+  const onHide = () => {
+    context?.removeInfo(info);
+  };
+  onBeforeUnmount(() => {
+    context?.removeInfo(info);
+  });
+  return {
+    onShow,
+    onHide,
+    info
+  };
+}
+
+export { createStackDialogInfo, stackDialogProps, useStackDialog, useStackDialogProvide };

package/components/stack-dialog/stack-dialog.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent, useSlots, ref, createBlock, openBlock, resolveDynamicComponent, unref, createVNode, mergeProps } from 'vue';
+import { stackDialogProps, useStackDialog } from './stack-dialog.js';
+import stdin_default$1 from './style/index.js';
+import { ElDialog } from 'element-plus';
+import classNames from 'classnames';
+import { elFormDialogExposeKeys } from '../form-dialog/form-dialog.js';
+import { useComponentConfig } from '../config-provider/config-provider.js';
+import { createMergedExpose, defineTemplate } from '../../utils/vue.js';
+
+var stdin_default = /* @__PURE__ */defineComponent({
+  ...{
+    name: "StackDialog"
+  },
+  __name: "stack-dialog",
+  props: stackDialogProps,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const props = __props;
+    const slots = useSlots();
+    const emit = __emit;
+    const {
+      prefixCls
+    } = useComponentConfig("stack-dialog", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const elPopupRef = ref();
+    const expose = createMergedExpose(elFormDialogExposeKeys, () => elPopupRef.value);
+    __expose(expose);
+    const {
+      onShow,
+      onHide,
+      info
+    } = useStackDialog();
+    const template = defineTemplate(() => {
+      return createVNode(ElDialog, mergeProps({
+        "ref": elPopupRef
+      }, props, {
+        "class": [hashId.value, prefixCls.value],
+        "headerClass": classNames(props.headerClass, `${prefixCls.value}-header`),
+        "bodyClass": classNames(props.bodyClass, `${prefixCls.value}-body`),
+        "footerClass": classNames(props.footerClass, `${prefixCls.value}-footer`),
+        "onUpdate:modelValue": value => emit("update:modelValue", value),
+        "style": {
+          maxWidth: props.fullscreen ? null : "calc(100vw - 32px)",
+          ...info
+        },
+        "append-to-body": true,
+        "onOpen": () => {
+          onShow();
+          emit("open");
+        },
+        "onClose": () => {
+          onHide();
+          emit("close");
+        }
+      }), slots);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(template)));
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/stack-dialog/style/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
+    hashId: import("vue").Ref<string, string>;
+};
+export default _default;

package/components/stack-dialog/style/index.js

@@ -0,0 +1,27 @@
+import { getSimpleStyleHook } from 'cosey/components';
+
+var stdin_default = getSimpleStyleHook("StackDialog", (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      display: "flex",
+      flexDirection: "column",
+      margin: "5vh auto 10vh",
+      width: "80%",
+      height: "calc(100vh - 15vh)",
+      transition: token.motionDurationSlow,
+      [`${componentCls}-header`]: {
+        flex: "none"
+      },
+      [`${componentCls}-body`]: {
+        flex: 1,
+        minHeight: 0
+      },
+      [`${componentCls}-footer`]: {
+        flex: "none"
+      }
+    }
+  };
+});
+
+export { stdin_default as default };

package/components/table/table.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, unref, computed, ref, useTemplateRef, mergeProps, watch, onMounted, onBeforeUnmount, resolveComponent, resolveDirective, withDirectives, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createVNode, renderSlot, createBlock, withCtx, createSlots, Fragment, renderList, Teleport, vShow, normalizeProps, guardReactiveProps } from 'vue';
+import { defineComponent, useSlots, unref, computed, ref, useTemplateRef, mergeProps, watch, onMounted, onBeforeUnmount, resolveComponent, resolveDirective, createBlock, openBlock, Teleport, withDirectives, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createVNode, renderSlot, withCtx, createSlots, Fragment, renderList, vShow, normalizeProps, guardReactiveProps } from 'vue';
 import { merge, cloneDeep, get } from 'lodash-es';
 import { reactiveComputed, reactiveOmit } from '@vueuse/core';
 import { useNamespace, useZIndex, ElButton, Mousewheel } from 'element-plus';
@@ -353,7 +353,10 @@ var stdin_default = /* @__PURE__ */defineComponent({
       const _component_el_table = resolveComponent("el-table");
       const _component_el_pagination = resolveComponent("el-pagination");
       const _directive_loading = resolveDirective("loading");
-      return withDirectives((openBlock(), createElementBlock("div", {
+      return openBlock(), createBlock(Teleport, {
+        to: "body",
+        disabled: !unref(isFullPage)
+      }, [withDirectives((openBlock(), createElementBlock("div", {
         class: normalizeClass([unref(hashId), unref(prefixCls), {
           "is-fullpage": unref(isFullPage)
         }]),
@@ -568,7 +571,7 @@ var stdin_default = /* @__PURE__ */defineComponent({
         onChange: onPageChange
       }), null, 16, ["current-page", "page-size", "class"])) : createCommentVNode("v-if", true)], 2
       /* CLASS */)], 6
-      /* CLASS, STYLE */)), [[_directive_loading, unref(isFetching)]]);
+      /* CLASS, STYLE */)), [[_directive_loading, unref(isFetching)]])], 8, ["disabled"]);
     };
   }
 });

package/config/root-config-provider.vue.js

@@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css';
 import { useColorSchemeProvide } from '../hooks/useColorScheme.js';
 import { useUploadProvide } from '../components/upload-context.js';
 import { containerContextKey } from '../components/container/container.js';
+import { useStackDialogProvide } from '../components/stack-dialog/stack-dialog.js';
 import { ConfigProvider as _ConfigProvider } from '../components/config-provider/index.js';
 
 var stdin_default = /* @__PURE__ */defineComponent({
@@ -62,6 +63,7 @@ var stdin_default = /* @__PURE__ */defineComponent({
     provide(containerContextKey, reactive({
       height: computed(() => `calc(100vh - ${layoutStore.headerHeight}px)`)
     }));
+    useStackDialogProvide();
     return (_ctx, _cache) => {
       const _component_ElConfigProvider = resolveComponent("ElConfigProvider");
       return openBlock(), createBlock(unref(_ConfigProvider), normalizeProps(guardReactiveProps(mergedConfigProviderProps.value)), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosey",
-  "version": "0.3.23",
+  "version": "0.4.1",
   "description": "基于 Vue3 + vite 的后台管理系统框架",
   "type": "module",
   "main": "index.js",