webcake-ui-kit 1.2.13 → 1.2.15

package/src/components/{table-v2 → table}/TableColGroup.vue

@@ -3,7 +3,7 @@
     <col
       v-for="col in tableContext.columns.flat"
       :key="col.key"
-      :class="isSelectionCol(col) ? 'ui-table-v2__selection-col' : ''"
+      :class="isSelectionCol(col) ? 'ui-table__selection-col' : ''"
       :style="colStyle(col)"
     />
     <col v-if="hasScrollBar" :style="{ width: tableContext.layout.scrollBarWidth }" />
@@ -15,7 +15,7 @@ import { toCssSize } from '../../utils/common'
 import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from './constants.js'
 
 export default {
-  name: 'TableV2ColGroup',
+  name: 'TableColGroup',
   inject: ['tableContext'],
   props: {
     isHeader: { type: Boolean, default: false }

package/src/components/{table-v2 → table}/TableEmpty.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="ui-table-v2__empty"></div>
+  <div class="ui-table__empty"></div>
 </template>
 
 <script>
 export default {
-  name: 'TableV2Empty',
+  name: 'TableEmpty',
   inject: ['tableContext']
 }
 </script>

package/src/components/{table-v2 → table}/TableLoading.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="ui-table-v2__loading-wrap" :class="{ 'ui-table-v2__loading-wrap--loading': isLoading }">
+  <div class="ui-table__loading-wrap" :class="{ 'ui-table__loading-wrap--loading': isLoading }">
     <slot />
-    <div v-if="isLoading" class="ui-table-v2__loading-overlay">
+    <div v-if="isLoading" class="ui-table__loading-overlay">
       <Spinner size="md" />
     </div>
   </div>
@@ -11,7 +11,7 @@
 import Spinner from '../spinner/Spinner.vue'
 
 export default {
-  name: 'TableV2Loading',
+  name: 'TableLoading',
   components: { Spinner },
   inject: ['tableContext'],
   computed: {

package/src/components/{table-v2 → table}/TableWrapper.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="ui-table-v2__wrapper"
+    class="ui-table__wrapper"
     :class="{
-      'ui-table-v2__wrapper--ping-left': isPingedLeft,
-      'ui-table-v2__wrapper--ping-right': isPingedRight
+      'ui-table__wrapper--ping-left': isPingedLeft,
+      'ui-table__wrapper--ping-right': isPingedRight
     }"
   >
     <DragPreview v-if="hasDraggable" ref="dragPreview">
@@ -14,13 +14,13 @@
 
     <!-- Case 3: scroll.y — header và body là 2 table riêng để sticky header -->
     <template v-if="hasScrollY && !isEmpty">
-      <div ref="headerRef" class="ui-table-v2__header-hold" style="overflow: hidden">
+      <div ref="headerRef" class="ui-table__header-hold" style="overflow: hidden">
         <table :class="tableClass" :style="fixedTableStyle">
           <TableColGroup :is-header="true" />
           <TableHeader />
         </table>
       </div>
-      <div ref="bodyRef" class="ui-table-v2__body-hold" :style="bodyHoldStyle" @scroll="handleBodyScroll">
+      <div ref="bodyRef" class="ui-table__body-hold" :style="bodyHoldStyle" @scroll="handleBodyScroll">
         <table :class="tableClass" :style="fixedTableStyle">
           <TableColGroup />
           <TableBody :measureColumnWidth="hasScrollY || hasScrollX || hasSticky">
@@ -36,7 +36,7 @@
     </template>
 
     <!-- Case 1 & 2: một table duy nhất -->
-    <div v-else class="ui-table-v2__content" ref="bodyRef" :style="contentStyle" @scroll="handleBodyScroll">
+    <div v-else class="ui-table__content" ref="bodyRef" :style="contentStyle" @scroll="handleBodyScroll">
       <table :class="tableClass" :style="tableStyle">
         <TableColGroup />
         <TableHeader />
@@ -61,7 +61,7 @@ import DragPreview from './body/DragPreview.vue'
 import { toCssSize, getTargetScrollBarSize } from '../../utils/common'
 
 export default {
-  name: 'TableV2Wrapper',
+  name: 'TableWrapper',
 
   data: () => {
     return {
@@ -112,8 +112,8 @@ export default {
 
     tableClass: function () {
       return {
-        'ui-table-v2__table': true,
-        'ui-table-v2__table--bordered': this.tableContext.layout.bordered
+        'ui-table__table': true,
+        'ui-table__table--bordered': this.tableContext.layout.bordered
       }
     },
 
@@ -194,6 +194,11 @@ export default {
       this.$nextTick(() => {
         this.updateScrollState()
       })
+    },
+    hasScrollY() {
+      this.$nextTick(() => {
+        this.updateScrollState()
+      })
     }
   },
 

package/src/components/{table-v2 → table}/body/DragPreview.vue

@@ -1,11 +1,11 @@
 <template>
   <table
-    class="ui-table-v2__drag-preview"
+    class="ui-table__drag-preview"
     aria-hidden="true"
     :style="{ width: containerWidth ? containerWidth + 'px' : '100%', tableLayout: 'fixed' }"
   >
-    <tbody class="ui-table-v2__body">
-      <tr class="ui-table-v2__row" v-if="record">
+    <tbody class="ui-table__body">
+      <tr class="ui-table__row" v-if="record">
         <td v-for="col in columns" :key="col.key">
           <div v-if="col.type === DRAGGABLE_COLUMN" class="wrapper-option">
             <span class="drag-handle">
@@ -27,7 +27,7 @@ import { WkiGripVertical } from '../../../icons'
 import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from '../constants.js'
 
 export default {
-  name: 'TableV2DragPreview',
+  name: 'TableDragPreview',
   components: { WkiGripVertical },
   inject: ['tableContext'],
   data: function () {
@@ -49,17 +49,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.ui-table-v2__drag-preview {
-  position: fixed;
-  top: -10000px;
-  left: -10000px;
-  pointer-events: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  overflow: hidden;
-}
-</style>

package/src/components/{table-v2 → table}/body/TableBody.vue

@@ -1,15 +1,15 @@
 <template>
-  <tbody class="ui-table-v2__body">
+  <tbody class="ui-table__body">
     <template v-if="measureColumnWidth">
-      <tr aria-hidden="true" class="ui-table-v2__measure-row" :style="{ height: '0', fontSize: '0' }">
+      <tr aria-hidden="true" class="ui-table__measure-row" :style="{ height: '0', fontSize: '0' }">
         <MeasureCell v-for="(column, colIndex) in tableContext.columns.flat" :key="colIndex" :colKey="column.key" />
       </tr>
     </template>
 
     <template v-if="isEmpty">
-      <tr class="ui-table-v2__row">
+      <tr class="ui-table__row">
         <td colspan="100">
-          <div class="ui-table-v2__row-empty ui-table-v2__empty" :style="emptyStyle">
+          <div class="ui-table__row-empty ui-table__empty" :style="emptyStyle">
             <slot name="empty">
               <div class="wrapper-img">
                 <img
@@ -43,7 +43,7 @@ import TableRow from './TableRow.vue'
 import MeasureCell from './MeasureCell.vue'
 
 export default {
-  name: 'TableV2Body',
+  name: 'TableBody',
   components: { TableRow, MeasureCell },
   props: {
     measureColumnWidth: {
@@ -93,7 +93,7 @@ export default {
       const offset = this.measureColumnWidth ? 1 : 0
       this._sortable = Sortable.create(this.$el, {
         handle: '.drag-handle',
-        draggable: '.ui-table-v2__row',
+        draggable: '.ui-table__row',
         animation: this.tableContext.draggable.enableAnimationFlip ? 150 : 0,
         onChoose: function (evt) {
           const rowIndex = evt.oldIndex - offset

package/src/components/{table-v2 → table}/body/TableCell.vue

@@ -1,12 +1,12 @@
 <template>
   <td
     :class="[
-      'ui-table-v2__cell',
-      isSelectionCol && 'ui-table-v2__cell--selection',
-      isSelectionCol && 'ui-table-v2__header-cell--selection',
-      column.fixed && `ui-table-v2__cell--fixed-${column.fixed}`,
-      isLastFixedLeft && 'ui-table-v2__cell--fixed-left__last',
-      isFirstFixedRight && 'ui-table-v2__cell--fixed-right__first'
+      'ui-table__cell',
+      isSelectionCol && 'ui-table__cell--selection',
+      isSelectionCol && 'ui-table__header-cell--selection',
+      column.fixed && `ui-table__cell--fixed-${column.fixed}`,
+      isLastFixedLeft && 'ui-table__cell--fixed-left__last',
+      isFirstFixedRight && 'ui-table__cell--fixed-right__first'
     ]"
     :style="cellStyle"
   >
@@ -27,7 +27,7 @@
       :text="record[column.dataIndex]"
       :record="record"
     >
-      <span :class="[column.ellipsis && 'ui-table-v2__cell--ellipsis']">
+      <span :class="[column.ellipsis && 'ui-table__cell--ellipsis']">
         {{ record[column.dataIndex] }}
       </span>
     </slot>
@@ -41,7 +41,7 @@ import { toCssSize } from '../../../utils/common.js'
 import { WkiGripVertical } from '../../../icons'
 
 export default {
-  name: 'TableV2Cell',
+  name: 'TableCell',
   components: { Checkbox, WkiGripVertical },
   inject: ['tableContext'],
   props: {

package/src/components/{table-v2 → table}/body/TableRow.vue

@@ -3,9 +3,9 @@
     v-bind="customAttrs"
     v-on="customListeners"
     :class="[
-      'ui-table-v2__row',
-      isLastItem && 'ui-table-v2__row--last',
-      isSelected && 'ui-table-v2__row--selected',
+      'ui-table__row',
+      isLastItem && 'ui-table__row--last',
+      isSelected && 'ui-table__row--selected',
       customAttrs.class
     ]"
     :style="rowStyle"
@@ -29,7 +29,7 @@ import TableCell from './TableCell.vue'
 import { splitProps } from '../../../utils/common.js'
 
 export default {
-  name: 'TableV2Row',
+  name: 'TableRow',
   components: { TableCell },
   inject: ['tableContext'],
   props: {

package/src/components/{table-v2 → table}/header/TableHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <thead class="ui-table-v2__header">
+  <thead class="ui-table__header">
     <TableHeaderRow />
   </thead>
 </template>
@@ -8,7 +8,7 @@
 import TableHeaderRow from './TableHeaderRow.vue'
 
 export default {
-  name: 'TableV2Header',
+  name: 'TableHeader',
   components: { TableHeaderRow },
   inject: ['tableContext']
 }

package/src/components/{table-v2 → table}/header/TableHeaderCell.vue

@@ -1,13 +1,13 @@
 <template>
   <th
     :class="[
-      'ui-table-v2__header-cell',
-      isSelectionCol && 'ui-table-v2__header-cell--selection',
-      isLastItem && 'ui-table-v2__header-cell--last',
-      isSelectionCol && !isHideSelectAll && 'ui-table-v2__header-cell--selection',
-      column.fixed && `ui-table-v2__cell--fixed-${column.fixed}`,
-      isLastFixedLeft && 'ui-table-v2__cell--fixed-left__last',
-      isFirstFixedRight && 'ui-table-v2__cell--fixed-right__first'
+      'ui-table__header-cell',
+      isSelectionCol && 'ui-table__header-cell--selection',
+      isLastItem && 'ui-table__header-cell--last',
+      isSelectionCol && !isHideSelectAll && 'ui-table__header-cell--selection',
+      column.fixed && `ui-table__cell--fixed-${column.fixed}`,
+      isLastFixedLeft && 'ui-table__cell--fixed-left__last',
+      isFirstFixedRight && 'ui-table__cell--fixed-right__first'
     ]"
     :style="cellStyle"
   >
@@ -15,7 +15,7 @@
       <Checkbox :checked="tableContext.selection.checkAll" @change="onCheckAll" />
     </div>
 
-    <span v-else :class="[column.ellipsis && 'ui-table-v2__header-cell--ellipsis']">{{ column.title }}</span>
+    <span v-else :class="[column.ellipsis && 'ui-table__header-cell--ellipsis']">{{ column.title }}</span>
 
     <slot name="drag-handle"></slot>
   </th>
@@ -27,7 +27,7 @@ import { SELECTION_COLUMN } from '../constants.js'
 import { toCssSize } from '../../../utils/common.js'
 
 export default {
-  name: 'TableV2HeaderCell',
+  name: 'TableHeaderCell',
   components: { Checkbox },
   inject: ['tableContext'],
   props: {

package/src/components/{table-v2 → table}/header/TableHeaderRow.vue

@@ -2,7 +2,7 @@
   <tr
     v-bind="customAttrs"
     v-on="customListeners"
-    :class="['ui-table-v2__header-row', customAttrs.class]"
+    :class="['ui-table__header-row', customAttrs.class]"
     :style="rowStyle"
   >
     <TableHeaderCell
@@ -22,7 +22,7 @@
         />
       </template>
     </TableHeaderCell>
-    <th v-if="hasScrollBar" class="ui-table-v2__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
+    <th v-if="hasScrollBar" class="ui-table__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
   </tr>
 </template>
 
@@ -32,7 +32,7 @@ import { splitProps } from '../../../utils/common.js'
 import ColumnDragHandle from '../ColumnDragHandle.vue'
 
 export default {
-  name: 'TableV2HeaderRow',
+  name: 'TableHeaderRow',
   components: {
     TableHeaderCell,
     ColumnDragHandle

package/src/components/{table-v2 → table}/style/table-loading.css

@@ -1,8 +1,8 @@
-.ui-table-v2__loading-wrap {
+.ui-table__loading-wrap {
   position: relative;
 }
 
-.ui-table-v2__loading-overlay {
+.ui-table__loading-overlay {
   position: absolute;
   inset: 0;
   z-index: 10;
@@ -13,7 +13,7 @@
   border-radius: inherit;
 }
 
-.ui-table-v2__loading-wrap--loading > :not(.ui-table-v2__loading-overlay) {
+.ui-table__loading-wrap--loading > :not(.ui-table__loading-overlay) {
   pointer-events: none;
   user-select: none;
 }