@wlydfe/pro-ui 0.1.25

package/lib/components/table/src/index.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_vue_vue_type_script_setup_true_lang = require('./index.vue2.js');
+var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+var _Table = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__file", "index.vue"]]);
+
+exports.default = _Table;

package/lib/components/table/src/index.vue2.js

@@ -0,0 +1,474 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index$1 = require('../../pagination/index.js');
+var index = require('../../radio/index.js');
+require('../../../constants/index.js');
+var elementPlus = require('element-plus');
+require('../../utils/index.js');
+var lodashEs = require('lodash-es');
+var tableActionBar = require('./table-action-bar.vue.js');
+var tableColumn = require('./table-column.vue.js');
+var tableColumnIndex = require('./table-column-index.vue.js');
+var tableColumnDragSort = require('./table-column-drag-sort.vue.js');
+var tableTitleBar = require('./table-title-bar.vue.js');
+var page = require('../../../constants/page.js');
+var form = require('../../../constants/form.js');
+var is = require('../../utils/is.js');
+
+const _hoisted_1 = { class: "plus-table-expand-col" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusTable",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: {
+    tableData: { default: () => [] },
+    data: { default: () => [] },
+    columns: { default: () => [] },
+    defaultSize: { default: "default" },
+    pagination: { type: [Boolean, Object], default: false },
+    actionBar: { type: [Boolean, Object], default: false },
+    hasIndexColumn: { type: Boolean, default: false },
+    titleBar: { type: [Boolean, Object], default: true },
+    isSelection: { type: [Boolean, String], default: false },
+    isRadio: { type: Boolean, default: false },
+    hasExpand: { type: Boolean, default: false },
+    loadingStatus: { type: Boolean, default: false },
+    height: {},
+    headerCellStyle: { default: () => ({
+      "background-color": "var(--el-fill-color-light)"
+    }) },
+    rowKey: { type: [String, Function], default: "id" },
+    dragSortable: { type: [Boolean, Object], default: false },
+    dragSortableTableColumnProps: { default: () => ({}) },
+    indexTableColumnProps: { default: () => ({}) },
+    selectionTableColumnProps: { default: () => ({
+      width: 40
+    }) },
+    radioTableColumnProps: { default: () => ({
+      width: 50
+    }) },
+    radioProps: { default: void 0 },
+    defaultSelectedRadioRow: { default: void 0 },
+    expandTableColumnProps: { default: () => ({}) },
+    indexContentStyle: { type: [Object, Function], default: () => ({}) },
+    editable: { type: [Boolean, String], default: false },
+    adaptive: { type: [Boolean, Object], default: false },
+    filterTableHeaderOverflowLabelLength: {}
+  },
+  emits: ["paginationChange", "clickAction", "clickActionConfirmCancel", "dragSortEnd", "formChange", "refresh", "edited", "cell-click", "cell-dblclick", "filterTableHeader", "radioChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a, _b;
+    const props = __props;
+    const emit = __emit;
+    const radioRow = vue.ref();
+    const subColumns = vue.ref([]);
+    const columnsIsChange = vue.ref(false);
+    const filterColumns = vue.ref([]);
+    const tableInstance = vue.shallowRef(null);
+    const tableWrapperInstance = vue.ref(null);
+    const paginationInstance = vue.ref(null);
+    const state = vue.reactive({
+      subPageInfo: {
+        ...((_a = props.pagination) == null ? void 0 : _a.modelValue) || page.DefaultPageInfo
+      },
+      size: props.defaultSize
+    });
+    const cachedTableData = vue.ref([]);
+    vue.watchEffect(() => {
+      var _a2;
+      cachedTableData.value = ((_a2 = props.tableData) == null ? void 0 : _a2.length) ? props.tableData : props.data;
+    });
+    const __tableData = vue.computed(() => cachedTableData.value);
+    const tableDataLength = vue.computed(() => __tableData.value.length);
+    const hasAdaptive = vue.computed(() => typeof props.height === "undefined" && props.adaptive);
+    const formRefs = vue.shallowRef({});
+    vue.provide(form.TableFormRefInjectionKey, formRefs);
+    const formFieldRefs = vue.shallowRef({});
+    vue.provide(form.TableFormFieldRefInjectionKey, formFieldRefs);
+    vue.watch(
+      () => props.columns,
+      (val) => {
+        const filterOriginColumns = val.filter((item) => vue.unref(item.hideInTable) !== true);
+        filterColumns.value = filterOriginColumns.map((item) => {
+          var _a2;
+          return {
+            ...item,
+            headerIsChecked: (_a2 = item.headerIsChecked) != null ? _a2 : true
+          };
+        });
+        subColumns.value = filterOriginColumns.filter((item) => vue.unref(item.headerIsChecked) !== false);
+        columnsIsChange.value = !columnsIsChange.value;
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.defaultSelectedRadioRow,
+      (val) => {
+        radioRow.value = val ? vue.unref(props.defaultSelectedRadioRow) : {};
+      },
+      {
+        immediate: true
+      }
+    );
+    const handlePaginationChange = () => {
+      emit("paginationChange", { ...state.subPageInfo });
+    };
+    const handleAction = (callbackParams) => {
+      emit("clickAction", callbackParams);
+    };
+    const handleClickActionConfirmCancel = (callbackParams) => {
+      emit("clickActionConfirmCancel", callbackParams);
+    };
+    const handleFilterTableConfirm = (_columns, eventType) => {
+      filterColumns.value = _columns;
+      emit("filterTableHeader", _columns, eventType);
+      subColumns.value = _columns.filter(
+        (item) => vue.unref(item.hideInTable) !== true && item.headerIsChecked !== false
+      );
+    };
+    const handleClickDensity = (size2) => {
+      state.size = size2;
+    };
+    const handleDragSortEnd = (newIndex, oldIndex) => {
+      emit("dragSortEnd", newIndex, oldIndex);
+    };
+    const handleRefresh = () => {
+      emit("refresh");
+    };
+    const handleFormChange = (data) => {
+      emit("formChange", data);
+    };
+    const handleRadioChange = (value, row, index) => {
+      radioRow.value = value ? row : {};
+      emit("radioChange", row, index, !!value);
+    };
+    const currentForm = vue.ref();
+    const handleCellEdit = (row, column, type) => {
+      var _a2;
+      const rowIndex = __tableData.value.indexOf(row);
+      const columnIndex = column.getColumnIndex();
+      const columnConfig = subColumns.value[columnIndex];
+      if (!columnConfig) return;
+      if (props.editable === type) {
+        const currentCellForm = formRefs.value[rowIndex][columnIndex];
+        if (!currentCellForm) return;
+        document.addEventListener("click", handleStopEditClick);
+        if (currentForm.value) {
+          (_a2 = currentForm.value) == null ? void 0 : _a2.stopCellEdit();
+        }
+        currentForm.value = currentCellForm;
+        currentCellForm.startCellEdit();
+        const unwatch = vue.watch(
+          () => formFieldRefs.value.valueIsReady,
+          (val) => {
+            var _a3, _b2;
+            if ((val == null ? void 0 : val.value) && ((_b2 = (_a3 = formFieldRefs.value) == null ? void 0 : _a3.fieldInstance) == null ? void 0 : _b2.focus) && (props.editable === "click" || props.editable === "dblclick")) {
+              formFieldRefs.value.fieldInstance.focus();
+              unwatch();
+            }
+          }
+        );
+      }
+    };
+    const handleClickCell = (row, column, cell, event) => {
+      handleCellEdit(row, column, "click");
+      emit("cell-click", row, column, cell, event);
+    };
+    const handleDoubleClickCell = (row, column, cell, event) => {
+      handleCellEdit(row, column, "dblclick");
+      emit("cell-dblclick", row, column, cell, event);
+    };
+    const handleStopEditClick = (e) => {
+      var _a2, _b2;
+      if (tableWrapperInstance.value && currentForm.value) {
+        const target = e == null ? void 0 : e.target;
+        if (target.classList.contains("el-icon")) {
+          return;
+        }
+        const contains = (_a2 = tableWrapperInstance.value) == null ? void 0 : _a2.contains(target);
+        if (!contains && !is.isSVGElement(target)) {
+          (_b2 = currentForm.value) == null ? void 0 : _b2.stopCellEdit();
+          emit("edited");
+          document.removeEventListener("click", handleStopEditClick);
+        }
+      }
+    };
+    const setAdaptive = async () => {
+      var _a2;
+      await vue.nextTick();
+      if (!tableInstance.value) return;
+      const tableWrapper = tableInstance.value.$el;
+      let offsetBottom = 20;
+      let paginationHeight = 0;
+      if (is.isPlainObject(props.adaptive)) {
+        offsetBottom = (_a2 = props.adaptive.offsetBottom) != null ? _a2 : offsetBottom;
+      }
+      if (paginationInstance.value && props.pagination) {
+        paginationHeight = paginationInstance.value.$el.offsetHeight;
+      }
+      tableWrapper.style.height = `${window.innerHeight - tableWrapper.getBoundingClientRect().top - offsetBottom - paginationHeight}px`;
+    };
+    const debounceSetAdaptive = lodashEs.debounce(
+      setAdaptive,
+      is.isPlainObject(props.adaptive) ? (_b = props.adaptive.timeout) != null ? _b : 60 : 60
+    );
+    vue.onMounted(() => {
+      if (hasAdaptive.value) {
+        setAdaptive();
+        window.addEventListener("resize", debounceSetAdaptive);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (hasAdaptive.value) {
+        window.removeEventListener("resize", debounceSetAdaptive);
+      }
+    });
+    const { subPageInfo, size } = vue.toRefs(state);
+    __expose({
+      formRefs,
+      tableInstance
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref_key: "tableWrapperInstance",
+          ref: tableWrapperInstance,
+          class: "plus-table"
+        },
+        [
+          _ctx.titleBar ? (vue.openBlock(), vue.createBlock(tableTitleBar.default, {
+            key: 0,
+            columns: filterColumns.value,
+            "default-size": vue.unref(size),
+            "columns-is-change": columnsIsChange.value,
+            "title-bar": _ctx.titleBar,
+            onClickDensity: handleClickDensity,
+            onFilterTableHeader: handleFilterTableConfirm,
+            onRefresh: handleRefresh
+          }, vue.createSlots({
+            title: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "title")
+            ]),
+            toolbar: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "toolbar")
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots["drag-sort-icon"] ? {
+              name: "drag-sort-icon",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "drag-sort-icon")
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["column-settings-icon"] ? {
+              name: "column-settings-icon",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "column-settings-icon")
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots["density-icon"] ? {
+              name: "density-icon",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "density-icon")
+              ]),
+              key: "2"
+            } : void 0
+          ]), 1032, ["columns", "default-size", "columns-is-change", "title-bar"])) : vue.createCommentVNode("v-if", true),
+          vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTable), vue.mergeProps({
+            ref_key: "tableInstance",
+            ref: tableInstance,
+            "reserve-selection": true,
+            data: __tableData.value,
+            border: true,
+            height: _ctx.height,
+            "header-cell-style": _ctx.headerCellStyle,
+            size: vue.unref(size),
+            "row-key": _ctx.rowKey,
+            "highlight-current-row": "",
+            "scrollbar-always-on": ""
+          }, _ctx.$attrs, {
+            onCellClick: handleClickCell,
+            onCellDblclick: handleDoubleClickCell
+          }), {
+            default: vue.withCtx(() => {
+              var _a2;
+              return [
+                vue.createCommentVNode(" \u5355\u9009\u9009\u62E9\u680F "),
+                _ctx.isRadio ? (vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElTableColumn),
+                  vue.mergeProps({ key: "radio-selection" }, _ctx.radioTableColumnProps),
+                  {
+                    default: vue.withCtx((scoped) => [
+                      vue.createVNode(vue.unref(index.PlusRadio), vue.mergeProps({
+                        "model-value": vue.unref(lodashEs.isEqual)(radioRow.value, scoped.row),
+                        options: [{ value: true }]
+                      }, _ctx.radioProps, {
+                        onChange: (value) => handleRadioChange(value, scoped.row, scoped.$index)
+                      }), null, 16, ["model-value", "onChange"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  },
+                  16
+                  /* FULL_PROPS */
+                )) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u591A\u9009\u9009\u62E9\u680F "),
+                _ctx.isSelection ? (vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElTableColumn),
+                  vue.mergeProps({
+                    key: "selection",
+                    type: "selection"
+                  }, _ctx.selectionTableColumnProps),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u5E8F\u53F7\u680F "),
+                _ctx.hasIndexColumn ? (vue.openBlock(), vue.createBlock(tableColumnIndex.default, {
+                  key: 2,
+                  "index-content-style": _ctx.indexContentStyle,
+                  "index-table-column-props": _ctx.indexTableColumnProps,
+                  "page-info": (_a2 = _ctx.pagination) == null ? void 0 : _a2.modelValue
+                }, null, 8, ["index-content-style", "index-table-column-props", "page-info"])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u62D6\u62FD\u884C "),
+                _ctx.dragSortable ? (vue.openBlock(), vue.createBlock(tableColumnDragSort.default, {
+                  key: 3,
+                  sortable: _ctx.dragSortable,
+                  "drag-sortable-table-column-props": _ctx.dragSortableTableColumnProps,
+                  "table-instance": tableInstance.value,
+                  onDragSortEnd: handleDragSortEnd
+                }, vue.createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  _ctx.$slots["drag-sort-icon"] ? {
+                    name: "drag-sort-icon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "drag-sort-icon")
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["sortable", "drag-sortable-table-column-props", "table-instance"])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u5C55\u5F00\u884C "),
+                _ctx.hasExpand ? (vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElTableColumn),
+                  vue.mergeProps({
+                    key: 4,
+                    type: "expand"
+                  }, _ctx.expandTableColumnProps),
+                  {
+                    default: vue.withCtx((scoped) => [
+                      vue.createElementVNode("div", _hoisted_1, [
+                        vue.renderSlot(_ctx.$slots, "expand", vue.mergeProps({
+                          index: scoped.$index
+                        }, scoped))
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  },
+                  16
+                  /* FULL_PROPS */
+                )) : vue.createCommentVNode("v-if", true),
+                vue.renderSlot(_ctx.$slots, "default", {}, () => [
+                  vue.createCommentVNode("\u914D\u7F6E\u6E32\u67D3\u680F  "),
+                  vue.createVNode(tableColumn.default, {
+                    columns: subColumns.value,
+                    editable: _ctx.editable,
+                    "table-data-length": tableDataLength.value,
+                    onFormChange: handleFormChange
+                  }, vue.createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    vue.renderList(_ctx.$slots, (_, key) => {
+                      return {
+                        name: key,
+                        fn: vue.withCtx((data) => [
+                          vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["columns", "editable", "table-data-length"])
+                ]),
+                vue.createCommentVNode(" \u64CD\u4F5C\u680F "),
+                _ctx.actionBar ? (vue.openBlock(), vue.createBlock(
+                  tableActionBar.default,
+                  vue.mergeProps({ key: 5 }, _ctx.actionBar, {
+                    onClickAction: handleAction,
+                    onClickActionConfirmCancel: handleClickActionConfirmCancel
+                  }),
+                  vue.createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    _ctx.$slots["action-bar-more-icon"] ? {
+                      name: "action-bar-more-icon",
+                      fn: vue.withCtx(() => [
+                        vue.renderSlot(_ctx.$slots, "action-bar-more-icon")
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]),
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                )) : vue.createCommentVNode("v-if", true)
+              ];
+            }),
+            append: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "append")
+            ]),
+            empty: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "empty")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["data", "height", "header-cell-style", "size", "row-key"])), [
+            [vue.unref(elementPlus.vLoading), _ctx.loadingStatus]
+          ]),
+          vue.createCommentVNode(" \u5206\u9875 "),
+          _ctx.pagination ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusPagination), vue.mergeProps({
+            key: 1,
+            ref_key: "paginationInstance",
+            ref: paginationInstance,
+            modelValue: vue.unref(subPageInfo),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(subPageInfo) ? subPageInfo.value = $event : null)
+          }, _ctx.pagination, { onChange: handlePaginationChange }), vue.createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots["pagination-left"] ? {
+              name: "pagination-left",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "pagination-left")
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["pagination-right"] ? {
+              name: "pagination-right",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "pagination-right")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["modelValue"])) : vue.createCommentVNode("v-if", true)
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/table/src/table-action-bar.vue.d.ts

@@ -0,0 +1,71 @@
+import { TableColumnCtx } from 'element-plus';
+import { ButtonsCallBackParams, ActionBarButtonsRow, ActionBarProps } from './type';
+import { RecordType } from '@wlydfe/pro-ui/es/types';
+import { ComputedRef, DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+
+export interface PlusTableActionBarEmits {
+    (e: 'clickAction', data: ButtonsCallBackParams): void;
+    (e: 'clickActionConfirmCancel', data: ButtonsCallBackParams): void;
+}
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionBarProps>, {
+    label: string;
+    fixed: string;
+    type: string;
+    buttons: () => never[];
+    width: number;
+    showNumber: number;
+    actionBarTableColumnProps: () => {};
+    confirmType: string;
+    showLimitIncludeMore: boolean;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    clickAction: (data: ButtonsCallBackParams) => void;
+    clickActionConfirmCancel: (data: ButtonsCallBackParams) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionBarProps>, {
+    label: string;
+    fixed: string;
+    type: string;
+    buttons: () => never[];
+    width: number;
+    showNumber: number;
+    actionBarTableColumnProps: () => {};
+    confirmType: string;
+    showLimitIncludeMore: boolean;
+}>>> & {
+    onClickAction?: ((data: ButtonsCallBackParams) => any) | undefined;
+    onClickActionConfirmCancel?: ((data: ButtonsCallBackParams) => any) | undefined;
+}, {
+    width: string | number;
+    type: "link" | "icon" | "button";
+    label: string | ComputedRef<string>;
+    fixed: string;
+    showNumber: number | ((row: RecordType, index: number) => number);
+    showLimitIncludeMore: boolean;
+    buttons: ActionBarButtonsRow[];
+    actionBarTableColumnProps: Partial< TableColumnCtx<RecordType>>;
+    confirmType: "messageBox" | "popconfirm";
+}, {}>, {
+    "action-bar-more-icon"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/table/src/table-action-bar.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tableActionBar_vue_vue_type_script_setup_true_lang = require('./table-action-bar.vue2.js');
+var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+var PlusTableActionBar = /* @__PURE__ */ _pluginVue_exportHelper.default(tableActionBar_vue_vue_type_script_setup_true_lang.default, [["__file", "table-action-bar.vue"]]);
+
+exports.default = PlusTableActionBar;