@deot/vc-components 1.0.12 → 1.0.14

package/dist/index.cjs

@@ -794,7 +794,7 @@ const COMPONENT_NAME$1T = 'vc-alert';
 
 // [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']
@@ -10285,7 +10285,7 @@ const props$z = {
     validator: (v) => /(small|medium|large)/.test(v),
     default: "small"
   },
-  portalClass: [Object, String],
+  contentClass: [Object, String],
   width: {
     type: Number
   },
@@ -10334,6 +10334,10 @@ const props$z = {
     type: Boolean,
     default: true
   },
+  border: {
+    type: Boolean,
+    default: false
+  },
   /**
    * 兼容portal设计, 实现Promise方式
    */
@@ -10631,7 +10635,8 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
           "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", {
@@ -10663,7 +10668,7 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
               "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
@@ -12144,7 +12149,7 @@ const props$m = {
   color: {
     type: [Object, String],
     default: () => ({
-      normal: "#5495f6",
+      normal: "#2B72FD",
       success: "#52c41a",
       error: "#f5222d"
     })
@@ -13384,6 +13389,8 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
       });
       if (!originalData.length) {
         rebuildData.value = [];
+      } else {
+        rebuildData.value = originalData.slice();
       }
       offsetPageSize.value = 0;
       await refreshLayout(0, originalData.length);
@@ -14526,17 +14533,24 @@ class Store extends BaseWatcher {
     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 || ""
             }
           }
         ],
@@ -14544,6 +14558,7 @@ class Store extends BaseWatcher {
       });
       return pre;
     }, []);
+    caches.clear();
     this.current.update();
     this.expand.update();
     if (!this.states.reserveSelection) {
@@ -14677,12 +14692,12 @@ class Store extends BaseWatcher {
    */
   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 (Utils.hasOwn(selectedMap, key) && !dataMap[key]) {
           deleted.push(selectedMap[key].row);
@@ -14857,8 +14872,10 @@ const COMPONENT_NAME$h = 'vc-table-normal-list';
 const NormalList = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$h,
   props: {
-    data: Array,
-    default: () => []
+    data: {
+      type: Array,
+      default: () => []
+    }
   },
   emits: ['row-resize'],
   setup(props, {
@@ -14900,7 +14917,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
     expose
   }) {
     const instance = vue.getCurrentInstance();
-    const table = vcHooks.getInstance('table', 'tableId');
+    const table = vue.inject('vc-table');
     const states = useStates({
       data: 'data',
       list: 'list',
@@ -15024,7 +15041,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
           column,
           row
         };
-        table.exposed.hoverState.value = hoverState;
+        table.hoverState.value = hoverState;
         table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, e);
       }
 
@@ -15057,7 +15074,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
     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 = lodashEs.debounce(index => {
@@ -15095,6 +15112,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
         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'],
@@ -15115,10 +15133,12 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
         };
         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),
@@ -15128,7 +15148,8 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
           column,
           rowIndex,
           columnIndex,
-          store: props.store
+          store: props.store,
+          selected
         })]);
       })]);
     };
@@ -15162,7 +15183,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
       wrapper,
       getRootElement: () => instance.vnode.el
     });
-    const layout = table.exposed.layout;
+    const layout = table.layout;
     return () => {
       return vue.createVNode("div", {
         "class": "vc-table__body"
@@ -15172,7 +15193,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
         "disabled": true,
         "class": "vc-table__tbody",
         "scrollerOptions": {
-          barTo: `.${table.exposed.tableId}`,
+          barTo: `.${table.tableId}`,
           native: false,
           always: false,
           showBar: !props.fixed,
@@ -15224,7 +15245,7 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
-    const table = vcHooks.getInstance('table', 'tableId');
+    const table = vue.inject('vc-table');
     const instance = vue.getCurrentInstance();
     const draggingColumn = vue.ref(null);
     const dragging = vue.ref(false);
@@ -15331,7 +15352,7 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
       /* 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}`);
@@ -15344,7 +15365,7 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
           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;
@@ -15703,7 +15724,8 @@ const Table = /* @__PURE__ */ vue.defineComponent({
   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({
@@ -15819,7 +15841,8 @@ const Table = /* @__PURE__ */ vue.defineComponent({
           };
         }
         return {
-          height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : ''
+          height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : '',
+          bottom: 0
         };
       }
     });
@@ -16023,8 +16046,8 @@ const Table = /* @__PURE__ */ vue.defineComponent({
     }, {
       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
@@ -16062,7 +16085,7 @@ const Table = /* @__PURE__ */ vue.defineComponent({
       isUnMount = true;
       unbindEvents();
     });
-    expose({
+    const exposed = {
       bodyXWrapper,
       bodyYWrapper,
       tableId,
@@ -16084,8 +16107,12 @@ const Table = /* @__PURE__ */ vue.defineComponent({
       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'],
@@ -16121,7 +16148,9 @@ const Table = /* @__PURE__ */ vue.defineComponent({
         }, 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", {
@@ -16272,10 +16301,11 @@ const cellForced = {
       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()
@@ -16448,15 +16478,14 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
     tooltip: [String, Function]
   },
   setup(props, {
-    slots,
-    expose
+    slots
   }) {
     const instance = vue.getCurrentInstance();
-    const table = vcHooks.getInstance('table', 'tableId');
-    const parent = vcHooks.getInstance('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) + Utils.getUid('column'));
+    const columnId = vue.ref((parent.tableId || parent.columnId) + Utils.getUid('column'));
     const realWidth = vue.computed(() => {
       return parseWidth(props.width);
     });
@@ -16555,7 +16584,7 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
         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 {
@@ -16574,7 +16603,7 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
             style: {}
           };
           // 存在树形数组，且当前行无箭头图标且处于当前展开列，表格对齐
-          if (!lodashEs.isEmpty(table.exposed.store.states.treeData) && !prefix && data.isExpandColumn) {
+          if (!lodashEs.isEmpty(table.store.states.treeData) && !prefix && data.isExpandColumn) {
             prefix = vue.createVNode("span", {
               "class": "vc-table-un-expand__indent"
             }, null);
@@ -16617,15 +16646,15 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
 
       // 影响布局
       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(() => {
@@ -16633,17 +16662,17 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
       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
     });
@@ -16884,7 +16913,7 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
         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;
           }
@@ -16956,7 +16985,7 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
       }, [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/dist/index.d.ts

@@ -5158,7 +5158,7 @@ export declare const Modal: {
     validator: (v: string) => boolean;
     default: string;
     };
-    portalClass: (ObjectConstructor | StringConstructor)[];
+    contentClass: (ObjectConstructor | StringConstructor)[];
     width: {
     type: NumberConstructor;
     };
@@ -5206,6 +5206,10 @@ export declare const Modal: {
     type: BooleanConstructor;
     default: boolean;
     };
+    border: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     onOk: {
     type: FunctionConstructor;
     };
@@ -5225,6 +5229,7 @@ export declare const Modal: {
     mask: boolean;
     modelValue: boolean;
     closable: boolean;
+    border: boolean;
     content: string | ((props: Record<string, unknown>, context: SetupContext) => any);
     maskClosable: boolean;
     scrollable: boolean;
@@ -5258,7 +5263,7 @@ export declare const Modal: {
     validator: (v: string) => boolean;
     default: string;
     };
-    portalClass: (ObjectConstructor | StringConstructor)[];
+    contentClass: (ObjectConstructor | StringConstructor)[];
     width: {
     type: NumberConstructor;
     };
@@ -5306,6 +5311,10 @@ export declare const Modal: {
     type: BooleanConstructor;
     default: boolean;
     };
+    border: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     onOk: {
     type: FunctionConstructor;
     };
@@ -5325,6 +5334,7 @@ export declare const Modal: {
     mask: boolean;
     modelValue: boolean;
     closable: boolean;
+    border: boolean;
     content: string | ((props: Record<string, unknown>, context: SetupContext) => any);
     maskClosable: boolean;
     scrollable: boolean;
@@ -5355,7 +5365,7 @@ type: PropType<"small" | "medium" | "large">;
 validator: (v: string) => boolean;
 default: string;
 };
-portalClass: (ObjectConstructor | StringConstructor)[];
+contentClass: (ObjectConstructor | StringConstructor)[];
 width: {
 type: NumberConstructor;
 };
@@ -5403,6 +5413,10 @@ footer: {
 type: BooleanConstructor;
 default: boolean;
 };
+border: {
+type: BooleanConstructor;
+default: boolean;
+};
 onOk: {
 type: FunctionConstructor;
 };
@@ -5422,6 +5436,7 @@ footer: boolean;
 mask: boolean;
 modelValue: boolean;
 closable: boolean;
+border: boolean;
 content: string | ((props: Record<string, unknown>, context: SetupContext) => any);
 maskClosable: boolean;
 scrollable: boolean;
@@ -5456,7 +5471,7 @@ type: PropType<"small" | "medium" | "large">;
 validator: (v: string) => boolean;
 default: string;
 };
-portalClass: (ObjectConstructor | StringConstructor)[];
+contentClass: (ObjectConstructor | StringConstructor)[];
 width: {
 type: NumberConstructor;
 };
@@ -5504,6 +5519,10 @@ footer: {
 type: BooleanConstructor;
 default: boolean;
 };
+border: {
+type: BooleanConstructor;
+default: boolean;
+};
 onOk: {
 type: FunctionConstructor;
 };
@@ -5528,7 +5547,7 @@ type: PropType<"small" | "medium" | "large">;
 validator: (v: string) => boolean;
 default: string;
 };
-portalClass: (ObjectConstructor | StringConstructor)[];
+contentClass: (ObjectConstructor | StringConstructor)[];
 width: {
 type: NumberConstructor;
 };
@@ -5576,6 +5595,10 @@ footer: {
 type: BooleanConstructor;
 default: boolean;
 };
+border: {
+type: BooleanConstructor;
+default: boolean;
+};
 onOk: {
 type: FunctionConstructor;
 };
@@ -5595,6 +5618,7 @@ footer: boolean;
 mask: boolean;
 modelValue: boolean;
 closable: boolean;
+border: boolean;
 content: string | ((props: Record<string, unknown>, context: SetupContext) => any);
 maskClosable: boolean;
 scrollable: boolean;
@@ -9313,7 +9337,7 @@ declare const props_5: {
         validator: (v: string) => boolean;
         default: string;
     };
-    portalClass: (ObjectConstructor | StringConstructor)[];
+    contentClass: (ObjectConstructor | StringConstructor)[];
     width: {
         type: NumberConstructor;
     };
@@ -9361,6 +9385,10 @@ declare const props_5: {
         type: BooleanConstructor;
         default: boolean;
     };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onOk: {
         type: FunctionConstructor;
     };