cosey 0.7.4 → 0.7.6

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

@@ -1,11 +1,16 @@
-import { drawerEmits } from 'element-plus';
-import { type ExtractPropTypes, PropType, type EmitFn } from 'vue';
-import { type FormDialogWidth, type FormDialogSlots } from '../form-dialog';
-export declare const formDrawerProps: {
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<FormDialogWidth>;
+        type: import("vue").PropType<import("..").FormDialogWidth>;
         default: string;
     };
+    closeOnClickModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeOnPressEscape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     confirmText: {
         type: StringConstructor;
         default: string;
@@ -15,10 +20,10 @@ export declare const formDrawerProps: {
         default: string;
     };
     confirmProps: {
-        type: PropType<import("element-plus").ButtonProps>;
+        type: import("vue").PropType<import("element-plus").ButtonProps>;
     };
     cancelProps: {
-        type: PropType<import("element-plus").ButtonProps>;
+        type: import("vue").PropType<import("element-plus").ButtonProps>;
     };
     hideConfirm: {
         type: BooleanConstructor;
@@ -27,7 +32,7 @@ export declare const formDrawerProps: {
         type: BooleanConstructor;
     };
     direction: {
-        readonly type: PropType<"ltr" | "rtl" | "ttb" | "btt">;
+        readonly type: import("vue").PropType<"ltr" | "rtl" | "ttb" | "btt">;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -36,7 +41,7 @@ export declare const formDrawerProps: {
     };
     resizable: BooleanConstructor;
     withHeader: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -44,7 +49,7 @@ export declare const formDrawerProps: {
         readonly default: true;
     };
     modalFade: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -52,7 +57,7 @@ export declare const formDrawerProps: {
         readonly default: true;
     };
     headerAriaLevel: {
-        readonly type: PropType<string>;
+        readonly type: import("vue").PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -61,7 +66,7 @@ export declare const formDrawerProps: {
     };
     appendToBody: BooleanConstructor;
     appendTo: {
-        readonly type: PropType<string | HTMLElement>;
+        readonly type: import("vue").PropType<string | HTMLElement>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -69,30 +74,225 @@ export declare const formDrawerProps: {
         readonly default: "body";
     };
     beforeClose: {
-        readonly type: PropType<import("element-plus").DialogBeforeCloseFn>;
+        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: PropType<boolean>;
+    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;
+    };
+    modalPenetrable: BooleanConstructor;
+    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;
+    transition: {
+        readonly type: import("vue").PropType<import("element-plus").DialogTransition>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    center: BooleanConstructor;
+    alignCenter: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    closeIcon: {
+        readonly type: import("vue").PropType<string | import("vue").Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    draggable: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    overflow: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    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";
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<import("..").FormDialogWidth>;
+        default: string;
+    };
+    closeOnClickModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closeOnPressEscape: {
-        readonly type: PropType<boolean>;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmProps: {
+        type: import("vue").PropType<import("element-plus").ButtonProps>;
+    };
+    cancelProps: {
+        type: import("vue").PropType<import("element-plus").ButtonProps>;
+    };
+    hideConfirm: {
+        type: BooleanConstructor;
+    };
+    hideCancel: {
+        type: BooleanConstructor;
+    };
+    direction: {
+        readonly type: import("vue").PropType<"ltr" | "rtl" | "ttb" | "btt">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "rtl";
+    };
+    resizable: BooleanConstructor;
+    withHeader: {
+        readonly type: import("vue").PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    modalFade: {
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     } & {
         readonly default: true;
     };
+    headerAriaLevel: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+    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;
     lockScroll: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -100,7 +300,7 @@ export declare const formDrawerProps: {
         readonly default: true;
     };
     modal: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -109,7 +309,7 @@ export declare const formDrawerProps: {
     };
     modalPenetrable: BooleanConstructor;
     openDelay: {
-        readonly type: PropType<number>;
+        readonly type: import("vue").PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -117,7 +317,7 @@ export declare const formDrawerProps: {
         readonly default: 0;
     };
     closeDelay: {
-        readonly type: PropType<number>;
+        readonly type: import("vue").PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -125,7 +325,7 @@ export declare const formDrawerProps: {
         readonly default: 0;
     };
     top: {
-        readonly type: PropType<string>;
+        readonly type: import("vue").PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -136,20 +336,20 @@ export declare const formDrawerProps: {
     bodyClass: StringConstructor;
     footerClass: StringConstructor;
     width: {
-        readonly type: PropType<string | number>;
+        readonly type: import("vue").PropType<string | number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     zIndex: {
-        readonly type: PropType<number>;
+        readonly type: import("vue").PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     trapFocus: BooleanConstructor;
     transition: {
-        readonly type: PropType<import("element-plus").DialogTransition>;
+        readonly type: import("vue").PropType<import("element-plus").DialogTransition>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -158,7 +358,7 @@ export declare const formDrawerProps: {
     };
     center: BooleanConstructor;
     alignCenter: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -166,13 +366,13 @@ export declare const formDrawerProps: {
         readonly default: undefined;
     };
     closeIcon: {
-        readonly type: PropType<string | import("vue").Component>;
+        readonly type: import("vue").PropType<string | import("vue").Component>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     draggable: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -180,7 +380,7 @@ export declare const formDrawerProps: {
         readonly default: undefined;
     };
     overflow: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -189,7 +389,7 @@ export declare const formDrawerProps: {
     };
     fullscreen: BooleanConstructor;
     showClose: {
-        readonly type: PropType<boolean>;
+        readonly type: import("vue").PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -197,7 +397,7 @@ export declare const formDrawerProps: {
         readonly default: true;
     };
     title: {
-        readonly type: PropType<string>;
+        readonly type: import("vue").PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -205,22 +405,52 @@ export declare const formDrawerProps: {
         readonly default: "";
     };
     ariaLevel: {
-        readonly type: PropType<string>;
+        readonly type: import("vue").PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     } & {
         readonly default: "2";
     };
-};
-export type FormDrawerProps = ExtractPropTypes<typeof formDrawerProps>;
-export interface FormDrawerSlots extends FormDialogSlots {
-}
-export interface FormDrawerEmits extends /* @vue-ignore */ EmitFn<typeof drawerEmits> {
-}
-export interface ElDrawerExpose {
-    handleClose: () => void;
-}
-export interface FormDrawerExpose extends ElDrawerExpose {
-}
-export declare const elFormDrawerExposeKeys: string[];
+}>> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
+    onOpenAutoFocus?: (() => any) | undefined;
+    onCloseAutoFocus?: (() => any) | undefined;
+}>, {
+    direction: "ltr" | "rtl" | "ttb" | "btt";
+    overflow: boolean;
+    transition: import("element-plus").DialogTransition;
+    center: boolean;
+    size: import("..").FormDialogWidth;
+    title: string;
+    closeOnPressEscape: boolean;
+    draggable: boolean;
+    appendToBody: boolean;
+    appendTo: string | HTMLElement;
+    modelValue: boolean;
+    showClose: boolean;
+    resizable: boolean;
+    confirmText: string;
+    cancelText: string;
+    hideConfirm: boolean;
+    hideCancel: boolean;
+    closeOnClickModal: boolean;
+    destroyOnClose: boolean;
+    lockScroll: boolean;
+    modal: boolean;
+    modalPenetrable: boolean;
+    openDelay: number;
+    closeDelay: number;
+    trapFocus: boolean;
+    headerAriaLevel: string;
+    alignCenter: boolean;
+    fullscreen: boolean;
+    ariaLevel: string;
+    withHeader: boolean;
+    modalFade: boolean;
+}, import("vue").SlotsType<import("..").FormDialogSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/form-drawer/form-drawer.js

@@ -1,14 +1,57 @@
-import { drawerProps } from 'element-plus';
-import { formDialogButtonProps } from '../form-dialog/form-dialog.js';
+import { defineComponent, computed, createVNode, mergeProps, h } from 'vue';
+import { formDrawerEmits, formDrawerSlots, formDrawerProps, elFormDrawerExposeKeys } from './form-drawer.api.js';
+import '../form/index.js';
+import '../form-dialog/index.js';
+import { ElDrawer } from 'element-plus';
+import { useBubbleTemplate } from '../form/useBubbleTemplate.js';
+import { useFormDialogWidth } from '../form-dialog/useFormDialogWidth.js';
 
-const formDrawerProps = {
-  ...drawerProps,
-  ...formDialogButtonProps,
-  size: {
-    type: [String, Number],
-    default: "fit-content"
+var stdin_default = defineComponent({
+  name: "CoFormDrawer",
+  props: formDrawerProps,
+  slots: formDrawerSlots,
+  emits: formDrawerEmits,
+  setup(props, {
+    slots,
+    emit,
+    expose: _expose
+  }) {
+    const {
+      visible,
+      handleOpen,
+      handleClosed,
+      expose,
+      buttonTemplate,
+      elPopupRef
+    } = useBubbleTemplate({
+      props,
+      emit,
+      slots,
+      exposeKeys: elFormDrawerExposeKeys
+    });
+    const size = useFormDialogWidth(computed(() => props.size));
+    _expose(expose);
+    return () => {
+      return createVNode(ElDrawer, mergeProps({
+        "ref": elPopupRef
+      }, props, {
+        "modelValue": visible.value,
+        "onUpdate:modelValue": $event => visible.value = $event,
+        "style": {
+          maxWidth: "100vw"
+        },
+        "size": size.value,
+        "append-to-body": true,
+        "onOpen": handleOpen,
+        "onClosed": handleClosed
+      }), {
+        ...slots,
+        footer: () => {
+          return slots.footer ? slots.footer({}) : h(buttonTemplate);
+        }
+      });
+    };
   }
-};
-const elFormDrawerExposeKeys = ["handleClose"];
+});
 
-export { elFormDrawerExposeKeys, formDrawerProps };
+export { stdin_default as default };