@wfrog/vc-ui 1.0.0

package/dist/es/components/dialog-upload-images/dialog-upload-images.vue.d.ts

@@ -0,0 +1,19 @@
+import { IDialogUploadImagesProps, IUploadFile } from './dialog-upload-images';
+declare const _default: import('vue').DefineComponent<IDialogUploadImagesProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    close: () => any;
+    error: (message: string) => any;
+    "update:modelValue": (val: (File | IUploadFile)[]) => any;
+    "update:visible": (val: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<IDialogUploadImagesProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onError?: ((message: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: (File | IUploadFile)[]) => any) | undefined;
+    "onUpdate:visible"?: ((val: boolean) => any) | undefined;
+}>, {
+    destroyOnClose: boolean;
+    maxSize: number;
+    beforeUpload: (file: File) => boolean;
+    beforeRemove: (file: File | IUploadFile, fileList: (File | IUploadFile)[]) => boolean;
+    limit: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/es/components/dialog-upload-images/index.css

@@ -0,0 +1,62 @@
+/* source: src/components/dialog-upload-images/dialog-upload-images.vue */
+.el-upload{--el-upload-dragger-padding-horizontal:10px;--el-upload-dragger-padding-vertical:40px;--el-upload-list-picture-card-size:var(--el-upload-picture-card-size);--el-upload-picture-card-size:148px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center;outline:none}.el-upload.is-disabled{cursor:not-allowed}.el-upload.is-disabled:focus{border-color:var(--el-border-color-darker);color:inherit}.el-upload.is-disabled:focus .el-upload-dragger{border-color:var(--el-border-color-darker)}.el-upload.is-disabled .el-upload-dragger{background-color:var(--el-disabled-bg-color);cursor:not-allowed}.el-upload.is-disabled .el-upload-dragger .el-upload__text{color:var(--el-text-color-placeholder)}.el-upload.is-disabled .el-upload-dragger .el-upload__text em{color:var(--el-disabled-text-color)}.el-upload.is-disabled .el-upload-dragger:hover{border-color:var(--el-border-color-darker)}.el-upload__input{display:none}.el-upload__tip{color:var(--el-text-color-regular);font-size:12px;margin-top:7px}.el-upload iframe{filter:alpha(opacity=0);left:0;opacity:0;position:absolute;top:0;z-index:-1}.el-upload--picture-card{align-items:center;background-color:var(--el-fill-color-lighter);border:1px dashed var(--el-border-color-darker);border-radius:6px;box-sizing:border-box;cursor:pointer;display:inline-flex;height:var(--el-upload-picture-card-size);justify-content:center;vertical-align:top;width:var(--el-upload-picture-card-size)}.el-upload--picture-card>i{color:var(--el-text-color-secondary);font-size:28px}.el-upload--picture-card:hover{border-color:var(--el-color-primary);color:var(--el-color-primary)}.el-upload.is-drag{display:block}.el-upload:focus{border-color:var(--el-color-primary);color:var(--el-color-primary)}.el-upload:focus .el-upload-dragger{border-color:var(--el-color-primary)}.el-upload-dragger{background-color:var(--el-fill-color-blank);border:1px dashed var(--el-border-color);border-radius:6px;box-sizing:border-box;cursor:pointer;overflow:hidden;padding:var(--el-upload-dragger-padding-vertical) var(--el-upload-dragger-padding-horizontal);position:relative;text-align:center}.el-upload-dragger .el-icon--upload{color:var(--el-text-color-placeholder);font-size:67px;line-height:50px;margin-bottom:16px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:var(--el-border);margin-top:7px;padding-top:5px}.el-upload-dragger .el-upload__text{color:var(--el-text-color-regular);font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:var(--el-color-primary);font-style:normal}.el-upload-dragger:hover{border-color:var(--el-color-primary)}.el-upload-dragger.is-dragover{background-color:var(--el-color-primary-light-9);border:2px dashed var(--el-color-primary);padding:calc(var(--el-upload-dragger-padding-vertical) - 1px) calc(var(--el-upload-dragger-padding-horizontal) - 1px)}.el-upload-list{--el-upload-dragger-padding-horizontal:10px;--el-upload-dragger-padding-vertical:40px;--el-upload-list-picture-card-size:var(--el-upload-picture-card-size);--el-upload-picture-card-size:148px;list-style:none;margin:10px 0 0;padding:0;position:relative}.el-upload-list__item{border-radius:4px;box-sizing:border-box;color:var(--el-text-color-regular);font-size:14px;margin-bottom:5px;position:relative;transition:all .5s cubic-bezier(.55,0,.1,1);width:100%}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;right:0;top:-13px}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-icon--upload-success{color:var(--el-color-success)}.el-upload-list__item .el-icon--close{color:var(--el-text-color-regular);cursor:pointer;display:none;opacity:.75;position:absolute;right:5px;top:50%;transform:translateY(-50%);transition:opacity var(--el-transition-duration)}.el-upload-list__item .el-icon--close:hover{color:var(--el-color-primary);opacity:1}.el-upload-list__item .el-icon--close-tip{color:var(--el-color-primary);cursor:pointer;display:none;font-size:12px;font-style:normal;opacity:1;position:absolute;right:5px;top:1px}.el-upload-list__item:hover{background-color:var(--el-fill-color-light)}.el-upload-list__item:hover .el-icon--close{display:inline-flex}.el-upload-list__item:hover .el-progress__text{display:none}.el-upload-list__item .el-upload-list__item-info{display:inline-flex;flex-direction:column;justify-content:center;margin-left:4px;width:calc(100% - 30px)}.el-upload-list__item.is-success .el-upload-list__item-status-label{display:inline-flex}.el-upload-list__item.is-success .el-upload-list__item-name:focus,.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:var(--el-color-primary);cursor:pointer}.el-upload-list__item.is-success:focus:not(:hover) .el-icon--close-tip{display:inline-block}.el-upload-list__item.is-success:active,.el-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.el-upload-list__item.is-success:active .el-icon--close-tip,.el-upload-list__item.is-success:not(.focusing):focus .el-icon--close-tip{display:none}.el-upload-list__item.is-success:focus .el-upload-list__item-status-label,.el-upload-list__item.is-success:hover .el-upload-list__item-status-label{display:none;opacity:0}.el-upload-list__item-name{align-items:center;color:var(--el-text-color-regular);display:inline-flex;font-size:var(--el-font-size-base);padding:0 4px;text-align:center;transition:color var(--el-transition-duration)}.el-upload-list__item-name .el-icon{color:var(--el-text-color-secondary);margin-right:6px}.el-upload-list__item-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-upload-list__item-status-label{align-items:center;display:none;height:100%;justify-content:center;line-height:inherit;position:absolute;right:5px;top:0;transition:opacity var(--el-transition-duration)}.el-upload-list__item-delete{color:var(--el-text-color-regular);display:none;font-size:12px;position:absolute;right:10px;top:0}.el-upload-list__item-delete:hover{color:var(--el-color-primary)}.el-upload-list--picture-card{display:inline-flex;flex-wrap:wrap;margin:0}.el-upload-list--picture-card .el-upload-list__item{background-color:var(--el-fill-color-blank);border:1px solid var(--el-border-color);border-radius:6px;box-sizing:border-box;display:inline-flex;height:var(--el-upload-list-picture-card-size);margin:0 8px 8px 0;overflow:hidden;padding:0;width:var(--el-upload-list-picture-card-size)}.el-upload-list--picture-card .el-upload-list__item .el-icon--check,.el-upload-list--picture-card .el-upload-list__item .el-icon--circle-check{color:#ffffff}.el-upload-list--picture-card .el-upload-list__item .el-icon--close{display:none}.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:block;opacity:0}.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture-card .el-upload-list__item .el-upload-list__item-name{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{background:var(--el-color-success);height:24px;right:-15px;text-align:center;top:-6px;transform:rotate(45deg);width:40px}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg)}.el-upload-list--picture-card .el-upload-list__item-actions{align-items:center;background-color:var(--el-overlay-color-lighter);color:#fff;cursor:default;display:inline-flex;font-size:20px;height:100%;justify-content:center;left:0;opacity:0;position:absolute;top:0;transition:opacity var(--el-transition-duration);width:100%}.el-upload-list--picture-card .el-upload-list__item-actions span{cursor:pointer;display:none}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:16px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{color:inherit;font-size:inherit;position:static}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-flex}.el-upload-list--picture-card .el-progress{bottom:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{align-items:center;background-color:var(--el-fill-color-blank);border:1px solid var(--el-border-color);border-radius:6px;box-sizing:border-box;display:flex;margin-top:10px;overflow:hidden;padding:10px;z-index:0}.el-upload-list--picture .el-upload-list__item .el-icon--check,.el-upload-list--picture .el-upload-list__item .el-icon--circle-check{color:#ffffff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{display:inline-flex;opacity:0}.el-upload-list--picture .el-upload-list__item:hover .el-progress__text{display:block}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item .el-icon--close{top:5px;transform:translateY(0)}.el-upload-list--picture .el-upload-list__item-thumbnail{align-items:center;background-color:var(--el-color-white);display:inline-flex;height:70px;justify-content:center;-o-object-fit:contain;object-fit:contain;position:relative;width:70px;z-index:1}.el-upload-list--picture .el-upload-list__item-status-label{background:var(--el-color-success);height:26px;position:absolute;right:-17px;text-align:center;top:-7px;transform:rotate(45deg);width:46px}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg)}.el-upload-list--picture .el-progress{position:relative;top:-7px}.el-upload-cover{cursor:default;height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:10}.el-upload-cover:after{content:"";display:inline-block;height:100%;vertical-align:middle}.el-upload-cover img{display:block;height:100%;width:100%}.el-upload-cover__label{background:var(--el-color-success);height:24px;right:-15px;text-align:center;top:-6px;transform:rotate(45deg);width:40px}.el-upload-cover__label i{color:#fff;font-size:12px;margin-top:11px;transform:rotate(-45deg)}.el-upload-cover__progress{display:inline-block;position:static;vertical-align:middle;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{height:100%;left:0;position:absolute;top:0;width:100%}.el-upload-cover__interact{background-color:var(--el-overlay-color-light);bottom:0;height:100%;left:0;position:absolute;text-align:center;width:100%}.el-upload-cover__interact .btn{color:#ffffff;cursor:pointer;display:inline-block;font-size:14px;margin-top:60px;transition:var(--el-transition-md-fade);vertical-align:middle}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#ffffff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{background-color:#ffffff;bottom:0;color:var(--el-text-color-primary);font-size:14px;font-weight:normal;height:36px;left:0;line-height:36px;margin:0;overflow:hidden;padding:0 10px;position:absolute;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-progress{align-items:center;display:flex;line-height:1;position:relative}.el-progress__text{color:var(--el-text-color-regular);font-size:14px;line-height:1;margin-left:5px;min-width:50px}.el-progress__text i{display:block;vertical-align:middle}.el-progress--circle,.el-progress--dashboard{display:inline-block}.el-progress--circle .el-progress__text,.el-progress--dashboard .el-progress__text{left:0;margin:0;position:absolute;text-align:center;top:50%;transform:translateY(-50%);width:100%}.el-progress--circle .el-progress__text i,.el-progress--dashboard .el-progress__text i{display:inline-block;vertical-align:middle}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{display:block;margin-right:0;padding-right:0}.el-progress--text-inside .el-progress-bar{margin-right:0;padding-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:var(--el-color-success)}.el-progress.is-success .el-progress__text{color:var(--el-color-success)}.el-progress.is-warning .el-progress-bar__inner{background-color:var(--el-color-warning)}.el-progress.is-warning .el-progress__text{color:var(--el-color-warning)}.el-progress.is-exception .el-progress-bar__inner{background-color:var(--el-color-danger)}.el-progress.is-exception .el-progress__text{color:var(--el-color-danger)}.el-progress-bar{box-sizing:border-box;flex-grow:1}.el-progress-bar__outer{background-color:var(--el-border-color-lighter);border-radius:100px;height:6px;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{background-color:var(--el-color-primary);border-radius:100px;height:100%;left:0;line-height:1;position:absolute;text-align:right;top:0;transition:width .6s ease;white-space:nowrap}.el-progress-bar__inner:after{content:"";display:inline-block;height:100%;vertical-align:middle}.el-progress-bar__inner--indeterminate{animation:indeterminate 3s infinite;transform:translateZ(0)}.el-progress-bar__inner--striped{background-image:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 0,transparent 50%,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 75%,transparent 0,transparent);background-size:1.25em 1.25em}.el-progress-bar__inner--striped.el-progress-bar__inner--striped-flow{animation:striped-flow 3s linear infinite}.el-progress-bar__innerText{color:#ffffff;display:inline-block;font-size:12px;margin:0 5px;vertical-align:middle}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}@keyframes indeterminate{0%{left:-100%}to{left:100%}}@keyframes striped-flow{0%{background-position:-100%}to{background-position:100%}}._dialog_1gadx_1 .el-dialog__body {
+  max-height: 470px;
+  overflow-y: auto;
+}
+._dialog_1gadx_1.is-fullscreen .el-dialog__body {
+  max-height: initial;
+}
+._upload_1gadx_9 {
+  display: inline-flex;
+  line-height: 0;
+}
+._upload_1gadx_9 .el-upload {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 150px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  transition: var(--el-transition-duration-fast);
+}
+._upload_1gadx_9 .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+._upload_1gadx_9 .el-upload .el-icon {
+  margin-top: 0;
+  font-size: 32px;
+}
+._opration_1gadx_35 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px !important;
+}
+._opration_1gadx_35 i {
+  cursor: pointer;
+}
+._opration_1gadx_35 > i + i {
+  margin-left: 15px;
+}
+div._draggable_1gadx_48 {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 5px;
+  column-gap: 5px;
+}
+div._draggable_1gadx_48 .el-upload-list__item {
+  width: 200px;
+  height: 150px;
+  margin: 0;
+}
+div._draggable_1gadx_48 .el-upload-list__item:nth-of-type(4n) {
+  margin-right: 0;
+}
+div._draggable_1gadx_48 .el-upload-list__item-thumbnail {
+  object-fit: contain;
+}

package/dist/es/components/dialog-upload-images/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/typescript';
+import { default as Component } from './dialog-upload-images.vue';
+export declare const VcDialogUploadImages: SFCWithInstall<typeof Component>;
+export default VcDialogUploadImages;

package/dist/es/components/dialog-upload-images/index.mjs

@@ -0,0 +1,6 @@
+import { w as withInstall } from '../../chunk/ClZGuAIb.mjs';
+import { C as Component } from './dialog-upload-images.mjs';
+
+const VcDialogUploadImages = withInstall(Component);
+
+export { VcDialogUploadImages, VcDialogUploadImages as default };

package/dist/es/components/document.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    data: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/es/components/drawer/drawer.d.ts

@@ -0,0 +1,7 @@
+export interface IDrawerProps {
+    modelValue: boolean;
+    title?: string;
+    lazy?: boolean;
+    showDefaultFooter?: boolean;
+    boxPadding?: boolean;
+}

package/dist/es/components/drawer/drawer.mjs

@@ -0,0 +1,412 @@
+import './index.css'
+import { c as buildProps, m as clamp, u as useNamespace } from '../../chunk/E_WRn0OP.mjs';
+import { d as dialogEmits, a as dialogProps, u as useDialog, E as ElOverlay } from '../../chunk/DhhdKtyu.mjs';
+import { E as ElScrollbar } from '../../chunk/CaTfZePA.mjs';
+import { computed, ref, watch, onBeforeUnmount, defineComponent, useSlots, createBlock, openBlock, unref, withCtx, createVNode, Transition, withDirectives, createElementVNode, mergeProps, withModifiers, createElementBlock, createCommentVNode, normalizeClass, renderSlot, toDisplayString, normalizeStyle, vShow, useCssVars, isRef, createTextVNode } from 'vue';
+import { C as Component$1 } from '../button/button.mjs';
+import { u as useVModel } from '../../chunk/CD98REcR.mjs';
+import { Close } from '@element-plus/icons-vue';
+import { b as ElTeleport, d as ElFocusTrap } from '../../chunk/DqUIKX7f.mjs';
+import { E as ElIcon } from '../../chunk/DMHNh_tw.mjs';
+import { b as useWindowSize, c as useEventListener } from '../../chunk/CEClY-_T.mjs';
+import { a as addUnit } from '../../chunk/D5259bwd.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/D389hx_T.mjs';
+import { u as useDeprecated } from '../../chunk/VAdRxe-1.mjs';
+import { u as useLocale } from '../../chunk/aibQ9WSZ.mjs';
+import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
+
+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"
+};
+
+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 = () => {
+    var _a;
+    const drawerEl = (_a = target.value) == null ? void 0 : _a.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((cleanup2) => cleanup2 == null ? void 0 : cleanup2());
+    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
+  };
+}
+
+const __default__ = defineComponent({
+  name: "ElDrawer",
+  inheritAttrs: false
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: drawerProps,
+  emits: drawerEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    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: _ctx.appendTo,
+        disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
+      }, {
+        default: withCtx(() => [
+          createVNode(Transition, {
+            name: unref(ns).b("fade"),
+            onAfterEnter: unref(afterEnter),
+            onAfterLeave: unref(afterLeave),
+            onBeforeLeave: unref(beforeLeave),
+            persisted: ""
+          }, {
+            default: withCtx(() => {
+              var _a;
+              return [
+                withDirectives(createVNode(unref(ElOverlay), {
+                  mask: _ctx.modal,
+                  "overlay-class": [
+                    unref(ns).is("drawer"),
+                    (_a = _ctx.modalClass) != null ? _a : "",
+                    `${unref(ns).namespace.value}-modal-drawer`,
+                    unref(ns).is("penetrable", unref(penetrable))
+                  ],
+                  "z-index": unref(zIndex),
+                  onClick: unref(onModalClick)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(ElFocusTrap), {
+                      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": _ctx.title || void 0,
+                          "aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
+                          "aria-describedby": unref(bodyId)
+                        }, _ctx.$attrs, {
+                          class: [
+                            unref(ns).b(),
+                            _ctx.direction,
+                            unref(visible) && "open",
+                            unref(ns).is("dragging", unref(isResizing))
+                          ],
+                          style: { [unref(isHorizontal) ? "width" : "height"]: unref(size) },
+                          role: "dialog",
+                          onClick: withModifiers(() => {
+                          }, ["stop"])
+                        }), [
+                          createElementVNode("span", {
+                            ref_key: "focusStartRef",
+                            ref: focusStartRef,
+                            class: normalizeClass(unref(ns).e("sr-focus")),
+                            tabindex: "-1"
+                          }, null, 2),
+                          _ctx.withHeader ? (openBlock(), createElementBlock("header", {
+                            key: 0,
+                            class: normalizeClass([unref(ns).e("header"), _ctx.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": _ctx.headerAriaLevel,
+                                class: normalizeClass(unref(ns).e("title"))
+                              }, toDisplayString(_ctx.title), 11, ["id", "aria-level"])
+                            ]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
+                              createCommentVNode(" DEPRECATED SLOT ")
+                            ]),
+                            _ctx.showClose ? (openBlock(), createElementBlock("button", {
+                              key: 2,
+                              "aria-label": unref(t)("el.drawer.close"),
+                              class: normalizeClass(unref(ns).e("close-btn")),
+                              type: "button",
+                              onClick: unref(handleClose)
+                            }, [
+                              createVNode(unref(ElIcon), {
+                                class: normalizeClass(unref(ns).e("close"))
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(Close))
+                                ]),
+                                _: 1
+                              }, 8, ["class"])
+                            ], 10, ["aria-label", "onClick"])) : 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"), _ctx.bodyClass])
+                          }, [
+                            renderSlot(_ctx.$slots, "default")
+                          ], 10, ["id"])) : createCommentVNode("v-if", true),
+                          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+                            key: 2,
+                            class: normalizeClass([unref(ns).e("footer"), _ctx.footerClass])
+                          }, [
+                            renderSlot(_ctx.$slots, "footer")
+                          ], 2)) : createCommentVNode("v-if", true),
+                          _ctx.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, ["aria-label", "aria-labelledby", "aria-describedby", "onClick"])
+                      ]),
+                      _: 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"]);
+    };
+  }
+});
+var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "drawer.vue"]]);
+
+const ElDrawer = withInstall(Drawer);
+
+const _hoisted_1 = {
+  key: 0,
+  class: "drawer-footer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "drawer",
+  props: {
+    modelValue: { type: Boolean },
+    title: { default: "对话框" },
+    lazy: { type: Boolean, default: true },
+    showDefaultFooter: { type: Boolean, default: false },
+    boxPadding: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "closed"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v3e817546": _ctx.boxPadding ? "block" : "none"
+    }));
+    const props = __props;
+    const emits = __emit;
+    const drawerVisible = useVModel(props, "modelValue", emits);
+    const visible = ref(false);
+    watch(drawerVisible, (val) => {
+      if (val) {
+        visible.value = true;
+      }
+    });
+    function handleClosed() {
+      visible.value = false;
+      emits("closed");
+    }
+    return (_ctx, _cache) => {
+      const _component_ElScrollbar = ElScrollbar;
+      const _component_ElDrawer = ElDrawer;
+      return unref(visible) || !__props.lazy ? (openBlock(), createBlock(_component_ElDrawer, mergeProps({
+        key: 0,
+        modelValue: unref(drawerVisible),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(drawerVisible) ? drawerVisible.value = $event : null)
+      }, _ctx.$attrs, {
+        "close-on-click-modal": false,
+        class: _ctx.$style.main,
+        onClosed: handleClosed
+      }), {
+        header: withCtx(() => [
+          createElementVNode("div", null, [
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              createTextVNode(toDisplayString(__props.title), 1)
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_ElScrollbar, {
+            class: "drawer-scrollbar",
+            always: ""
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["body-container"])
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ]),
+            _: 3
+          }),
+          __props.showDefaultFooter || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "footer", {}, () => [
+              createVNode(Component$1, {
+                onClick: _cache[0] || (_cache[0] = ($event) => drawerVisible.value = false)
+              }, {
+                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                  createTextVNode("关闭", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["modelValue", "class"])) : createCommentVNode("", true);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const main = "_main_q1oh1_1";
+const style0 = {
+	main: main,
+	"body-container": "_body-container_q1oh1_54"
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_14 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_14 as _ };

package/dist/es/components/drawer/drawer.vue.d.ts

@@ -0,0 +1,31 @@
+import { IDrawerProps } from './drawer';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<IDrawerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (val: boolean) => any;
+    closed: () => any;
+}, string, import('vue').PublicProps, Readonly<IDrawerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
+}>, {
+    title: string;
+    showDefaultFooter: boolean;
+    lazy: boolean;
+    boxPadding: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/components/drawer/index.css

@@ -0,0 +1,56 @@
+/* source: src/components/drawer/drawer.vue */
+.el-overlay.is-drawer{overflow:hidden}.el-drawer{--el-drawer-bg-color:var(--el-dialog-bg-color,var(--el-bg-color));--el-drawer-padding-primary:var(--el-dialog-padding-primary,20px);--el-drawer-dragger-size:8px;background-color:var(--el-drawer-bg-color);box-shadow:var(--el-box-shadow-dark);box-sizing:border-box;display:flex;flex-direction:column;position:absolute;transition:all var(--el-transition-duration)}.el-drawer .btt,.el-drawer .ltr,.el-drawer .rtl,.el-drawer .ttb{transform:translate(0)}.el-drawer__sr-focus:focus{outline:none!important}.el-drawer__header{align-items:center;color:var(--el-text-color-primary);display:flex;margin-bottom:32px;overflow:hidden;padding:var(--el-drawer-padding-primary);padding-bottom:0}.el-drawer__header>:first-child{flex:1}.el-drawer__title{flex:1;font-size:16px;line-height:inherit;margin:0}.el-drawer__footer{overflow:hidden;padding:var(--el-drawer-padding-primary);padding-top:10px;text-align:right}.el-drawer__close-btn{background-color:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;font-size:var(--el-font-size-extra-large);outline:none}.el-drawer__close-btn:focus i,.el-drawer__close-btn:hover i{color:var(--el-color-primary)}.el-drawer__body{flex:1;overflow:auto;padding:var(--el-drawer-padding-primary)}.el-drawer__body>*{box-sizing:border-box}.el-drawer.is-dragging{transition:none}.el-drawer__dragger{background-color:transparent;position:absolute;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-drawer__dragger:before{background-color:transparent;content:"";position:absolute;transition:all .2s}.el-drawer__dragger:hover:before{background-color:var(--el-color-primary)}.el-drawer.ltr,.el-drawer.rtl{bottom:0;height:100%;top:0}.el-drawer.ltr>.el-drawer__dragger,.el-drawer.rtl>.el-drawer__dragger{bottom:0;cursor:ew-resize;height:100%;top:0;width:var(--el-drawer-dragger-size)}.el-drawer.ltr>.el-drawer__dragger:before,.el-drawer.rtl>.el-drawer__dragger:before{bottom:0;top:0;width:3px}.el-drawer.btt,.el-drawer.ttb{left:0;right:0;width:100%}.el-drawer.btt>.el-drawer__dragger,.el-drawer.ttb>.el-drawer__dragger{cursor:ns-resize;height:var(--el-drawer-dragger-size);left:0;right:0;width:100%}.el-drawer.btt>.el-drawer__dragger:before,.el-drawer.ttb>.el-drawer__dragger:before{height:3px;left:0;right:0}.el-drawer.ltr{left:0}.el-drawer.ltr>.el-drawer__dragger{right:0}.el-drawer.ltr>.el-drawer__dragger:before{right:-2px}.el-drawer.rtl{right:0}.el-drawer.rtl>.el-drawer__dragger{left:0}.el-drawer.rtl>.el-drawer__dragger:before{left:-2px}.el-drawer.ttb{top:0}.el-drawer.ttb>.el-drawer__dragger{bottom:0}.el-drawer.ttb>.el-drawer__dragger:before{bottom:-2px}.el-drawer.btt{bottom:0}.el-drawer.btt>.el-drawer__dragger{top:0}.el-drawer.btt>.el-drawer__dragger:before{top:-2px}.el-modal-drawer.is-penetrable{pointer-events:none}.el-modal-drawer.is-penetrable .el-drawer{pointer-events:auto}.el-drawer-fade-enter-active,.el-drawer-fade-leave-active{transition:all var(--el-transition-duration)}.el-drawer-fade-enter-active,.el-drawer-fade-enter-from,.el-drawer-fade-enter-to,.el-drawer-fade-leave-active,.el-drawer-fade-leave-from,.el-drawer-fade-leave-to{overflow:hidden!important}.el-drawer-fade-enter-from,.el-drawer-fade-leave-to{background-color:transparent!important}.el-drawer-fade-enter-from .rtl,.el-drawer-fade-leave-to .rtl{transform:translateX(100%)}.el-drawer-fade-enter-from .ltr,.el-drawer-fade-leave-to .ltr{transform:translateX(-100%)}.el-drawer-fade-enter-from .ttb,.el-drawer-fade-leave-to .ttb{transform:translateY(-100%)}.el-drawer-fade-enter-from .btt,.el-drawer-fade-leave-to .btt{transform:translateY(100%)}._main_q1oh1_1 {
+  height: 100%;
+}
+._main_q1oh1_1 .el-drawer__header {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 10px 16px;
+  margin-bottom: 0;
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+._main_q1oh1_1 .el-drawer__body {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+._main_q1oh1_1 .drawer-footer {
+  display: flex;
+  flex: 0 0 auto;
+  padding: 10px 16px;
+  border-top: 1px solid var(--el-border-color-light);
+}
+._main_q1oh1_1 .drawer-footer .el-button {
+  flex-grow: 1;
+}
+._main_q1oh1_1 > .el-drawer__body > .el-scrollbar {
+  position: relative;
+}
+._main_q1oh1_1 > .el-drawer__body > .el-scrollbar::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 8px);
+  height: 100%;
+  background: var(--el-color-white);
+  height: 16px;
+  z-index: 3;
+  display: var(--v3e817546);
+}
+._main_q1oh1_1 > .el-drawer__body > .el-scrollbar::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: calc(100% - 8px);
+  height: 100%;
+  background: var(--el-color-white);
+  height: 16px;
+  z-index: 3;
+  display: var(--v3e817546);
+}
+._body-container_q1oh1_54 {
+  padding: 16px;
+}

package/dist/es/components/drawer/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/typescript';
+import { default as Component } from './drawer.vue';
+export declare const VcDrawer: SFCWithInstall<typeof Component>;
+export default VcDrawer;

package/dist/es/components/drawer/index.mjs

@@ -0,0 +1,6 @@
+import { w as withInstall } from '../../chunk/ClZGuAIb.mjs';
+import { C as Component } from './drawer.mjs';
+
+const VcDrawer = withInstall(Component);
+
+export { VcDrawer, VcDrawer as default };