ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,275 @@
+"use strict";
+const vue = require("vue");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const licenseUtil = require("../utils/license-util");
+const core = require("../utils/core");
+const FileGrid = require("./components/file-grid");
+const FileTable = require("./components/file-table");
+const props = require("./props");
+const GRID_ITEM_SEL = ".ele-file-list-body>.ele-file-list-item";
+const _sfc_main = vue.defineComponent({
+  name: "EleFileList",
+  components: { FileGrid, FileTable },
+  props: props.fileListProps,
+  emits: props.fileListEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const { lang } = useReceiver.useLocale("fileList", props2);
+    const selectorStyle = vue.reactive({
+      top: "0px",
+      left: "0px",
+      width: "0px",
+      height: "0px",
+      display: "none"
+    });
+    const isCheckAll = vue.computed(() => {
+      return !!(props2.data && props2.data.length && props2.selections && props2.selections.length && !props2.data.some(
+        (d) => {
+          var _a;
+          return !((_a = props2.selections) == null ? void 0 : _a.some((t) => d.key === t.key));
+        }
+      ));
+    });
+    const isIndeterminate = vue.computed(() => {
+      return !!(!isCheckAll.value && props2.selections && props2.selections.length);
+    });
+    const updateSelections = (selection) => {
+      emit("update:selections", selection);
+    };
+    const updateCurrent = (current) => {
+      emit("update:current", current);
+    };
+    const onCheckAllChange = () => {
+      if (props2.selectionType !== "checkbox") {
+        return;
+      }
+      if (isCheckAll.value || props2.data == null || !props2.data.length) {
+        if (!props2.selections) {
+          updateSelections([]);
+          return;
+        }
+        const temp2 = props2.selections.filter((d) => {
+          return props2.data ? !props2.data.some((t) => t.key === d.key) : true;
+        });
+        updateSelections(temp2);
+        return;
+      }
+      if (!props2.selections) {
+        updateSelections([...props2.data]);
+        return;
+      }
+      const temp = props2.selections.concat(
+        props2.data.filter((d) => {
+          return props2.selections ? !props2.selections.some((t) => t.key === d.key) : true;
+        })
+      );
+      updateSelections(temp);
+    };
+    const onItemCheckChange = (item) => {
+      if (props2.selectionType === "radio") {
+        updateCurrent(
+          props2.current && props2.current.key === item.key ? null : item
+        );
+        return;
+      }
+      if (props2.selectionType !== "checkbox") {
+        return;
+      }
+      if (!props2.selections || !props2.selections.length) {
+        updateSelections([item]);
+        return;
+      }
+      if (!props2.selections.some((t) => t.key === item.key)) {
+        updateSelections(props2.selections.concat([item]));
+        return;
+      }
+      updateSelections(props2.selections.filter((t) => t.key !== item.key));
+    };
+    const onItemClick = (item) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return;
+      }
+      emit("itemClick", item);
+    };
+    const onSortChange = (name) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return;
+      }
+      const sorter = { sort: name };
+      if (props2.order && name === props2.sort) {
+        sorter.order = props2.order === "asc" ? "desc" : null;
+      } else {
+        sorter.order = "asc";
+      }
+      emit("sortChange", sorter);
+    };
+    const onItemContextMenu = (option) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return;
+      }
+      emit("itemContextMenu", option);
+    };
+    const onMousedown = (event) => {
+      if (!props2.boxChoose || props2.selectionType !== "checkbox") {
+        return;
+      }
+      const downX = event.clientX;
+      const downY = event.clientY;
+      const target = event.currentTarget;
+      const position = target.getBoundingClientRect();
+      const items = Array.from(target.querySelectorAll(GRID_ITEM_SEL));
+      const mousemoveFn = core.throttle((e) => {
+        const moveX = Math.max(e.clientX, position.left);
+        const moveY = Math.max(e.clientY, position.top);
+        const left = Math.min(moveX, downX) - position.left;
+        const top = Math.min(moveY, downY) - position.top;
+        const width = Math.min(
+          Math.abs(moveX - downX),
+          target.clientWidth - left
+        );
+        const height = Math.min(
+          Math.abs(moveY - downY),
+          target.clientHeight - top
+        );
+        const temp = {
+          left: left + "px",
+          top: top + "px",
+          width: width + "px",
+          height: height + "px",
+          display: "block"
+        };
+        Object.assign(selectorStyle, temp);
+        if (width < 6 || height < 6) {
+          items.forEach((item) => {
+            item.classList.remove("is-active");
+          });
+          return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        e.stopPropagation();
+        e.preventDefault();
+        items.forEach((item) => {
+          const itemX = item.offsetLeft + item.clientWidth;
+          const itemY = item.offsetTop + item.clientHeight;
+          if (itemX > left && itemY > top && item.offsetLeft < left + width && item.offsetTop < top + height) {
+            item.classList.add("is-active");
+          } else {
+            item.classList.remove("is-active");
+          }
+        });
+      }, 60);
+      const mouseupFn = () => {
+        selectorStyle.display = "none";
+        const checked = [];
+        items.forEach((item, i) => {
+          if (item.classList.contains("is-active")) {
+            item.classList.remove("is-active");
+            if (props2.data && props2.data[i]) {
+              checked.push(props2.data[i]);
+            }
+          }
+        });
+        if (checked.length) {
+          updateSelections(checked);
+        }
+        document.removeEventListener("mousemove", mousemoveFn);
+        document.removeEventListener("mouseup", mouseupFn);
+      };
+      document.addEventListener("mousemove", mousemoveFn);
+      document.addEventListener("mouseup", mouseupFn);
+    };
+    return {
+      lang,
+      selectorStyle,
+      isCheckAll,
+      isIndeterminate,
+      onCheckAllChange,
+      onItemCheckChange,
+      onItemClick,
+      onSortChange,
+      onItemContextMenu,
+      onMousedown
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FileGrid = vue.resolveComponent("FileGrid");
+  const _component_FileTable = vue.resolveComponent("FileTable");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "ele-file-list-group",
+    onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.onMousedown && _ctx.onMousedown(...args))
+  }, [
+    _ctx.grid ? (vue.openBlock(), vue.createBlock(_component_FileGrid, {
+      key: 0,
+      data: _ctx.data,
+      icons: _ctx.icons,
+      selectionType: _ctx.selectionType,
+      selections: _ctx.selections,
+      current: _ctx.current,
+      isCheckAll: _ctx.isCheckAll,
+      isIndeterminate: _ctx.isIndeterminate,
+      checkAllText: _ctx.lang.selectAll,
+      selectedText: _ctx.lang.selectTips,
+      onCheckAllChange: _ctx.onCheckAllChange,
+      onItemClick: _ctx.onItemClick,
+      onItemCheckChange: _ctx.onItemCheckChange,
+      onItemContextMenu: _ctx.onItemContextMenu
+    }, 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, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
+      key: 1,
+      data: _ctx.data,
+      icons: _ctx.icons,
+      selectionType: _ctx.selectionType,
+      selections: _ctx.selections,
+      current: _ctx.current,
+      isCheckAll: _ctx.isCheckAll,
+      isIndeterminate: _ctx.isIndeterminate,
+      nameText: _ctx.lang.fileName,
+      sizeText: _ctx.lang.fileSize,
+      timeText: _ctx.lang.fileTimestamp,
+      sortable: _ctx.sortable,
+      sort: _ctx.sort,
+      order: _ctx.order,
+      columns: _ctx.columns,
+      onCheckAllChange: _ctx.onCheckAllChange,
+      onItemClick: _ctx.onItemClick,
+      onItemCheckChange: _ctx.onItemCheckChange,
+      onItemContextMenu: _ctx.onItemContextMenu,
+      onSortChange: _ctx.onSortChange
+    }, 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, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
+    vue.createElementVNode("div", {
+      class: "ele-file-list-selector",
+      style: vue.normalizeStyle(_ctx.selectorStyle)
+    }, null, 4)
+  ], 32);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,43 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, FileListLocale } from './types';
+/**
+ * 属性
+ */
+export declare const fileListProps: {
+    data: {
+        type: PropType<FileItem[]>;
+        required: boolean;
+    };
+    selectionType: PropType<SelectionType>;
+    selections: PropType<FileItem[]>;
+    current: PropType<FileItem>;
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortable: BooleanConstructor;
+    sort: StringConstructor;
+    order: StringConstructor;
+    icons: {
+        type: PropType<IconItem[]>;
+        default: () => IconItem[];
+    };
+    smallIcons: {
+        type: PropType<IconItem[]>;
+        default: () => IconItem[];
+    };
+    columns: PropType<ColumnItem[]>;
+    boxChoose: BooleanConstructor;
+    locale: PropType<FileListLocale>;
+};
+export type FileListProps = ExtractPropTypes<typeof fileListProps>;
+/**
+ * 事件
+ */
+export declare const fileListEmits: {
+    itemClick: (_item: FileItem) => boolean;
+    sortChange: (_sorter: SortValue) => boolean;
+    'update:selections': (_selection?: FileItem[]) => boolean;
+    'update:current': (_current?: FileItem | null) => boolean;
+    itemContextMenu: (_option: ItemContextMenuOption) => boolean;
+};

package/lib/ele-file-list/props.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const icons = require("./icons");
+const fileListProps = {
+  // 数据
+  data: {
+    type: Array,
+    required: true
+  },
+  // 选择框类型
+  selectionType: String,
+  // 多选选中数据
+  selections: Array,
+  // 单选选中数据
+  current: Object,
+  // 是否网格展示
+  grid: {
+    type: Boolean,
+    default: true
+  },
+  // 表格模式默认的列是否可以排序
+  sortable: Boolean,
+  // 排序字段
+  sort: String,
+  // 排序方式
+  order: String,
+  // 网格模式后缀对应图标
+  icons: {
+    type: Array,
+    default: () => {
+      return icons.icons;
+    }
+  },
+  // 表格模式后缀对应图标
+  smallIcons: {
+    type: Array,
+    default: () => {
+      return icons.smallIcons;
+    }
+  },
+  // 表格模式自定义列配置
+  columns: Array,
+  // 多选时是否支持鼠标框选
+  boxChoose: Boolean,
+  // 国际化
+  locale: Object
+};
+const fileListEmits = {
+  // item 点击事件
+  itemClick: (_item) => true,
+  // 排序方式改变事件
+  sortChange: (_sorter) => true,
+  // 更新多选选中数据
+  "update:selections": (_selection) => true,
+  // 更新单选选中数据
+  "update:current": (_current) => true,
+  // item 右键菜单项点击事件
+  itemContextMenu: (_option) => true
+};
+exports.fileListEmits = fileListEmits;
+exports.fileListProps = fileListProps;

package/lib/ele-file-list/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-file-list-var($var) {
+  .ele-file-list-group {
+    @include set-ele-var('file-list', $var);
+  }
+}

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

@@ -0,0 +1,4 @@
+"use strict";
+require("element-plus/es/components/dropdown/style/index");
+require("element-plus/es/components/dropdown-menu/style/index");
+require("./index.scss");