@deot/vc-components 1.0.12 → 1.0.14

package/dist/index.umd.cjs

@@ -759,7 +759,7 @@
 
 	// [color, borderColor, backgroundColor], -> CSS
 	const THEME_MAP = {
-	  info: ['#5495f6', '#91d5ff', '#e6f7ff'],
+	  info: ['#2B72FD', '#91d5ff', '#e6f7ff'],
 	  success: ['#52c41a', '#b7eb8f', '#f6ffed'],
 	  error: ['#ed4014', '#ffb08f', '#fbe9e9'],
 	  warning: ['#ffbf00', '#ffe58f', '#fffbe6']
@@ -17037,7 +17037,7 @@
 	    validator: (v) => /(small|medium|large)/.test(v),
 	    default: "small"
 	  },
-	  portalClass: [Object, String],
+	  contentClass: [Object, String],
 	  width: {
 	    type: Number
 	  },
@@ -17086,6 +17086,10 @@
 	    type: Boolean,
 	    default: true
 	  },
+	  border: {
+	    type: Boolean,
+	    default: false
+	  },
 	  /**
 	   * 兼容portal设计, 实现Promise方式
 	   */
@@ -17383,7 +17387,8 @@
 	          "class": [{
 	            'is-drag': props.draggable,
 	            'is-large': props.size === 'large' || props.size === 'medium',
-	            'is-no-footer': !props.footer || !props.cancelText && !props.okText
+	            'has-footer': props.footer && (props.cancelText || props.okText),
+	            'has-border': props.border
 	          }, 'vc-modal__container'],
 	          "style": [basicStyle.value, draggableStyle.value]
 	        }, [vue.createVNode("div", {
@@ -17415,7 +17420,7 @@
 	              "height": isTransitionEnd.value ? row.height : void 0,
 	              "contentClass": [{
 	                'is-confirm': props.mode
-	              }, props.portalClass, 'vc-modal__content']
+	              }, props.contentClass, 'vc-modal__content']
 	            }, {
 	              default: () => [typeof props.content === 'string' ? vue.createVNode("div", {
 	                "innerHTML": props.content
@@ -18896,7 +18901,7 @@
 	  color: {
 	    type: [Object, String],
 	    default: () => ({
-	      normal: "#5495f6",
+	      normal: "#2B72FD",
 	      success: "#52c41a",
 	      error: "#f5222d"
 	    })
@@ -20250,6 +20255,8 @@
 	      });
 	      if (!originalData.length) {
 	        rebuildData.value = [];
+	      } else {
+	        rebuildData.value = originalData.slice();
 	      }
 	      offsetPageSize.value = 0;
 	      await refreshLayout(0, originalData.length);
@@ -38603,17 +38610,24 @@
 	    const dataInstanceChanged = this.states._data !== data;
 	    this.states._data = data;
 	    this.states.data = data;
+	    const caches = /* @__PURE__ */ new Map();
+	    this.states.list.forEach((item) => {
+	      item.rows.forEach((row) => {
+	        caches.set(row.data, row);
+	      });
+	    });
 	    this.states.list = data.reduce((pre, row, index) => {
+	      const cache = caches.get(row) || { heightMap: {} };
 	      pre.push({
 	        rows: [
 	          {
 	            index,
 	            data: row,
-	            height: "",
+	            height: cache.height || "",
 	            heightMap: {
-	              left: "",
-	              main: "",
-	              right: ""
+	              left: cache.heightMap.left || "",
+	              main: cache.heightMap.main || "",
+	              right: cache.heightMap.right || ""
 	            }
 	          }
 	        ],
@@ -38621,6 +38635,7 @@
 	      });
 	      return pre;
 	    }, []);
+	    caches.clear();
 	    this.current.update();
 	    this.expand.update();
 	    if (!this.states.reserveSelection) {
@@ -38754,12 +38769,12 @@
 	   */
 	  cleanSelection() {
 	    const { primaryKey } = this.table.props;
-	    const { selection = [] } = this.states;
+	    const { selection = [], data } = this.states;
 	    let deleted;
 	    if (primaryKey) {
 	      deleted = [];
 	      const selectedMap = getValuesMap(selection, primaryKey);
-	      const dataMap = getValuesMap(selection, primaryKey);
+	      const dataMap = getValuesMap(data, primaryKey);
 	      for (const key in selectedMap) {
 	        if (hasOwn$1(selectedMap, key) && !dataMap[key]) {
 	          deleted.push(selectedMap[key].row);
@@ -38934,8 +38949,10 @@
 	const NormalList = /* @__PURE__ */ vue.defineComponent({
 	  name: COMPONENT_NAME$h,
 	  props: {
-	    data: Array,
-	    default: () => []
+	    data: {
+	      type: Array,
+	      default: () => []
+	    }
 	  },
 	  emits: ['row-resize'],
 	  setup(props, {
@@ -38977,7 +38994,7 @@
 	    expose
 	  }) {
 	    const instance = vue.getCurrentInstance();
-	    const table = getInstance$1('table', 'tableId');
+	    const table = vue.inject('vc-table');
 	    const states = useStates({
 	      data: 'data',
 	      list: 'list',
@@ -39101,7 +39118,7 @@
 	          column,
 	          row
 	        };
-	        table.exposed.hoverState.value = hoverState;
+	        table.hoverState.value = hoverState;
 	        table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, e);
 	      }
 
@@ -39134,7 +39151,7 @@
 	    const handleCellMouseLeave = e => {
 	      const cell = getCell(e);
 	      if (!cell) return;
-	      const oldHoverState = table.exposed.hoverState.value || {};
+	      const oldHoverState = table.hoverState.value || {};
 	      table.emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, e);
 	    };
 	    const handleMouseEnter = debounce$1(index => {
@@ -39172,6 +39189,7 @@
 	        columns
 	      } = states;
 	      const key = getValueOfRow(row, rowIndex);
+	      const selected = props.store.isSelected(row);
 	      return vue.createVNode("div", {
 	        "key": key,
 	        "class": [getRowClass(row, rowIndex), 'vc-table__tr'],
@@ -39192,10 +39210,12 @@
 	        };
 	        if (columnsHidden.value[columnIndex]) {
 	          return vue.createVNode("div", {
+	            "key": column.id,
 	            "style": [sizeStyle]
 	          }, null);
 	        }
 	        return vue.createVNode("div", {
+	          "key": column.id,
 	          "style": [getCellStyle(rowIndex, columnIndex, row, column), sizeStyle],
 	          "class": [getCellClass(rowIndex, columnIndex, row, column), 'vc-table__td'],
 	          "onMouseenter": e => handleCellMouseEnter(e, row),
@@ -39205,7 +39225,8 @@
 	          column,
 	          rowIndex,
 	          columnIndex,
-	          store: props.store
+	          store: props.store,
+	          selected
 	        })]);
 	      })]);
 	    };
@@ -39239,7 +39260,7 @@
 	      wrapper,
 	      getRootElement: () => instance.vnode.el
 	    });
-	    const layout = table.exposed.layout;
+	    const layout = table.layout;
 	    return () => {
 	      return vue.createVNode("div", {
 	        "class": "vc-table__body"
@@ -39249,7 +39270,7 @@
 	        "disabled": true,
 	        "class": "vc-table__tbody",
 	        "scrollerOptions": {
-	          barTo: `.${table.exposed.tableId}`,
+	          barTo: `.${table.tableId}`,
 	          native: false,
 	          always: false,
 	          showBar: !props.fixed,
@@ -39301,7 +39322,7 @@
 	    }
 	  },
 	  setup(props) {
-	    const table = getInstance$1('table', 'tableId');
+	    const table = vue.inject('vc-table');
 	    const instance = vue.getCurrentInstance();
 	    const draggingColumn = vue.ref(null);
 	    const dragging = vue.ref(false);
@@ -39408,7 +39429,7 @@
 	      /* istanbul ignore if */
 	      if (draggingColumn.value && props.border) {
 	        dragging.value = true;
-	        table.exposed.resizeProxyVisible.value = true;
+	        table.resizeProxyVisible.value = true;
 	        const tableEl = table.vnode.el;
 	        const tableLeft = tableEl.getBoundingClientRect().left;
 	        const columnEl = instance.vnode.el.querySelector(`.vc-table__th.${column.id}`);
@@ -39421,7 +39442,7 @@
 	          startColumnLeft: columnRect.left - tableLeft,
 	          tableLeft
 	        };
-	        const resizeProxy = table.exposed.resizeProxy.value;
+	        const resizeProxy = table.resizeProxy.value;
 	        resizeProxy.style.left = dragState.value.startLeft + 'px';
 	        document.onselectstart = () => false;
 	        document.ondragstart = () => false;
@@ -39780,7 +39801,8 @@
 	  emits: ['select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave', 'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick', 'header-click', 'header-contextmenu', 'current-change', 'header-dragend ', 'expand-change', 'sort-change'],
 	  setup(props, {
 	    slots,
-	    expose
+	    expose,
+	    emit
 	  }) {
 	    const instance = vue.getCurrentInstance();
 	    const store = new Store({
@@ -39896,7 +39918,8 @@
 	          };
 	        }
 	        return {
-	          height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : ''
+	          height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : '',
+	          bottom: 0
 	        };
 	      }
 	    });
@@ -40100,8 +40123,8 @@
 	    }, {
 	      immediate: true
 	    });
-	    vue.watch(() => props.data, v => {
-	      store.setData(v);
+	    vue.watch(() => [props.data, props.data.length], () => {
+	      store.setData(props.data);
 	      isReady.value && vue.nextTick(refreshLayout);
 	    }, {
 	      immediate: true
@@ -40139,7 +40162,7 @@
 	      isUnMount = true;
 	      unbindEvents();
 	    });
-	    expose({
+	    const exposed = {
 	      bodyXWrapper,
 	      bodyYWrapper,
 	      tableId,
@@ -40161,8 +40184,12 @@
 	      isReady,
 	      hoverState,
 	      renderExpanded,
-	      hiddenColumns
-	    });
+	      hiddenColumns,
+	      props,
+	      emit
+	    };
+	    expose(exposed);
+	    vue.provide('vc-table', exposed);
 	    return () => {
 	      return vue.createVNode("div", {
 	        "class": [classes.value, tableId, 'vc-table'],
@@ -40198,7 +40225,9 @@
 	        }, null), props.data.length === 0 && vue.createVNode("div", {
 	          "ref": emptyBlock,
 	          "style": bodyWidthStyle.value,
-	          "class": "vc-table__empty-block"
+	          "class": [{
+	            'is-absolute': !!props.height
+	          }, 'vc-table__empty-wrapper']
 	        }, [vue.createVNode("span", {
 	          "class": "vc-table__empty-text"
 	        }, [slots.empty ? slots.empty() : props.emptyText || '暂无数据'])]), slots.append && vue.createVNode("div", {
@@ -40349,10 +40378,11 @@
 	      column,
 	      store,
 	      rowIndex,
-	      level
+	      level,
+	      selected
 	    }) {
 	      return vue.withDirectives(vue.createVNode(Checkbox, {
-	        "modelValue": store.isSelected(row),
+	        "modelValue": selected,
 	        "disabled": column.selectable ? !column.selectable.call(null, row, rowIndex) : false,
 	        "onChange": () => store.rowSelectedChanged(row),
 	        "onClick": e => e.stopPropagation()
@@ -40525,15 +40555,14 @@
 	    tooltip: [String, Function]
 	  },
 	  setup(props, {
-	    slots,
-	    expose
+	    slots
 	  }) {
 	    const instance = vue.getCurrentInstance();
-	    const table = getInstance$1('table', 'tableId');
-	    const parent = getInstance$1('table-column', 'columnId') || table;
+	    const table = vue.inject('vc-table');
+	    const parent = vue.inject('vc-table-column', table);
 	    const isSubColumn = table !== parent; // 用于多久表头
 
-	    const columnId = vue.ref((parent.exposed.tableId || parent.exposed.columnId) + getUid('column'));
+	    const columnId = vue.ref((parent.tableId || parent.columnId) + getUid('column'));
 	    const realWidth = vue.computed(() => {
 	      return parseWidth(props.width);
 	    });
@@ -40632,7 +40661,7 @@
 	        column.renderCell = data => vue.createVNode("div", {
 	          "class": "vc-table__cell"
 	        }, [originRenderCell(data)]);
-	        table.exposed.renderExpanded.value = data => {
+	        table.renderExpanded.value = data => {
 	          return slots.default ? slots.default(data) : slots.default;
 	        };
 	      } else {
@@ -40651,7 +40680,7 @@
 	            style: {}
 	          };
 	          // 存在树形数组，且当前行无箭头图标且处于当前展开列，表格对齐
-	          if (!isEmpty$1(table.exposed.store.states.treeData) && !prefix && data.isExpandColumn) {
+	          if (!isEmpty$1(table.store.states.treeData) && !prefix && data.isExpandColumn) {
 	            prefix = vue.createVNode("span", {
 	              "class": "vc-table-un-expand__indent"
 	            }, null);
@@ -40694,15 +40723,15 @@
 
 	      // 影响布局
 	      vue.watch(() => props.fixed, () => {
-	        table.exposed.store.scheduleLayout(true);
+	        table.store.scheduleLayout(true);
 	      });
 	      vue.watch(() => realWidth.value, v => {
 	        columnConfig['width'] = v;
 	        columnConfig['realWidth'] = v;
-	        table.exposed.store.scheduleLayout(false);
+	        table.store.scheduleLayout(false);
 	      });
 	      vue.watch(() => realMinWidth.value, () => {
-	        table.exposed.store.scheduleLayout(false);
+	        table.store.scheduleLayout(false);
 	      });
 	    };
 	    vue.onBeforeMount(() => {
@@ -40710,17 +40739,17 @@
 	      registerWatchers();
 	    });
 	    vue.onMounted(() => {
-	      const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
+	      const children = isSubColumn ? parent.vnode.el.children : parent.hiddenColumns.value.children;
 
 	      // DOM上
 	      const columnIndex = [...children].indexOf(instance.vnode.el);
-	      table.exposed.store.insertColumn(columnConfig, columnIndex, isSubColumn && parent.exposed.columnConfig);
+	      table.store.insertColumn(columnConfig, columnIndex, isSubColumn && parent.columnConfig);
 	    });
 	    vue.onUnmounted(() => {
 	      if (!instance.parent) return;
-	      table.exposed.store.removeColumn(columnConfig, isSubColumn && parent.exposed.columnConfig);
+	      table.store.removeColumn(columnConfig, isSubColumn && parent.columnConfig);
 	    });
-	    expose({
+	    vue.provide('vc-table-column', {
 	      columnId,
 	      columnConfig
 	    });
@@ -40961,7 +40990,7 @@
 	        if (!Array.from(items).length) return;
 	        let offset = 0;
 	        if (index > 0) {
-	          const gutter = 16; // margin-right -> 16px
+	          const gutter = 12; // margin-right -> 12px
 	          for (let i = 0; i < index; i++) {
 	            offset += parseFloat(items[i].offsetWidth) + gutter;
 	          }
@@ -41033,7 +41062,7 @@
 	      }, [slots.extra?.()]), vue.createVNode("div", {
 	        "ref": wrapper,
 	        "style": {
-	          padding: tabs.scrollable.value && '0 24px'
+	          padding: tabs.scrollable.value ? '0 24px' : 0
 	        },
 	        "class": "vc-tabs__bar"
 	      }, [tabs.scrollable.value && vue.createVNode(Icon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc-components",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",