ele-admin-plus 1.0.0-beta.1

package/es/ele-file-list/components/file-grid-item.js

@@ -0,0 +1,171 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, toDisplayString, createCommentVNode, createBlock, withCtx, createVNode, renderSlot } from "vue";
+import { ElDropdown, ElDropdownMenu } from "element-plus";
+const _sfc_main = defineComponent({
+  name: "FileGridItem",
+  components: { ElDropdown, ElDropdownMenu },
+  props: {
+    // 数据
+    item: {
+      type: Object,
+      required: true
+    },
+    // 选择框类型
+    selectionType: String,
+    // 多选选中数据
+    selections: Array,
+    // 单选选中数据
+    current: Object,
+    // 后缀对应的图标
+    icons: Array
+  },
+  emits: {
+    click: (_item) => true,
+    checkChange: (_item) => true,
+    contextMenu: (_option) => true,
+    contextOpen: (_ref) => true
+  },
+  setup(props, { emit }) {
+    const dropdownRef = ref(null);
+    const selectable = computed(() => {
+      return props.selectionType === "checkbox" || props.selectionType === "radio";
+    });
+    const selected = 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 = computed(() => {
+      var _a, _b, _c;
+      if (props.item.thumbnail) {
+        return props.item.thumbnail;
+      }
+      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 = { class: "ele-file-list-item-icon" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["title"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "ele-file-list-checkbox is-checked" }, null, -1);
+const _hoisted_5 = [
+  _hoisted_4
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElDropdownMenu = resolveComponent("ElDropdownMenu");
+  const _component_ElDropdown = resolveComponent("ElDropdown");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["ele-file-list-item", { "is-checked": _ctx.selected }]),
+    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
+  }, [
+    createElementVNode("div", {
+      class: "ele-file-list-item-body",
+      onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.onContextmenu && _ctx.onContextmenu(...args))
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("img", {
+          src: _ctx.icon,
+          class: normalizeClass({ "ele-file-list-item-image": !!_ctx.item.thumbnail })
+        }, null, 10, _hoisted_2)
+      ]),
+      createElementVNode("div", {
+        title: _ctx.item.name,
+        class: "ele-file-list-item-title"
+      }, toDisplayString(_ctx.item.name), 9, _hoisted_3)
+    ], 32),
+    _ctx.selectable ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "ele-file-list-item-checkbox",
+      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onCheckChange && _ctx.onCheckChange(...args), ["stop"]))
+    }, _hoisted_5)) : createCommentVNode("", true),
+    _ctx.$slots.contextMenu ? (openBlock(), createBlock(_component_ElDropdown, {
+      key: 1,
+      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: withCtx(() => [
+        createVNode(_component_ElDropdownMenu, null, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "contextMenu", { item: _ctx.item })
+          ]),
+          _: 3
+        })
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", {
+          onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+          }, ["stop"]))
+        })
+      ]),
+      _: 3
+    }, 8, ["onCommand", "onVisibleChange"])) : createCommentVNode("", true)
+  ], 2);
+}
+const fileGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  fileGridItem as default
+};

package/es/ele-file-list/components/file-grid.d.ts

@@ -0,0 +1,46 @@
+import type { PropType } from 'vue';
+import type { ElDropdown } from 'element-plus';
+import type { IconItem, FileItem, 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;
+    checkAllText: StringConstructor;
+    selectedText: StringConstructor;
+}, {
+    itemRefs: import("vue").Ref<any[]>;
+    headerText: import("vue").ComputedRef<string | undefined>;
+    onCheckAllChange: () => void;
+    onItemClick: (item: FileItem) => void;
+    onItemCheckChange: (item: FileItem) => 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;
+}, 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;
+    checkAllText: StringConstructor;
+    selectedText: StringConstructor;
+}>> & {
+    onCheckAllChange?: (() => any) | undefined;
+    onItemClick?: ((_item: FileItem) => any) | undefined;
+    onItemCheckChange?: ((_item: FileItem) => any) | undefined;
+    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
+}, {
+    isCheckAll: boolean;
+    isIndeterminate: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-file-list/components/file-grid.js

@@ -0,0 +1,141 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, withModifiers, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import FileGridItem from "./file-grid-item";
+const _sfc_main = defineComponent({
+  name: "FileGrid",
+  components: { FileGridItem },
+  props: {
+    // 文件数据
+    data: Array,
+    // 后缀对应的图标
+    icons: Array,
+    // 选择框类型
+    selectionType: String,
+    // 已选中的数据
+    selections: Array,
+    // 单选选中数据
+    current: Object,
+    // 是否是全选
+    isCheckAll: Boolean,
+    // 是否是半选
+    isIndeterminate: Boolean,
+    // 全选按钮文字
+    checkAllText: String,
+    // 选中后的文字
+    selectedText: String
+  },
+  emits: {
+    checkAllChange: () => true,
+    itemClick: (_item) => true,
+    itemCheckChange: (_item) => true,
+    itemContextMenu: (_option) => true
+  },
+  setup(props, { emit }) {
+    const itemRefs = ref([]);
+    const headerText = computed(() => {
+      if (!props.selections || !props.selections.length) {
+        return props.checkAllText;
+      }
+      if (props.selectedText) {
+        return props.selectedText.replace(
+          /{total}/g,
+          String(props.selections.length)
+        );
+      }
+      return void 0;
+    });
+    const onCheckAllChange = () => {
+      emit("checkAllChange");
+    };
+    const onItemClick = (item) => {
+      emit("itemClick", item);
+    };
+    const onItemCheckChange = (item) => {
+      emit("itemCheckChange", item);
+    };
+    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,
+      headerText,
+      onCheckAllChange,
+      onItemClick,
+      onItemCheckChange,
+      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" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-file-list-header"
+};
+const _hoisted_3 = { class: "ele-file-list-body" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FileGridItem = resolveComponent("FileGridItem");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.selectionType === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      createElementVNode("div", {
+        class: "ele-file-list-selection",
+        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onCheckAllChange && _ctx.onCheckAllChange(...args), ["stop"]))
+      }, [
+        createElementVNode("i", {
+          class: normalizeClass([
+            "ele-file-list-checkbox",
+            { "is-checked": _ctx.isCheckAll },
+            { "is-indeterminate": _ctx.isIndeterminate }
+          ])
+        }, null, 2),
+        createElementVNode("div", null, toDisplayString(_ctx.headerText), 1)
+      ])
+    ])) : createCommentVNode("", true),
+    createElementVNode("div", _hoisted_3, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
+        return openBlock(), createBlock(_component_FileGridItem, {
+          key: item.key,
+          ref_for: true,
+          ref: "itemRefs",
+          item,
+          selectionType: _ctx.selectionType,
+          selections: _ctx.selections,
+          current: _ctx.current,
+          icons: _ctx.icons,
+          onClick: _ctx.onItemClick,
+          onCheckChange: _ctx.onItemCheckChange,
+          onContextMenu: _ctx.onItemContextMenu,
+          onContextOpen: _ctx.onItemContextOpen
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["item", "selectionType", "selections", "current", "icons", "onClick", "onCheckChange", "onContextMenu", "onContextOpen"]);
+      }), 128))
+    ])
+  ]);
+}
+const fileGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  fileGrid as default
+};

package/es/ele-file-list/components/file-sort.d.ts

@@ -0,0 +1,16 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    sort: StringConstructor;
+    order: StringConstructor;
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sort: StringConstructor;
+    order: StringConstructor;
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _sfc_main;

package/es/ele-file-list/components/file-sort.js

@@ -0,0 +1,35 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
+const _sfc_main = defineComponent({
+  name: "FileSort",
+  props: {
+    // 当前排序字段
+    sort: String,
+    // 当前排序方式
+    order: String,
+    // 排序字段名称
+    name: {
+      type: String,
+      required: true
+    }
+  }
+});
+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 openBlock(), createElementBlock("i", {
+    class: normalizeClass([
+      "ele-file-list-item-sort",
+      { "is-asc": _ctx.name === _ctx.sort && "asc" === _ctx.order },
+      { "is-desc": _ctx.name === _ctx.sort && "desc" === _ctx.order }
+    ])
+  }, null, 2);
+}
+const fileSort = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  fileSort as default
+};