@ctzy-web-client/plugin-component-vue 1.0.23 → 1.0.25

package/es/data-table/data-table.mjs

@@ -1,4 +1,4 @@
-import { createElementVNode, defineComponent, useAttrs, ref, computed, unref, watch, provide, reactive, nextTick, onUnmounted, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, mergeProps, withCtx, createBlock, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString, normalizeStyle } from 'vue';
+import { createElementVNode, useAttrs, ref, computed, unref, watch, provide, reactive, nextTick, onUnmounted, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, mergeProps, withCtx, createBlock, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString, normalizeStyle } from 'vue';
 import { ElMessage, ElTable, ElTableColumn, ElPagination } from 'element-plus';
 import { useService, useGlobalConfig, dataTableKey, useNamespace, useEventDispatcher } from '@ctzy-web-client/web-base-client-vue';
 import DynamicComponent from './dynamic-component.mjs';
@@ -8,311 +8,391 @@ import { get } from 'lodash';
 import { Subject, debounceTime, Observable, filter, map, delayWhen, from, skipWhile } from 'rxjs';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
 
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("i", { class: "ptp-icon ptp-buzhou-yidong" }, null, -1);
-const __default__ = defineComponent({ name: "BwaDataTable" });
-const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  props: {
-    dataTable: {
-      type: Object,
-      required: true
-    },
-    autoLoad: {
-      type: Boolean,
-      default: true
-    },
-    showIndex: {
-      type: Boolean,
-      default: false
-    },
-    indexColumnLabel: {
-      type: String,
-      default: "\u7F16\u53F7"
-    },
-    selection: {
-      type: Boolean,
-      default: false
-    },
-    paginationLayout: {
-      type: String,
-      default: "sizes, prev, pager, next, jumper"
-    },
-    paginationPageSizes: {
-      type: Array,
-      default: () => [10, 20, 50, 100, 200]
-    },
-    showPagination: {
-      type: Boolean,
-      default: true
-    },
-    whereParamName: {
-      type: String,
-      default: ""
-    },
-    showDrag: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["drag"],
+const _hoisted_1 = /*#__PURE__*/createElementVNode("i", { class: "ptp-icon ptp-buzhou-yidong" }, null, -1 /* HOISTED */);
+
+
+const _sfc_main = {
+  __name: 'data-table',
+  props: {
+  dataTable: {
+    type: Object,
+    required: true,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true,
+  },
+  showIndex: {
+    type: Boolean,
+    default: false,
+  },
+  indexColumnLabel: {
+    type: String,
+    default: '编号',
+  },
+  selection: {
+    type: Boolean,
+    default: false,
+  },
+  paginationLayout: {
+    type: String,
+    default: 'sizes, prev, pager, next, jumper',
+  },
+  paginationPageSizes: {
+    type: Array,
+    default: () => [10, 20, 50, 100, 200],
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  whereParamName: {
+    type: String,
+    default: '',
+  },
+  showDrag: {
+    type: Boolean,
+    default: false,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  }
+},
+  emits: ['drag'],
   setup(__props, { emit }) {
-    var _a;
-    const props = __props;
-    const attrs = useAttrs();
-    const userService = useService("UserService");
-    const elTable = ref(null);
-    const dataTable = props.dataTable;
-    dataTable._userService = (_a = userService.value) == null ? void 0 : _a.getUserList;
-    const dataTableEl = ref(null);
-    const displayColumns = computed(
-      () => unref(dataTable).getDisplayColumns() || []
-    );
-    watch(
-      computed(() => props.whereParamName),
-      (whereParamName) => {
-        dataTable.setWhereParamName(whereParamName || "");
-      },
-      { immediate: true, flush: "sync" }
-    );
-    const searchParams = computed(() => props.searchParams);
-    const debounceDelay = useGlobalConfig("debounceDelay", 500);
-    provide(
-      dataTableKey,
-      reactive({
-        dataTable,
-        displayColumns
-      })
-    );
-    const ns = useNamespace("datatable");
-    const { barRectangle } = useDataTableDrag(
-      dataTableEl,
-      ".bwa-datatable__drag",
-      ".el-table__row",
-      { emit }
-    );
-    const processing = ref(false);
-    const data = computed(() => {
-      return props.dataTable.data;
-    });
-    useEventDispatcher(dataTable, "load-successfully", async (res) => {
-      if (res.code != 0) {
-        return;
-      }
-      const _userService = unref(userService);
-      if (!_userService) {
-        return;
-      }
-      let columns = dataTable.getColumns();
-      const componentNames = ["BwaUserSelect", "BwaUserMultiSelect"];
-      columns = columns.filter((column) => componentNames.includes(column.formComponent)).filter((column) => column.visible).filter((column) => column.isExtend);
-      if (!columns.length) {
-        return;
-      }
-      processing.value = true;
-      const data2 = res.data;
-      let ids = data2.reduce((result, item) => {
-        return result.concat(
-          columns.reduce((result2, column) => {
-            let value = get(item, column.fullAttrName);
-            value = Array.isArray(value) ? value : value ? [value] : [];
-            return result2.concat(value);
-          }, [])
-        );
-      }, []).map((id) => id + "");
-      ids = [...new Set(ids)];
-      try {
-        const userListResult = await _userService.getUserListByIds(ids);
-        if (userListResult.code != 0) {
-          return;
-        }
-        for (const column of columns) {
-          column.componentProps = column.componentProps || {};
-          column.componentProps.options = (userListResult.data || []).map(
-            (item) => ({
-              label: item.label,
-              value: item.value
-            })
-          );
-        }
-        console.log(userListResult);
-      } finally {
-        processing.value = false;
-      }
-    });
-    const sortHandle = (column, prop, order) => {
-      let sortColumn2 = "";
-      let sortType = "";
-      if (column.order) {
-        sortColumn2 = column.prop;
-        sortType = column.order == "descending" ? 0 : 1;
-        dataTable.setParam("sortColumn", sortColumn2);
-        dataTable.setParam("sortType", sortType);
-      } else {
-        dataTable.setParam("sortColumn", sortColumn2);
-        dataTable.setParam("sortType", sortType);
-      }
-      dataTable.load();
-    };
-    useEventDispatcher(dataTable, "load-successfully", (res) => {
-      if (!elTable.value) {
-        return;
-      }
-      unref(elTable).store.updateSelectionByRowKey();
-      if (res.code != 0) {
-        ElMessage.error(res.msg);
-      }
-    });
-    function sortColumn(array) {
-      array.forEach((item) => {
-        var _a2, _b;
-        item.no = (_a2 = item.getColumnIndex) == null ? void 0 : _a2.call(item);
-        if ((_b = item.children) == null ? void 0 : _b.length) {
-          sortColumn(item.children);
-        }
-      });
-      array.sort((cur, pre) => cur.no - pre.no);
-    }
-    const tableSelectSubject = new Subject();
-    const selectionChange = tableSelectSubject.next.bind(tableSelectSubject);
-    const totalPage = computed(() => dataTable.getTotalPage());
-    const tableSelectSubscription = tableSelectSubject.pipe(debounceTime(debounceDelay)).subscribe(unref(dataTable).setSelection.bind(unref(dataTable)));
-    const selectChangeAPIObservable = new Observable(
-      (observer) => useEventDispatcher(
-        props.dataTable,
-        "select-change",
-        observer.next.bind(observer)
-      )
-    ).pipe(
-      filter((selection) => {
-        if (!unref(elTable)) {
-          return false;
-        }
-        const selectionRows = unref(elTable).getSelectionRows();
-        if (selectionRows.length !== selection.length) {
-          return true;
-        }
-        const primaryKey = dataTable.primaryKey;
-        return !selectionRows.every(
-          (item) => selection.find((itm) => item[primaryKey] === item[primaryKey])
-        );
-      })
-    ).subscribe((selection) => {
-      unref(elTable).clearSelection();
-      for (const item of selection) {
-        unref(elTable).toggleRowSelection(item, true);
-      }
-    });
-    if (props.autoLoad) {
-      dataTable.load();
-    }
-    const searchParamsSubscription = new Observable(
-      (observer) => useEventDispatcher(
-        props.dataTable.filterPanel,
-        "params-change",
-        observer.next.bind(observer)
-      )
-    ).pipe(
-      filter(() => props.dataTable.filterPanel.ready),
-      debounceTime(unref(debounceDelay))
-    ).subscribe(() => {
-      props.dataTable.load();
-    });
-    const subscription = props.dataTable.getDisplayColumnsSubject().pipe(
-      map(() => unref(elTable)),
-      delayWhen(() => from(nextTick())),
-      map((elTable2) => elTable2 == null ? void 0 : elTable2.store),
-      skipWhile((store) => !store)
-    ).subscribe((store) => {
-      sortColumn(unref(store.states._columns));
-      store.updateColumns();
-      store.scheduleLayout();
-    });
-    onUnmounted(() => {
-      selectChangeAPIObservable.unsubscribe();
-      subscription.unsubscribe();
-      tableSelectSubscription.unsubscribe();
-      searchParamsSubscription.unsubscribe();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(ns).b()),
-        ref_key: "dataTableEl",
-        ref: dataTableEl
-      }, [
-        renderSlot(_ctx.$slots, "default", { dataTable: unref(dataTable) }, () => [
-          createVNode(unref(ElTable), mergeProps({
-            class: "content",
-            height: "100%",
-            ref_key: "elTable",
-            ref: elTable,
-            data: unref(data),
-            "row-key": unref(dataTable).primaryKey,
-            "show-header": "",
-            stripe: ""
-          }, unref(attrs), {
-            onSelectionChange: unref(selectionChange),
-            onSortChange: sortHandle,
-            border: __props.border
-          }), {
-            empty: withCtx(() => [
-              renderSlot(_ctx.$slots, "empty-table")
-            ]),
-            default: withCtx(() => [
-              __props.showDrag ? (openBlock(), createBlock(unref(ElTableColumn), {
+
+const props = __props;
+
+defineOptions({ name: 'BwaDataTable' });
+
+
+
+const attrs = useAttrs();
+
+const userService = useService('UserService');
+
+const elTable = ref(null);
+
+const dataTable = props.dataTable;
+dataTable._userService = userService.value?.getUserList;
+
+const dataTableEl = ref(null);
+
+const displayColumns = computed(
+  () => unref(dataTable).getDisplayColumns() || []
+);
+
+watch(
+  computed(() => props.whereParamName),
+  (whereParamName) => {
+    dataTable.setWhereParamName(whereParamName || '');
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+const searchParams = computed(() => props.searchParams);
+
+
+
+const debounceDelay = useGlobalConfig('debounceDelay', 500);
+
+//当前data table 上下文对象
+provide(
+  dataTableKey,
+  reactive({
+    dataTable,
+    displayColumns,
+  })
+);
+
+const ns = useNamespace('datatable');
+
+const { barRectangle } = useDataTableDrag(
+  dataTableEl,
+  '.bwa-datatable__drag',
+  '.el-table__row',
+  { emit }
+);
+
+const processing = ref(false);
+
+const data = computed(() => {
+  return props.dataTable.data;
+});
+
+useEventDispatcher(dataTable, 'load-successfully', async (res) => {
+  if (res.code != 0) {
+    return;
+  }
+
+  const _userService = unref(userService);
+
+  if (!_userService) {
+    return;
+  }
+
+  let columns = dataTable.getColumns();
+
+  const componentNames = ['BwaUserSelect', 'BwaUserMultiSelect'];
+
+  columns = columns
+    .filter((column) => componentNames.includes(column.formComponent))
+    .filter((column) => column.visible)
+    .filter((column) => column.isExtend);
+
+  if (!columns.length) {
+    return;
+  }
+
+  processing.value = true;
+
+  const data = res.data;
+
+  let ids = data
+    .reduce((result, item) => {
+      return result.concat(
+        columns.reduce((result, column) => {
+          let value = get(item, column.fullAttrName);
+
+          value = Array.isArray(value) ? value : value ? [value] : [];
+
+          return result.concat(value);
+        }, [])
+      );
+    }, [])
+    .map((id) => id + '');
+
+  ids = [...new Set(ids)];
+
+  try {
+    const userListResult = await _userService.getUserListByIds(ids);
+
+    if (userListResult.code != 0) {
+      return;
+    }
+
+    for (const column of columns) {
+      column.componentProps = column.componentProps || {};
+      column.componentProps.options = (userListResult.data || []).map(
+        (item) => ({
+          label: item.label,
+          value: item.value,
+        })
+      );
+    }
+
+    console.log(userListResult);
+  } finally {
+    processing.value = false;
+  }
+});
+
+//手动排序
+const sortHandle = (column, prop, order) => {
+    let sortColumn = '';
+    let sortType = '';
+    if (column.order){
+        sortColumn = column.prop;
+        sortType = column.order=="descending"?0:1;
+        dataTable.setParam('sortColumn', sortColumn);
+        dataTable.setParam('sortType', sortType);
+    }else {
+        dataTable.setParam('sortColumn', sortColumn);
+        dataTable.setParam('sortType', sortType);
+    }
+    dataTable.load();
+};
+
+useEventDispatcher(dataTable, 'load-successfully', (res) => {
+  if (!elTable.value) {
+    return;
+  }
+
+  unref(elTable).store.updateSelectionByRowKey();
+
+  if (res.code != 0) {
+    ElMessage.error(res.msg);
+  }
+});
+
+function sortColumn(array) {
+  array.forEach((item) => {
+    item.no = item.getColumnIndex?.();
+    if (item.children?.length) {
+      sortColumn(item.children);
+    }
+  });
+  array.sort((cur, pre) => cur.no - pre.no);
+}
+
+const tableSelectSubject = new Subject();
+const selectionChange = tableSelectSubject.next.bind(tableSelectSubject);
+
+const totalPage = computed(() => dataTable.getTotalPage());
+
+const tableSelectSubscription = tableSelectSubject
+  .pipe(debounceTime(debounceDelay))
+  .subscribe(unref(dataTable).setSelection.bind(unref(dataTable)));
+
+const selectChangeAPIObservable = new Observable((observer) =>
+  useEventDispatcher(
+    props.dataTable,
+    'select-change',
+    observer.next.bind(observer)
+  )
+)
+  .pipe(
+    filter((selection) => {
+      if (!unref(elTable)) {
+        return false;
+      }
+
+      const selectionRows = unref(elTable).getSelectionRows();
+
+      if (selectionRows.length !== selection.length) {
+        return true;
+      }
+
+      const primaryKey = dataTable.primaryKey;
+      return !selectionRows.every((item) =>
+        selection.find((itm) => item[primaryKey] === item[primaryKey])
+      );
+    })
+  )
+  .subscribe((selection) => {
+    unref(elTable).clearSelection();
+    for (const item of selection) {
+      unref(elTable).toggleRowSelection(item, true);
+    }
+  });
+
+if (props.autoLoad) {
+  //初始化加载
+  dataTable.load();
+}
+
+const searchParamsSubscription = new Observable((observer) =>
+  useEventDispatcher(
+    props.dataTable.filterPanel,
+    'params-change',
+    observer.next.bind(observer)
+  )
+)
+  .pipe(
+    filter(() => props.dataTable.filterPanel.ready),
+    debounceTime(unref(debounceDelay))
+  )
+  .subscribe(() => {
+    props.dataTable.load();
+  });
+
+const subscription = props.dataTable
+  .getDisplayColumnsSubject()
+  .pipe(
+    map(() => unref(elTable)),
+    delayWhen(() => from(nextTick())),
+    map((elTable) => elTable?.store),
+    skipWhile((store) => !store)
+  )
+  .subscribe((store) => {
+    sortColumn(unref(store.states._columns));
+
+    store.updateColumns();
+    store.scheduleLayout();
+  });
+
+onUnmounted(() => {
+  selectChangeAPIObservable.unsubscribe();
+  subscription.unsubscribe();
+  tableSelectSubscription.unsubscribe();
+  searchParamsSubscription.unsubscribe();
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(unref(ns).b()),
+    ref_key: "dataTableEl",
+    ref: dataTableEl
+  }, [
+    renderSlot(_ctx.$slots, "default", { dataTable: unref(dataTable) }, () => [
+      createVNode(unref(ElTable), mergeProps({
+        class: "content",
+        height: "100%",
+        ref_key: "elTable",
+        ref: elTable,
+        data: unref(data),
+        "row-key": unref(dataTable).primaryKey,
+        "show-header": "",
+        stripe: ""
+      }, unref(attrs), {
+        onSelectionChange: unref(selectionChange),
+        onSortChange: sortHandle,
+        border: __props.border
+      }), {
+        empty: withCtx(() => [
+          renderSlot(_ctx.$slots, "empty-table")
+        ]),
+        default: withCtx(() => [
+          (__props.showDrag)
+            ? (openBlock(), createBlock(unref(ElTableColumn), {
                 key: 0,
                 width: "40px"
               }, {
                 default: withCtx(() => [
                   createElementVNode("div", {
-                    class: normalizeClass(unref(ns).e("drag"))
+                    class: normalizeClass(unref(ns).e('drag'))
                   }, [
                     renderSlot(_ctx.$slots, "default", {}, () => [
                       _hoisted_1
                     ])
-                  ], 2)
+                  ], 2 /* CLASS */)
                 ]),
-                _: 3
-              })) : createCommentVNode("v-if", true),
-              __props.selection ? renderSlot(_ctx.$slots, "selection", { key: 1 }, () => [
+                _: 3 /* FORWARDED */
+              }))
+            : createCommentVNode("v-if", true),
+          (__props.selection)
+            ? renderSlot(_ctx.$slots, "selection", { key: 1 }, () => [
                 createVNode(unref(ElTableColumn), {
                   type: "selection",
                   align: "center",
                   width: "56",
                   "reserve-selection": true
                 })
-              ]) : createCommentVNode("v-if", true),
-              __props.showIndex ? renderSlot(_ctx.$slots, "index", { key: 2 }, () => [
+              ])
+            : createCommentVNode("v-if", true),
+          (__props.showIndex)
+            ? renderSlot(_ctx.$slots, "index", { key: 2 }, () => [
                 createVNode(unref(ElTableColumn), {
                   type: "index",
                   width: "60",
                   align: "center",
                   label: __props.indexColumnLabel
-                }, null, 8, ["label"])
-              ]) : createCommentVNode("v-if", true),
-              renderSlot(_ctx.$slots, "table-columns", { dataTable: unref(dataTable) }, () => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayColumns), (item) => {
-                  return openBlock(), createBlock(DataTableColumn, mergeProps({
-                    "column-key": item.attrName,
-                    key: item.attrName,
-                    label: item.title,
-                    prop: item.fullAttrName,
-                    "min-width": item.width,
-                    align: item.align
-                  }, item.componentProps, {
-                    sortable: item.sortable == "custom"
-                  }), {
-                    header: withCtx(() => [
-                      renderSlot(_ctx.$slots, `table-header-col-${item.attrName}`, {}, () => [
-                        createTextVNode(toDisplayString(item.title), 1)
-                      ])
-                    ]),
-                    default: withCtx(({ row, $index }) => [
-                      unref(data).length ? renderSlot(_ctx.$slots, "table-col-" + item.attrName, {
+                }, null, 8 /* PROPS */, ["label"])
+              ])
+            : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "table-columns", { dataTable: unref(dataTable) }, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayColumns), (item) => {
+              return (openBlock(), createBlock(DataTableColumn, mergeProps({
+                "column-key": item.attrName,
+                key: item.attrName,
+                label: item.title,
+                prop: item.fullAttrName,
+                "min-width": item.width,
+                align: item.align
+              }, item.componentProps, {
+                sortable: item.sortable=='custom'
+              }), {
+                header: withCtx(() => [
+                  renderSlot(_ctx.$slots, `table-header-col-${item.attrName}`, {}, () => [
+                    createTextVNode(toDisplayString(item.title), 1 /* TEXT */)
+                  ])
+                ]),
+                default: withCtx(({ row, $index }) => [
+                  (unref(data).length)
+                    ? renderSlot(_ctx.$slots, 'table-col-' + item.attrName, {
                         key: 0,
-                        row,
+                        row: row,
                         index: $index,
                         column: item,
                         dataTable: unref(dataTable)
@@ -320,50 +400,56 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                         createVNode(unref(DynamicComponent), {
                           column: item,
                           record: row
-                        }, null, 8, ["column", "record"])
-                      ]) : createCommentVNode("v-if", true)
-                    ]),
-                    _: 2
-                  }, 1040, ["column-key", "label", "prop", "min-width", "align", "sortable"]);
-                }), 128))
-              ]),
-              renderSlot(_ctx.$slots, "column-append")
-            ]),
-            _: 3
-          }, 16, ["data", "row-key", "onSelectionChange", "border"])
+                        }, null, 8 /* PROPS */, ["column", "record"])
+                      ])
+                    : createCommentVNode("v-if", true)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["column-key", "label", "prop", "min-width", "align", "sortable"]))
+            }), 128 /* KEYED_FRAGMENT */))
+          ]),
+          renderSlot(_ctx.$slots, "column-append")
         ]),
-        __props.showPagination ? (openBlock(), createElementBlock("div", {
+        _: 3 /* FORWARDED */
+      }, 16 /* FULL_PROPS */, ["data", "row-key", "onSelectionChange", "border"])
+    ]),
+    (__props.showPagination)
+      ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass(unref(ns).e("pagination"))
+          class: normalizeClass(unref(ns).e('pagination'))
         }, [
           createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("pagination-info"))
-          }, " \u5171" + toDisplayString(unref(totalPage)) + "\u9875\uFF0C" + toDisplayString(unref(dataTable).totalRecCount) + "\u6761 ", 3),
+            class: normalizeClass(unref(ns).e('pagination-info'))
+          }, " 共" + toDisplayString(unref(totalPage)) + "页，" + toDisplayString(unref(dataTable).totalRecCount) + "条 ", 3 /* TEXT, CLASS */),
           createVNode(unref(ElPagination), {
             currentPage: unref(dataTable).pageNum,
             "page-sizes": __props.paginationPageSizes,
             "page-size": unref(dataTable).pageSize,
             layout: __props.paginationLayout,
             total: unref(dataTable).totalRecCount,
-            onSizeChange: _cache[0] || (_cache[0] = ($event) => unref(dataTable).setPageSize($event)),
-            onCurrentChange: _cache[1] || (_cache[1] = ($event) => unref(dataTable).pageTo($event)),
+            onSizeChange: _cache[0] || (_cache[0] = $event => (unref(dataTable).setPageSize($event))),
+            onCurrentChange: _cache[1] || (_cache[1] = $event => (unref(dataTable).pageTo($event))),
             teleported: false
-          }, null, 8, ["currentPage", "page-sizes", "page-size", "layout", "total"])
-        ], 2)) : createCommentVNode("v-if", true),
-        unref(barRectangle) ? (openBlock(), createElementBlock("div", {
+          }, null, 8 /* PROPS */, ["currentPage", "page-sizes", "page-size", "layout", "total"])
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true),
+    (unref(barRectangle))
+      ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass(unref(ns).e("dragbar")),
-          style: normalizeStyle({
-            left: unref(barRectangle).left + "px",
-            top: unref(barRectangle).top + "px",
-            width: unref(barRectangle).width + "px",
-            height: unref(barRectangle).height + "px"
-          })
-        }, null, 6)) : createCommentVNode("v-if", true)
-      ], 2);
-    };
-  }
-});
-var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "data-table.vue"]]);
+          class: normalizeClass(unref(ns).e('dragbar')),
+          style: normalizeStyle({
+        left: unref(barRectangle).left + 'px',
+        top: unref(barRectangle).top + 'px',
+        width: unref(barRectangle).width + 'px',
+        height: unref(barRectangle).height + 'px',
+      })
+        }, null, 6 /* CLASS, STYLE */))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+}
+
+};
+var DataTable = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"data-table.vue"]]);
 
 export { DataTable as default };