y-admin-pro 0.0.1

package/packages/ele-edit-tag/style/index.scss

@@ -0,0 +1,123 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 标签 */
+.ele-edit-tag {
+  margin-top: 8px;
+
+  .el-tag {
+    margin: 0 8px 8px 0;
+    vertical-align: top;
+  }
+}
+
+/* 添加按钮 */
+.ele-edit-tag-add {
+  &.el-tag {
+    cursor: text;
+    margin-right: 0;
+    border-style: dashed;
+    background: none;
+  }
+
+  & > .el-tag__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.ele-edit-tag .ele-edit-tag-add-icon {
+  width: 1em;
+  height: 1em;
+  border-radius: 0;
+  font-size: inherit;
+  cursor: inherit;
+  opacity: 0.6;
+}
+
+/* 禁用 */
+.ele-edit-tag.is-disabled .ele-edit-tag-add {
+  cursor: not-allowed;
+  color: elVar('disabled', 'text-color');
+  background: elVar('disabled', 'bg-color');
+  border-color: elVar('disabled', 'border-color');
+}
+
+/* 只读 */
+.ele-edit-tag.is-readonly > .el-tag:last-child {
+  margin-right: 0;
+}
+
+/* 输入框 */
+span.el-tag.ele-edit-tag-input {
+  padding: 0;
+}
+
+.ele-edit-tag-input {
+  &.el-tag {
+    width: 80px;
+    margin-right: 0;
+    display: inline-block;
+    background: none;
+    border: none;
+  }
+
+  & > .el-tag__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: inherit;
+
+    & > .el-input {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .el-input {
+    .el-input__wrapper {
+      height: 100%;
+      padding-left: 8px;
+      padding-right: 8px;
+      box-sizing: border-box;
+      border-radius: inherit;
+    }
+
+    .el-input__inner {
+      height: 100%;
+      line-height: inherit;
+    }
+  }
+
+  &.is-error .el-input .el-input__wrapper {
+    box-shadow: 0 0 0 0.8px elVar('color-danger') inset;
+  }
+}
+
+/* 小尺寸 */
+.ele-edit-tag.is-small .ele-edit-tag-input {
+  width: 60px;
+
+  .el-input .el-input__wrapper {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+}
+
+/* 大尺寸 */
+.ele-edit-tag.is-large .ele-edit-tag-input {
+  width: 100px;
+
+  .el-input .el-input__wrapper {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}

package/packages/ele-edit-tag/style/index.ts

@@ -0,0 +1,5 @@
+import 'element-plus/es/components/tag/style/index';
+import 'element-plus/es/components/input/style/index';
+import 'element-plus/es/components/icon/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';

package/packages/ele-edit-tag/types.ts

@@ -0,0 +1,9 @@
+/**
+ * 添加校验方法
+ */
+export type Validator = (value: string) => Promise<void>;
+
+/**
+ * 移除校验方法
+ */
+export type BeforeRemove = (index: number, value?: string) => Promise<void>;

package/packages/ele-ellipsis/index.vue

@@ -0,0 +1,125 @@
+<!-- 文本省略 -->
+<template>
+  <EleText
+    v-bind="textProps"
+    ref="textRef"
+    :style="rootStyle"
+    :class="['ele-ellipsis', { 'is-multi-line': multiLine }]"
+    @mouseover="handleHover"
+  >
+    <slot></slot>
+    <EleTooltip v-if="virtualRef" v-bind="tooltipProps" />
+  </EleText>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import type { StyleValue } from '../ele-app/types';
+  import type {
+    EleTextProps,
+    EleTextInstance,
+    EleTooltipProps
+  } from '../ele-app/plus';
+  import { omit, pick, contentIsEllipsis } from '../utils/common';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import EleText from '../ele-text/index.vue';
+  import { textPropKeys } from '../ele-text/props';
+  import type { EllipsisTooltip } from './types';
+  import { ellipsisProps } from './props';
+
+  defineOptions({ name: 'EleEllipsis' });
+
+  const props = defineProps(ellipsisProps);
+
+  /** 文本组件 */
+  const textRef = ref<EleTextInstance>(null);
+
+  /** 提示单例目标 */
+  const virtualRef = ref<HTMLElement>();
+
+  /** 提示文本 */
+  const text = ref<string>('');
+
+  /** 原生的提示内容 */
+  const title = computed<string | undefined>(() => {
+    if (
+      !props.tooltip ||
+      typeof props.tooltip !== 'object' ||
+      props.tooltip.original !== true
+    ) {
+      return;
+    }
+    return text.value;
+  });
+
+  /** 提示组件属性 */
+  const tooltipProps = computed<EleTooltipProps>(() => {
+    const isObj = props.tooltip && props.tooltip !== true;
+    const opt: EllipsisTooltip = isObj ? { ...props.tooltip } : {};
+    opt.content = text.value;
+    opt.virtualRef = virtualRef.value;
+    opt.virtualTriggering = true;
+    return omit(opt, ['original']);
+  });
+
+  /** 是否是多行 */
+  const multiLine = computed<boolean>(() => {
+    return !!(props.maxLine && props.maxLine > 1);
+  });
+
+  /** 文本组件属性 */
+  const textProps = computed<EleTextProps>(() => {
+    return Object.assign({ title: title.value }, pick(props, textPropKeys));
+  });
+
+  /** 根节点样式 */
+  const rootStyle = computed<StyleValue>(() => {
+    const style: StyleValue = {};
+    const { lineHeight, maxLine } = props;
+    if (lineHeight != null) {
+      const h = typeof lineHeight === 'number' ? `${lineHeight}px` : lineHeight;
+      style.lineHeight = h;
+      if (multiLine.value) {
+        style.height = `calc(${h} * ${maxLine})`;
+      }
+    }
+    if (multiLine.value) {
+      style['-webkit-line-clamp'] = maxLine;
+    }
+    return style;
+  });
+
+  /** 打开提示 */
+  const handleHover = (e: MouseEvent) => {
+    if (!props.tooltip) {
+      virtualRef.value = void 0;
+      return;
+    }
+    const target = e.currentTarget as HTMLElement;
+    // 获取提示文本
+    if (typeof props.tooltip === 'object' && props.tooltip.content) {
+      if (text.value !== props.tooltip.content) {
+        text.value = props.tooltip.content;
+      }
+    } else {
+      if (target) {
+        const temp = contentIsEllipsis(target) ? target.innerText : '';
+        if (text.value !== temp) {
+          text.value = temp;
+        }
+      }
+    }
+    // 判断是原生提示还是组件提示
+    if (text.value && (props.tooltip === true || !props.tooltip.original)) {
+      if (virtualRef.value !== target) {
+        virtualRef.value = target;
+      }
+    } else {
+      virtualRef.value = void 0;
+    }
+  };
+
+  defineExpose({
+    textRef
+  });
+</script>

package/packages/ele-ellipsis/props.ts

@@ -0,0 +1,23 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { textProps } from '../ele-text/props';
+import type { EllipsisTooltip } from './types';
+
+/**
+ * 属性
+ */
+export const ellipsisProps = {
+  ...textProps,
+  /** 最大行数 */
+  maxLine: Number,
+  /** 行高 */
+  lineHeight: [Number, String],
+  /** 文字提示属性 */
+  tooltip: {
+    type: [Boolean, Object] as PropType<boolean | EllipsisTooltip>,
+    default: () => {
+      return { original: true };
+    }
+  }
+};
+
+export type EllipsisProps = ExtractPropTypes<typeof ellipsisProps>;

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

@@ -0,0 +1,27 @@
+.ele-ellipsis {
+  overflow: hidden;
+  word-break: break-all;
+
+  &.is-multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  &:not(.is-multi-line) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    /* 链接支持单行省略 */
+    & > .el-link {
+      display: inline;
+
+      & > .el-link__inner {
+        display: inline;
+      }
+
+      & > .el-icon {
+        vertical-align: -1.7px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import '../../ele-tooltip/style/index';
+import '../../ele-text/style/index';
+import './index.scss';

package/packages/ele-ellipsis/types.ts

@@ -0,0 +1,9 @@
+import type { EleTooltipProps } from '../ele-app/plus';
+
+/**
+ * 文字提示属性
+ */
+export interface EllipsisTooltip extends EleTooltipProps {
+  /** 是否使用原生的提示 */
+  original?: boolean;
+}

package/packages/ele-file-list/components/file-grid-item.vue

@@ -0,0 +1,151 @@
+<!-- 网格布局条目 -->
+<template>
+  <div
+    :class="[
+      'ele-file-list-item',
+      { 'is-checked': selected },
+      { 'is-active': ctxMenuDropdownVisible }
+    ]"
+    @click.stop="handleClick"
+  >
+    <div class="ele-file-list-item-body" @contextmenu="handleContextmenu">
+      <div class="ele-file-list-item-icon">
+        <slot name="icon" :icon="icon" :item="item">
+          <img
+            :src="icon"
+            :class="{ 'ele-file-list-item-image': !!item.thumbnail }"
+          />
+        </slot>
+      </div>
+      <slot name="title" :item="item">
+        <div :title="item.name" class="ele-file-list-item-title">
+          {{ item.name }}
+        </div>
+      </slot>
+    </div>
+    <!-- 复选框 -->
+    <div
+      v-if="selectable"
+      class="ele-file-list-item-checkbox"
+      @click.stop="handleCheckChange"
+    >
+      <i class="ele-file-list-checkbox is-checked"></i>
+    </div>
+    <!-- 右键菜单 -->
+    <div
+      ref="dropdownTriggerRef"
+      class="ele-file-list-item-dropdown"
+      @click.stop=""
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, computed } from 'vue';
+  import type {
+    IconItem,
+    FileItem,
+    SelectionType,
+    ContextOpenOption
+  } from '../types';
+
+  defineOptions({ name: 'FileGridItem' });
+
+  const props = defineProps({
+    /** 数据 */
+    item: {
+      type: Object as PropType<FileItem>,
+      required: true
+    },
+    /** 选择框类型 */
+    selectionType: String as PropType<SelectionType>,
+    /** 多选选中数据 */
+    selections: Array as PropType<FileItem[]>,
+    /** 单选选中数据 */
+    current: Object as PropType<FileItem>,
+    /** 后缀对应的图标 */
+    icons: Array as PropType<IconItem[]>,
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: Boolean
+  });
+
+  const emit = defineEmits({
+    click: (_item: FileItem) => true,
+    checkChange: (_item: FileItem) => true,
+    contextOpen: (_option: ContextOpenOption) => true
+  });
+
+  /** 右键菜单触发节点 */
+  const dropdownTriggerRef = ref<HTMLElement | null>(null);
+
+  /** 是否可以选中 */
+  const selectable = computed<boolean>(() => {
+    return (
+      props.selectionType === 'checkbox' || props.selectionType === 'radio'
+    );
+  });
+
+  /** 是否选中 */
+  const selected = computed<boolean>(() => {
+    if (!selectable.value || !props.item) {
+      return false;
+    }
+    if (props.selectionType === 'checkbox') {
+      return !!(
+        props.selections &&
+        props.selections.some((t) => t.key === props.item.key)
+      );
+    }
+    return !!(props.current && props.current.key === props.item.key);
+  });
+
+  /** 对应图标 */
+  const icon = computed<string | undefined>(() => {
+    // 有缩略图返回文件缩略图
+    if (props.item.thumbnail) {
+      return props.item.thumbnail;
+    }
+    if (!props.icons) {
+      return;
+    }
+    // 文件夹
+    if (props.item.isDirectory) {
+      return props.icons.find((d) => d.type === 'dir')?.icon;
+    }
+    // 匹配后缀对应的图标
+    if (props.item.name) {
+      const icon = props.icons.find((d) => {
+        if (!d.suffixes) {
+          return false;
+        }
+        return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
+      })?.icon;
+      if (icon) {
+        return icon;
+      }
+    }
+    return props.icons.find((d) => d.type === 'file')?.icon;
+  });
+
+  /** 点击事件 */
+  const handleClick = () => {
+    emit('click', props.item);
+  };
+
+  /** 复选框点击事件 */
+  const handleCheckChange = () => {
+    emit('checkChange', props.item);
+  };
+
+  /** 触发右键菜单 */
+  const handleContextmenu = (e: MouseEvent) => {
+    if (dropdownTriggerRef.value != null) {
+      emit('contextOpen', {
+        item: props.item,
+        triggerEl: dropdownTriggerRef.value,
+        e
+      });
+    }
+  };
+</script>

package/packages/ele-file-list/components/file-grid.vue

@@ -0,0 +1,119 @@
+<!-- 网格布局 -->
+<template>
+  <ReceiverView class="ele-file-list">
+    <div v-if="selectionType === 'checkbox'" class="ele-file-list-header">
+      <div class="ele-file-list-selection" @click.stop="handleCheckAllChange">
+        <i
+          :class="[
+            'ele-file-list-checkbox',
+            { 'is-checked': isCheckAll },
+            { 'is-indeterminate': isIndeterminate }
+          ]"
+        ></i>
+        <div>{{ headerText }}</div>
+      </div>
+    </div>
+    <div class="ele-file-list-body">
+      <FileGridItem
+        v-for="item in data"
+        :key="item.key"
+        :item="item"
+        :selectionType="selectionType"
+        :selections="selections"
+        :current="current"
+        :icons="icons"
+        :ctxMenuDropdownVisible="
+          ctxMenuDropdownVisible && contextMenuFileItem === item
+        "
+        @click="handleItemClick"
+        @checkChange="handleItemCheckChange"
+        @contextOpen="handleItemContextOpen"
+      >
+        <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </FileGridItem>
+    </div>
+  </ReceiverView>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { computed } from 'vue';
+  import ReceiverView from '../../ele-config-provider/components/receiver-view';
+  import FileGridItem from './file-grid-item.vue';
+  import type {
+    IconItem,
+    FileItem,
+    SelectionType,
+    ContextOpenOption
+  } from '../types';
+
+  defineOptions({ name: 'FileGrid' });
+
+  const props = defineProps({
+    /** 文件数据 */
+    data: Array as PropType<FileItem[]>,
+    /** 后缀对应的图标 */
+    icons: Array as PropType<IconItem[]>,
+    /** 选择框类型 */
+    selectionType: String as PropType<SelectionType>,
+    /** 已选中的数据 */
+    selections: Array as PropType<FileItem[]>,
+    /** 单选选中数据 */
+    current: Object as PropType<FileItem>,
+    /** 是否是全选 */
+    isCheckAll: Boolean,
+    /** 是否是半选 */
+    isIndeterminate: Boolean,
+    /** 全选按钮文字 */
+    checkAllText: String,
+    /** 选中后的文字 */
+    selectedText: String,
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: Boolean,
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: Object as PropType<FileItem | null>
+  });
+
+  const emit = defineEmits({
+    checkAllChange: () => true,
+    itemClick: (_item: FileItem) => true,
+    itemCheckChange: (_item: FileItem) => true,
+    itemContextOpen: (_option: ContextOpenOption) => true
+  });
+
+  /** 顶栏文本 */
+  const headerText = computed<string | undefined>(() => {
+    if (!props.selections || !props.selections.length) {
+      return props.checkAllText;
+    }
+    if (!props.selectedText) {
+      return '';
+    }
+    return props.selectedText.replace(
+      /\{\s*total\s*\}/g,
+      String(props.selections.length)
+    );
+  });
+
+  /** 全选框点击事件 */
+  const handleCheckAllChange = () => {
+    emit('checkAllChange');
+  };
+
+  /** 文件点击事件 */
+  const handleItemClick = (item: FileItem) => {
+    emit('itemClick', item);
+  };
+
+  /** 文件复选框点击事件 */
+  const handleItemCheckChange = (item: FileItem) => {
+    emit('itemCheckChange', item);
+  };
+
+  /** 文件右键菜单展开事件 */
+  const handleItemContextOpen = (option: ContextOpenOption) => {
+    emit('itemContextOpen', option);
+  };
+</script>

package/packages/ele-file-list/components/file-sort.vue

@@ -0,0 +1,26 @@
+<!-- 排序图标 -->
+<template>
+  <i
+    :class="[
+      'ele-file-list-item-sort',
+      { 'is-asc': name === sort && 'asc' === order },
+      { 'is-desc': name === sort && 'desc' === order }
+    ]"
+  ></i>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'FileSort' });
+
+  defineProps({
+    /** 当前排序字段 */
+    sort: String,
+    /** 当前排序方式 */
+    order: String,
+    /** 排序字段名称 */
+    name: {
+      type: String,
+      required: true
+    }
+  });
+</script>