ele-admin-plus 1.1.4 → 1.1.5-beta.1

package/lib/ele-pro-table/components/tool-column-list.js

@@ -0,0 +1,185 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "ToolColumnList",
+  components: {
+    VueDraggable,
+    ElCheckbox: elementPlus.ElCheckbox,
+    ElIcon: elementPlus.ElIcon,
+    HolderOutlined: icons.HolderOutlined,
+    VerticalRightOutlined: icons.VerticalRightOutlined,
+    VerticalLeftOutlined: icons.VerticalLeftOutlined
+  },
+  props: {
+    /** 列配置数据 */
+    data: Array,
+    /** 父级数据 */
+    parent: Object,
+    /** 是否开启列拖拽排序 */
+    sortable: Boolean,
+    /** 是否开启开关固定列 */
+    allowFixed: Boolean
+  },
+  emits: {
+    sortChange: (_colItems, _parent) => true,
+    checkedChange: (_item, _checked) => true,
+    fixedLeft: (_item) => true,
+    fixedRight: (_item) => true,
+    fixedLeftTooltip: (_el) => true,
+    fixedRightTooltip: (_el) => true
+  },
+  setup(props, { emit }) {
+    const onSortChange = (colItems) => {
+      onChildSortChange(colItems, props.parent);
+    };
+    const onCheckedChange = (colItem, checked) => {
+      emit("checkedChange", colItem, checked);
+    };
+    const onFixedLeft = (colItem) => {
+      emit("fixedLeft", colItem);
+    };
+    const onFixedRight = (colItem) => {
+      emit("fixedRight", colItem);
+    };
+    const onFixedLeftTooltip = (e) => {
+      onChildFixedLeftTooltip(e.currentTarget);
+    };
+    const onFixedRightTooltip = (e) => {
+      onChildFixedRightTooltip(e.currentTarget);
+    };
+    const onChildSortChange = (colItems, parent) => {
+      emit("sortChange", colItems, parent);
+    };
+    const onChildFixedLeftTooltip = (el) => {
+      emit("fixedLeftTooltip", el);
+    };
+    const onChildFixedRightTooltip = (el) => {
+      emit("fixedRightTooltip", el);
+    };
+    return {
+      onSortChange,
+      onCheckedChange,
+      onFixedLeft,
+      onFixedRight,
+      onFixedLeftTooltip,
+      onFixedRightTooltip,
+      onChildSortChange,
+      onChildFixedLeftTooltip,
+      onChildFixedRightTooltip
+    };
+  }
+});
+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-tool-column-item" };
+const _hoisted_2 = { class: "ele-tool-column-item-body" };
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-tool-column-handle"
+};
+const _hoisted_4 = { class: "ele-tool-column-label" };
+const _hoisted_5 = {
+  key: 1,
+  class: "ele-tool-column-fixed"
+};
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HolderOutlined = vue.resolveComponent("HolderOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+  const _component_VerticalRightOutlined = vue.resolveComponent("VerticalRightOutlined");
+  const _component_VerticalLeftOutlined = vue.resolveComponent("VerticalLeftOutlined");
+  const _component_ToolColumnList = vue.resolveComponent("ToolColumnList", true);
+  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
+  return vue.openBlock(), vue.createBlock(_component_VueDraggable, {
+    itemKey: "uid",
+    animation: 300,
+    modelValue: _ctx.data,
+    setData: () => void 0,
+    handle: ".ele-tool-column-handle",
+    componentData: { class: "ele-tool-column-list" },
+    "onUpdate:modelValue": _ctx.onSortChange
+  }, {
+    item: vue.withCtx(({ element: d }) => [
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          _ctx.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_HolderOutlined)
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createVNode(_component_ElCheckbox, {
+              modelValue: d.checked,
+              "onUpdate:modelValue": (v) => _ctx.onCheckedChange(d, v)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(d.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["modelValue", "onUpdate:modelValue"])
+          ]),
+          _ctx.allowFixed ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([
+                "ele-tool-column-fixed-item",
+                { "is-active": d.fixed === true || d.fixed === "left" }
+              ]),
+              onClick: ($event) => _ctx.onFixedLeft(d),
+              onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.onFixedLeftTooltip && _ctx.onFixedLeftTooltip(...args))
+            }, [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VerticalRightOutlined)
+                ]),
+                _: 1
+              })
+            ], 42, _hoisted_6),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([
+                "ele-tool-column-fixed-item",
+                { "is-active": d.fixed === "right" }
+              ]),
+              onClick: ($event) => _ctx.onFixedRight(d),
+              onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.onFixedRightTooltip && _ctx.onFixedRightTooltip(...args))
+            }, [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VerticalLeftOutlined)
+                ]),
+                _: 1
+              })
+            ], 42, _hoisted_7)
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        d.children && d.children.length ? (vue.openBlock(), vue.createBlock(_component_ToolColumnList, {
+          key: 0,
+          data: d.children,
+          parent: d,
+          sortable: _ctx.sortable,
+          onSortChange: _ctx.onChildSortChange,
+          onCheckedChange: _ctx.onCheckedChange,
+          onFixedLeft: _ctx.onFixedLeft,
+          onFixedRight: _ctx.onFixedRight,
+          onFixedLeftTooltip: _ctx.onChildFixedLeftTooltip,
+          onFixedRightTooltip: _ctx.onChildFixedRightTooltip
+        }, null, 8, ["data", "parent", "sortable", "onSortChange", "onCheckedChange", "onFixedLeft", "onFixedRight", "onFixedLeftTooltip", "onFixedRightTooltip"])) : vue.createCommentVNode("", true)
+      ])
+    ]),
+    _: 1
+  }, 8, ["modelValue", "onUpdate:modelValue"]);
+}
+const toolColumnList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = toolColumnList;

package/lib/ele-pro-table/components/tool-column.d.ts

@@ -1,53 +1,73 @@
 import type { PropType } from 'vue';
-import type { Columns, ColItem } from '../types';
+import type { Columns } from '../../ele-data-table/types';
+import type { ColItem } from '../types';
 declare const _default: import("vue").DefineComponent<{
+    /** 提示文字 */
     title: StringConstructor;
-    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
+    /** 提示位置 */
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    /** 全选文字 */
     checkAllText: StringConstructor;
+    /** 重置文字 */
     resetText: StringConstructor;
+    /** 无标题列文字 */
     untitledText: StringConstructor;
+    /** 固定在左侧文字 */
     fixedLeftText: StringConstructor;
+    /** 固定在右侧文字 */
     fixedRightText: StringConstructor;
+    /** 列数据 */
     columns: PropType<Columns>;
+    /** 是否开启列拖拽排序 */
     sortable: BooleanConstructor;
+    /** 是否开启开关固定列 */
     allowFixed: BooleanConstructor;
+    /** 列配置缓存本地的名称 */
     cacheKey: StringConstructor;
 }, {
     data: import("vue").Ref<{
         uid: string;
-        prop?: string | undefined;
-        columnKey?: string | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
         fixed?: string | boolean | undefined;
+        children?: any[] | undefined;
     }[]>;
-    checkedIds: import("vue").Ref<string[]>;
-    isChecked: import("vue").Ref<boolean>;
+    isCheckAll: import("vue").Ref<boolean>;
     isIndeterminate: import("vue").Ref<boolean>;
     tooltipContent: import("vue").Ref<string>;
     virtualRef: import("vue").Ref<any>;
-    popperClass: import("vue").ComputedRef<string>;
-    updateSortCols: (cols: ColItem[]) => void;
-    onCheckedChange: () => void;
-    onCheckAllChange: () => void;
+    onCheckedChange: (item: ColItem, checked: boolean) => void;
+    onCheckAllChange: (checked: boolean) => void;
     onReset: () => void;
-    onSortChange: () => void;
-    onItemFixedLeft: (col: ColItem) => void;
-    onItemFixedRight: (col: ColItem) => void;
-    openTooltip: (e: MouseEvent, content?: string) => void;
+    onSortChange: (colItems: ColItem[], parent?: ColItem) => void;
+    onFixedLeft: (colItem: ColItem) => void;
+    onFixedRight: (colItem: ColItem) => void;
+    onFixedLeftTooltip: (el: HTMLElement) => void;
+    onFixedRightTooltip: (el: HTMLElement) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:columns': (_columns: Columns) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 提示文字 */
     title: StringConstructor;
-    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
+    /** 提示位置 */
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    /** 全选文字 */
     checkAllText: StringConstructor;
+    /** 重置文字 */
     resetText: StringConstructor;
+    /** 无标题列文字 */
     untitledText: StringConstructor;
+    /** 固定在左侧文字 */
     fixedLeftText: StringConstructor;
+    /** 固定在右侧文字 */
     fixedRightText: StringConstructor;
+    /** 列数据 */
     columns: PropType<Columns>;
+    /** 是否开启列拖拽排序 */
     sortable: BooleanConstructor;
+    /** 是否开启开关固定列 */
     allowFixed: BooleanConstructor;
+    /** 列配置缓存本地的名称 */
     cacheKey: StringConstructor;
 }>> & {
     "onUpdate:columns"?: ((_columns: Columns) => any) | undefined;