ele-admin-plus 1.0.0-beta.1

package/lib/ele-file-list/components/file-table-item.js

@@ -0,0 +1,200 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const _sfc_main = vue.defineComponent({
+  name: "FileTableItem",
+  components: { ElDropdown: elementPlus.ElDropdown, ElDropdownMenu: elementPlus.ElDropdownMenu },
+  props: {
+    // 数据
+    item: {
+      type: Object,
+      required: true
+    },
+    // 选择框类型
+    selectionType: String,
+    // 多选选中数据
+    selections: Array,
+    // 单选选中数据
+    current: Object,
+    // 后缀对应的图标
+    icons: Array,
+    // 自定义列配置
+    columns: Array
+  },
+  emits: {
+    click: (_item) => true,
+    checkChange: (_item) => true,
+    contextMenu: (_option) => true,
+    contextOpen: (_ref) => true
+  },
+  setup(props, { emit }) {
+    const dropdownRef = vue.ref(null);
+    const selectable = vue.computed(() => {
+      return props.selectionType === "checkbox" || props.selectionType === "radio";
+    });
+    const selected = vue.computed(() => {
+      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 = vue.computed(() => {
+      var _a, _b, _c;
+      if (!props.icons) {
+        return;
+      }
+      if (props.item.isDirectory) {
+        return (_a = props.icons.find((d) => d.type === "dir")) == null ? void 0 : _a.icon;
+      }
+      if (props.item.name) {
+        const icon2 = (_b = props.icons.find((d) => {
+          if (!d.suffixes) {
+            return false;
+          }
+          return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
+        })) == null ? void 0 : _b.icon;
+        if (icon2) {
+          return icon2;
+        }
+      }
+      return (_c = props.icons.find((d) => d.type === "file")) == null ? void 0 : _c.icon;
+    });
+    const onClick = () => {
+      emit("click", props.item);
+    };
+    const onCheckChange = () => {
+      emit("checkChange", props.item);
+    };
+    const onContextmenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dropdownRef.value) {
+        dropdownRef.value.handleOpen();
+      }
+    };
+    const onItemContextMenu = (command) => {
+      emit("contextMenu", { key: command, item: props.item });
+    };
+    const onContextVisibleChange = (visible) => {
+      if (visible) {
+        emit("contextOpen", dropdownRef.value);
+      }
+    };
+    return {
+      dropdownRef,
+      selectable,
+      selected,
+      icon,
+      onClick,
+      onCheckChange,
+      onContextmenu,
+      onItemContextMenu,
+      onContextVisibleChange
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-file-list-item-checkbox"
+};
+const _hoisted_2 = { class: "ele-file-list-item-name" };
+const _hoisted_3 = { class: "ele-file-list-item-icon" };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = ["title"];
+const _hoisted_6 = {
+  key: 0,
+  class: "ele-file-list-item-tools"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElDropdownMenu = vue.resolveComponent("ElDropdownMenu");
+  const _component_ElDropdown = vue.resolveComponent("ElDropdown");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["ele-file-list-item", { "is-checked": _ctx.selected }]),
+    onClick: _cache[5] || (_cache[5] = vue.withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
+  }, [
+    vue.createElementVNode("div", {
+      class: "ele-file-list-item-body",
+      onContextmenu: _cache[3] || (_cache[3] = (...args) => _ctx.onContextmenu && _ctx.onContextmenu(...args))
+    }, [
+      _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("i", {
+          class: vue.normalizeClass([
+            "ele-file-list-checkbox",
+            { "is-radio": _ctx.selectionType === "radio" },
+            { "is-checked": _ctx.selected }
+          ]),
+          onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onCheckChange && _ctx.onCheckChange(...args), ["stop"]))
+        }, null, 2)
+      ])) : vue.createCommentVNode("", true),
+      vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("img", {
+            src: _ctx.icon,
+            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+          }, null, 8, _hoisted_4),
+          vue.createElementVNode("div", {
+            title: _ctx.item.name,
+            class: "ele-file-list-item-title",
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+          }, vue.toDisplayString(_ctx.item.name), 9, _hoisted_5)
+        ]),
+        _ctx.$slots.tool ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+          vue.renderSlot(_ctx.$slots, "tool", { item: _ctx.item })
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          key: col.prop,
+          style: vue.normalizeStyle(col.style),
+          class: "ele-file-list-item-cell"
+        }, [
+          col.slot && _ctx.$slots[col.slot] ? vue.renderSlot(_ctx.$slots, col.slot, {
+            key: 0,
+            item: _ctx.item,
+            col
+          }) : _ctx.item && col && col.prop ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createTextVNode(vue.toDisplayString(_ctx.item[col.prop]), 1)
+          ], 64)) : vue.createCommentVNode("", true)
+        ], 4);
+      }), 128))
+    ], 32),
+    _ctx.$slots.contextMenu ? (vue.openBlock(), vue.createBlock(_component_ElDropdown, {
+      key: 0,
+      ref: "dropdownRef",
+      trigger: "click",
+      placement: "bottom-start",
+      popperClass: "ele-file-list-item-context",
+      class: "ele-file-list-item-dropdown",
+      onCommand: _ctx.onItemContextMenu,
+      onVisibleChange: _ctx.onContextVisibleChange
+    }, {
+      dropdown: vue.withCtx(() => [
+        vue.createVNode(_component_ElDropdownMenu, null, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "contextMenu", { item: _ctx.item })
+          ]),
+          _: 3
+        })
+      ]),
+      default: vue.withCtx(() => [
+        vue.createElementVNode("div", {
+          onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+          }, ["stop"]))
+        })
+      ]),
+      _: 3
+    }, 8, ["onCommand", "onVisibleChange"])) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const fileTableItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = fileTableItem;

package/lib/ele-file-list/components/file-table.d.ts

@@ -0,0 +1,60 @@
+import type { PropType } from 'vue';
+import type { ElDropdown } from 'element-plus';
+import type { IconItem, FileItem, ColumnItem, ItemContextMenuOption, SelectionType } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    data: PropType<FileItem[]>;
+    icons: PropType<IconItem[]>;
+    selectionType: PropType<SelectionType>;
+    selections: PropType<FileItem[]>;
+    current: PropType<FileItem>;
+    isCheckAll: BooleanConstructor;
+    isIndeterminate: BooleanConstructor;
+    nameText: StringConstructor;
+    sizeText: StringConstructor;
+    timeText: StringConstructor;
+    sortable: BooleanConstructor;
+    sort: StringConstructor;
+    order: StringConstructor;
+    columns: PropType<ColumnItem[]>;
+}, {
+    itemRefs: import("vue").Ref<any[]>;
+    tableCols: import("vue").ComputedRef<ColumnItem[]>;
+    onCheckAllChange: () => void;
+    onItemClick: (item: FileItem) => void;
+    onItemCheckChange: (item: FileItem) => void;
+    onSortChange: (sort: string, col?: ColumnItem) => void;
+    onItemContextMenu: (option: ItemContextMenuOption) => void;
+    onItemContextOpen: (ref: InstanceType<typeof ElDropdown> | null) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    checkAllChange: () => true;
+    itemClick: (_item: FileItem) => true;
+    itemCheckChange: (_item: FileItem) => true;
+    itemContextMenu: (_option: ItemContextMenuOption) => true;
+    sortChange: (_sort: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: PropType<FileItem[]>;
+    icons: PropType<IconItem[]>;
+    selectionType: PropType<SelectionType>;
+    selections: PropType<FileItem[]>;
+    current: PropType<FileItem>;
+    isCheckAll: BooleanConstructor;
+    isIndeterminate: BooleanConstructor;
+    nameText: StringConstructor;
+    sizeText: StringConstructor;
+    timeText: StringConstructor;
+    sortable: BooleanConstructor;
+    sort: StringConstructor;
+    order: StringConstructor;
+    columns: PropType<ColumnItem[]>;
+}>> & {
+    onCheckAllChange?: (() => any) | undefined;
+    onItemClick?: ((_item: FileItem) => any) | undefined;
+    onItemCheckChange?: ((_item: FileItem) => any) | undefined;
+    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
+    onSortChange?: ((_sort: string) => any) | undefined;
+}, {
+    isCheckAll: boolean;
+    isIndeterminate: boolean;
+    sortable: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-file-list/components/file-table.js

@@ -0,0 +1,219 @@
+"use strict";
+const vue = require("vue");
+const FileTableItem = require("./file-table-item");
+const FileSort = require("./file-sort");
+const _sfc_main = vue.defineComponent({
+  name: "FileTable",
+  components: { FileTableItem, FileSort },
+  props: {
+    // 文件数据
+    data: Array,
+    // 后缀对应的图标
+    icons: Array,
+    // 选择框类型
+    selectionType: String,
+    // 选中数据
+    selections: Array,
+    // 单选选中数据
+    current: Object,
+    // 是否是全选
+    isCheckAll: Boolean,
+    // 是否是半选
+    isIndeterminate: Boolean,
+    // 文件名文字
+    nameText: String,
+    // 文件大小文字
+    sizeText: String,
+    // 修改时间文字
+    timeText: String,
+    // 默认的列是否可以排序
+    sortable: Boolean,
+    // 排序字段
+    sort: String,
+    // 排序方式
+    order: String,
+    // 自定义列配置
+    columns: Array
+  },
+  emits: {
+    checkAllChange: () => true,
+    itemClick: (_item) => true,
+    itemCheckChange: (_item) => true,
+    itemContextMenu: (_option) => true,
+    sortChange: (_sort) => true
+  },
+  setup(props, { emit }) {
+    const itemRefs = vue.ref([]);
+    const tableCols = vue.computed(() => {
+      if (props.columns) {
+        return props.columns;
+      }
+      const cols = [
+        {
+          title: props.sizeText,
+          prop: "length",
+          style: {
+            width: "120px",
+            flexShrink: 0
+          },
+          sortable: props.sortable
+        },
+        {
+          title: props.timeText,
+          prop: "updateTime",
+          style: {
+            width: "180px",
+            flexShrink: 0
+          },
+          sortable: props.sortable
+        }
+      ];
+      return cols;
+    });
+    const onCheckAllChange = () => {
+      emit("checkAllChange");
+    };
+    const onItemClick = (item) => {
+      emit("itemClick", item);
+    };
+    const onItemCheckChange = (item) => {
+      emit("itemCheckChange", item);
+    };
+    const onSortChange = (sort, col) => {
+      if (!col) {
+        if (props.sortable) {
+          emit("sortChange", sort);
+        }
+      } else if (col.sortable) {
+        emit("sortChange", sort);
+      }
+    };
+    const onItemContextMenu = (option) => {
+      emit("itemContextMenu", option);
+    };
+    const onItemContextOpen = (ref2) => {
+      if (itemRefs.value) {
+        itemRefs.value.forEach((r) => {
+          if (r.dropdownRef && r.dropdownRef !== ref2) {
+            r.dropdownRef.handleClose();
+          }
+        });
+      }
+    };
+    return {
+      itemRefs,
+      tableCols,
+      onCheckAllChange,
+      onItemClick,
+      onItemCheckChange,
+      onSortChange,
+      onItemContextMenu,
+      onItemContextOpen
+    };
+  }
+});
+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-file-list-table" };
+const _hoisted_2 = { class: "ele-file-list-header" };
+const _hoisted_3 = { class: "ele-file-list-item" };
+const _hoisted_4 = { class: "ele-file-list-item-body" };
+const _hoisted_5 = {
+  key: 0,
+  class: "ele-file-list-item-checkbox"
+};
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "ele-file-list-body" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FileSort = vue.resolveComponent("FileSort");
+  const _component_FileTableItem = vue.resolveComponent("FileTableItem");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.createElementVNode("div", _hoisted_3, [
+        vue.createElementVNode("div", _hoisted_4, [
+          _ctx.selectionType === "checkbox" || _ctx.selectionType === "radio" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            _ctx.selectionType === "checkbox" ? (vue.openBlock(), vue.createElementBlock("i", {
+              key: 0,
+              class: vue.normalizeClass([
+                "ele-file-list-checkbox",
+                { "is-checked": _ctx.isCheckAll },
+                { "is-indeterminate": _ctx.isIndeterminate }
+              ]),
+              onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onCheckAllChange && _ctx.onCheckAllChange(...args), ["stop"]))
+            }, null, 2)) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: "ele-file-list-item-name",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onSortChange("name"))
+          }, [
+            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.nameText), 1),
+            _ctx.sortable ? (vue.openBlock(), vue.createBlock(_component_FileSort, {
+              key: 0,
+              sort: _ctx.sort,
+              order: _ctx.order,
+              name: "name"
+            }, null, 8, ["sort", "order"])) : vue.createCommentVNode("", true)
+          ]),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tableCols, (col) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: col.prop,
+              style: vue.normalizeStyle(col.headerStyle || col.style),
+              class: "ele-file-list-item-cell",
+              onClick: ($event) => _ctx.onSortChange(col.prop, col)
+            }, [
+              vue.createElementVNode("span", null, [
+                col.headerSlot && _ctx.$slots[col.headerSlot] ? vue.renderSlot(_ctx.$slots, col.headerSlot, {
+                  key: 0,
+                  col
+                }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createTextVNode(vue.toDisplayString(col.title), 1)
+                ], 64))
+              ]),
+              col.sortable ? (vue.openBlock(), vue.createBlock(_component_FileSort, {
+                key: 0,
+                sort: _ctx.sort,
+                order: _ctx.order,
+                name: col.prop
+              }, null, 8, ["sort", "order", "name"])) : vue.createCommentVNode("", true)
+            ], 12, _hoisted_6);
+          }), 128))
+        ])
+      ])
+    ]),
+    vue.createElementVNode("div", _hoisted_7, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
+        return vue.openBlock(), vue.createBlock(_component_FileTableItem, {
+          key: item.key,
+          ref_for: true,
+          ref: "itemRefs",
+          item,
+          selectionType: _ctx.selectionType,
+          selections: _ctx.selections,
+          current: _ctx.current,
+          icons: _ctx.icons,
+          columns: _ctx.tableCols,
+          onClick: _ctx.onItemClick,
+          onCheckChange: _ctx.onItemCheckChange,
+          onContextMenu: _ctx.onItemContextMenu,
+          onContextOpen: _ctx.onItemContextOpen
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "onClick", "onCheckChange", "onContextMenu", "onContextOpen"]);
+      }), 128))
+    ])
+  ]);
+}
+const fileTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = fileTable;

package/lib/ele-file-list/icons.d.ts

@@ -0,0 +1,9 @@
+import type { IconItem } from './types';
+/**
+ * 默认图标
+ */
+export declare const icons: IconItem[];
+/**
+ * 默认小尺寸图标
+ */
+export declare const smallIcons: IconItem[];