ele-admin-plus 1.0.0-beta.1

package/lib/ele-file-list/style/index.scss

@@ -0,0 +1,415 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-file-list-var($ele);
+
+.ele-file-list-group {
+  position: relative;
+  user-select: none;
+
+  /* 复选框 */
+  .ele-file-list-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 1px solid elVar('border-color');
+    background: elVar('bg-color');
+    box-sizing: border-box;
+    transition: all 0.3s;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      border-color: elVar('color-primary');
+    }
+
+    // 对勾
+    &::before {
+      content: '';
+      display: table;
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      opacity: 0;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 21.5%;
+    }
+
+    &.is-checked {
+      background: elVar('color-primary');
+      border-color: elVar('color-primary');
+
+      &::before {
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+      }
+    }
+
+    // 半选
+    &::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      display: table;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0;
+      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+
+    &.is-indeterminate::after {
+      background: elVar('color-primary');
+      opacity: 1;
+    }
+
+    // 单选
+    &.is-radio {
+      border-radius: 50%;
+    }
+  }
+
+  /* 鼠标选择框 */
+  .ele-file-list-selector {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: eleVar('file-list', 'selector-border');
+    background: eleVar('file-list', 'selector-bg');
+    z-index: eleVar('file-list', 'selector-index');
+    pointer-events: none;
+  }
+
+  /* 右键菜单触发器 */
+  .ele-file-list-item-dropdown {
+    display: block;
+    max-width: 36px;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 36px;
+    right: 0;
+  }
+}
+
+/* 网格布局 */
+.ele-file-list {
+  position: relative;
+  box-sizing: border-box;
+
+  // header
+  .ele-file-list-header {
+    padding: 0 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid elVar('border-color', 'lighter');
+    line-height: 36px;
+    display: flex;
+
+    // 全选框
+    .ele-file-list-selection {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      .ele-file-list-checkbox {
+        margin-right: 14px;
+      }
+    }
+  }
+
+  // body
+  .ele-file-list-body {
+    padding-top: eleVar('file-list', 'item-space');
+    padding-left: eleVar('file-list', 'item-space');
+  }
+
+  /*  item */
+  .ele-file-list-item {
+    width: eleVar('file-list', 'item-width');
+    margin-right: eleVar('file-list', 'item-space');
+    margin-bottom: eleVar('file-list', 'item-space');
+    display: inline-block;
+    box-sizing: border-box;
+    border: eleVar('file-list', 'item-border');
+    border-radius: eleVar('file-list', 'item-radius');
+    transition: all 0.3s;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+
+    .ele-file-list-item-body {
+      padding: 6px 4px;
+      box-sizing: border-box;
+    }
+
+    // 图标
+    .ele-file-list-item-icon {
+      height: 84px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      & > img {
+        width: 56px;
+        height: 56px;
+        border-radius: 2px;
+        display: inline-block;
+        pointer-events: none;
+      }
+
+      & > .ele-file-list-item-image {
+        width: 84px;
+        height: 84px;
+        object-fit: cover;
+      }
+    }
+
+    // 标题
+    .ele-file-list-item-title {
+      margin-top: 4px;
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      transition: color 0.3s;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    // 复选框
+    .ele-file-list-item-checkbox {
+      border-radius: 50%;
+      background: elVar('bg-color');
+      transition: all 0.3s;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      opacity: 0;
+
+      .ele-file-list-checkbox {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: block;
+        opacity: 0.4;
+      }
+    }
+
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file-list', 'item-active-bg');
+
+      .ele-file-list-item-checkbox {
+        opacity: 1;
+      }
+    }
+
+    &.is-active,
+    &.is-checked {
+      border-color: eleVar('file-list', 'item-active-border-color');
+
+      .ele-file-list-item-checkbox .ele-file-list-checkbox {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* 表头排序图标 */
+.ele-file-list-item-sort {
+  width: 8px;
+  height: 12px;
+  margin-left: 6px;
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    display: block;
+    border: 4px solid eleVar('file-list', 'table-sort-color');
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+
+  &::before {
+    border-top-color: transparent;
+    margin: -4px 0 4px 0;
+  }
+
+  &::after {
+    border-bottom-color: transparent;
+  }
+
+  &.is-asc::before {
+    border-bottom-color: eleVar('file-list', 'table-sort-active-color');
+  }
+
+  &.is-desc::after {
+    border-top-color: eleVar('file-list', 'table-sort-active-color');
+  }
+}
+
+/* 表格布局 */
+.ele-file-list-table {
+  position: relative;
+
+  /* item */
+  .ele-file-list-item {
+    line-height: 44px;
+    border-top: 1px solid elVar('border-color', 'lighter');
+    transition: all 0.3s;
+    position: relative;
+
+    .ele-file-list-item-body {
+      display: flex;
+      align-items: center;
+    }
+
+    &:first-child {
+      border-top-color: transparent;
+      margin-top: -1px;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid elVar('border-color', 'lighter');
+    }
+
+    // 复选框
+    .ele-file-list-item-checkbox {
+      width: 36px;
+      padding-left: 16px;
+      box-sizing: border-box;
+      line-height: 0;
+      flex-shrink: 0;
+    }
+
+    // 图标和标题
+    .ele-file-list-item-name {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      min-width: 110px;
+      flex: 1;
+    }
+
+    .ele-file-list-item-icon {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      & > img {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        &:hover + .ele-file-list-item-title {
+          color: elVar('color-primary');
+        }
+      }
+    }
+
+    .ele-file-list-item-title {
+      padding-left: 10px;
+      transition: color 0.3s;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    // 工具按钮
+    .ele-file-list-item-tools {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      align-items: center;
+      display: none;
+
+      .ele-file-list-item-tool {
+        font-size: 17px;
+        margin-left: 16px;
+        color: elVar('color-primary');
+        cursor: pointer;
+      }
+    }
+
+    &:hover .ele-file-list-item-tools {
+      display: flex;
+    }
+
+    // 自定义列
+    .ele-file-list-item-cell {
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
+  }
+
+  // header
+  .ele-file-list-header .ele-file-list-item {
+    line-height: 36px;
+
+    .ele-file-list-item-name > div {
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    .ele-file-list-item-name,
+    .ele-file-list-item-cell {
+      transition: color 0.3s;
+      cursor: pointer;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+  }
+
+  // body
+  .ele-file-list-body .ele-file-list-item {
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file-list', 'item-active-bg');
+      border-color: eleVar('file-list', 'item-active-border-color');
+
+      & + .ele-file-list-item {
+        border-top-color: eleVar('file-list', 'item-active-border-color');
+      }
+    }
+  }
+}
+
+/* 右键菜单 */
+.ele-file-list-item-context {
+  min-width: 100px;
+}

package/lib/ele-file-list/types/index.d.ts

@@ -0,0 +1,86 @@
+import type { CSSProperties } from 'vue';
+/**
+ * 图标数据
+ */
+export interface IconItem {
+    /** 图标地址 */
+    icon: string;
+    /** 类型 */
+    type?: IconItemType;
+    /** 对应文件后缀 */
+    suffixes?: string[];
+}
+/**
+ * 图标类型
+ */
+export type IconItemType = 'file' | 'dir';
+/**
+ * 文件数据格式
+ */
+export interface FileItem extends Record<string | number | symbol, unknown> {
+    /** 唯一标识 */
+    key: string;
+    /** 文件名称 */
+    name: string;
+    /** 文件访问地址 */
+    url?: string;
+    /** 缩略图访问地址 */
+    thumbnail?: string;
+    /** 是否是文件夹 */
+    isDirectory?: boolean;
+    /** 文件大小 */
+    length?: string;
+    /** 文件修改日期 */
+    updateTime?: string;
+}
+/**
+ * 排序结果
+ */
+export interface SortValue {
+    /** 排序字段 */
+    sort: string;
+    /** 排序方式 */
+    order?: 'asc' | 'desc' | null;
+}
+/**
+ * 表格自定义列
+ */
+export interface ColumnItem {
+    /** 标题 */
+    title?: string;
+    /** 字段名 */
+    prop: string;
+    /** 插槽 */
+    slot?: string;
+    /** 表头插槽 */
+    headerSlot?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义表头样式 */
+    headerStyle?: CSSProperties;
+    /** 是否可以排序 */
+    sortable?: boolean;
+}
+/**
+ * 右键菜单事件参数
+ */
+export interface ItemContextMenuOption {
+    /** 指令 */
+    key: string;
+    /** 数据 */
+    item: FileItem;
+}
+/**
+ * 选择框类型
+ */
+export type SelectionType = 'checkbox' | 'radio';
+/**
+ * 国际化
+ */
+export interface FileListLocale {
+    selectAll: string;
+    selectTips: string;
+    fileName: string;
+    fileSize: string;
+    fileTimestamp: string;
+}

package/lib/ele-file-list-tool/index.d.ts

@@ -0,0 +1,8 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    onClick: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onClick?: (() => any) | undefined;
+}, {}, {}>;
+export default _sfc_main;

package/lib/ele-file-list-tool/index.js

@@ -0,0 +1,30 @@
+"use strict";
+const vue = require("vue");
+const _sfc_main = vue.defineComponent({
+  name: "EleFileListTool",
+  emits: {
+    click: () => true
+  },
+  setup(_props, { emit }) {
+    return {
+      onClick: () => emit("click")
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "ele-file-list-item-tool",
+    onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-file-list-tool/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//

package/lib/ele-icon-select/components/icon-grid.d.ts

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { EmptyProps, ElTooltipProps } from 'element-plus';
+declare const _sfc_main: import("vue").DefineComponent<{
+    icon: StringConstructor;
+    data: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    emptyProps: PropType<Partial<EmptyProps>>;
+    tooltip: BooleanConstructor;
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    popperVisible: BooleanConstructor;
+}, {
+    tooltipContent: import("vue").Ref<string>;
+    virtualRef: import("vue").Ref<any>;
+    onItemHover: (icon: string, e: MouseEvent) => void;
+    onItemClick: (icon: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (_icon: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: StringConstructor;
+    data: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    emptyProps: PropType<Partial<EmptyProps>>;
+    tooltip: BooleanConstructor;
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    popperVisible: BooleanConstructor;
+}>> & {
+    onSelect?: ((_icon: string) => any) | undefined;
+}, {
+    tooltip: boolean;
+    popperVisible: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-icon-select/components/icon-grid.js

@@ -0,0 +1,86 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const _sfc_main = vue.defineComponent({
+  name: "IconGrid",
+  components: { ElEmpty: elementPlus.ElEmpty, ElTooltip: elementPlus.ElTooltip },
+  props: {
+    // 选中的图标
+    icon: String,
+    // 图标数据
+    data: {
+      type: Array,
+      required: true
+    },
+    // 空组件属性
+    emptyProps: Object,
+    // 是否显示提示
+    tooltip: Boolean,
+    // 提示属性
+    tooltipProps: Object,
+    // 气泡是否展开
+    popperVisible: Boolean
+  },
+  emits: {
+    select: (_icon) => true
+  },
+  setup(props, { emit }) {
+    const tooltipContent = vue.ref("");
+    const virtualRef = vue.ref();
+    const onItemHover = (icon, e) => {
+      if (props.tooltip && props.popperVisible && icon) {
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = icon;
+      }
+    };
+    const onItemClick = (icon) => {
+      emit("select", icon);
+    };
+    return {
+      tooltipContent,
+      virtualRef,
+      onItemHover,
+      onItemClick
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-icon-select-list ele-scrollbar-hover ele-scrollbar-mini" };
+const _hoisted_2 = ["title", "onClick", "onMouseover"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-icon-select-empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (d, i) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: i + "-" + d,
+        class: vue.normalizeClass(["ele-icon-select-item", { "is-active": _ctx.icon && d === _ctx.icon }]),
+        title: _ctx.tooltip ? void 0 : d,
+        onClick: ($event) => _ctx.onItemClick(d),
+        onMouseover: (e) => _ctx.onItemHover(d, e)
+      }, [
+        vue.renderSlot(_ctx.$slots, "icon", { icon: d })
+      ], 42, _hoisted_2);
+    }), 128)),
+    !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
+    ])) : vue.createCommentVNode("", true),
+    vue.createVNode(_component_ElTooltip, vue.mergeProps({ placement: "top" }, _ctx.tooltipProps, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true
+    }), null, 16, ["content", "virtualRef"])
+  ]);
+}
+const iconGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = iconGrid;

package/lib/ele-icon-select/components/icon-popper.d.ts

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+import type { EmptyProps, ElTooltipProps } from 'element-plus';
+import type { IconItem } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    icon: StringConstructor;
+    data: PropType<string[] | IconItem[]>;
+    emptyProps: PropType<Partial<EmptyProps>>;
+    filterable: BooleanConstructor;
+    filterPlaceholder: StringConstructor;
+    hideOnSingleTab: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    popperVisible: BooleanConstructor;
+}, {
+    Search: import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    tabs: import("vue").Ref<string[]>;
+    tabActive: import("vue").Ref<number | undefined>;
+    menus: import("vue").Ref<string[]>;
+    menuActive: import("vue").Ref<number | undefined>;
+    icons: import("vue").Ref<string[]>;
+    keywords: import("vue").Ref<string>;
+    tabBar: import("vue").ComputedRef<boolean>;
+    onSearch: () => void;
+    onTabClick: (index: number) => void;
+    onMenuClick: (index: number) => void;
+    onSelect: (icon: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (_icon: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: StringConstructor;
+    data: PropType<string[] | IconItem[]>;
+    emptyProps: PropType<Partial<EmptyProps>>;
+    filterable: BooleanConstructor;
+    filterPlaceholder: StringConstructor;
+    hideOnSingleTab: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    popperVisible: BooleanConstructor;
+}>> & {
+    onSelect?: ((_icon: string) => any) | undefined;
+}, {
+    tooltip: boolean;
+    filterable: boolean;
+    hideOnSingleTab: boolean;
+    popperVisible: boolean;
+}, {}>;
+export default _sfc_main;