@blueking/ediatable 0.0.1-beta.4 → 0.0.1-beta.6

package/vue3/index.es.min.js

@@ -1,4 +1,4 @@
-import { ref, provide, onMounted, onBeforeUnmount, defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, reactive, toRefs, h, mergeModels, useModel, useAttrs, useSlots, resolveDirective, normalizeClass, unref, createVNode, mergeProps, createSlots, withCtx, withDirectives, createCommentVNode, computed, createBlock, inject, getCurrentScope, onScopeDispose, watch, getCurrentInstance, normalizeStyle, Fragment, renderList, nextTick, toDisplayString } from "vue";
+import { ref, provide, onMounted, onBeforeUnmount, getCurrentScope, onScopeDispose, unref, computed, watch, getCurrentInstance, defineComponent, useSlots, inject, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, withDirectives, renderSlot, createElementVNode, createCommentVNode, createBlock, Fragment, renderList, withCtx, createTextVNode, toDisplayString, reactive, toRefs, h, mergeModels, useModel, useAttrs, createVNode, mergeProps, createSlots, nextTick } from "vue";
 import "bkui-vue/dist/style.css";
 import { DatePicker, Input, Select, TagInput, Loading } from "bkui-vue";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -5623,11 +5623,208 @@ function useColumnResize(tableRef, tableColumnResizeRef, mouseupCallback) {
     handleMouseMove
   };
 }
-const _hoisted_1$7 = { style: { "position": "relative" } };
-const renderTablekey = Symbol("renderTable");
+const random = () => `${_.random(0, 999999)}_${Date.now()}_${_.random(0, 999999)}`;
+const encodeMult = (text) => {
+  const temp = document.createElement("textarea");
+  temp.value = text;
+  return temp.value;
+};
+function tryOnScopeDispose(fn2) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn2);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+function useMounted() {
+  const isMounted = ref(false);
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+  return isMounted;
+}
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+function useResizeObserver(target, callback, options = {}) {
+  const { window: window2 = defaultWindow, ...observerOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const stopWatch = watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window2) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+const _hoisted_1$6 = ["data-fixed", "data-maxWidth", "data-minWidth", "data-width"];
+const _hoisted_2$2 = { class: "th-cell" };
+const _hoisted_3$1 = { style: { "display": "inline-block", "line-height": "40px", "vertical-align": "top" } };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "head-column",
+  props: {
+    fixed: { default: void 0 },
+    maxWidth: { default: void 0 },
+    minWidth: { default: void 0 },
+    required: { type: Boolean, default: true },
+    width: { default: void 0 },
+    renderAppend: { type: Function, default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { rowWidth, isOverflow: isMinimize } = inject(renderTablekey);
+    const parentTable = inject(tableColumnResizekey);
+    const columnRef = ref();
+    const currentWidth = ref(0);
+    const columnKey = random();
+    let initWidthRate = 0;
+    let isDragedSelf = false;
+    const finalMinWidth = computed(() => props.minWidth ? props.minWidth : props.width ?? 100);
+    const isFixedRight = computed(() => props.fixed === "right");
+    const isFixedLeft = computed(() => props.fixed === "left");
+    const styles = computed(() => {
+      if (props.width && (rowWidth == null ? void 0 : rowWidth.value) && finalMinWidth.value) {
+        const newWidth = rowWidth.value * initWidthRate;
+        if (newWidth !== props.width) {
+          let width = 0;
+          if (isMinimize == null ? void 0 : isMinimize.value) {
+            if (currentWidth.value !== 0 && (currentWidth.value !== finalMinWidth.value || currentWidth.value !== props.width)) {
+              width = currentWidth.value;
+            } else {
+              width = finalMinWidth.value;
+            }
+          } else if (newWidth > finalMinWidth.value) {
+            width = newWidth;
+          } else {
+            width = finalMinWidth.value;
+          }
+          return {
+            minWidth: `${width}px`
+          };
+        }
+      }
+      return {
+        minWidth: props.width ? `${props.width}px` : "120px"
+      };
+    });
+    const RenderAppendElement = computed(() => props.renderAppend && props.renderAppend());
+    watch(
+      () => [props.width, rowWidth == null ? void 0 : rowWidth.value, currentWidth.value],
+      ([width, rowWidth2, currentWidth2]) => {
+        if (!isDragedSelf) {
+          return;
+        }
+        if (width && rowWidth2 && currentWidth2 && finalMinWidth.value) {
+          isDragedSelf = false;
+          if (currentWidth2 !== 0 && (currentWidth2 !== finalMinWidth.value || currentWidth2 !== width)) {
+            initWidthRate = currentWidth2 / rowWidth2;
+          } else {
+            initWidthRate = (isMinimize == null ? void 0 : isMinimize.value) ? finalMinWidth.value / rowWidth2 : width / rowWidth2;
+          }
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    useResizeObserver(columnRef, () => {
+      if (!isDragedSelf) {
+        return;
+      }
+      const width = parseFloat(columnRef.value.style.width);
+      currentWidth.value = width;
+    });
+    const handleMouseDown = (event) => {
+      isDragedSelf = true;
+      parentTable == null ? void 0 : parentTable.columnMousedown(event, {
+        columnKey,
+        minWidth: finalMinWidth.value
+      });
+    };
+    const handleMouseMove = (event) => {
+      parentTable == null ? void 0 : parentTable.columnMouseMove(event);
+    };
+    return (_ctx, _cache) => {
+      const _directive_overflow_tips = resolveDirective("overflow-tips");
+      return openBlock(), createElementBlock("th", {
+        ref_key: "columnRef",
+        ref: columnRef,
+        class: normalizeClass(["bk-ediatable-head-column", {
+          "is-required": _ctx.required,
+          [`column-${unref(columnKey)}`]: true,
+          "is-right-fixed": unref(isMinimize) && isFixedRight.value,
+          "is-left-fixed": unref(isMinimize) && isFixedLeft.value
+        }]),
+        "data-fixed": _ctx.fixed,
+        "data-maxWidth": _ctx.maxWidth,
+        "data-minWidth": finalMinWidth.value,
+        "data-width": _ctx.width,
+        style: normalizeStyle(styles.value),
+        onMousedown: handleMouseDown,
+        onMousemove: handleMouseMove
+      }, [
+        withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [
+          renderSlot(_ctx.$slots, "default")
+        ])), [
+          [_directive_overflow_tips]
+        ]),
+        createElementVNode("div", _hoisted_3$1, [
+          unref(slots).append && !_ctx.renderAppend ? renderSlot(_ctx.$slots, "append", { key: 0 }) : createCommentVNode("v-if", true),
+          _ctx.renderAppend ? (openBlock(), createBlock(unref(RenderAppendElement), { key: 1 })) : createCommentVNode("v-if", true)
+        ])
+      ], 46, _hoisted_1$6);
+    };
+  }
+});
+const renderTablekey = Symbol("renderTable");
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ediatable",
+  props: {
+    theadList: { default: () => [] }
+  },
   setup(__props) {
+    const slots = useSlots();
     const checkTableScroll = () => {
       rowWidth.value = tableRef.value.clientWidth;
       isOverflow.value = tableOuterRef.value.clientWidth < tableRef.value.clientWidth;
@@ -5667,8 +5864,34 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             },
             [
               createElementVNode("thead", null, [
-                createElementVNode("tr", _hoisted_1$7, [
-                  renderSlot(_ctx.$slots, "default")
+                createElementVNode("tr", null, [
+                  unref(slots).default && _ctx.theadList.length === 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(
+                    Fragment,
+                    { key: 1 },
+                    renderList(_ctx.theadList, (head, index) => {
+                      return openBlock(), createBlock(_sfc_main$8, {
+                        key: index,
+                        width: head.width,
+                        "min-width": head.minWidth,
+                        "max-width": head.maxWidth,
+                        fixed: head.fixed,
+                        required: head.required,
+                        "render-append": head.renderAppend
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(
+                            toDisplayString(head.title),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["width", "min-width", "max-width", "fixed", "required", "render-append"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
                 ])
               ]),
               createElementVNode("tbody", null, [
@@ -5789,12 +6012,12 @@ const DbIcon = defineComponent({
     });
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$5 = {
   key: 0,
   class: "input-error"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "date-time-picker",
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "date-time-picker-column",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "" },
     rules: { default: void 0 },
@@ -5861,7 +6084,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               key: "0"
             } : void 0
           ]), 1040, ["model-value", "placeholder", "type"]),
-          unref(errorMessage) ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+          unref(errorMessage) ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
             withDirectives(createVNode(
               unref(DbIcon),
               { type: "exclamation-fill" },
@@ -5879,18 +6102,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const random = () => `${_.random(0, 999999)}_${Date.now()}_${_.random(0, 999999)}`;
-const encodeMult = (text) => {
-  const temp = document.createElement("textarea");
-  temp.value = text;
-  return temp.value;
-};
-const _hoisted_1$5 = {
+const _hoisted_1$4 = {
   key: 1,
   class: "blur-dispaly-main"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "input",
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "input-column",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "请输入" },
     rules: { default: void 0 },
@@ -6025,7 +6242,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           )), [
             [_directive_bk_tooltips, unref(errorMessage)]
           ]) : createCommentVNode("v-if", true),
-          _ctx.isShowBlur && isBlur.value ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+          _ctx.isShowBlur && isBlur.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
             renderSlot(_ctx.$slots, "blur")
           ])) : createCommentVNode("v-if", true)
         ],
@@ -6035,7 +6252,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "fixed-column",
   props: {
     fixed: { default: "right" }
@@ -6063,200 +6280,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function tryOnScopeDispose(fn2) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn2);
-    return true;
-  }
-  return false;
-}
-function toValue(r) {
-  return typeof r === "function" ? r() : unref(r);
-}
-const isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-function unrefElement(elRef) {
-  var _a;
-  const plain = toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
-}
-const defaultWindow = isClient ? window : void 0;
-function useMounted() {
-  const isMounted = ref(false);
-  const instance = getCurrentInstance();
-  if (instance) {
-    onMounted(() => {
-      isMounted.value = true;
-    }, instance);
-  }
-  return isMounted;
-}
-function useSupported(callback) {
-  const isMounted = useMounted();
-  return computed(() => {
-    isMounted.value;
-    return Boolean(callback());
-  });
-}
-function useResizeObserver(target, callback, options = {}) {
-  const { window: window2 = defaultWindow, ...observerOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
-  const stopWatch = watch(
-    targets,
-    (els) => {
-      cleanup();
-      if (isSupported.value && window2) {
-        observer = new ResizeObserver(callback);
-        for (const _el of els)
-          _el && observer.observe(_el, observerOptions);
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-const _hoisted_1$4 = ["data-fixed", "data-maxWidth", "data-minWidth", "data-width"];
-const _hoisted_2$2 = { class: "th-cell" };
-const _hoisted_3$1 = {
-  key: 0,
-  style: { "display": "inline-block", "line-height": "40px", "vertical-align": "top" }
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "head-column",
-  props: {
-    width: { default: void 0 },
-    required: { type: Boolean, default: true },
-    minWidth: { default: void 0 },
-    maxWidth: { default: void 0 },
-    fixed: { default: void 0 }
-  },
-  setup(__props) {
-    const props = __props;
-    const { rowWidth, isOverflow: isMinimize } = inject(renderTablekey);
-    const parentTable = inject(tableColumnResizekey);
-    const slots = useSlots();
-    const columnRef = ref();
-    const currentWidth = ref(0);
-    const columnKey = random();
-    let initWidthRate = 0;
-    let isDragedSelf = false;
-    const finalMinWidth = computed(() => props.minWidth ? props.minWidth : props.width ?? 100);
-    const isFixedRight = computed(() => props.fixed === "right");
-    const isFixedLeft = computed(() => props.fixed === "left");
-    const styles = computed(() => {
-      if (props.width && (rowWidth == null ? void 0 : rowWidth.value) && finalMinWidth.value) {
-        const newWidth = rowWidth.value * initWidthRate;
-        if (newWidth !== props.width) {
-          let width = 0;
-          if (isMinimize == null ? void 0 : isMinimize.value) {
-            if (currentWidth.value !== 0 && (currentWidth.value !== finalMinWidth.value || currentWidth.value !== props.width)) {
-              width = currentWidth.value;
-            } else {
-              width = finalMinWidth.value;
-            }
-          } else if (newWidth > finalMinWidth.value) {
-            width = newWidth;
-          } else {
-            width = finalMinWidth.value;
-          }
-          return {
-            minWidth: `${width}px`
-          };
-        }
-      }
-      return {
-        minWidth: props.width ? `${props.width}px` : "120px"
-      };
-    });
-    watch(() => [props.width, rowWidth == null ? void 0 : rowWidth.value, currentWidth.value], ([width, rowWidth2, currentWidth2]) => {
-      if (!isDragedSelf) {
-        return;
-      }
-      if (width && rowWidth2 && currentWidth2 && finalMinWidth.value) {
-        isDragedSelf = false;
-        if (currentWidth2 !== 0 && (currentWidth2 !== finalMinWidth.value || currentWidth2 !== width)) {
-          initWidthRate = currentWidth2 / rowWidth2;
-        } else {
-          initWidthRate = (isMinimize == null ? void 0 : isMinimize.value) ? finalMinWidth.value / rowWidth2 : width / rowWidth2;
-        }
-      }
-    }, {
-      immediate: true
-    });
-    useResizeObserver(columnRef, () => {
-      if (!isDragedSelf) {
-        return;
-      }
-      const width = parseFloat(columnRef.value.style.width);
-      currentWidth.value = width;
-    });
-    const handleMouseDown = (event) => {
-      isDragedSelf = true;
-      parentTable == null ? void 0 : parentTable.columnMousedown(event, {
-        columnKey,
-        minWidth: finalMinWidth.value
-      });
-    };
-    const handleMouseMove = (event) => {
-      parentTable == null ? void 0 : parentTable.columnMouseMove(event);
-    };
-    return (_ctx, _cache) => {
-      const _directive_overflow_tips = resolveDirective("overflow-tips");
-      return openBlock(), createElementBlock("th", {
-        ref_key: "columnRef",
-        ref: columnRef,
-        class: normalizeClass(["bk-ediatable-head-column", {
-          "is-required": _ctx.required,
-          [`column-${unref(columnKey)}`]: true,
-          "is-right-fixed": unref(isMinimize) && isFixedRight.value,
-          "is-left-fixed": unref(isMinimize) && isFixedLeft.value
-        }]),
-        "data-fixed": _ctx.fixed,
-        "data-maxWidth": _ctx.maxWidth,
-        "data-minWidth": finalMinWidth.value,
-        "data-width": _ctx.width,
-        style: normalizeStyle(styles.value),
-        onMousedown: handleMouseDown,
-        onMousemove: handleMouseMove
-      }, [
-        withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [
-          renderSlot(_ctx.$slots, "default")
-        ])), [
-          [_directive_overflow_tips]
-        ]),
-        unref(slots).append ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          renderSlot(_ctx.$slots, "append")
-        ])) : createCommentVNode("v-if", true)
-      ], 46, _hoisted_1$4);
-    };
-  }
-});
 const _hoisted_1$3 = { class: "bk-ediatable-operation" };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "operation",
+  __name: "operation-column",
   props: {
+    removeable: { type: Boolean, default: true },
     showCopy: { type: Boolean, default: false },
     showAdd: { type: Boolean, default: true },
-    showRemove: { type: Boolean, default: true },
-    removeable: { type: Boolean, default: true }
+    showRemove: { type: Boolean, default: true }
   },
-  emits: ["copy", "add", "remove"],
+  emits: ["add", "copy", "remove"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -6273,7 +6306,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       emits("remove");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, null, {
+      return openBlock(), createBlock(_sfc_main$4, null, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$3, [
             _ctx.showCopy ? (openBlock(), createElementBlock("div", {
@@ -6318,7 +6351,7 @@ const _hoisted_1$2 = {
   class: "select-error"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "select",
+  __name: "select-column",
   props: /* @__PURE__ */ mergeModels({
     list: {},
     placeholder: { default: "请选择" },
@@ -8968,7 +9001,7 @@ const _hoisted_2$1 = {
   style: { "display": "none" }
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "tag-input",
+  __name: "tag-input-column",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "" },
     single: { type: Boolean, default: false },
@@ -9135,7 +9168,7 @@ const _hoisted_3 = {
   class: "input-error"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "text-plain",
+  __name: "text-plain-column",
   props: {
     data: {},
     isLoading: { type: Boolean },
@@ -9210,14 +9243,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$7 as DateTimePickerColumn,
-  _sfc_main$8 as Ediatable,
-  _sfc_main$5 as FixedColumn,
-  _sfc_main$4 as HeadColumn,
-  _sfc_main$6 as InputColumn,
+  _sfc_main$6 as DateTimePickerColumn,
+  _sfc_main$7 as Ediatable,
+  _sfc_main$4 as FixedColumn,
+  _sfc_main$8 as HeadColumn,
+  _sfc_main$5 as InputColumn,
   _sfc_main$3 as OperationColumn,
   _sfc_main$2 as SelectColumn,
   _sfc_main$1 as TagInputColumn,
   _sfc_main as TextPlainColumn,
-  _sfc_main$8 as default
+  _sfc_main$7 as default
 };