@gct-paas/v-ben 0.1.4-dev.10 → 0.1.4-dev.11

package/es/components/v-ben-table/src/components/TableAction.vue.mjs

@@ -0,0 +1,174 @@
+import { defineComponent, computed, toRaw, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, mergeProps, withCtx, createVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import { MoreOutlined } from '@ant-design/icons-vue';
+import { Tooltip, Divider } from 'ant-design-vue';
+import '../BasicTable.vue2.mjs';
+import { useDesign } from '../../../../hooks/useDesign.mjs';
+import { permission } from '@gct-paas/core';
+import { isBoolean, isFunction, isString } from '../../../../utils/is.mjs';
+import './TableActionAuto.css';import './TableAction.css';/* empty css                  */
+/* empty css                      */
+import { PopConfirmButton } from '../../../v-ben-button/index.mjs';
+import { Dropdown } from '../../../v-ben-dropdown/index.mjs';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "text-14px"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "text-14px"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TableAction",
+  props: {
+    actions: {
+      type: Array,
+      default: null
+    },
+    dropDownActions: {
+      type: Array,
+      default: null
+    },
+    divider: {
+      type: Boolean,
+      default: true
+    },
+    outside: Boolean,
+    stopButtonPropagation: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { prefixCls } = useDesign("basic-table-action");
+    const hasPermission = permission.has;
+    function isIfShow(action) {
+      const ifShow = action.ifShow;
+      let isIfShow2 = true;
+      if (isBoolean(ifShow)) {
+        isIfShow2 = ifShow;
+      }
+      if (isFunction(ifShow)) {
+        isIfShow2 = ifShow(action);
+      }
+      return isIfShow2;
+    }
+    const getActions = computed(() => {
+      return (toRaw(props.actions) || []).filter((action) => {
+        return hasPermission(action.auth) && isIfShow(action);
+      }).map((action) => {
+        const { popConfirm } = action;
+        return {
+          getPopupContainer: () => document.body,
+          type: "link",
+          size: "small",
+          ...action,
+          ...popConfirm || {},
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          enable: !!popConfirm
+        };
+      });
+    });
+    const getDropdownList = computed(() => {
+      const list = (toRaw(props.dropDownActions) || []).filter(
+        (action) => {
+          return hasPermission(action.auth) && isIfShow(action);
+        }
+      );
+      return list.map((action, index) => {
+        const { label, popConfirm } = action;
+        return {
+          ...action,
+          ...popConfirm,
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          text: label,
+          divider: index < list.length - 1 ? props.divider : false
+        };
+      });
+    });
+    const getAlign = computed(() => {
+      return "left";
+    });
+    function getTooltip(data) {
+      return {
+        getPopupContainer: () => document.body,
+        ...isString(data) ? { title: data } : data
+      };
+    }
+    function onCellClick(e) {
+      if (!props.stopButtonPropagation) return;
+      const path = e.composedPath();
+      const isInButton = path.find((ele) => {
+        return ele.tagName?.toUpperCase() === "BUTTON";
+      });
+      isInButton && e.stopPropagation();
+    }
+    return (_ctx, _cache) => {
+      const _component_a_button = resolveComponent("a-button");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(prefixCls), getAlign.value]),
+        onClick: onCellClick
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(getActions.value, (action, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: `${index}-${action.label}`
+          }, [
+            action.tooltip ? (openBlock(), createBlock(unref(Tooltip), mergeProps({
+              key: 0,
+              placement: "bottom"
+            }, { ref_for: true }, getTooltip(action.tooltip)), {
+              default: withCtx(() => [
+                createVNode(unref(PopConfirmButton), mergeProps({ ref_for: true }, action), {
+                  default: withCtx(() => [
+                    action.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(action.label), 1)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1040)
+              ]),
+              _: 2
+            }, 1040)) : (openBlock(), createBlock(unref(PopConfirmButton), mergeProps({
+              key: 1,
+              ref_for: true
+            }, action), {
+              default: withCtx(() => [
+                action.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(action.label), 1)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1040)),
+            __props.divider && index < getActions.value.length - 1 ? (openBlock(), createBlock(unref(Divider), {
+              key: 2,
+              type: "vertical",
+              class: "action-divider"
+            })) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        __props.dropDownActions && getDropdownList.value.length > 0 ? (openBlock(), createBlock(unref(Dropdown), {
+          key: 0,
+          trigger: ["hover"],
+          "drop-menu-list": getDropdownList.value,
+          popconfirm: ""
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "more"),
+            !_ctx.$slots.more ? (openBlock(), createBlock(_component_a_button, {
+              key: 0,
+              type: "link",
+              size: "small"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(MoreOutlined), { class: "icon-more" })
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["drop-menu-list"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/v-ben-table/src/components/TableAction.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './TableAction.vue.mjs';
+import './TableAction.css';/* empty css                  */
+
+
+
+export { _sfc_main as default };

package/es/components/v-ben-table/src/components/TableActionAuto.css

@@ -0,0 +1,37 @@
+.'vben-basic-table-action' {
+  display: flex;
+  align-items: center;
+}
+.'vben-basic-table-action' .action-divider {
+  display: table;
+}
+.'vben-basic-table-action'.left {
+  justify-content: flex-start;
+}
+.'vben-basic-table-action'.center {
+  justify-content: center;
+}
+.'vben-basic-table-action'.right {
+  justify-content: flex-end;
+}
+.'vben-basic-table-action' button {
+  display: flex;
+  align-items: center;
+}
+.'vben-basic-table-action' button span {
+  margin-left: 0 !important;
+}
+.'vben-basic-table-action' button.ant-btn-circle span {
+  margin: auto !important;
+}
+.'vben-basic-table-action' .ant-divider,
+.'vben-basic-table-action' .ant-divider-vertical {
+  margin: 0 10px;
+}
+.'vben-basic-table-action' .icon-more {
+  transform: rotate(90deg);
+}
+.'vben-basic-table-action' .icon-more svg {
+  font-size: 1.1em;
+  font-weight: 700;
+}

package/es/components/v-ben-table/src/components/TableActionAuto.vue.d.ts

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+import { ActionItem } from '../types/tableAction';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        more?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    actions: {
+        type: PropType<ActionItem[]>;
+        default: null;
+    };
+    divider: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    outside: BooleanConstructor;
+    stopButtonPropagation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxDispalyCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    actions: {
+        type: PropType<ActionItem[]>;
+        default: null;
+    };
+    divider: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    outside: BooleanConstructor;
+    stopButtonPropagation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxDispalyCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    actions: ActionItem[];
+    divider: boolean;
+    outside: boolean;
+    stopButtonPropagation: boolean;
+    maxDispalyCount: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/v-ben-table/src/components/TableActionAuto.vue.mjs

@@ -0,0 +1,181 @@
+import { defineComponent, computed, toRaw, resolveComponent, openBlock, createElementBlock, withModifiers, normalizeClass, unref, Fragment, renderList, createBlock, mergeProps, withCtx, createVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import { MoreOutlined } from '@ant-design/icons-vue';
+import { Tooltip, Divider } from 'ant-design-vue';
+import '../BasicTable.vue2.mjs';
+import { useDesign } from '../../../../hooks/useDesign.mjs';
+import { permission } from '@gct-paas/core';
+import { isFunction, isString } from '../../../../utils/is.mjs';
+import './TableActionAuto.css';import './TableAction.css';/* empty css                  */
+/* empty css                      */
+import { PopConfirmButton } from '../../../v-ben-button/index.mjs';
+import { Dropdown } from '../../../v-ben-dropdown/index.mjs';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "text-14px"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "text-14px"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TableActionAuto",
+  props: {
+    actions: {
+      type: Array,
+      default: null
+    },
+    divider: {
+      type: Boolean,
+      default: true
+    },
+    outside: Boolean,
+    stopButtonPropagation: {
+      type: Boolean,
+      default: false
+    },
+    maxDispalyCount: {
+      type: Number,
+      default: 4
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { prefixCls } = useDesign("basic-table-action");
+    const hasPermission = permission.has;
+    function isIfShow(action) {
+      const ifShow = action.ifShow ?? true;
+      if (isFunction(ifShow)) {
+        return ifShow(action);
+      }
+      return !!ifShow;
+    }
+    const validActions = computed(() => {
+      return [...toRaw(props.actions) || []].filter((action) => {
+        return hasPermission(action.auth) && isIfShow(action);
+      });
+    });
+    const getActions = computed(() => {
+      let list = [];
+      if (props.maxDispalyCount >= validActions.value.length) {
+        list = [...validActions.value];
+      } else {
+        list = validActions.value.slice(0, props.maxDispalyCount);
+      }
+      return list.map((action) => {
+        const { popConfirm } = action;
+        return {
+          getPopupContainer: () => document.body,
+          type: "link",
+          size: "small",
+          ...action,
+          ...popConfirm || {},
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          enable: !!popConfirm
+        };
+      });
+    });
+    const getDropdownList = computed(() => {
+      let list = [];
+      if (props.maxDispalyCount >= validActions.value.length) {
+        return [];
+      } else {
+        list = validActions.value.slice(props.maxDispalyCount);
+      }
+      return list.map((action, index) => {
+        const { label, popConfirm } = action;
+        return {
+          ...action,
+          ...popConfirm,
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          text: label,
+          divider: index < list.length - 1 ? props.divider : false
+        };
+      });
+    });
+    const getAlign = computed(() => {
+      return "left";
+    });
+    function getTooltip(data) {
+      return {
+        getPopupContainer: () => document.body,
+        placement: "bottom",
+        ...isString(data) ? { title: data } : data
+      };
+    }
+    function onCellClick(e) {
+      if (!props.stopButtonPropagation) return;
+      const path = e.composedPath();
+      const isInButton = path.find((ele) => {
+        return ele.tagName?.toUpperCase() === "BUTTON";
+      });
+      isInButton && e.stopPropagation();
+    }
+    return (_ctx, _cache) => {
+      const _component_a_button = resolveComponent("a-button");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(prefixCls), getAlign.value]),
+        onClick: withModifiers(onCellClick, ["stop"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(getActions.value, (action, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: `${index}-${action.label}`
+          }, [
+            action.tooltip ? (openBlock(), createBlock(unref(Tooltip), mergeProps({
+              key: 0,
+              ref_for: true
+            }, getTooltip(action.tooltip)), {
+              default: withCtx(() => [
+                createVNode(unref(PopConfirmButton), mergeProps({ ref_for: true }, action), {
+                  default: withCtx(() => [
+                    action.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(action.label), 1)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1040)
+              ]),
+              _: 2
+            }, 1040)) : (openBlock(), createBlock(unref(PopConfirmButton), mergeProps({
+              key: 1,
+              ref_for: true
+            }, action), {
+              default: withCtx(() => [
+                action.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(action.label), 1)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1040)),
+            __props.divider && index < getActions.value.length - 1 ? (openBlock(), createBlock(unref(Divider), {
+              key: 2,
+              type: "vertical",
+              class: "action-divider"
+            })) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        getDropdownList.value.length > 0 ? (openBlock(), createBlock(unref(Dropdown), {
+          key: 0,
+          trigger: ["hover"],
+          "drop-menu-list": getDropdownList.value,
+          popconfirm: ""
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "more"),
+            !_ctx.$slots.more ? (openBlock(), createBlock(_component_a_button, {
+              key: 0,
+              type: "link",
+              size: "small"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(MoreOutlined), { class: "icon-more" })
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["drop-menu-list"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/v-ben-table/src/components/TableActionAuto.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './TableActionAuto.vue.mjs';
+import './TableActionAuto.css';/* empty css                      */
+
+
+
+export { _sfc_main as default };

package/es/components/v-ben-table/src/props.d.ts

@@ -0,0 +1,186 @@
+import { PropType } from 'vue';
+import { PaginationProps } from './types/pagination';
+import { BasicColumn, TableSetting, TableCustomRecord, TableRowSelection } from './types/table';
+export declare const basicProps: {
+    clickToRowSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTreeTable: BooleanConstructor;
+    tableSetting: {
+        type: PropType<TableSetting>;
+        default: {};
+    };
+    inset: BooleanConstructor;
+    showTableSetting: BooleanConstructor;
+    autoCreateKey: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    summaryFunc: {
+        type: PropType<(...arg: unknown[]) => unknown[]>;
+        default: null;
+    };
+    summaryData: {
+        type: PropType<Recordable[]>;
+        default: null;
+    };
+    indentSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    canColDrag: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    api: {
+        type: PropType<(...arg: unknown[]) => Promise<unknown>>;
+        default: null;
+    };
+    beforeFetch: {
+        type: PropType<Fn>;
+        default: null;
+    };
+    afterFetch: {
+        type: PropType<Fn>;
+        default: null;
+    };
+    handleSearchInfoFn: {
+        type: PropType<Fn>;
+        default: null;
+    };
+    immediate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyDataIsShowTable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchInfo: {
+        type: PropType<Recordable>;
+        default: null;
+    };
+    defSort: {
+        type: PropType<Recordable>;
+        default: null;
+    };
+    useSearchForm: BooleanConstructor;
+    columns: {
+        type: PropType<BasicColumn[]>;
+        default: () => never[];
+    };
+    showIndexColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indexColumnProps: {
+        type: PropType<BasicColumn>;
+        default: null;
+    };
+    actionColumn: {
+        type: PropType<BasicColumn>;
+        default: null;
+    };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCanResizeParent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    canResize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearSelectOnPageChange: BooleanConstructor;
+    resizeHeightOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rowSelection: {
+        type: PropType<TableRowSelection | null>;
+        default: null;
+    };
+    title: {
+        type: PropType<string | ((data: Recordable) => string)>;
+        default: null;
+    };
+    titleHelpMessage: {
+        type: PropType<string | string[]>;
+    };
+    maxHeight: NumberConstructor;
+    dataSource: {
+        type: PropType<Recordable[]>;
+        default: null;
+    };
+    rowKey: {
+        type: PropType<string | ((record: Recordable) => string)>;
+        default: string;
+    };
+    bordered: BooleanConstructor;
+    pagination: {
+        type: PropType<PaginationProps | boolean>;
+        default: null;
+    };
+    loading: BooleanConstructor;
+    rowClassName: {
+        type: PropType<(record: TableCustomRecord<unknown>, index: number) => string>;
+    };
+    scroll: {
+        type: PropType<{
+            x: number | string | true;
+            y: number | string;
+        }>;
+        default: null;
+    };
+    beforeEditSubmit: {
+        type: PropType<(data: {
+            record: Recordable;
+            index: number;
+            key: string | number;
+            value: unknown;
+        }) => Promise<unknown>>;
+    };
+    /**
+     * 行拖拽
+     */
+    rowDraggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 仅支持同层级拖拽
+     */
+    supportSameLevel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 拖拽完成自动请求的api
+     */
+    rowDragApi: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    /**
+     * tree表格展开行
+     */
+    expandedRowKeys: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    /**
+     * 空数据时全屏显示
+     */
+    emptyFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};