ele-admin-plus 1.0.0-beta.1

package/es/ele-drawer/index.js

@@ -0,0 +1,139 @@
+import { defineComponent, ref, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from "vue";
+import { ElDrawer, ElIcon, drawerEmits } from "element-plus";
+import { Close } from "@element-plus/icons-vue";
+import { drawerProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleDrawer",
+  components: { ElDrawer, ElIcon, Close },
+  props: drawerProps,
+  emits: drawerEmits,
+  setup(_props, { emit }) {
+    const drawerRef = ref(null);
+    const handleClose = () => {
+      if (drawerRef.value && drawerRef.value.handleClose) {
+        drawerRef.value.handleClose();
+      }
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const onOpen = () => {
+      emit("open");
+    };
+    const onOpened = () => {
+      emit("opened");
+    };
+    const onClose = () => {
+      emit("close");
+    };
+    const onClosed = () => {
+      emit("closed");
+    };
+    return {
+      drawerRef,
+      handleClose,
+      updateModelValue,
+      onOpen,
+      onOpened,
+      onClose,
+      onClosed
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  role: "heading",
+  class: "ele-drawer-title"
+};
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Close = resolveComponent("Close");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElDrawer = resolveComponent("ElDrawer");
+  return openBlock(), createBlock(_component_ElDrawer, {
+    ref: "drawerRef",
+    modelValue: _ctx.modelValue,
+    appendToBody: _ctx.appendToBody,
+    lockScroll: _ctx.lockScroll,
+    beforeClose: _ctx.beforeClose,
+    closeOnClickModal: _ctx.closeOnClickModal,
+    closeOnPressEscape: _ctx.closeOnPressEscape,
+    openDelay: _ctx.openDelay,
+    closeDelay: _ctx.closeDelay,
+    destroyOnClose: _ctx.destroyOnClose,
+    modal: _ctx.modal,
+    direction: _ctx.direction,
+    showClose: false,
+    size: _ctx.size,
+    title: _ctx.title,
+    withHeader: _ctx.withHeader,
+    modalClass: _ctx.modalClass,
+    zIndex: _ctx.zIndex,
+    class: "ele-drawer",
+    onOpen: _ctx.onOpen,
+    onOpened: _ctx.onOpened,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }, createSlots({
+    header: withCtx(({ close }) => [
+      createElementVNode("div", {
+        class: "ele-drawer-header",
+        style: normalizeStyle(_ctx.headerStyle)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ])
+        ]),
+        _ctx.showClose ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-drawer-close",
+          style: normalizeStyle(_ctx.closeBtnStyle),
+          onClick: close
+        }, [
+          renderSlot(_ctx.$slots, "closeBtn", {}, () => [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_Close)
+              ]),
+              _: 1
+            })
+          ])
+        ], 12, _hoisted_2)) : createCommentVNode("", true)
+      ], 4)
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "ele-drawer-body",
+        style: normalizeStyle(_ctx.bodyStyle)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4)
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.footer ? {
+      name: "footer",
+      fn: withCtx(() => [
+        createElementVNode("div", {
+          class: "ele-drawer-footer",
+          style: normalizeStyle(_ctx.footerStyle)
+        }, [
+          renderSlot(_ctx.$slots, "footer")
+        ], 4)
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["modelValue", "appendToBody", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "onOpen", "onOpened", "onClose", "onClosed", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-drawer/props.d.ts

@@ -0,0 +1,63 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+/**
+ * 属性
+ */
+export declare const drawerProps: {
+    headerStyle: PropType<CSSProperties>;
+    bodyStyle: PropType<CSSProperties>;
+    footerStyle: PropType<CSSProperties>;
+    closeBtnStyle: PropType<CSSProperties>;
+    direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
+    size: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
+    withHeader: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    modalFade: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    appendToBody: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    beforeClose: {
+        readonly type: PropType<import("element-plus").DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    top: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    modalClass: StringConstructor;
+    width: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    center: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    closeIcon: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    customClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    draggable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    fullscreen: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+};
+export type DrawerProps = ExtractPropTypes<typeof drawerProps>;

package/es/ele-drawer/props.js

@@ -0,0 +1,15 @@
+import { drawerProps as drawerProps$1 } from "element-plus";
+const drawerProps = {
+  ...drawerProps$1,
+  // 自定义标题样式
+  headerStyle: Object,
+  // 自定义主体样式
+  bodyStyle: Object,
+  // 自定义底部样式
+  footerStyle: Object,
+  // 自定义关闭按钮样式
+  closeBtnStyle: Object
+};
+export {
+  drawerProps
+};

package/es/ele-drawer/style/css-var.scss

@@ -0,0 +1,12 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-drawer-var($var) {
+  .ele-drawer-header {
+    @include set-ele-var('drawer-header', $var);
+    @include set-ele-var('drawer-icon', $var);
+  }
+
+  .ele-drawer-footer {
+    @include set-ele-var('drawer-footer', $var);
+  }
+}

package/es/ele-drawer/style/index.js

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/drawer/style/index';
+import 'element-plus/es/components/icon/style/index';
+import './index.scss';

package/es/ele-drawer/style/index.scss

@@ -0,0 +1,61 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-drawer-var($ele);
+
+/* 抽屉 */
+.ele-drawer {
+  .el-drawer__header {
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    display: block;
+    flex-shrink: 0;
+  }
+
+  .ele-drawer-header {
+    display: flex;
+    align-items: center;
+    padding: eleVar('drawer-header', 'padding');
+    border-bottom: eleVar('drawer-header', 'border');
+  }
+
+  .ele-drawer-title {
+    flex: 1;
+    color: eleVar('drawer-header', 'color');
+    font-size: eleVar('drawer-header', 'font-size');
+    line-height: eleVar('drawer-header', 'line-height');
+  }
+
+  .ele-drawer-close {
+    display: flex;
+    color: eleVar('drawer-icon', 'color');
+    font-size: eleVar('drawer-icon', 'font-size');
+    transition: color 0.3s, background-color 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      color: eleVar('drawer-icon', 'hover-color');
+    }
+  }
+
+  .el-drawer__body {
+    padding: 0;
+  }
+
+  .ele-drawer-body {
+    padding: elVar('drawer', 'padding-primary');
+    box-sizing: border-box;
+  }
+
+  .el-drawer__footer {
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .ele-drawer-footer {
+    box-sizing: border-box;
+    padding: eleVar('drawer-footer', 'padding');
+    border-top: eleVar('drawer-footer', 'border');
+  }
+}