@dfsj/components 3.0.0

package/dist/components/Table/src/components/ColumnSetting.vue2.js

@@ -0,0 +1,264 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { defineComponent, ref, watch, unref, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, createCommentVNode } from 'vue';
+import { ElDrawer, ElCheckbox, ElText, ElCheckboxGroup, ElRadioGroup, ElRadioButton } from 'element-plus';
+import { cloneDeep } from 'lodash-es';
+import { DEFAULT_FILTER_COLUMN } from '../helper/index.js';
+import { VueDraggable } from 'vue-draggable-plus';
+import '../../../Icon/src/Icon.vue.js';
+import script$1 from '../../../Icon/src/Icon.vue2.js';
+
+var _hoisted_1 = {
+  "class": "flex items-center justify-between"
+};
+var _hoisted_2 = {
+  "class": "flex items-center justify-between"
+};
+var _hoisted_3 = {
+  key: 0
+};
+var _hoisted_4 = {
+  "class": "flex items-center"
+};
+var _hoisted_5 = {
+  "class": "ml-12px cursor-move handle"
+};
+var script = defineComponent({
+  __name: 'ColumnSetting',
+  props: {
+    columns: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    modelValue: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  emits: ['confirm', 'update:modelValue'],
+  setup: function setup(__props, _ref) {
+    var __emit = _ref.emit;
+    var visible = ref(false);
+    var props = __props;
+    var emit = __emit;
+    watch(function () {
+      return props.modelValue;
+    }, function (val) {
+      if (val === unref(visible)) return;
+      visible.value = val;
+    }, {
+      immediate: true
+    });
+    watch(function () {
+      return visible.value;
+    }, function (val) {
+      emit('update:modelValue', val);
+    });
+    var oldColumns = ref();
+    var settingColumns = ref();
+    var hiddenColumns = ref([]);
+    var defaultCheckColumns = ref([]);
+    var checkColumns = ref([]);
+    var checkAll = ref(false);
+    var isIndeterminate = ref(true);
+    var handleCheckAllChange = function handleCheckAllChange(val) {
+      checkColumns.value = val ? unref(defaultCheckColumns) : [];
+      isIndeterminate.value = false;
+    };
+    var handleCheckedColumnsChange = function handleCheckedColumnsChange(value) {
+      var _unref2, _unref3;
+      var checkedCount = value.length;
+      checkAll.value = checkedCount === ((_unref2 = unref(defaultCheckColumns)) === null || _unref2 === void 0 ? void 0 : _unref2.length);
+      isIndeterminate.value = checkedCount > 0 && checkedCount < ((_unref3 = unref(defaultCheckColumns)) === null || _unref3 === void 0 ? void 0 : _unref3.length);
+    };
+    var confirm = function confirm() {
+      var _cloneDeep;
+      var newColumns = (_cloneDeep = cloneDeep(unref(settingColumns))) === null || _cloneDeep === void 0 ? void 0 : _cloneDeep.map(function (item) {
+        var _unref4, _unref5;
+        var fixed = (_unref4 = unref(settingColumns)) === null || _unref4 === void 0 || (_unref4 = _unref4.find(function (col) {
+          return col.field === item.field;
+        })) === null || _unref4 === void 0 ? void 0 : _unref4.fixed;
+        item.hidden = !!!((_unref5 = unref(checkColumns)) !== null && _unref5 !== void 0 && _unref5.includes(item.field));
+        item.fixed = fixed ? fixed : undefined;
+        return item;
+      });
+      emit('confirm', [].concat(_toConsumableArray(unref(hiddenColumns)), _toConsumableArray(newColumns || [])));
+      visible.value = false;
+    };
+    var restore = function restore() {
+      initColumns([].concat(_toConsumableArray(unref(hiddenColumns)), _toConsumableArray(unref(oldColumns) || [])), true);
+    };
+    var initColumns = function initColumns(columns) {
+      var _unref6, _unref7, _unref8, _unref9, _unref10;
+      var isReStore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var newColumns = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+        if (!isReStore) {
+          item.fixed = item.fixed !== void 0 ? item.fixed : undefined;
+        }
+        return item.type && !DEFAULT_FILTER_COLUMN.includes(item.type) || !item.type;
+      });
+      if (!((_unref6 = unref(oldColumns)) !== null && _unref6 !== void 0 && _unref6.length)) {
+        oldColumns.value = cloneDeep(newColumns);
+      }
+      settingColumns.value = cloneDeep(newColumns);
+      hiddenColumns.value = cloneDeep(columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+        return item.type && DEFAULT_FILTER_COLUMN.includes(item.type);
+      }));
+      defaultCheckColumns.value = ((_unref7 = unref(settingColumns)) === null || _unref7 === void 0 ? void 0 : _unref7.map(function (item) {
+        return item.field;
+      })) || [];
+      checkColumns.value = ((_unref8 = unref(settingColumns)) === null || _unref8 === void 0 || (_unref8 = _unref8.filter(function (item) {
+        return !item.hidden;
+      })) === null || _unref8 === void 0 ? void 0 : _unref8.map(function (item) {
+        return item.field;
+      })) || [];
+      if (((_unref9 = unref(checkColumns)) === null || _unref9 === void 0 ? void 0 : _unref9.length) === ((_unref10 = unref(defaultCheckColumns)) === null || _unref10 === void 0 ? void 0 : _unref10.length)) {
+        checkAll.value = true;
+        isIndeterminate.value = false;
+      }
+    };
+    watch(function () {
+      return props.columns;
+    }, function (columns) {
+      initColumns(columns);
+    }, {
+      immediate: true,
+      deep: true
+    });
+    return function (_ctx, _cache) {
+      var _component_ElButton = resolveComponent("ElButton");
+      return openBlock(), createBlock(unref(ElDrawer), {
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+          return visible.value = $event;
+        }),
+        title: "列设置",
+        size: "350px"
+      }, {
+        footer: withCtx(function () {
+          return [createElementVNode("div", null, [createVNode(_component_ElButton, {
+            onClick: restore
+          }, {
+            "default": withCtx(function () {
+              return [createTextVNode("还原")];
+            }),
+            _: 1
+          }), createVNode(_component_ElButton, {
+            type: "primary",
+            onClick: confirm
+          }, {
+            "default": withCtx(function () {
+              return [createTextVNode("确定")];
+            }),
+            _: 1
+          })])];
+        }),
+        "default": withCtx(function () {
+          var _settingColumns$value2;
+          return [createElementVNode("div", null, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(ElCheckbox), {
+            modelValue: checkAll.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+              return checkAll.value = $event;
+            }),
+            indeterminate: isIndeterminate.value,
+            onChange: handleCheckAllChange
+          }, null, 8, ["modelValue", "indeterminate"]), createVNode(unref(ElText), {
+            "class": "ml-8px!"
+          }, {
+            "default": withCtx(function () {
+              var _settingColumns$value;
+              return [createTextVNode(toDisplayString(checkColumns.value.length) + " / " + toDisplayString((_settingColumns$value = settingColumns.value) === null || _settingColumns$value === void 0 ? void 0 : _settingColumns$value.length), 1)];
+            }),
+            _: 1
+          })]), createVNode(unref(ElText), null, {
+            "default": withCtx(function () {
+              return [createTextVNode("固定 / 排序")];
+            }),
+            _: 1
+          })]), (_settingColumns$value2 = settingColumns.value) !== null && _settingColumns$value2 !== void 0 && _settingColumns$value2.length ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(VueDraggable), {
+            modelValue: settingColumns.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+              return settingColumns.value = $event;
+            }),
+            target: ".el-checkbox-group",
+            handle: ".handle",
+            animation: 150
+          }, {
+            "default": withCtx(function () {
+              return [createVNode(unref(ElCheckboxGroup), {
+                ref: "draggableWrap",
+                modelValue: checkColumns.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+                  return checkColumns.value = $event;
+                }),
+                onChange: handleCheckedColumnsChange
+              }, {
+                "default": withCtx(function () {
+                  return [(openBlock(true), createElementBlock(Fragment, null, renderList(settingColumns.value, function (item) {
+                    return openBlock(), createElementBlock("div", {
+                      key: item.field,
+                      "class": "flex items-center justify-between mt-12px"
+                    }, [createVNode(unref(ElCheckbox), {
+                      label: item.field
+                    }, {
+                      "default": withCtx(function () {
+                        return [createTextVNode(toDisplayString(item.label), 1)];
+                      }),
+                      _: 2
+                    }, 1032, ["label"]), createElementVNode("div", _hoisted_4, [createVNode(unref(ElRadioGroup), {
+                      size: "small",
+                      modelValue: item.fixed,
+                      "onUpdate:modelValue": function onUpdateModelValue($event) {
+                        return item.fixed = $event;
+                      }
+                    }, {
+                      "default": withCtx(function () {
+                        return [createVNode(unref(ElRadioButton), {
+                          label: "left"
+                        }, {
+                          "default": withCtx(function () {
+                            return [createVNode(script$1, {
+                              icon: "ep:arrow-left"
+                            })];
+                          }),
+                          _: 1
+                        }), createVNode(unref(ElRadioButton), {
+                          label: undefined
+                        }, {
+                          "default": withCtx(function () {
+                            return [createVNode(script$1, {
+                              icon: "ep:close"
+                            })];
+                          }),
+                          _: 1
+                        }), createVNode(unref(ElRadioButton), {
+                          label: "right"
+                        }, {
+                          "default": withCtx(function () {
+                            return [createVNode(script$1, {
+                              icon: "ep:arrow-right"
+                            })];
+                          }),
+                          _: 1
+                        })];
+                      }),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"]), createElementVNode("div", _hoisted_5, [createVNode(script$1, {
+                      icon: "ep:rank"
+                    })])])]);
+                  }), 128))];
+                }),
+                _: 1
+              }, 8, ["modelValue"])];
+            }),
+            _: 1
+          }, 8, ["modelValue"])])) : createCommentVNode("v-if", true)])];
+        }),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+
+export { script as default };

package/dist/components/Table/src/components/TableActions.vue.d.ts

@@ -0,0 +1,20 @@
+import { PropType } from 'vue';
+import { TableColumn } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        default: () => any[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("refresh" | "changSize" | "confirm")[], "refresh" | "changSize" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        default: () => any[];
+    };
+}>> & {
+    onRefresh?: (...args: any[]) => any;
+    onChangSize?: (...args: any[]) => any;
+    onConfirm?: (...args: any[]) => any;
+}, {
+    columns: TableColumn[];
+}, {}>;
+export default _default;

package/dist/components/Table/src/components/TableActions.vue.js

@@ -0,0 +1,5 @@
+import script from './TableActions.vue2.js';
+
+script.__file = "src/components/Table/src/components/TableActions.vue";
+
+export { script as default };

package/dist/components/Table/src/components/TableActions.vue2.js

@@ -0,0 +1,108 @@
+import { defineComponent, ref, createVNode, Fragment, unref } from 'vue';
+import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import '../../../Icon/src/Icon.vue.js';
+import '../../../Icon/src/SvgIcon.vue.js';
+import './ColumnSetting.vue.js';
+import script$1 from './ColumnSetting.vue2.js';
+import script$2 from '../../../Icon/src/Icon.vue2.js';
+
+var script = defineComponent({
+  name: 'TableActions',
+  components: {
+    ElDropdown: ElDropdown,
+    ElDropdownMenu: ElDropdownMenu,
+    ElDropdownItem: ElDropdownItem,
+    ColumnSetting: script$1
+  },
+  props: {
+    columns: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    }
+  },
+  emits: ['refresh', 'changSize', 'confirm'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var showSetting = ref(false);
+    var refresh = function refresh() {
+      emit('refresh');
+    };
+    var size = ref(['default', 'large', 'small']);
+    var sizeMap = {
+      "default": '默认',
+      large: '大',
+      small: '小'
+    };
+    var changSize = function changSize(size) {
+      emit('changSize', size);
+    };
+    var confirm = function confirm(columns) {
+      emit('confirm', columns);
+    };
+    var showColumnSetting = function showColumnSetting() {
+      showSetting.value = true;
+    };
+    return function () {
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": "text-right h-28px flex items-center justify-end"
+      }, [createVNode("div", {
+        "title": "\u5237\u65B0",
+        "class": "w-30px h-20px flex items-center justify-end",
+        "onClick": refresh
+      }, [createVNode(script$2, {
+        "icon": "ant-design:sync-outlined",
+        "class": "cursor-pointer",
+        "hover-color": "var(--el-color-primary)"
+      }, null)]), createVNode(ElDropdown, {
+        "trigger": "click",
+        "onCommand": changSize
+      }, {
+        "default": function _default() {
+          return createVNode("div", {
+            "title": "\u5C3A\u5BF8",
+            "class": "w-30px h-20px flex items-center justify-end"
+          }, [createVNode(script$2, {
+            "icon": "ant-design:column-height-outlined",
+            "class": "cursor-pointer",
+            "hover-color": "var(--el-color-primary)"
+          }, null)]);
+        },
+        dropdown: function dropdown() {
+          return createVNode(ElDropdownMenu, null, {
+            "default": function _default() {
+              return unref(size).map(function (v) {
+                return createVNode(ElDropdownItem, {
+                  "key": v,
+                  "command": v
+                }, {
+                  "default": function _default() {
+                    return [sizeMap === null || sizeMap === void 0 ? void 0 : sizeMap[v]];
+                  }
+                });
+              });
+            }
+          });
+        }
+      }), createVNode("div", {
+        "title": "\u5217\u8BBE\u7F6E",
+        "class": "w-30px h-20px flex items-center justify-end",
+        "onClick": showColumnSetting
+      }, [createVNode(script$2, {
+        "icon": "ant-design:setting-outlined",
+        "class": "cursor-pointer",
+        "hover-color": "var(--el-color-primary)"
+      }, null)])]), createVNode(script$1, {
+        "modelValue": showSetting.value,
+        "onUpdate:modelValue": function onUpdateModelValue($event) {
+          return showSetting.value = $event;
+        },
+        "columns": props.columns,
+        "onConfirm": confirm
+      }, null)]);
+    };
+  }
+});
+
+export { script as default };

package/dist/components/Table/src/helper/index.d.ts

@@ -0,0 +1,2 @@
+export declare const setIndex: (reserveIndex: boolean, index: number, size: number, current: number) => number;
+export declare const DEFAULT_FILTER_COLUMN: string[];

package/dist/components/Table/src/helper/index.js

@@ -0,0 +1,11 @@
+var setIndex = function setIndex(reserveIndex, index, size, current) {
+  var newIndex = index + 1;
+  if (reserveIndex) {
+    return size * (current - 1) + newIndex;
+  } else {
+    return newIndex;
+  }
+};
+var DEFAULT_FILTER_COLUMN = ['expand', 'selection'];
+
+export { DEFAULT_FILTER_COLUMN, setIndex };

package/dist/components/Table/src/types/index.d.ts

@@ -0,0 +1,87 @@
+import { TableProps as ElTableProps } from 'element-plus';
+import { Recordable } from '../../../../types';
+export interface TableColumn {
+    field: string;
+    label?: string;
+    type?: string;
+    hidden?: boolean;
+    children?: TableColumn[];
+    slots?: {
+        default?: (...args: any[]) => JSX.Element | JSX.Element[] | null;
+        header?: (...args: any[]) => JSX.Element | null;
+    };
+    index?: number | ((index: number) => number);
+    columnKey?: string;
+    width?: string | number;
+    minWidth?: string | number;
+    fixed?: boolean | 'left' | 'right';
+    renderHeader?: (...args: any[]) => JSX.Element | null;
+    sortMethod?: (...args: any[]) => number;
+    sortBy?: string | string[] | ((...args: any[]) => string | string[]);
+    sortOrders?: (string | null)[];
+    resizable?: boolean;
+    formatter?: (...args: any[]) => any;
+    showOverflowTooltip?: boolean;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    className?: string;
+    labelClassName?: string;
+    selectable?: (...args: any[]) => boolean;
+    reserveSelection?: boolean;
+    filters?: Array<{
+        text: string;
+        value: string;
+    }>;
+    filterPlacement?: string;
+    filterMultiple?: boolean;
+    filterMethod?: (...args: any[]) => boolean;
+    filteredValue?: string[];
+    [key: string]: any;
+}
+export interface TableSlotDefault {
+    row: Recordable;
+    column: TableColumn;
+    $index: number;
+    [key: string]: any;
+}
+export interface Pagination {
+    small?: boolean;
+    background?: boolean;
+    pageSize?: number;
+    defaultPageSize?: number;
+    total?: number;
+    pageCount?: number;
+    pagerCount?: number;
+    currentPage?: number;
+    defaultCurrentPage?: number;
+    layout?: string;
+    pageSizes?: number[];
+    popperClass?: string;
+    prevText?: string;
+    nextText?: string;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+}
+export interface TableSetProps {
+    field: string;
+    path: string;
+    value: any;
+}
+export interface TableProps extends Omit<Partial<ElTableProps<any[]>>, 'data'> {
+    pageSize?: number;
+    currentPage?: number;
+    showAction?: boolean;
+    showOverflowTooltip?: boolean;
+    columns?: TableColumn[];
+    pagination?: Pagination | undefined;
+    reserveSelection?: boolean;
+    loading?: boolean;
+    reserveIndex?: boolean;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    preview?: string[];
+    imagePreview?: string[];
+    videoPreview?: string[];
+    sortable?: boolean;
+    data?: Recordable;
+}

package/dist/components/Table/src/useTable.d.ts

@@ -0,0 +1 @@
+export declare const useTable: any;