y-admin-pro 0.0.1

package/packages/ele-drawer/index.vue

@@ -0,0 +1,185 @@
+<!-- 抽屉 -->
+<template>
+  <Teleport :to="teleportTo" :disabled="teleportDisabled">
+    <ElDrawer
+      v-bind="$attrs"
+      ref="drawerRef"
+      :modelValue="modelValue"
+      :appendToBody="false"
+      :lockScroll="inner ? false : lockScroll"
+      :beforeClose="beforeClose"
+      :closeOnClickModal="closeOnClickModal"
+      :closeOnPressEscape="closeOnPressEscape"
+      :openDelay="openDelay"
+      :closeDelay="closeDelay"
+      :destroyOnClose="destroyOnClose"
+      :modal="modal"
+      :direction="direction"
+      :showClose="false"
+      :size="size"
+      :title="title"
+      :withHeader="withHeader"
+      :modalClass="drawerClass"
+      :zIndex="zIndex"
+      :headerAriaLevel="headerAriaLevel"
+      @open="handleDrawerOpen"
+      @opened="handleDrawerOpened"
+      @close="handleDrawerClose"
+      @closed="handleDrawerClosed"
+      @openAutoFocus="handleDrawerOpenAutoFocus"
+      @closeAutoFocus="handleDrawerCloseAutoFocus"
+      @update:modelValue="updateModelValue"
+    >
+      <template #header="{ close }">
+        <div class="ele-drawer-header" :style="headerStyle">
+          <div role="heading" class="ele-drawer-title" :style="titleStyle">
+            <slot name="header">{{ title }}</slot>
+          </div>
+          <div
+            v-if="showClose"
+            class="ele-drawer-close"
+            :style="closeBtnStyle"
+            @click="close"
+          >
+            <slot name="closeBtn">
+              <ElIcon>
+                <CloseOutlined />
+              </ElIcon>
+            </slot>
+          </div>
+        </div>
+      </template>
+      <ReceiverView
+        :wrapPosition="false"
+        class="ele-drawer-body"
+        :style="bodyStyle"
+      >
+        <slot></slot>
+      </ReceiverView>
+      <template v-if="$slots.footer" #footer>
+        <div class="ele-drawer-footer" :style="footerStyle">
+          <slot name="footer"></slot>
+        </div>
+      </template>
+    </ElDrawer>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onActivated, onDeactivated } from 'vue';
+  import { ElDrawer, ElIcon, drawerEmits } from 'element-plus';
+  import { CloseOutlined } from '../icons/index';
+  import type { ElDrawerInstance } from '../ele-app/el';
+  import ReceiverView from '../ele-config-provider/components/receiver-view';
+  import { useLayoutState } from '../ele-pro-layout/util';
+  import { getModalContainer } from '../ele-modal/util';
+  import { drawerProps } from './props';
+
+  defineOptions({ name: 'EleDrawer' });
+
+  const props = defineProps(drawerProps);
+
+  const emit = defineEmits(drawerEmits);
+
+  const layoutState = useLayoutState();
+
+  /** 抽屉组件 */
+  const drawerRef = ref<ElDrawerInstance>(null);
+
+  /** 适配组件缓存 */
+  const isActivated = ref<boolean>(true);
+
+  /** 抽屉类名 */
+  const drawerClass = computed<string>(() => {
+    const classes: string[] = ['ele-drawer'];
+    // 关闭状态
+    if (!props.modelValue) {
+      classes.push('ele-drawer-closed');
+    }
+    // 失活状态
+    if (!isActivated.value && props.modelValue) {
+      classes.push('ele-drawer-hide');
+    }
+    // 限制在内部区域
+    if (props.inner) {
+      classes.push('ele-drawer-inner');
+    }
+    // 自定义类名
+    if (props.modalClass) {
+      classes.push(props.modalClass);
+    }
+    return classes.join(' ');
+  });
+
+  /** 抽屉插入位置 */
+  const teleportTo = computed<Element | string>(() => {
+    return getModalContainer(
+      props.inner,
+      false,
+      props.appendTo,
+      layoutState.modalsEl
+    );
+  });
+
+  /** 禁用抽屉插入其它位置 */
+  const teleportDisabled = computed<boolean>(() => {
+    const appendTo = props.appendTo || 'body';
+    const disabled = appendTo === 'body' ? !props.appendToBody : false;
+    return props.inner ? false : disabled;
+  });
+
+  /** 关闭抽屉 */
+  const handleClose = () => {
+    if (drawerRef.value && drawerRef.value.handleClose) {
+      drawerRef.value.handleClose();
+    }
+  };
+
+  /** 更新modelValue */
+  const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 打开事件 */
+  const handleDrawerOpen = () => {
+    emit('open');
+  };
+
+  /** 打开动画结束事件 */
+  const handleDrawerOpened = () => {
+    emit('opened');
+  };
+
+  /** 关闭事件 */
+  const handleDrawerClose = () => {
+    emit('close');
+  };
+
+  /** 关闭动画结束事件 */
+  const handleDrawerClosed = () => {
+    emit('closed');
+  };
+
+  /** 内容获取焦点的回调 */
+  const handleDrawerOpenAutoFocus = () => {
+    emit('openAutoFocus');
+  };
+
+  /** 内容失去焦点的回调 */
+  const handleDrawerCloseAutoFocus = () => {
+    emit('closeAutoFocus');
+  };
+
+  onActivated(() => {
+    isActivated.value = true;
+  });
+
+  onDeactivated(() => {
+    isActivated.value = false;
+  });
+
+  defineExpose({
+    drawerRef,
+    handleClose
+  });
+</script>

package/packages/ele-drawer/props.ts

@@ -0,0 +1,24 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { drawerProps as elDrawerProps } from 'element-plus';
+import type { StyleValue } from '../ele-app/types';
+
+/**
+ * 属性
+ */
+export const drawerProps = {
+  ...elDrawerProps,
+  /** 自定义标题样式 */
+  headerStyle: Object as PropType<StyleValue>,
+  /** 标题样式 */
+  titleStyle: Object as PropType<StyleValue>,
+  /** 自定义主体样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 自定义底部样式 */
+  footerStyle: Object as PropType<StyleValue>,
+  /** 自定义关闭按钮样式 */
+  closeBtnStyle: Object as PropType<StyleValue>,
+  /** 是否限制在主体内部 */
+  inner: Boolean
+};
+
+export type DrawerProps = ExtractPropTypes<typeof drawerProps>;

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 抽屉主题变量 */
+@mixin set-drawer-var($var) {
+  .ele-drawer {
+    @include set-ele-var('drawer', $var);
+  }
+}

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

@@ -0,0 +1,100 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-drawer-var($ele);
+
+/* 抽屉 */
+.ele-drawer {
+  &.el-overlay {
+    overflow: hidden;
+  }
+
+  & > .el-drawer {
+    background: eleVar('drawer', 'bg');
+
+    & > .el-drawer__header {
+      margin: 0;
+      padding: 0;
+      color: inherit;
+      display: block;
+      flex-shrink: 0;
+      border: none;
+    }
+
+    & > .el-drawer__body {
+      padding: 0;
+    }
+
+    & > .el-drawer__footer {
+      padding: 0;
+      flex-shrink: 0;
+      border: none;
+    }
+  }
+}
+
+.ele-drawer-header {
+  display: flex;
+  align-items: center;
+  padding: eleVar('drawer', 'header-padding');
+  border-bottom: eleVar('drawer', 'header-border');
+  box-sizing: border-box;
+}
+
+.ele-drawer-title {
+  flex: 1;
+  color: eleVar('drawer', 'header-color');
+  font-size: eleVar('drawer', 'header-font-size');
+  line-height: eleVar('drawer', 'header-line-height');
+  font-weight: eleVar('drawer', 'header-font-weight');
+  box-sizing: border-box;
+}
+
+.ele-drawer-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('drawer', 'icon-size');
+  height: eleVar('drawer', 'icon-size');
+  line-height: eleVar('drawer', 'icon-size');
+  color: eleVar('drawer', 'icon-color');
+  font-size: eleVar('drawer', 'icon-font-size');
+  border-radius: eleVar('drawer', 'icon-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('drawer', 'icon-hover-color');
+    background: eleVar('drawer', 'icon-hover-bg');
+  }
+}
+
+.ele-drawer-body {
+  padding: eleVar('drawer', 'body-padding');
+  box-sizing: border-box;
+}
+
+.ele-drawer-footer {
+  padding: eleVar('drawer', 'footer-padding');
+  border-top: eleVar('drawer', 'footer-border');
+  box-sizing: border-box;
+}
+
+/* 失活状态 */
+.ele-drawer-hide {
+  display: none !important;
+}
+
+/* 限制在主体区域 */
+.ele-admin-modals > .ele-drawer {
+  height: auto;
+  pointer-events: auto;
+  position: absolute !important;
+
+  &:not(.el-drawer-fade-leave-active):not(.el-drawer-fade-enter-active) {
+    transition: (width $transition-base, left $transition-base);
+  }
+}

package/packages/ele-drawer/style/index.ts

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

package/packages/ele-dropdown/components/dropdown-menu-item.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-if="item.divided" class="ele-dropdown-menu-divider"></div>
+  <div
+    ref="itemRef"
+    :class="[
+      'ele-dropdown-menu-item',
+      { 'is-disabled': !!item.disabled },
+      { 'is-active': selected === item.command },
+      { 'is-danger': !!item.danger }
+    ]"
+    @click.stop="handleItemClick"
+    @mouseenter="handleItemMouseenter"
+  >
+    <template
+      v-if="
+        item.slot &&
+        item.slot !== 'default' &&
+        item.slot !== 'subMenus' &&
+        $slots[item.slot]
+      "
+    >
+      <slot :name="item.slot" :item="item"></slot>
+    </template>
+    <template v-else>
+      <ElIcon
+        v-if="item.icon"
+        v-bind="{ ...(iconProps || {}), ...(item.iconProps || {}) }"
+      >
+        <component :is="item.icon" :style="item.iconStyle" />
+      </ElIcon>
+      <span v-if="item.title">{{ item.title }}</span>
+    </template>
+    <template v-if="item.children && item.children.length">
+      <ElIcon class="ele-dropdown-menu-item-arrow">
+        <ArrowRight />
+      </ElIcon>
+      <div
+        ref="subMenuRef"
+        class="ele-dropdown-wrapper is-sub-menu"
+        :class="[
+          { 'is-right-end': placement === 'rightEnd' },
+          { 'is-left-start': placement === 'leftStart' },
+          { 'is-left-end': placement === 'leftEnd' }
+        ]"
+        @contextmenu="handleWrapperContext"
+        @click.stop=""
+      >
+        <slot name="subMenus"></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { ArrowRight } from '../../icons/index';
+  import type { ElIconProps } from '../../ele-app/el';
+  import type { DropdownItem } from '../types';
+
+  defineOptions({ name: 'DropdownMenuItem' });
+
+  const props = defineProps({
+    /** 菜单项数据 */
+    item: {
+      type: Object as PropType<DropdownItem>,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object] as PropType<DropdownItem['command']>,
+    /** 自定义图标属性 */
+    iconProps: Object as PropType<ElIconProps>
+  });
+
+  const emit = defineEmits({
+    itemClick: (_item: DropdownItem) => true,
+    wrapperContext: (_e: MouseEvent) => true
+  });
+
+  /** 菜单项容器 */
+  const itemRef = ref<HTMLDivElement | null>(null);
+
+  /** 子菜单容器 */
+  const subMenuRef = ref<HTMLDivElement | null>(null);
+
+  /** 子菜单弹出位置 */
+  const placement = ref<'rightEnd' | 'leftStart' | 'leftEnd'>();
+
+  /** 菜单项点击事件 */
+  const handleItemClick = () => {
+    if (props.item.disabled) {
+      return;
+    }
+    emit('itemClick', props.item);
+  };
+
+  /** 菜单项鼠标进入事件 */
+  const handleItemMouseenter = () => {
+    const subMenuEl = subMenuRef.value;
+    if (!subMenuEl || !itemRef.value) {
+      return;
+    }
+    const rect = itemRef.value.getBoundingClientRect();
+    const rightOver = rect.right + subMenuEl.offsetWidth > window.innerWidth;
+    const bottomOver = rect.top + subMenuEl.offsetHeight > window.innerHeight;
+    if (rightOver && bottomOver) {
+      placement.value = 'leftEnd';
+    } else if (rightOver) {
+      placement.value = 'leftStart';
+    } else if (bottomOver) {
+      placement.value = 'rightEnd';
+    } else {
+      placement.value = void 0;
+    }
+  };
+
+  /** 菜单容器右键事件 */
+  const handleWrapperContext = (e: MouseEvent) => {
+    emit('wrapperContext', e);
+  };
+</script>

package/packages/ele-dropdown/components/dropdown-menus.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    :class="[
+      'ele-dropdown-menu',
+      { 'is-small': size === 'small' },
+      { 'is-large': size === 'large' }
+    ]"
+    :style="menuStyle"
+  >
+    <template
+      v-for="item in items"
+      :key="item.key == null ? JSON.stringify(item.command) : item.key"
+    >
+      <DropdownMenuItem
+        :item="item"
+        :selected="selected"
+        :iconProps="iconProps"
+        @itemClick="handleItemClick"
+        @wrapperContext="handleWrapperContext"
+      >
+        <template
+          v-for="name in Object.keys($slots).filter(
+            (k) => 'default' !== k && 'subMenus' !== k
+          )"
+          #[name]="slotProps"
+        >
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+        <template v-if="item.children && item.children.length" #subMenus>
+          <DropdownMenus
+            :items="item.children"
+            :selected="selected"
+            :menuStyle="menuStyle"
+            :iconProps="iconProps"
+            :size="size"
+            @itemClick="handleItemClick"
+            @wrapperContext="handleWrapperContext"
+          >
+            <template
+              v-for="name in Object.keys($slots).filter(
+                (k) => 'default' !== k && 'subMenus' !== k
+              )"
+              #[name]="slotProps"
+            >
+              <slot :name="name" v-bind="slotProps || {}"></slot>
+            </template>
+          </DropdownMenus>
+        </template>
+      </DropdownMenuItem>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { ElIconProps, ElButtonProps } from '../../ele-app/el';
+  import type { StyleValue } from '../../ele-app/types';
+  import DropdownMenuItem from './dropdown-menu-item.vue';
+  import type { DropdownItem } from '../types';
+
+  defineOptions({ name: 'DropdownMenus' });
+
+  defineProps({
+    /** 下拉菜单数据 */
+    items: {
+      type: Array as PropType<DropdownItem[]>,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object] as PropType<DropdownItem['command']>,
+    /** 自定义下拉菜单样式 */
+    menuStyle: Object as PropType<StyleValue>,
+    /** 自定义图标属性 */
+    iconProps: Object as PropType<ElIconProps>,
+    /** 尺寸 */
+    size: String as PropType<ElButtonProps['size']>
+  });
+
+  const emit = defineEmits({
+    itemClick: (_item: DropdownItem) => true,
+    wrapperContext: (_e: MouseEvent) => true
+  });
+
+  /** 菜单项点击事件 */
+  const handleItemClick = (item: DropdownItem) => {
+    if (item.disabled) {
+      return;
+    }
+    emit('itemClick', item);
+  };
+
+  /** 菜单容器右键事件 */
+  const handleWrapperContext = (e: MouseEvent) => {
+    emit('wrapperContext', e);
+  };
+</script>