y-admin-pro 0.0.1

package/packages/ele-app/types.ts

@@ -0,0 +1,89 @@
+import type {
+  CSSProperties,
+  Component,
+  SetupContext,
+  VNode,
+  EmitsOptions,
+  ObjectEmitsOptions
+} from 'vue';
+
+/**
+ * 只读属性改为可读
+ */
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
+/**
+ * 样式值
+ */
+export type StyleValue = Partial<CSSProperties>;
+
+/**
+ * 样式多个值
+ */
+export type StyleValues = StyleValue | Array<StyleValue>;
+
+/**
+ * 类名值
+ */
+export type ClassValue = string | Record<string, boolean | undefined>;
+
+/**
+ * 类名多个值
+ */
+export type ClassValues = ClassValue | Array<ClassValue>;
+
+/**
+ * 组件属性
+ */
+export type ComponentProps<T> = Mutable<Partial<T>> & {
+  /** 类名 */
+  class?: ClassValues;
+  /** 样式 */
+  style?: StyleValues;
+};
+
+/**
+ * 组件名或组件
+ */
+export type UserComponent = string | Component;
+
+/**
+ * 组件事件触发器
+ */
+export type Emitter<T> = SetupContext<T>['emit'];
+
+/**
+ * 渲染结果
+ */
+export type ResultNode = string | VNode | Array<string | VNode> | undefined;
+
+/**
+ * 插槽方法
+ */
+export type SlotFunction = (slotProps?: Record<string, any>) => ResultNode;
+
+/**
+ * 插槽对象
+ */
+export type SlotObject = Record<string, SlotFunction | undefined>;
+
+/**
+ * 组件事件对应的方法
+ */
+export type EmitMethods<T extends EmitsOptions> = T extends string[]
+  ? {
+      [K in T[number]]: (...args: any[]) => void;
+    }
+  : T extends ObjectEmitsOptions
+    ? {
+        [K in string & keyof T]: (
+          ...args: T[K] extends (...args: infer P) => any
+            ? P
+            : T[K] extends null
+              ? any[]
+              : never
+        ) => void;
+      }
+    : {};

package/packages/ele-autocomplete/index.vue

@@ -0,0 +1,76 @@
+<!-- 自动完成 -->
+<template>
+  <ElAutocomplete
+    v-bind="omit($props, ['fetchSuggestions'])"
+    ref="autocompleteRef"
+    :fetchSuggestions="handleFetchSuggestions"
+    @update:modelValue="emitMethods['update:modelValue']"
+    @input="emitMethods['input']"
+    @change="emitMethods['change']"
+    @focus="emitMethods['focus']"
+    @blur="emitMethods['blur']"
+    @clear="emitMethods['clear']"
+    @select="emitMethods['select']"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </ElAutocomplete>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElAutocomplete } from 'element-plus';
+  import type { ElAutocompleteInstance } from '../ele-app/el';
+  import { omit } from '../utils/common';
+  import { useComponentEvents } from '../utils/hook';
+  import type { ElFetchSuggestionsCallback } from './types';
+  import { autocompleteProps, autocompleteEmits } from './props';
+
+  defineOptions({ name: 'EleAutocomplete' });
+
+  const props = defineProps(autocompleteProps);
+
+  const emit = defineEmits(autocompleteEmits);
+
+  const { emitMethods } = useComponentEvents(autocompleteEmits, emit);
+
+  /** 组件引用 */
+  const autocompleteRef = ref<ElAutocompleteInstance>(null);
+
+  /** 请求建议数据 */
+  const handleFetchSuggestions = (
+    keyword: string,
+    callback: ElFetchSuggestionsCallback
+  ) => {
+    if (props.fetchSuggestions == null) {
+      callback([]);
+      return;
+    }
+    // 自定义方法
+    if (typeof props.fetchSuggestions === 'function') {
+      const result = props.fetchSuggestions(keyword, callback);
+      if (
+        result != null &&
+        typeof result === 'object' &&
+        typeof result.then === 'function'
+      ) {
+        result.then((data) => {
+          callback(data || []);
+        });
+      }
+      return;
+    }
+    // 直接指定数据
+    const kw = (keyword ?? '').toLowerCase();
+    const options = props.fetchSuggestions || [];
+    const result = options.filter(
+      (d) => !kw || (d.value ?? '').toLowerCase().includes(kw)
+    );
+    callback(result);
+  };
+
+  defineExpose({
+    autocompleteRef
+  });
+</script>

package/packages/ele-autocomplete/props.ts

@@ -0,0 +1,17 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { autocompleteProps as elAutocompleteProps } from 'element-plus';
+import type { AutocompleteDataItem, AutocompleteDataFunction } from './types';
+export { autocompleteEmits } from 'element-plus';
+
+/**
+ * 属性
+ */
+export const autocompleteProps = {
+  ...elAutocompleteProps,
+  /** 建议数据 */
+  fetchSuggestions: [Array, Function] as PropType<
+    AutocompleteDataItem[] | AutocompleteDataFunction
+  >
+};
+
+export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;

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

@@ -0,0 +1 @@
+import 'element-plus/es/components/autocomplete/style/index';

package/packages/ele-autocomplete/types.ts

@@ -0,0 +1,18 @@
+import type { AutocompleteFetchSuggestionsCallback } from 'element-plus';
+export type ElFetchSuggestionsCallback = AutocompleteFetchSuggestionsCallback;
+
+/**
+ * 建议数据项
+ */
+export interface AutocompleteDataItem extends Record<string, any> {
+  /** 值 */
+  value?: string;
+}
+
+/**
+ * 建议数据请求函数
+ */
+export type AutocompleteDataFunction = (
+  keyword: string,
+  cb: ElFetchSuggestionsCallback
+) => Promise<AutocompleteDataItem[]> | void;

package/packages/ele-avatar-group/index.vue

@@ -0,0 +1,168 @@
+<!-- 头像组 -->
+<template>
+  <div :class="['ele-avatar-group', { 'is-hover-open': hoverOpen }]">
+    <ElAvatar
+      v-for="(item, index) in avatarData"
+      :key="item.key ?? index + '-' + (item.value || item.label)"
+      :size="size"
+      :shape="shape"
+      :src="item.value"
+      :style="[commonStyle, itemStyle, avatarStyle]"
+      @click="handleItemClick(item)"
+      @error="(e: Event) => handleError({ item, e })"
+      @mouseover="(e: MouseEvent) => handleItemHover(item, e)"
+    >
+      <slot v-if="$slots.item" name="item" :item="item"></slot>
+    </ElAvatar>
+    <EleTooltip
+      v-if="isOverflow"
+      effect="light"
+      :isPopover="true"
+      :gpuAcceleration="true"
+      placement="top"
+      popperClass="ele-avatar-popover"
+      :offset="6"
+      v-bind="overflowPopoverProps || {}"
+      :disabled="!overflowPopover"
+      v-model:visible="overflowVisible"
+    >
+      <ElAvatar
+        :size="size"
+        :shape="shape"
+        :style="[commonStyle, itemStyle, moreStyle]"
+        class="ele-avatar-more"
+        @click="handleMoreClick"
+      >
+        <span class="ele-avatar-more-inner">
+          <slot
+            name="more"
+            :overflowCount="overflowCount"
+            :overflowData="overflowData"
+          >
+            <span>+{{ overflowCount }}</span>
+          </slot>
+        </span>
+      </ElAvatar>
+      <template #body>
+        <div v-if="overflowPopover" class="ele-popover-body ele-avatar-group">
+          <slot name="overflow" :overflowData="overflowData">
+            <ElAvatar
+              v-for="(item, index) in overflowData"
+              :key="item.key ?? index + '-' + (item.value || item.label)"
+              :size="size"
+              :shape="shape"
+              :src="item.value"
+              :style="[commonStyle, itemStyle, avatarStyle]"
+              @click="handleItemClick(item)"
+              @error="(e: Event) => handleError({ item, e })"
+              @mouseover="(e: MouseEvent) => handleItemHover(item, e)"
+            >
+              <slot v-if="$slots.item" name="item" :item="item"></slot>
+            </ElAvatar>
+          </slot>
+        </div>
+      </template>
+    </EleTooltip>
+    <EleTooltip
+      placement="top"
+      :offset="6"
+      v-bind="tooltipProps || {}"
+      :content="tooltipContent"
+      :virtualRef="virtualRef"
+      :virtualTriggering="true"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { ElAvatar } from 'element-plus';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import type { StyleValue } from '../ele-app/types';
+  import type { AvatarItem, AvatarErrorOption } from './types';
+  import { avatarGroupProps, avatarGroupEmits } from './props';
+
+  defineOptions({ name: 'EleAvatarGroup' });
+
+  const props = defineProps(avatarGroupProps);
+
+  const emit = defineEmits(avatarGroupEmits);
+
+  /** 提示文本 */
+  const tooltipContent = ref<string>('');
+
+  /** 提示单例目标 */
+  const virtualRef = ref<any>();
+
+  /** 多余气泡是否显示 */
+  const overflowVisible = ref<boolean>(false);
+
+  /** 公共样式 */
+  const commonStyle = computed<StyleValue>(() => {
+    if (props.size == null || typeof props.size === 'string') {
+      const obj = { large: '-12px', default: '-10px', small: '-8px' };
+      return { marginLeft: props.size ? obj[props.size] : '-10px' };
+    }
+    if (typeof props.size === 'number' && props.size >= 0) {
+      return { marginLeft: `${-Math.round(props.size / 3)}px` };
+    }
+    return {};
+  });
+
+  /** 是否显示更多 */
+  const isOverflow = computed<boolean>(() => {
+    return (
+      props.maxCount != null &&
+      props.maxCount > 0 &&
+      props.data != null &&
+      props.data.length > props.maxCount
+    );
+  });
+
+  /** 头像数据 */
+  const avatarData = computed<AvatarItem[]>(() => {
+    if (props.data == null) {
+      return [];
+    }
+    return isOverflow.value ? props.data.slice(0, props.maxCount) : props.data;
+  });
+
+  /** 超出数量 */
+  const overflowCount = computed<number>(() => {
+    if (!isOverflow.value || !props.data || props.maxCount == null) {
+      return 0;
+    }
+    return props.data.length - props.maxCount;
+  });
+
+  /** 超出数据 */
+  const overflowData = computed<AvatarItem[]>(() => {
+    if (props.data == null || !isOverflow.value) {
+      return [];
+    }
+    return props.data.slice(props.maxCount);
+  });
+
+  /** 打开提示 */
+  const handleItemHover = (item: AvatarItem, e: MouseEvent) => {
+    if (props.tooltip && item.label) {
+      virtualRef.value = e.currentTarget;
+      tooltipContent.value = item.label;
+    }
+  };
+
+  /** 点击事件 */
+  const handleItemClick = (item: AvatarItem) => {
+    emit('itemClick', item);
+  };
+
+  /** 更多点击事件 */
+  const handleMoreClick = () => {
+    emit('moreClick');
+  };
+
+  /** 图片加载失败回调 */
+  const handleError = (option: AvatarErrorOption) => {
+    emit('error', option);
+  };
+</script>

package/packages/ele-avatar-group/props.ts

@@ -0,0 +1,58 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElAvatarProps } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+import type { AvatarItem, AvatarErrorOption } from './types';
+
+/**
+ * 属性
+ */
+export const avatarGroupProps = {
+  /** 数据 */
+  data: {
+    type: Array as PropType<AvatarItem[]>,
+    required: true
+  },
+  /** 最大显示个数 */
+  maxCount: Number,
+  /** 形状 */
+  shape: String as PropType<ElAvatarProps['shape']>,
+  /** 大小 */
+  size: [Number, String] as PropType<ElAvatarProps['size']>,
+  /** 自定义样式 */
+  itemStyle: Object as PropType<StyleValue>,
+  /** 自定义头像样式 */
+  avatarStyle: Object as PropType<StyleValue>,
+  /** 自定义溢出样式 */
+  moreStyle: Object as PropType<StyleValue>,
+  /** 是否显示提示 */
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  /** 提示属性 */
+  tooltipProps: Object as PropType<EleTooltipProps>,
+  /** 是否显示溢出气泡 */
+  overflowPopover: {
+    type: Boolean,
+    default: true
+  },
+  /** 溢出气泡属性 */
+  overflowPopoverProps: Object as PropType<EleTooltipProps>,
+  /** 是否鼠标移入展开 */
+  hoverOpen: Boolean
+};
+
+export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>;
+
+/**
+ * 事件
+ */
+export const avatarGroupEmits = {
+  /** item 点击事件 */
+  itemClick: (_item: AvatarItem) => true,
+  /** 更多点击事件 */
+  moreClick: () => true,
+  /** 图片加载失败事件 */
+  error: (_option: AvatarErrorOption) => true
+};

package/packages/ele-avatar-group/style/index.scss

@@ -0,0 +1,73 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-avatar-group {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  font-size: 0;
+
+  .el-avatar {
+    vertical-align: top;
+    border: 1px solid elVar('bg-color', 'overlay');
+    transition: all 0.3s ease;
+    box-sizing: content-box;
+    position: relative;
+    cursor: pointer;
+    z-index: 1;
+
+    &:first-child {
+      margin-left: 0 !important;
+    }
+
+    &:hover {
+      z-index: 2;
+    }
+  }
+
+  .ele-avatar-more {
+    color: rgb(245, 106, 0);
+    background: elVar('bg-color', 'overlay');
+    display: inline-block;
+  }
+
+  .ele-avatar-more-inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(245, 106, 0, 0.2);
+  }
+
+  &.is-hover-open {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.3s ease;
+      pointer-events: all;
+      z-index: 9999;
+    }
+
+    &:hover {
+      &::before {
+        visibility: hidden;
+      }
+
+      .el-avatar {
+        margin-left: 0 !important;
+      }
+    }
+  }
+}
+
+.ele-avatar-popover.ele-popper.ele-popover {
+  min-width: auto;
+}
+
+.ele-avatar-popover > .ele-popover-body {
+  padding: 8px 12px;
+}

package/packages/ele-avatar-group/style/index.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/avatar/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';

package/packages/ele-avatar-group/types.ts

@@ -0,0 +1,21 @@
+/**
+ * 数据
+ */
+export interface AvatarItem extends Record<keyof any, any> {
+  /** 循环的 key */
+  key?: string | number | symbol;
+  /** 头像名称 */
+  label?: string;
+  /** 头像链接 */
+  value?: string;
+}
+
+/**
+ * 图片加载失败事件参数
+ */
+export interface AvatarErrorOption {
+  /** 数据 */
+  item: AvatarItem;
+  /** 事件 */
+  e: Event;
+}

package/packages/ele-backtop/index.vue

@@ -0,0 +1,106 @@
+<!-- 返回顶部 -->
+<template>
+  <Transition :name="transitionName">
+    <div
+      v-if="visible"
+      class="ele-backtop"
+      :style="{
+        bottom: typeof bottom === 'number' ? `${bottom}px` : bottom,
+        right: typeof right === 'number' ? `${right}px` : right
+      }"
+      @click="handleClick"
+    >
+      <slot>
+        <ElIcon>
+          <ArrowUp />
+        </ElIcon>
+      </slot>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+  import { ref, shallowRef, watch, onMounted, onBeforeUnmount } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { ArrowUp } from '../icons/index';
+  import { throttle } from '../utils/common';
+  import { backtopProps, backtopEmits } from './props';
+
+  defineOptions({ name: 'EleBacktop' });
+
+  const props = defineProps(backtopProps);
+
+  const emit = defineEmits(backtopEmits);
+
+  /** 是否显示 */
+  const visible = ref(false);
+
+  /** 目标元素 */
+  const targetEl = shallowRef<Element | null>(null);
+
+  /** 更新目标元素 */
+  const updateTarget = (el?: Element | null | string) => {
+    if (el !== targetEl.value && !(el == null && targetEl.value == null)) {
+      targetEl.value = !el || typeof el === 'string' ? null : el;
+    }
+  };
+
+  /** 点击事件 */
+  const handleClick = (e: MouseEvent) => {
+    if (targetEl.value) {
+      targetEl.value.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    emit('click', e);
+  };
+
+  /** 处理滚动事件 */
+  const handleScroll = () => {
+    if (targetEl.value != null && props.visibilityHeight != null) {
+      visible.value = targetEl.value.scrollTop >= props.visibilityHeight;
+    } else {
+      visible.value = false;
+    }
+  };
+
+  /** 滚动事件监听 */
+  const scrollListener = throttle(handleScroll, 300, true);
+
+  /** 解绑事件 */
+  const unbindEvent = () => {
+    if (targetEl.value != null) {
+      targetEl.value.removeEventListener('scroll', scrollListener);
+      targetEl.value = null;
+    }
+  };
+
+  /** 绑定事件 */
+  const bindEvent = () => {
+    unbindEvent();
+    if (typeof props.target === 'undefined') {
+      updateTarget(document.body);
+    } else if (typeof props.target === 'string' && props.target) {
+      updateTarget(document.querySelector(props.target));
+    } else {
+      updateTarget(props.target);
+    }
+    handleScroll();
+    if (targetEl.value) {
+      targetEl.value.addEventListener('scroll', scrollListener);
+    }
+  };
+
+  watch(
+    () => props.target,
+    () => {
+      bindEvent();
+    }
+  );
+
+  onMounted(() => {
+    bindEvent();
+  });
+
+  onBeforeUnmount(() => {
+    unbindEvent();
+  });
+</script>

package/packages/ele-backtop/props.ts

@@ -0,0 +1,38 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export const backtopProps = {
+  /** 触发滚动的对象 */
+  target: [String, Object] as PropType<string | HTMLElement | null>,
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200
+  },
+  /** 距离页面底部距离 */
+  bottom: {
+    type: [Number, String],
+    default: 60
+  },
+  /** 距离页面右边距 */
+  right: {
+    type: [Number, String],
+    default: 30
+  },
+  /** 过渡动画名称 */
+  transitionName: {
+    type: String,
+    default: 'ele-backtop-fade'
+  }
+};
+
+export type BacktopProps = ExtractPropTypes<typeof backtopProps>;
+
+/**
+ * 事件
+ */
+export const backtopEmits = {
+  click: (_e: MouseEvent) => true
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 返回顶部主题变量 */
+@mixin set-backtop-var($var) {
+  .ele-backtop {
+    @include set-ele-var('backtop', $var);
+  }
+}