feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+9
View File
@@ -0,0 +1,9 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { DrawerEmits, DrawerInstance, DrawerProps, DrawerPropsPublic, drawerEmits, drawerProps } from "./src/drawer.js";
import { _default } from "./src/drawer.vue.js";
//#region ../../packages/components/drawer/index.d.ts
declare const ElDrawer: SFCWithInstall<typeof _default>;
//#endregion
export { DrawerEmits, DrawerInstance, DrawerProps, DrawerPropsPublic, ElDrawer, ElDrawer as default, drawerEmits, drawerProps };
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../../utils/vue/install.mjs";
import { drawerEmits, drawerProps } from "./src/drawer.mjs";
import drawer_default from "./src/drawer2.mjs";
//#region ../../packages/components/drawer/index.ts
const ElDrawer = withInstall(drawer_default);
//#endregion
export { ElDrawer, ElDrawer as default, drawerEmits, drawerProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Drawer"],"sources":["../../../../../packages/components/drawer/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Drawer from './src/drawer.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElDrawer: SFCWithInstall<typeof Drawer> = withInstall(Drawer)\nexport default ElDrawer\n\nexport * from './src/drawer'\n"],"mappings":";;;;;AAKA,MAAa,WAA0C,YAAYA,eAAO"}
@@ -0,0 +1,75 @@
import { addUnit } from "../../../../utils/dom/style.mjs";
import { clamp, useEventListener, useWindowSize } from "@vueuse/core";
import { computed, onBeforeUnmount, ref, watch } from "vue";
//#region ../../packages/components/drawer/src/composables/useResizable.ts
function useResizable(props, target, emit) {
const { width, height } = useWindowSize();
const isHorizontal = computed(() => ["ltr", "rtl"].includes(props.direction));
const sign = computed(() => ["ltr", "ttb"].includes(props.direction) ? 1 : -1);
const windowSize = computed(() => isHorizontal.value ? width.value : height.value);
const getSize = computed(() => {
return clamp(startSize.value + sign.value * offset.value, 4, windowSize.value);
});
const startSize = ref(0);
const offset = ref(0);
const isResizing = ref(false);
const hasStartedDragging = ref(false);
let startPos = [];
let cleanups = [];
const getActualSize = () => {
const drawerEl = target.value?.closest("[aria-modal=\"true\"]");
if (drawerEl) return isHorizontal.value ? drawerEl.offsetWidth : drawerEl.offsetHeight;
return 100;
};
watch(() => [props.size, props.resizable], () => {
hasStartedDragging.value = false;
startSize.value = 0;
offset.value = 0;
onMouseUp();
});
const onMousedown = (e) => {
if (!props.resizable) return;
if (!hasStartedDragging.value) {
startSize.value = getActualSize();
hasStartedDragging.value = true;
}
startPos = [e.pageX, e.pageY];
isResizing.value = true;
emit("resize-start", e, startSize.value);
cleanups.push(useEventListener(window, "mouseup", onMouseUp), useEventListener(window, "mousemove", onMouseMove));
};
const onMouseMove = (e) => {
const { pageX, pageY } = e;
const offsetX = pageX - startPos[0];
const offsetY = pageY - startPos[1];
offset.value = isHorizontal.value ? offsetX : offsetY;
emit("resize", e, getSize.value);
};
const onMouseUp = (e) => {
if (!isResizing.value) return;
startPos = [];
startSize.value = getSize.value;
offset.value = 0;
isResizing.value = false;
cleanups.forEach((cleanup) => cleanup?.());
cleanups = [];
if (e) emit("resize-end", e, startSize.value);
};
const cleanup = useEventListener(target, "mousedown", onMousedown);
onBeforeUnmount(() => {
cleanup();
onMouseUp();
});
return {
size: computed(() => {
return hasStartedDragging.value ? `${getSize.value}px` : addUnit(props.size);
}),
isResizing,
isHorizontal
};
}
//#endregion
export { useResizable };
//# sourceMappingURL=useResizable.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"useResizable.mjs","names":[],"sources":["../../../../../../../packages/components/drawer/src/composables/useResizable.ts"],"sourcesContent":["import { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { addUnit } from '@element-plus/utils'\nimport { clamp, useEventListener, useWindowSize } from '@vueuse/core'\n\nimport type { Ref, SetupContext } from 'vue'\nimport type { DrawerEmits, DrawerProps } from '../drawer'\n\nexport function useResizable(\n props: DrawerProps & Required<Pick<DrawerProps, 'direction'>>,\n target: Ref<HTMLElement | undefined>,\n emit: SetupContext<DrawerEmits>['emit']\n) {\n const { width, height } = useWindowSize()\n\n const isHorizontal = computed(() => ['ltr', 'rtl'].includes(props.direction))\n const sign = computed(() =>\n ['ltr', 'ttb'].includes(props.direction) ? 1 : -1\n )\n const windowSize = computed(() =>\n isHorizontal.value ? width.value : height.value\n )\n const getSize = computed(() => {\n return clamp(\n startSize.value + sign.value * offset.value,\n 4,\n windowSize.value\n )\n })\n\n const startSize = ref(0)\n const offset = ref(0)\n const isResizing = ref(false)\n const hasStartedDragging = ref(false)\n let startPos: number[] = []\n let cleanups: (() => void)[] = []\n\n const getActualSize = () => {\n const drawerEl = target.value?.closest('[aria-modal=\"true\"]') as HTMLElement\n if (drawerEl) {\n return isHorizontal.value ? drawerEl.offsetWidth : drawerEl.offsetHeight\n }\n return 100\n }\n\n watch(\n () => [props.size, props.resizable] as const,\n () => {\n hasStartedDragging.value = false\n startSize.value = 0\n offset.value = 0\n onMouseUp()\n }\n )\n\n const onMousedown = (e: MouseEvent) => {\n if (!props.resizable) return\n\n if (!hasStartedDragging.value) {\n startSize.value = getActualSize()\n hasStartedDragging.value = true\n }\n\n startPos = [e.pageX, e.pageY]\n isResizing.value = true\n emit('resize-start', e, startSize.value)\n cleanups.push(\n useEventListener(window, 'mouseup', onMouseUp),\n useEventListener(window, 'mousemove', onMouseMove)\n )\n }\n\n const onMouseMove = (e: MouseEvent) => {\n const { pageX, pageY } = e\n const offsetX = pageX - startPos[0]\n const offsetY = pageY - startPos[1]\n offset.value = isHorizontal.value ? offsetX : offsetY\n emit('resize', e, getSize.value)\n }\n\n const onMouseUp = (e?: MouseEvent) => {\n // premature interruption\n // avoid triggering meaningless execution due to watch size/resizable constraints.\n if (!isResizing.value) return\n\n startPos = []\n startSize.value = getSize.value\n offset.value = 0\n isResizing.value = false\n cleanups.forEach((cleanup) => cleanup?.())\n cleanups = []\n if (e) {\n emit('resize-end', e, startSize.value)\n }\n }\n\n const cleanup = useEventListener(target, 'mousedown', onMousedown)\n\n onBeforeUnmount(() => {\n cleanup()\n onMouseUp()\n })\n\n return {\n size: computed(() => {\n return hasStartedDragging.value\n ? `${getSize.value}px`\n : addUnit(props.size)\n }),\n isResizing,\n isHorizontal,\n }\n}\n"],"mappings":";;;;;AAOA,SAAgB,aACd,OACA,QACA,MACA;CACA,MAAM,EAAE,OAAO,WAAW,eAAe;CAEzC,MAAM,eAAe,eAAe,CAAC,OAAO,MAAM,CAAC,SAAS,MAAM,UAAU,CAAC;CAC7E,MAAM,OAAO,eACX,CAAC,OAAO,MAAM,CAAC,SAAS,MAAM,UAAU,GAAG,IAAI,GAChD;CACD,MAAM,aAAa,eACjB,aAAa,QAAQ,MAAM,QAAQ,OAAO,MAC3C;CACD,MAAM,UAAU,eAAe;AAC7B,SAAO,MACL,UAAU,QAAQ,KAAK,QAAQ,OAAO,OACtC,GACA,WAAW,MACZ;GACD;CAEF,MAAM,YAAY,IAAI,EAAE;CACxB,MAAM,SAAS,IAAI,EAAE;CACrB,MAAM,aAAa,IAAI,MAAM;CAC7B,MAAM,qBAAqB,IAAI,MAAM;CACrC,IAAI,WAAqB,EAAE;CAC3B,IAAI,WAA2B,EAAE;CAEjC,MAAM,sBAAsB;EAC1B,MAAM,WAAW,OAAO,OAAO,QAAQ,wBAAsB;AAC7D,MAAI,SACF,QAAO,aAAa,QAAQ,SAAS,cAAc,SAAS;AAE9D,SAAO;;AAGT,aACQ,CAAC,MAAM,MAAM,MAAM,UAAU,QAC7B;AACJ,qBAAmB,QAAQ;AAC3B,YAAU,QAAQ;AAClB,SAAO,QAAQ;AACf,aAAW;GAEd;CAED,MAAM,eAAe,MAAkB;AACrC,MAAI,CAAC,MAAM,UAAW;AAEtB,MAAI,CAAC,mBAAmB,OAAO;AAC7B,aAAU,QAAQ,eAAe;AACjC,sBAAmB,QAAQ;;AAG7B,aAAW,CAAC,EAAE,OAAO,EAAE,MAAM;AAC7B,aAAW,QAAQ;AACnB,OAAK,gBAAgB,GAAG,UAAU,MAAM;AACxC,WAAS,KACP,iBAAiB,QAAQ,WAAW,UAAU,EAC9C,iBAAiB,QAAQ,aAAa,YAAY,CACnD;;CAGH,MAAM,eAAe,MAAkB;EACrC,MAAM,EAAE,OAAO,UAAU;EACzB,MAAM,UAAU,QAAQ,SAAS;EACjC,MAAM,UAAU,QAAQ,SAAS;AACjC,SAAO,QAAQ,aAAa,QAAQ,UAAU;AAC9C,OAAK,UAAU,GAAG,QAAQ,MAAM;;CAGlC,MAAM,aAAa,MAAmB;AAGpC,MAAI,CAAC,WAAW,MAAO;AAEvB,aAAW,EAAE;AACb,YAAU,QAAQ,QAAQ;AAC1B,SAAO,QAAQ;AACf,aAAW,QAAQ;AACnB,WAAS,SAAS,YAAY,WAAW,CAAC;AAC1C,aAAW,EAAE;AACb,MAAI,EACF,MAAK,cAAc,GAAG,UAAU,MAAM;;CAI1C,MAAM,UAAU,iBAAiB,QAAQ,aAAa,YAAY;AAElE,uBAAsB;AACpB,WAAS;AACT,aAAW;GACX;AAEF,QAAO;EACL,MAAM,eAAe;AACnB,UAAO,mBAAmB,QACtB,GAAG,QAAQ,MAAM,MACjB,QAAQ,MAAM,KAAK;IACvB;EACF;EACA;EACD"}
+121
View File
@@ -0,0 +1,121 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { DialogBeforeCloseFn, DialogProps, DialogTransition } from "../../dialog/src/dialog.js";
import "../../dialog/index.js";
import { _default } from "./drawer.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/drawer/src/drawer.d.ts
interface DrawerProps extends DialogProps {
/**
* @description Set the direction in which the Drawer opens
*/
direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
/**
* @description Whether to enable the resizable function for the drawer
*/
resizable?: boolean;
/**
* @description The size of the Drawer form, when using the number type, is measured in pixels. When using the string type, please pass in 'x%'; otherwise, it will be interpreted as the number type
*/
size?: string | number;
/**
* @description You can remove the title from the drawer, so that your drawer will have more space on the screen. If you want to be visited, you must set the title attribute.
*/
withHeader?: boolean;
/**
* @description The fade-in and fade-out animation switch of the mask layer
*/
modalFade?: boolean;
/**
* @description Help assistive technologies such as screen readers identify content hierarchies
*/
headerAriaLevel?: string;
}
/**
* @deprecated Removed after 3.0.0, Use `DrawerProps` instead.
*/
declare const drawerProps: {
readonly direction: EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
readonly resizable: BooleanConstructor;
readonly size: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
readonly withHeader: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modalFade: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly headerAriaLevel: EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
readonly appendToBody: BooleanConstructor;
readonly appendTo: EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown, "body", boolean>;
readonly beforeClose: {
readonly type: vue.PropType<DialogBeforeCloseFn>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly destroyOnClose: BooleanConstructor;
readonly closeOnClickModal: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly closeOnPressEscape: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly lockScroll: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modal: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly modalPenetrable: BooleanConstructor;
readonly openDelay: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly closeDelay: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly top: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly modelValue: BooleanConstructor;
readonly modalClass: StringConstructor;
readonly headerClass: StringConstructor;
readonly bodyClass: StringConstructor;
readonly footerClass: StringConstructor;
readonly width: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly zIndex: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly trapFocus: BooleanConstructor;
readonly transition: EpPropFinalized<(new (...args: any[]) => string | vue.TransitionProps) | (() => DialogTransition) | (((new (...args: any[]) => string | vue.TransitionProps) | (() => DialogTransition)) | null)[], unknown, unknown, undefined, boolean>;
readonly center: BooleanConstructor;
readonly alignCenter: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly closeIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly draggable: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly overflow: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly fullscreen: BooleanConstructor;
readonly showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly ariaLevel: EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `DrawerProps` instead.
*/
type DrawerPropsPublic = ExtractPublicPropTypes<typeof drawerProps>;
declare const drawerEmits: {
'resize-start': (evt: MouseEvent, size: number) => boolean;
resize: (evt: MouseEvent, size: number) => boolean;
'resize-end': (evt: MouseEvent, size: number) => boolean;
open: () => boolean;
opened: () => boolean;
close: () => boolean;
closed: () => boolean;
"update:modelValue": (value: boolean) => boolean;
openAutoFocus: () => boolean;
closeAutoFocus: () => boolean;
};
type DrawerEmits = typeof drawerEmits;
type DrawerInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { DrawerEmits, DrawerInstance, DrawerProps, DrawerPropsPublic, drawerEmits, drawerProps };
+47
View File
@@ -0,0 +1,47 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
import { dialogEmits, dialogProps } from "../../dialog/src/dialog.mjs";
//#region ../../packages/components/drawer/src/drawer.ts
/**
* @deprecated Removed after 3.0.0, Use `DrawerProps` instead.
*/
const drawerProps = buildProps({
...dialogProps,
direction: {
type: String,
default: "rtl",
values: [
"ltr",
"rtl",
"ttb",
"btt"
]
},
resizable: Boolean,
size: {
type: [String, Number],
default: "30%"
},
withHeader: {
type: Boolean,
default: true
},
modalFade: {
type: Boolean,
default: true
},
headerAriaLevel: {
type: String,
default: "2"
}
});
const drawerEmits = {
...dialogEmits,
"resize-start": (evt, size) => evt instanceof MouseEvent && typeof size === "number",
resize: (evt, size) => evt instanceof MouseEvent && typeof size === "number",
"resize-end": (evt, size) => evt instanceof MouseEvent && typeof size === "number"
};
//#endregion
export { drawerEmits, drawerProps };
//# sourceMappingURL=drawer.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"drawer.mjs","names":[],"sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { dialogEmits, dialogProps } from '@element-plus/components/dialog'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Drawer from './drawer.vue'\nimport type { DialogProps } from '@element-plus/components/dialog'\n\nexport interface DrawerProps extends DialogProps {\n /**\n * @description Set the direction in which the Drawer opens\n */\n direction?: 'ltr' | 'rtl' | 'ttb' | 'btt'\n /**\n * @description Whether to enable the resizable function for the drawer\n */\n resizable?: boolean\n /**\n * @description The size of the Drawer form, when using the number type, is measured in pixels. When using the string type, please pass in 'x%'; otherwise, it will be interpreted as the number type\n */\n size?: string | number\n /**\n * @description You can remove the title from the drawer, so that your drawer will have more space on the screen. If you want to be visited, you must set the title attribute.\n */\n withHeader?: boolean\n /**\n * @description The fade-in and fade-out animation switch of the mask layer\n */\n modalFade?: boolean\n /**\n * @description Help assistive technologies such as screen readers identify content hierarchies\n */\n headerAriaLevel?: string\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `DrawerProps` instead.\n */\nexport const drawerProps = buildProps({\n ...dialogProps,\n direction: {\n type: String,\n default: 'rtl',\n values: ['ltr', 'rtl', 'ttb', 'btt'],\n },\n resizable: Boolean,\n size: {\n type: [String, Number],\n default: '30%',\n },\n withHeader: {\n type: Boolean,\n default: true,\n },\n modalFade: {\n type: Boolean,\n default: true,\n },\n headerAriaLevel: {\n type: String,\n default: '2',\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `DrawerProps` instead.\n */\nexport type DrawerPropsPublic = ExtractPublicPropTypes<typeof drawerProps>\n\nexport const drawerEmits = {\n ...dialogEmits,\n 'resize-start': (evt: MouseEvent, size: number) =>\n evt instanceof MouseEvent && typeof size === 'number',\n resize: (evt: MouseEvent, size: number) =>\n evt instanceof MouseEvent && typeof size === 'number',\n 'resize-end': (evt: MouseEvent, size: number) =>\n evt instanceof MouseEvent && typeof size === 'number',\n}\n\nexport type DrawerEmits = typeof drawerEmits\n\nexport type DrawerInstance = InstanceType<typeof Drawer> & unknown\n"],"mappings":";;;;;;;AAqCA,MAAa,cAAc,WAAW;CACpC,GAAG;CACH,WAAW;EACT,MAAM;EACN,SAAS;EACT,QAAQ;GAAC;GAAO;GAAO;GAAO;GAAM;EACrC;CACD,WAAW;CACX,MAAM;EACJ,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CACD,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,WAAW;EACT,MAAM;EACN,SAAS;EACV;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAOX,MAAa,cAAc;CACzB,GAAG;CACH,iBAAiB,KAAiB,SAChC,eAAe,cAAc,OAAO,SAAS;CAC/C,SAAS,KAAiB,SACxB,eAAe,cAAc,OAAO,SAAS;CAC/C,eAAe,KAAiB,SAC9B,eAAe,cAAc,OAAO,SAAS;CAChD"}
@@ -0,0 +1,76 @@
import { DialogTransition } from "../../dialog/src/dialog.js";
import "../../dialog/index.js";
import { DrawerProps } from "./drawer.js";
import * as vue from "vue";
//#region ../../packages/components/drawer/src/drawer.vue.d.ts
declare var __VLS_37: {
close: () => void;
titleId: string;
titleClass: string;
}, __VLS_39: {}, __VLS_52: {}, __VLS_54: {};
type __VLS_Slots = {} & {
header?: (props: typeof __VLS_37) => any;
} & {
title?: (props: typeof __VLS_39) => any;
} & {
default?: (props: typeof __VLS_52) => any;
} & {
footer?: (props: typeof __VLS_54) => any;
};
declare const __VLS_base: vue.DefineComponent<DrawerProps, {
handleClose: () => void; /** @deprecated Will be removed after 2.14.0. */
afterEnter: () => void; /** @deprecated Will be removed after 2.14.0. */
afterLeave: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: () => void;
resize: (evt: MouseEvent, size: number) => void;
"update:modelValue": (value: boolean) => void;
open: () => void;
opened: () => void;
closed: () => void;
openAutoFocus: () => void;
closeAutoFocus: () => void;
"resize-start": (evt: MouseEvent, size: number) => void;
"resize-end": (evt: MouseEvent, size: number) => void;
}, string, vue.PublicProps, Readonly<DrawerProps> & Readonly<{
onClose?: (() => any) | undefined;
onResize?: ((evt: MouseEvent, size: number) => any) | undefined;
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
onOpen?: (() => any) | undefined;
onOpened?: (() => any) | undefined;
onClosed?: (() => any) | undefined;
onOpenAutoFocus?: (() => any) | undefined;
onCloseAutoFocus?: (() => any) | undefined;
"onResize-start"?: ((evt: MouseEvent, size: number) => any) | undefined;
"onResize-end"?: ((evt: MouseEvent, size: number) => any) | undefined;
}>, {
appendTo: string | HTMLElement;
title: string;
size: string | number;
transition: DialogTransition;
direction: "ltr" | "rtl" | "ttb" | "btt";
overflow: boolean;
closeOnClickModal: boolean;
closeOnPressEscape: boolean;
lockScroll: boolean;
modal: boolean;
openDelay: number;
closeDelay: number;
headerAriaLevel: string;
alignCenter: boolean;
draggable: boolean;
showClose: boolean;
ariaLevel: string;
withHeader: boolean;
modalFade: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,182 @@
import { ElTeleport } from "../../teleport/index.mjs";
import { useDeprecated } from "../../../hooks/use-deprecated/index.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import focus_trap_default from "../../focus-trap/index.mjs";
import { ElOverlay } from "../../overlay/index.mjs";
import { useDialog } from "../../dialog/src/use-dialog.mjs";
import { drawerEmits, drawerProps } from "./drawer.mjs";
import { useResizable } from "./composables/useResizable.mjs";
import { Close } from "@element-plus/icons-vue";
import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, vShow, withCtx, withDirectives, withModifiers } from "vue";
//#region ../../packages/components/drawer/src/drawer.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = [
"aria-label",
"aria-labelledby",
"aria-describedby"
];
const _hoisted_2 = ["id", "aria-level"];
const _hoisted_3 = ["aria-label"];
const _hoisted_4 = ["id"];
var drawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElDrawer",
inheritAttrs: false,
__name: "drawer",
props: drawerProps,
emits: drawerEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = useSlots();
useDeprecated({
scope: "el-drawer",
from: "the title slot",
replacement: "the header slot",
version: "3.0.0",
ref: "https://element-plus.org/en-US/component/drawer.html#slots"
}, computed(() => !!slots.title));
const drawerRef = ref();
const focusStartRef = ref();
const draggerRef = ref();
const ns = useNamespace("drawer");
const { t } = useLocale();
const { afterEnter, afterLeave, beforeLeave, visible, rendered, titleId, bodyId, zIndex, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onFocusoutPrevented, onCloseRequested, handleClose } = useDialog(props, drawerRef);
const { isHorizontal, size, isResizing } = useResizable(props, draggerRef, emit);
const penetrable = computed(() => props.modalPenetrable && !props.modal);
__expose({
handleClose,
afterEnter,
afterLeave
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTeleport), {
to: __props.appendTo,
disabled: __props.appendTo !== "body" ? false : !__props.appendToBody
}, {
default: withCtx(() => [createVNode(Transition, {
name: unref(ns).b("fade"),
onAfterEnter: unref(afterEnter),
onAfterLeave: unref(afterLeave),
onBeforeLeave: unref(beforeLeave),
persisted: ""
}, {
default: withCtx(() => [withDirectives(createVNode(unref(ElOverlay), {
mask: __props.modal,
"overlay-class": [
unref(ns).is("drawer"),
__props.modalClass ?? "",
`${unref(ns).namespace.value}-modal-drawer`,
unref(ns).is("penetrable", penetrable.value)
],
"z-index": unref(zIndex),
onClick: unref(onModalClick)
}, {
default: withCtx(() => [createVNode(unref(focus_trap_default), {
loop: "",
trapped: unref(visible),
"focus-trap-el": drawerRef.value,
"focus-start-el": focusStartRef.value,
onFocusAfterTrapped: unref(onOpenAutoFocus),
onFocusAfterReleased: unref(onCloseAutoFocus),
onFocusoutPrevented: unref(onFocusoutPrevented),
onReleaseRequested: unref(onCloseRequested)
}, {
default: withCtx(() => [createElementVNode("div", mergeProps({
ref_key: "drawerRef",
ref: drawerRef,
"aria-modal": "true",
"aria-label": __props.title || void 0,
"aria-labelledby": !__props.title ? unref(titleId) : void 0,
"aria-describedby": unref(bodyId)
}, _ctx.$attrs, {
class: [
unref(ns).b(),
__props.direction,
unref(visible) && "open",
unref(ns).is("dragging", unref(isResizing))
],
style: { [unref(isHorizontal) ? "width" : "height"]: unref(size) },
role: "dialog",
onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
}), [
createElementVNode("span", {
ref_key: "focusStartRef",
ref: focusStartRef,
class: normalizeClass(unref(ns).e("sr-focus")),
tabindex: "-1"
}, null, 2),
__props.withHeader ? (openBlock(), createElementBlock("header", {
key: 0,
class: normalizeClass([unref(ns).e("header"), __props.headerClass])
}, [!_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
key: 0,
close: unref(handleClose),
titleId: unref(titleId),
titleClass: unref(ns).e("title")
}, () => [createElementVNode("span", {
id: unref(titleId),
role: "heading",
"aria-level": __props.headerAriaLevel,
class: normalizeClass(unref(ns).e("title"))
}, toDisplayString(__props.title), 11, _hoisted_2)]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [createCommentVNode(" DEPRECATED SLOT ")]), __props.showClose ? (openBlock(), createElementBlock("button", {
key: 2,
"aria-label": unref(t)("el.drawer.close"),
class: normalizeClass(unref(ns).e("close-btn")),
type: "button",
onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClose) && unref(handleClose)(...args))
}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(ns).e("close")) }, {
default: withCtx(() => [createVNode(unref(Close))]),
_: 1
}, 8, ["class"])], 10, _hoisted_3)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
unref(rendered) ? (openBlock(), createElementBlock("div", {
key: 1,
id: unref(bodyId),
class: normalizeClass([unref(ns).e("body"), __props.bodyClass])
}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_4)) : createCommentVNode("v-if", true),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass([unref(ns).e("footer"), __props.footerClass])
}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("v-if", true),
__props.resizable ? (openBlock(), createElementBlock("div", {
key: 3,
ref_key: "draggerRef",
ref: draggerRef,
style: normalizeStyle({ zIndex: unref(zIndex) }),
class: normalizeClass(unref(ns).e("dragger"))
}, null, 6)) : createCommentVNode("v-if", true)
], 16, _hoisted_1)]),
_: 3
}, 8, [
"trapped",
"focus-trap-el",
"focus-start-el",
"onFocusAfterTrapped",
"onFocusAfterReleased",
"onFocusoutPrevented",
"onReleaseRequested"
])]),
_: 3
}, 8, [
"mask",
"overlay-class",
"z-index",
"onClick"
]), [[vShow, unref(visible)]])]),
_: 3
}, 8, [
"name",
"onAfterEnter",
"onAfterLeave",
"onBeforeLeave"
])]),
_: 3
}, 8, ["to", "disabled"]);
};
}
});
//#endregion
export { drawer_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=drawer.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import drawer_vue_vue_type_script_setup_true_lang_default from "./drawer.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/drawer/src/drawer.vue
var drawer_default = drawer_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { drawer_default as default };
//# sourceMappingURL=drawer2.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
import "../../base/style/css.mjs";
import "../../overlay/style/css.mjs";
import "element-plus/theme-chalk/el-drawer.css";
@@ -0,0 +1,3 @@
import "../../base/style/index.mjs";
import "../../overlay/style/index.mjs";
import "element-plus/theme-chalk/src/drawer.scss";