y-element-ultra 0.0.2

package/es/y-file-list/components/file-table-item.js

@@ -0,0 +1,167 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "y-file-list-item-checkbox"
+};
+const _hoisted_2 = { class: "y-file-list-item-name" };
+const _hoisted_3 = { class: "y-file-list-item-icon" };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = ["title"];
+const _hoisted_6 = {
+  key: 0,
+  class: "y-file-list-item-tools"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "FileTableItem" },
+  __name: "file-table-item",
+  props: {
+    /** 数据 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 选择框类型 */
+    selectionType: String,
+    /** 多选选中数据 */
+    selections: Array,
+    /** 单选选中数据 */
+    current: Object,
+    /** 后缀对应的图标 */
+    icons: Array,
+    /** 自定义列配置 */
+    columns: Array,
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: Boolean
+  },
+  emits: {
+    click: (_item) => true,
+    checkChange: (_item) => true,
+    contextOpen: (_option) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const dropdownTriggerRef = 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(() => {
+      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 icon2 = props.icons.find((d) => {
+          if (!d.suffixes) {
+            return false;
+          }
+          return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
+        })?.icon;
+        if (icon2) {
+          return icon2;
+        }
+      }
+      return props.icons.find((d) => d.type === "file")?.icon;
+    });
+    const handleClick = () => {
+      emit("click", props.item);
+    };
+    const handleCheckChange = () => {
+      emit("checkChange", props.item);
+    };
+    const handleContextmenu = (e) => {
+      if (dropdownTriggerRef.value != null) {
+        emit("contextOpen", {
+          item: props.item,
+          triggerEl: dropdownTriggerRef.value,
+          e
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["y-file-list-item", [
+          { "is-checked": selected.value },
+          { "is-active": __props.ctxMenuDropdownVisible }
+        ]]),
+        onClick: withModifiers(handleClick, ["stop"])
+      }, [
+        createElementVNode("div", {
+          class: "y-file-list-item-body",
+          onContextmenu: handleContextmenu
+        }, [
+          selectable.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("i", {
+              class: normalizeClass(["y-file-list-checkbox", [
+                { "is-radio": __props.selectionType === "radio" },
+                { "is-checked": selected.value }
+              ]]),
+              onClick: withModifiers(handleCheckChange, ["stop"])
+            }, null, 2)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "icon", {
+                icon: icon.value,
+                item: __props.item
+              }, () => [
+                createElementVNode("img", {
+                  src: icon.value,
+                  class: normalizeClass({ "y-file-list-item-image": !!__props.item.thumbnail })
+                }, null, 10, _hoisted_4)
+              ]),
+              renderSlot(_ctx.$slots, "title", { item: __props.item }, () => [
+                createElementVNode("div", {
+                  title: __props.item.name,
+                  class: "y-file-list-item-title"
+                }, toDisplayString(__props.item.name), 9, _hoisted_5)
+              ])
+            ]),
+            _ctx.$slots.tool ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              renderSlot(_ctx.$slots, "tool", { item: __props.item })
+            ])) : createCommentVNode("", true)
+          ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+            return openBlock(), createElementBlock("div", {
+              key: col.prop,
+              style: normalizeStyle(col.style),
+              class: "y-file-list-item-cell"
+            }, [
+              col.slot && !["icon", "title", "tool", "contextMenu"].includes(col.slot) && _ctx.$slots[col.slot] ? renderSlot(_ctx.$slots, col.slot, {
+                key: 0,
+                item: __props.item,
+                col
+              }) : __props.item && col && col.prop ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(__props.item[col.prop]), 1)
+              ], 64)) : createCommentVNode("", true)
+            ], 4);
+          }), 128))
+        ], 32),
+        createElementVNode("div", {
+          ref_key: "dropdownTriggerRef",
+          ref: dropdownTriggerRef,
+          class: "y-file-list-item-dropdown",
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, null, 512)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/y-file-list/components/file-table.d.ts

@@ -0,0 +1,100 @@
+import { PropType } from 'vue';
+import { IconItem, FileItem, ColumnItem, SelectionType, ContextOpenOption } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: {
+    col: ColumnItem;
+}) => any>> & Partial<Record<string, (_: {
+    item: FileItem;
+    col: ColumnItem;
+}) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<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[]>;
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: PropType<FileItem | null>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: FileItem) => void;
+    sortChange: (_sort: string) => void;
+    checkAllChange: () => void;
+    itemCheckChange: (_item: FileItem) => void;
+    itemContextOpen: (_option: ContextOpenOption) => void;
+}, string, import('vue').PublicProps, 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[]>;
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: PropType<FileItem | null>;
+}>> & Readonly<{
+    onItemClick?: ((_item: FileItem) => any) | undefined;
+    onSortChange?: ((_sort: string) => any) | undefined;
+    onCheckAllChange?: (() => any) | undefined;
+    onItemCheckChange?: ((_item: FileItem) => any) | undefined;
+    onItemContextOpen?: ((_option: ContextOpenOption) => any) | undefined;
+}>, {
+    sortable: boolean;
+    isCheckAll: boolean;
+    isIndeterminate: boolean;
+    ctxMenuDropdownVisible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/y-file-list/components/file-table.js

@@ -0,0 +1,198 @@
+import { defineComponent, computed, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, withModifiers, normalizeClass, toDisplayString, Fragment, renderList, normalizeStyle, renderSlot, createTextVNode, createSlots, mergeProps } from "vue";
+import MainContent from "../../y-loading/components/main-content";
+import FileTableItem from "./file-table-item";
+import FileSort from "./file-sort";
+const _hoisted_1 = { class: "y-file-list-header" };
+const _hoisted_2 = { class: "y-file-list-item" };
+const _hoisted_3 = { class: "y-file-list-item-body" };
+const _hoisted_4 = {
+  key: 0,
+  class: "y-file-list-item-checkbox"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "y-file-list-body" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "FileTable" },
+  __name: "file-table",
+  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,
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: Boolean,
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: Object
+  },
+  emits: {
+    checkAllChange: () => true,
+    itemClick: (_item) => true,
+    itemCheckChange: (_item) => true,
+    itemContextOpen: (_option) => true,
+    sortChange: (_sort) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tableCols = 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 handleCheckAllChange = () => {
+      emit("checkAllChange");
+    };
+    const handleItemClick = (item) => {
+      emit("itemClick", item);
+    };
+    const handleItemCheckChange = (item) => {
+      emit("itemCheckChange", item);
+    };
+    const handleSortChange = (sort, col) => {
+      if (!col) {
+        if (props.sortable) {
+          emit("sortChange", sort);
+        }
+      } else if (col.sortable) {
+        emit("sortChange", sort);
+      }
+    };
+    const handleItemContextOpen = (option) => {
+      emit("itemContextOpen", option);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(MainContent, { class: "y-file-list-table" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                __props.selectionType === "checkbox" || __props.selectionType === "radio" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  __props.selectionType === "checkbox" ? (openBlock(), createElementBlock("i", {
+                    key: 0,
+                    class: normalizeClass(["y-file-list-checkbox", [
+                      { "is-checked": __props.isCheckAll },
+                      { "is-indeterminate": __props.isIndeterminate }
+                    ]]),
+                    onClick: withModifiers(handleCheckAllChange, ["stop"])
+                  }, null, 2)) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(["y-file-list-item-name", { "is-sortable": __props.sortable }]),
+                  onClick: _cache[0] || (_cache[0] = ($event) => handleSortChange("name"))
+                }, [
+                  createElementVNode("span", null, toDisplayString(__props.nameText), 1),
+                  __props.sortable ? (openBlock(), createBlock(FileSort, {
+                    key: 0,
+                    sort: __props.sort,
+                    order: __props.order,
+                    name: "name"
+                  }, null, 8, ["sort", "order"])) : createCommentVNode("", true)
+                ], 2),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(tableCols.value, (col) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: col.prop,
+                    style: normalizeStyle(col.headerStyle || col.style),
+                    class: normalizeClass(["y-file-list-item-cell", { "is-sortable": col.sortable }]),
+                    onClick: ($event) => handleSortChange(col.prop, col)
+                  }, [
+                    createElementVNode("span", null, [
+                      col.headerSlot && !["icon", "title", "tool", "contextMenu"].includes(
+                        col.headerSlot
+                      ) && _ctx.$slots[col.headerSlot] ? renderSlot(_ctx.$slots, col.headerSlot, {
+                        key: 0,
+                        col
+                      }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createTextVNode(toDisplayString(col.title), 1)
+                      ], 64))
+                    ]),
+                    col.sortable ? (openBlock(), createBlock(FileSort, {
+                      key: 0,
+                      sort: __props.sort,
+                      order: __props.order,
+                      name: col.prop
+                    }, null, 8, ["sort", "order", "name"])) : createCommentVNode("", true)
+                  ], 14, _hoisted_5);
+                }), 128))
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item) => {
+              return openBlock(), createBlock(FileTableItem, {
+                key: item.key,
+                item,
+                selectionType: __props.selectionType,
+                selections: __props.selections,
+                current: __props.current,
+                icons: __props.icons,
+                columns: tableCols.value,
+                ctxMenuDropdownVisible: __props.ctxMenuDropdownVisible && __props.contextMenuFileItem === item,
+                onClick: handleItemClick,
+                onCheckChange: handleItemCheckChange,
+                onContextOpen: handleItemContextOpen
+              }, createSlots({ _: 2 }, [
+                renderList(Object.keys(_ctx.$slots), (name) => {
+                  return {
+                    name,
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                    ])
+                  };
+                })
+              ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "ctxMenuDropdownVisible"]);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/y-file-list/icons.d.ts

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

package/es/y-file-list/icons.js

@@ -0,0 +1,136 @@
+const localSmallIcons = [
+  {
+    icon: "/y-file-list/ic_file_misc_sm.png",
+    type: "file"
+  },
+  {
+    icon: "/y-file-list/ic_file_folder_sm.png",
+    type: "dir"
+  },
+  {
+    icon: "/y-file-list/ic_file_code_sm.png",
+    suffixes: [
+      ".java",
+      ".js",
+      ".css",
+      ".vue",
+      ".ts",
+      ".tsx",
+      ".scss",
+      ".less",
+      ".c",
+      ".cpp",
+      ".cs",
+      ".jsp",
+      ".php",
+      ".asp",
+      ".py",
+      ".go",
+      ".kt",
+      ".lua"
+    ]
+  },
+  {
+    icon: "/y-file-list/ic_file_htm_sm.png",
+    suffixes: [".html", ".htm"]
+  },
+  {
+    icon: "/y-file-list/ic_file_text_sm.png",
+    suffixes: [".txt"]
+  },
+  {
+    icon: "/y-file-list/ic_file_pdf_sm.png",
+    suffixes: [".pdf"]
+  },
+  {
+    icon: "/y-file-list/ic_file_word_sm.png",
+    suffixes: [".doc", ".docx"]
+  },
+  {
+    icon: "/y-file-list/ic_file_excel_sm.png",
+    suffixes: [".xls", ".xlsx"]
+  },
+  {
+    icon: "/y-file-list/ic_file_ppt_sm.png",
+    suffixes: [".ppt", ".pptx"]
+  },
+  {
+    icon: "/y-file-list/ic_file_visio_sm.png",
+    suffixes: [".vsd"]
+  },
+  {
+    icon: "/y-file-list/ic_file_ps_sm.png",
+    suffixes: [".psd"]
+  },
+  {
+    icon: "/y-file-list/ic_file_cad_sm.png",
+    suffixes: [".dwg"]
+  },
+  {
+    icon: "/y-file-list/ic_file_flash_sm.png",
+    suffixes: [".swf"]
+  },
+  {
+    icon: "/y-file-list/ic_file_music_sm.png",
+    suffixes: [".mp3", ".wav"]
+  },
+  {
+    icon: "/y-file-list/ic_file_video_sm.png",
+    suffixes: [".mp4", ".rmvb", ".flv", ".avi", ".3gp"]
+  },
+  {
+    icon: "/y-file-list/ic_file_picture_sm.png",
+    suffixes: [
+      ".png",
+      ".jpg",
+      ".jpeg",
+      ".gif",
+      ".bmp",
+      ".svg",
+      ".webp",
+      ".tiff"
+    ]
+  },
+  {
+    icon: "/y-file-list/ic_file_fonts_sm.png",
+    suffixes: [".ttf", ".woff"]
+  },
+  {
+    icon: "/y-file-list/ic_file_bt_sm.png",
+    suffixes: [".torrent"]
+  },
+  {
+    icon: "/y-file-list/ic_file_android_sm.png",
+    suffixes: [".apk"]
+  },
+  {
+    icon: "/y-file-list/ic_file_exe_sm.png",
+    suffixes: [".exe"]
+  },
+  {
+    icon: "/y-file-list/ic_file_ipa_sm.png",
+    suffixes: [".ipa", ".dmg"]
+  },
+  {
+    icon: "/y-file-list/ic_file_zip_sm.png",
+    suffixes: [".zip", ".rar", ".7z"]
+  }
+];
+const localIcons = localSmallIcons.map((d) => {
+  return { ...d, icon: d.icon.replace("_sm.png", ".png") };
+});
+const smallIcons = localSmallIcons.map((d) => {
+  return {
+    ...d,
+    icon: d.icon.replace("/y-file-list/", "https://cdn.eleadmin.com/20200609/")
+  };
+});
+const icons = smallIcons.map((d) => {
+  return { ...d, icon: d.icon.replace("_sm.png", ".png") };
+});
+export {
+  icons,
+  localIcons,
+  localSmallIcons,
+  smallIcons
+};