bkui-vue 0.0.1-beta.185 → 0.0.1-beta.186

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key2, value) => {
   __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
   return value;
 };
-import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, renderSlot, Fragment, toRefs, createApp, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, watchEffect, onUpdated, render as render$1, shallowRef, toRaw, withModifiers, TransitionGroup } from "vue";
+import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, renderSlot, Fragment, toRefs, createApp, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, unref, watchEffect, onUpdated, render as render$1, shallowRef, toRaw, withModifiers, TransitionGroup } from "vue";
 var reset = "";
 var alert = "";
 var affix = "";
@@ -16068,6 +16068,7 @@ const DEFAULT_SIZE_LIST = [
   { value: "medium", label: "\u4E2D", height: SETTING_SIZE.medium },
   { value: "large", label: "\u5927", height: SETTING_SIZE.large }
 ];
+const PROVIDE_KEY_INIT_COL = "InitColumns";
 var SortScope = /* @__PURE__ */ ((SortScope2) => {
   SortScope2["CURRENT"] = "current";
   SortScope2["ALL"] = "all";
@@ -16079,6 +16080,7 @@ const IColumnType = {
   render: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
   width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
   minWidth: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]).def(),
+  columnKey: PropTypes.string.def(""),
   showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     content: PropTypes.string.def(""),
     disabled: PropTypes.bool.def(false),
@@ -16160,6 +16162,34 @@ const tableProps = {
     PropTypes.func
   ]).def(TABLE_ROW_ATTRIBUTE.ROW_INDEX)
 };
+var Column = defineComponent({
+  name: "TableColumn",
+  props: __spreadProps(__spreadValues({}, IColumnType), {
+    prop: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")])
+  }),
+  setup(props2, {
+    slots
+  }) {
+    const initColumns = inject(PROVIDE_KEY_INIT_COL, (_column) => {
+    }, false);
+    onMounted(() => {
+      const column = reactive(__spreadProps(__spreadValues({}, props2), {
+        field: props2.prop || props2.field
+      }));
+      initColumns(column);
+      column.render = slots.default ? (args) => {
+        var _a;
+        return (_a = slots.default) == null ? void 0 : _a.call(slots, args);
+      } : void 0;
+    });
+    return () => {
+      var _a;
+      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
+        data: ""
+      })]);
+    };
+  }
+});
 const resolvePaginationOption = (propPagination, defVal) => {
   if (!!propPagination) {
     if (typeof propPagination === "object") {
@@ -17398,10 +17428,10 @@ var Settings = defineComponent({
       theme
     }), {
       default: () => createVNode("span", {
-        "class": "table-head-settings"
-      }, [createVNode(cogShape, {
-        "style": "color: #c4c6cc;",
+        "class": "table-head-settings",
         "onClick": handleSettingClick
+      }, [createVNode(cogShape, {
+        "style": "color: #c4c6cc;"
       }, null)]),
       content: () => {
         let _slot2;
@@ -17597,7 +17627,7 @@ class TableRender {
     return [this.props.settings ? createVNode(Settings, {
       "class": "table-head-settings",
       "settings": this.reactiveProp.settings,
-      "columns": this.props.columns,
+      "columns": this.colgroups,
       "rowHeight": this.props.rowHeight,
       "onChange": handleSettingsChanged
     }, null) : "", createVNode("table", {
@@ -17919,6 +17949,37 @@ class TableRender {
     return this.reactiveProp.setting;
   }
 }
+var useColumn = (props2, targetColumns) => {
+  const initColumns = (column) => {
+    let resolveColumns = [];
+    if (!Array.isArray(column)) {
+      resolveColumns = [column];
+    } else {
+      resolveColumns = column;
+    }
+    resolveColumns.forEach((col) => {
+      const matchCol = targetColumns.find((c2) => c2.label === col.label && c2.field === col.field);
+      if (!matchCol) {
+        const unrefCol = unref(col);
+        targetColumns.push(unrefCol);
+      }
+    });
+  };
+  const getColumns = () => {
+    var _a;
+    if (targetColumns == null ? void 0 : targetColumns.length) {
+      return targetColumns;
+    }
+    if ((_a = props2.columns) == null ? void 0 : _a.length) {
+      return props2.columns;
+    }
+    return [];
+  };
+  return {
+    initColumns,
+    getColumns
+  };
+};
 const resolveActiveColumns = (props2) => {
   if (props2.columnPick !== "disabled") {
     if (props2.columnPick === "multi") {
@@ -17928,15 +17989,18 @@ const resolveActiveColumns = (props2) => {
   }
   return [];
 };
-var useActiveColumns = (props2) => {
+var useActiveColumns = (props2, targetColumns) => {
   let activeColumns = reactive([]);
+  const {
+    getColumns
+  } = useColumn(props2, targetColumns);
   if (props2.columnPick === "disabled") {
     return {
       activeColumns
     };
   }
   const activeCols = reactive(resolveActiveColumns(props2));
-  const getActiveColumns = () => (props2.columns || []).map((_column, index) => ({
+  const getActiveColumns = () => getColumns().map((_column, index) => ({
     index,
     active: activeCols.some((colIndex) => colIndex === index),
     _column
@@ -18080,7 +18144,8 @@ var useColumnResize = (colgroups, immediate = true) => {
     dragOffsetXStyle
   };
 };
-const useClass = (props2, root, reactiveProp, pageData) => {
+const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
+  const { getColumns } = useColumn(props2, targetColumns);
   const autoHeight = ref(200);
   const hasScrollY = ref(void 0);
   const hasFooter = computed(() => props2.pagination && props2.data.length);
@@ -18107,8 +18172,9 @@ const useClass = (props2, root, reactiveProp, pageData) => {
     ["is-hidden"]: !props2.pagination || !props2.data.length
   }));
   const resolveWidth2 = () => {
-    if (props2.columns.every((col) => /^\d+\.?\d*(px)?$/ig.test(`${col.width}`))) {
-      const rectWidth = props2.columns.reduce((width, col) => width + Number(`${col.width}`.replace(/px/ig, "")), 0);
+    const columns = getColumns();
+    if (columns.every((col) => /^\d+\.?\d*(px)?$/ig.test(`${col.width}`))) {
+      const rectWidth = columns.reduce((width, col) => width + Number(`${col.width}`.replace(/px/ig, "")), 0);
       const offset2 = hasScrollY.value ? SCROLLY_WIDTH : 0;
       return `${rectWidth + offset2}px`;
     }
@@ -18193,19 +18259,20 @@ const useClass = (props2, root, reactiveProp, pageData) => {
     hasScrollY
   };
 };
-const useInit = (props2) => {
+const useInit = (props2, targetColumns) => {
   var _a, _b;
   const colgroups = reactive([]);
+  const { getColumns } = useColumn(props2, targetColumns);
   const updateColGroups = () => {
-    colgroups.splice(0, colgroups.length, ...(props2.columns || []).map((col) => __spreadProps(__spreadValues({}, col), {
+    colgroups.splice(0, colgroups.length, ...getColumns().map((col) => __spreadProps(__spreadValues({}, col), {
       calcWidth: null,
       resizeWidth: null,
       listeners: /* @__PURE__ */ new Map()
     })));
   };
   const { dragOffsetXStyle, dragOffsetX, resetResizeEvents, registerResizeEvent } = useColumnResize(colgroups, true);
-  const { activeColumns } = useActiveColumns(props2);
-  watch(() => props2.columns, () => {
+  const { activeColumns } = useActiveColumns(props2, targetColumns);
+  watch(() => [props2.columns, targetColumns], () => {
     updateColGroups();
     resetResizeEvents();
     registerResizeEvent();
@@ -18280,6 +18347,11 @@ var Component$d = defineComponent({
     let activeSortColumn = null;
     let columnFilterFn = null;
     let observerIns = null;
+    const targetColumns = reactive([]);
+    const {
+      initColumns
+    } = useColumn(props2, targetColumns);
+    provide(PROVIDE_KEY_INIT_COL, initColumns);
     const root = ref();
     const refVirtualRender = ref();
     const tableOffsetRight = ref(0);
@@ -18293,7 +18365,7 @@ var Component$d = defineComponent({
       setRowExpand,
       initIndexData,
       fixedWrapperClass
-    } = useInit(props2);
+    } = useInit(props2, targetColumns);
     const {
       pageData,
       localPagination,
@@ -18312,7 +18384,7 @@ var Component$d = defineComponent({
       resetTableHeight,
       getColumnsWidthOffsetWidth,
       hasFooter
-    } = useClass(props2, root, reactiveSchema, pageData);
+    } = useClass(props2, targetColumns, root, reactiveSchema, pageData);
     const tableRender = new TableRender(props2, ctx, reactiveSchema, colgroups);
     const updateOffsetRight = () => {
       const $tableContent = root.value.querySelector(".bk-table-body-content");
@@ -18479,6 +18551,12 @@ var Component$d = defineComponent({
       [resolveClassName("fixed-bottom-border")]: true,
       "_is-empty": !props2.data.length
     };
+    const columnGhostStyle = {
+      zIndex: -1,
+      width: 0,
+      height: 0,
+      display: "none"
+    };
     const {
       renderScrollLoading
     } = useScrollLoading(props2, ctx);
@@ -18486,48 +18564,56 @@ var Component$d = defineComponent({
       scrollXName: "",
       scrollYName: ""
     };
-    return () => createVNode("div", {
-      "class": tableClass.value,
-      "style": wrapperStyle.value,
-      "ref": root
-    }, [
-      createVNode("div", {
-        "class": headClass,
-        "style": headStyle.value
-      }, [tableRender.renderTableHeadSchema()]),
-      createVNode(BkVirtualRender, mergeProps({
-        "ref": refVirtualRender,
-        "lineHeight": tableRender.getRowHeight,
-        "class": tableBodyClass.value,
-        "style": contentStyle,
-        "list": pageData
-      }, scrollClass, {
-        "contentClassName": tableBodyContentClass,
-        "onContentScroll": handleScrollChanged,
-        "throttleDelay": 0,
-        "scrollEvent": true,
-        "enabled": props2.virtualEnabled
-      }), {
-        default: (scope) => tableRender.renderTableBodySchema(scope.data || props2.data),
-        afterSection: () => createVNode("div", {
-          "class": fixedBottomBorder
-        }, null)
-      }),
-      createVNode("div", {
-        "class": fixedWrapperClass
-      }, [renderFixedColumns(reactiveSchema.scrollTranslateX, tableOffsetRight.value), createVNode("div", {
-        "class": resizeColumnClass,
-        "style": resizeColumnStyle.value
-      }, null), createVNode("div", {
-        "class": loadingRowClass
-      }, [renderScrollLoading()])]),
-      createVNode("div", {
-        "class": footerClass.value
-      }, [hasFooter.value && tableRender.renderTableFooter(localPagination.value)])
-    ]);
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": tableClass.value,
+        "style": wrapperStyle.value,
+        "ref": root
+      }, [
+        createVNode("div", {
+          "class": headClass,
+          "style": headStyle.value
+        }, [tableRender.renderTableHeadSchema()]),
+        createVNode(BkVirtualRender, mergeProps({
+          "ref": refVirtualRender,
+          "lineHeight": tableRender.getRowHeight,
+          "class": tableBodyClass.value,
+          "style": contentStyle,
+          "list": pageData
+        }, scrollClass, {
+          "contentClassName": tableBodyContentClass,
+          "onContentScroll": handleScrollChanged,
+          "throttleDelay": 0,
+          "scrollEvent": true,
+          "enabled": props2.virtualEnabled
+        }), {
+          default: (scope) => tableRender.renderTableBodySchema(scope.data || props2.data),
+          afterSection: () => createVNode("div", {
+            "class": fixedBottomBorder
+          }, null)
+        }),
+        createVNode("div", {
+          "class": fixedWrapperClass
+        }, [renderFixedColumns(reactiveSchema.scrollTranslateX, tableOffsetRight.value), createVNode("div", {
+          "class": resizeColumnClass,
+          "style": resizeColumnStyle.value
+        }, null), createVNode("div", {
+          "class": loadingRowClass
+        }, [renderScrollLoading()])]),
+        createVNode("div", {
+          "class": footerClass.value
+        }, [hasFooter.value && tableRender.renderTableFooter(localPagination.value)]),
+        createVNode("div", {
+          "style": columnGhostStyle
+        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])
+      ]);
+    };
   }
 });
 const BkTable = withInstall(Component$d);
+withInstall(Column);
+const BkTableColumn = withInstall(Column);
 const INPUT_MIN_WIDTH = 12;
 function usePage(pageSize) {
   const state = reactive({
@@ -35740,6 +35826,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Steps: BkSteps$2,
   Switcher: BkSwitcher,
   Table: BkTable,
+  TableColumn: BkTableColumn,
   Tag: BkTag,
   TagInput,
   Divider: BkDivider,
@@ -35785,4 +35872,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { createPopoverComponent as $bkPopover, BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkColorPicker as ColorPicker, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkSteps as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps$2 as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTag as Tag, TagInput, BkSteps$1 as TimeLine, BkTimePicker as TimePicker, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, ellipsis as bkEllipsis, createInstance as bkEllipsisInstance, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };
+export { createPopoverComponent as $bkPopover, BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkColorPicker as ColorPicker, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkSteps as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps$2 as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTableColumn as TableColumn, BkTag as Tag, TagInput, BkSteps$1 as TimeLine, BkTimePicker as TimePicker, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, ellipsis as bkEllipsis, createInstance as bkEllipsisInstance, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };