webcake-ui-kit 1.2.0 → 1.2.2

package/src/components/table-v2/TableWrapper.vue

@@ -0,0 +1,207 @@
+<template>
+  <div
+    class="ui-table-v2__wrapper"
+    :class="{
+      'ui-table-v2__wrapper--ping-left': isPingedLeft,
+      'ui-table-v2__wrapper--ping-right': isPingedRight
+    }"
+  >
+    <DragPreview v-if="hasDraggable" ref="dragPreview">
+      <template #bodyCell="slotData">
+        <slot name="bodyCell" v-bind="slotData"></slot>
+      </template>
+    </DragPreview>
+
+    <!-- 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">
+        <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">
+        <table :class="tableClass" :style="fixedTableStyle">
+          <TableColGroup />
+          <TableBody :measureColumnWidth="hasScrollY || hasScrollX || hasSticky">
+            <template #bodyCell="slotData">
+              <slot name="bodyCell" v-bind="slotData"></slot>
+            </template>
+            <template #empty>
+              <slot name="empty"></slot>
+            </template>
+          </TableBody>
+        </table>
+      </div>
+    </template>
+
+    <!-- Case 1 & 2: một table duy nhất -->
+    <div v-else class="ui-table-v2__content" ref="bodyRef" :style="contentStyle" @scroll="handleBodyScroll">
+      <table :class="tableClass" :style="tableStyle">
+        <TableColGroup />
+        <TableHeader />
+        <TableBody :measureColumnWidth="hasScrollY || hasScrollX || hasSticky" :is-empty="isEmpty">
+          <template #bodyCell="slotData">
+            <slot name="bodyCell" v-bind="slotData"></slot>
+          </template>
+          <template #empty>
+            <slot name="empty"></slot>
+          </template>
+        </TableBody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import TableColGroup from './TableColGroup.vue'
+import TableHeader from './header/TableHeader.vue'
+import TableBody from './body/TableBody.vue'
+import DragPreview from './body/DragPreview.vue'
+import { toCssSize, getTargetScrollBarSize } from '../../utils/common'
+
+export default {
+  name: 'TableV2Wrapper',
+
+  data: () => {
+    return {
+      toCssSize,
+      getTargetScrollBarSize,
+      isPingedLeft: false,
+      isPingedRight: false
+    }
+  },
+
+  components: { TableColGroup, TableHeader, TableBody, DragPreview },
+
+  inject: ['tableContext'],
+
+  computed: {
+    scroll: function () {
+      return this.tableContext.layout.scroll
+    },
+
+    minHeight: function () {
+      return this.tableContext.layout.height
+    },
+
+    isEmpty() {
+      return this.tableContext.data.display.length === 0
+    },
+
+    hasScrollY: function () {
+      // has fix header
+      return !!(this.scroll && this.scroll.y)
+    },
+
+    hasScrollX: function () {
+      // has horizontal scroll
+      return !!(this.scroll && this.scroll.x)
+    },
+
+    hasSticky: function () {
+      // has sticky column
+      const leftOffsets = this.tableContext.sticky.leftOffsets
+      const rightOffsets = this.tableContext.sticky.rightOffsets
+      return Object.keys(leftOffsets).length > 0 || Object.keys(rightOffsets).length > 0
+    },
+
+    hasDraggable() {
+      return !!(this.tableContext.draggable && this.tableContext.draggable.enabled)
+    },
+
+    tableClass: function () {
+      return {
+        'ui-table-v2__table': true,
+        'ui-table-v2__table--bordered': this.tableContext.layout.bordered
+      }
+    },
+
+    // Case 1 & 2 — wrapper có overflow-x khi scroll.x
+    contentStyle: function () {
+      return this.hasScrollX ? { overflow: 'auto hidden' } : {}
+    },
+
+    // Case 1 & 2 — table style
+    tableStyle: function () {
+      if (this.hasScrollX && !this.isEmpty) {
+        return {
+          tableLayout: 'fixed',
+          width: this.toCssSize(this.scroll.x),
+          minWidth: '100%'
+        }
+      }
+      return { tableLayout: 'auto' }
+    },
+
+    // Case 3 — cả header table và body table dùng chung style này
+    fixedTableStyle: function () {
+      return {
+        tableLayout: 'fixed',
+        width: this.scroll && this.scroll.x ? this.toCssSize(this.scroll.x) : undefined,
+        minWidth: '100%'
+      }
+    },
+
+    // Case 3 — body scroll container
+    bodyHoldStyle: function () {
+      const rowHeight = this.tableContext.layout.headerHeight
+      const deduct = `${this.toCssSize(rowHeight)}`
+
+      var style = {
+        overflowY: 'auto',
+        maxHeight: `calc(${this.toCssSize(this.scroll.y)} - ${deduct})`,
+        minHeight: this.minHeight > 0 ? `calc(${this.toCssSize(this.minHeight)} - ${deduct})` : undefined
+      }
+      if (this.hasScrollX) {
+        style.overflowX = 'auto'
+      }
+      return style
+    }
+  },
+  methods: {
+    handleBodyScroll(e) {
+      const { scrollLeft, scrollWidth, clientWidth } = e.currentTarget
+      if (this.$refs.headerRef) {
+        this.$refs.headerRef.scrollLeft = scrollLeft
+      }
+
+      this.isPingedLeft = scrollLeft > 0
+      this.isPingedRight = scrollLeft < scrollWidth - clientWidth
+    },
+    updateScrollState() {
+      console.log('update')
+      if (this.$refs.bodyRef) {
+        const { width } = getTargetScrollBarSize(this.$refs.bodyRef)
+        this.tableContext.layout.scrollBarWidth = width == 'auto' ? '0px' : width
+
+        const { scrollWidth, clientWidth, scrollLeft } = this.$refs.bodyRef
+        this.isPingedLeft = scrollLeft > 0
+        this.isPingedRight = scrollLeft < scrollWidth - clientWidth
+      }
+    }
+  },
+
+  watch: {
+    'tableContext.data.display.length': function () {
+      this.$nextTick(() => {
+        this.updateScrollState()
+      })
+    },
+    hasScrollY(val) {
+      console.log('hasScrollY', val)
+    }
+  },
+
+  mounted: function () {
+    const self = this
+    this.tableContext.draggable.getPreviewEl = function () {
+      return self.$refs.dragPreview && self.$refs.dragPreview.$el
+    }
+
+    this.updateScrollState()
+  }
+}
+</script>
+
+<style src="./style/table-wrapper.css" scoped></style>

package/src/components/table-v2/body/DragPreview.vue

@@ -0,0 +1,65 @@
+<template>
+  <table
+    class="ui-table-v2__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">
+        <td v-for="col in columns" :key="col.key">
+          <div v-if="col.type === DRAGGABLE_COLUMN" class="wrapper-option">
+            <span class="drag-handle">
+              <WkiGripVertical :size="16" />
+            </span>
+          </div>
+          <div v-else-if="col.type === SELECTION_COLUMN" class="wrapper-option" />
+          <slot v-else name="bodyCell" :column="col" :text="record && record[col.dataIndex]" :record="record">
+            <span>{{ record && record[col.dataIndex] }}</span>
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { WkiGripVertical } from '../../../icons'
+import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from '../constants.js'
+
+export default {
+  name: 'TableV2DragPreview',
+  components: { WkiGripVertical },
+  inject: ['tableContext'],
+  data: function () {
+    return {
+      SELECTION_COLUMN: SELECTION_COLUMN,
+      DRAGGABLE_COLUMN: DRAGGABLE_COLUMN
+    }
+  },
+  computed: {
+    record: function () {
+      return this.tableContext.draggable.draggingRecord
+    },
+    columns: function () {
+      return this.tableContext.columns.flat
+    },
+    containerWidth: function () {
+      return this.tableContext.layout.containerWidth
+    }
+  }
+}
+</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/body/MeasureCell.vue

@@ -0,0 +1,42 @@
+<template>
+  <TableResizeObserver @resize="handleCellResize">
+    <td ref="cellRef" :style="{ padding: '0', border: '0', height: '0' }">
+      <div :style="{ height: 0, overflow: 'hidden' }">&nbsp;</div>
+    </td>
+  </TableResizeObserver>
+</template>
+
+<script>
+import TableResizeObserver from '../TableResizeObserver.vue'
+import { DRAGGABLE_COLUMN, SELECTION_COLUMN } from '../constants.js'
+export default {
+  name: 'MeasureCell',
+  components: { TableResizeObserver },
+  props: {
+    measureColumnWidth: {
+      type: Boolean,
+      default: false
+    },
+    colKey: {
+      type: String,
+      required: true
+    }
+  },
+  inject: ['tableContext'],
+
+  methods: {
+    handleCellResize({ offsetWidth }) {
+      if (this.colKey === DRAGGABLE_COLUMN || this.colKey === SELECTION_COLUMN) {
+        return
+      }
+      this.tableContext.actions.resize(this.colKey, offsetWidth)
+    }
+  },
+
+  mounted() {
+    if (this.$refs.cellRef) {
+      this.handleCellResize({ offsetWidth: this.$refs.cellRef.offsetWidth })
+    }
+  }
+}
+</script>

package/src/components/table-v2/body/TableBody.vue

@@ -0,0 +1,133 @@
+<template>
+  <tbody class="ui-table-v2__body">
+    <template v-if="measureColumnWidth">
+      <tr aria-hidden="true" class="ui-table-v2__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">
+        <td colspan="100">
+          <div class="ui-table-v2__row-empty ui-table-v2__empty" :style="emptyStyle">
+            <slot name="empty">
+              <div class="wrapper-img">
+                <img
+                  src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
+                />
+              </div>
+              <span class="wk-paragraph-small">{{ emptyText }}</span>
+            </slot>
+          </div>
+        </td>
+      </tr>
+    </template>
+
+    <TableRow
+      v-for="(record, rowIndex) in tableContext.data.display"
+      :key="record[tableContext.layout.rowKey]"
+      :record="record"
+      :row-index="rowIndex"
+      :is-last-item="rowIndex == tableContext.data.display.length - 1"
+    >
+      <template #bodyCell="slotData">
+        <slot name="bodyCell" v-bind="slotData"></slot>
+      </template>
+    </TableRow>
+  </tbody>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import TableRow from './TableRow.vue'
+import MeasureCell from './MeasureCell.vue'
+
+export default {
+  name: 'TableV2Body',
+  components: { TableRow, MeasureCell },
+  props: {
+    measureColumnWidth: {
+      type: Boolean,
+      default: false
+    },
+    isEmpty: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['tableContext'],
+  watch: {
+    'tableContext.draggable.enabled': function (val) {
+      val ? this._initSortable() : this._destroySortable()
+    },
+    'tableContext.draggable.enableAnimationFlip': function () {
+      if (this.tableContext.draggable.enabled) this._initSortable()
+    }
+  },
+  mounted: function () {
+    if (this.tableContext.draggable.enabled) {
+      this._initSortable()
+    }
+  },
+  computed: {
+    emptyText() {
+      return this.tableContext.data.emptyText || 'Không có dữ liệu'
+    },
+    emptyStyle() {
+      const { height, rowHeight } = this.tableContext.layout
+      if (!height) return {}
+      return { minHeight: `calc(${height}px - ${rowHeight}px)` }
+    }
+  },
+  beforeUnmount: function () {
+    this._destroySortable()
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy: function () {
+    this._destroySortable()
+  },
+  methods: {
+    _initSortable: function () {
+      this._destroySortable()
+      const self = this
+      const offset = this.measureColumnWidth ? 1 : 0
+      this._sortable = Sortable.create(this.$el, {
+        handle: '.drag-handle',
+        draggable: '.ui-table-v2__row',
+        animation: this.tableContext.draggable.enableAnimationFlip ? 150 : 0,
+        onChoose: function (evt) {
+          const rowIndex = evt.oldIndex - offset
+          self.tableContext.draggable.draggingRecord = self.tableContext.data.display[rowIndex] || null
+        },
+        setData: function (dataTransfer, dragEl) {
+          let previewEl =
+            typeof self.tableContext.draggable.getPreviewEl === 'function'
+              ? self.tableContext.draggable.getPreviewEl()
+              : null
+          if (!previewEl) return
+          dataTransfer.setDragImage(previewEl, 0, previewEl.offsetHeight / 2)
+        },
+        onEnd: function (evt) {
+          self.tableContext.draggable.draggingRecord = null
+          // Revert SortableJS DOM move — Vue owns the DOM
+          evt.from.insertBefore(evt.item, evt.from.children[evt.oldIndex] || null)
+          const oldIndex = evt.oldIndex - offset
+          const newIndex = evt.newIndex - offset
+          if (oldIndex === newIndex) return
+          if (typeof self.tableContext.actions.reorder === 'function') {
+            self.tableContext.actions.reorder(oldIndex, newIndex)
+          }
+        }
+      })
+    },
+    _destroySortable: function () {
+      if (this._sortable) {
+        this._sortable.destroy()
+        this._sortable = null
+      }
+    }
+  }
+}
+</script>
+
+<style src="../style/table-body.css" scoped></style>

package/src/components/table-v2/body/TableCell.vue

@@ -0,0 +1,114 @@
+<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'
+    ]"
+    :style="cellStyle"
+  >
+    <div v-if="isSelectionCol" class="wrapper-option">
+      <Checkbox :checked="isSelected" :model-value="isSelected" @change="onToggle" />
+    </div>
+
+    <div v-else-if="isDraggableCol" class="wrapper-option">
+      <span class="drag-handle">
+        <WkiGripVertical :size="16" />
+      </span>
+    </div>
+
+    <slot
+      v-if="!isSelectionCol && !isDraggableCol"
+      name="bodyCell"
+      :column="column"
+      :text="record[column.dataIndex]"
+      :record="record"
+    >
+      <span :class="[column.ellipsis && 'ui-table-v2__cell--ellipsis']">
+        {{ record[column.dataIndex] }}
+      </span>
+    </slot>
+  </td>
+</template>
+
+<script>
+import Checkbox from '../../checkbox/Checkbox.vue'
+import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from '../constants.js'
+import { toCssSize } from '../../../utils/common.js'
+import { WkiGripVertical } from '../../../icons'
+
+export default {
+  name: 'TableV2Cell',
+  components: { Checkbox, WkiGripVertical },
+  inject: ['tableContext'],
+  props: {
+    column: { type: Object, required: true },
+    record: { type: Object, required: true },
+    offset: { type: [Number, String], default: 0 }
+  },
+  computed: {
+    isSelectionCol: function () {
+      return this.column.type === SELECTION_COLUMN
+    },
+    isDraggableCol: function () {
+      return this.column.type === DRAGGABLE_COLUMN
+    },
+    isLastFixedLeft: function () {
+      if (this.column.fixed !== 'left') return false
+      const cols = this.tableContext.columns.flat
+      let lastKey = null
+      for (let i = 0; i < cols.length; i++) {
+        if (cols[i].fixed === 'left') lastKey = cols[i].key
+      }
+      return lastKey === this.column.key
+    },
+    isFirstFixedRight: function () {
+      if (this.column.fixed !== 'right') return false
+      const cols = this.tableContext.columns.flat
+      for (let i = 0; i < cols.length; i++) {
+        if (cols[i].fixed === 'right') return cols[i].key === this.column.key
+      }
+      return false
+    },
+    isSelected: function () {
+      var key = this.record[this.tableContext.layout.rowKey]
+      return this.tableContext.selection.selectedRowKeys.indexOf(key) !== -1
+    },
+    cellStyle: function () {
+      const res = { textAlign: this.column.align }
+      if (this.column.fixed) {
+        res.position = 'sticky'
+        if (this.column.fixed === 'left') {
+          res.left = toCssSize(this.offset)
+        } else if (this.column.fixed === 'right') {
+          res.right = toCssSize(this.offset)
+        }
+      }
+      return res
+    }
+  },
+  methods: {
+    onToggle: function (checked, nativeEvent) {
+      const key = this.record[this.tableContext.layout.rowKey]
+      const keys = [...this.tableContext.selection.selectedRowKeys]
+      const idx = keys.indexOf(key)
+
+      if (checked && idx === -1) {
+        keys.push(key)
+      } else if (!checked && idx !== -1) {
+        keys.splice(idx, 1)
+      }
+
+      this.tableContext.actions.select(keys, {
+        type: 'row',
+        record: this.record,
+        selected: checked,
+        nativeEvent: nativeEvent
+      })
+    }
+  }
+}
+</script>

package/src/components/table-v2/body/TableRow.vue

@@ -0,0 +1,73 @@
+<template>
+  <tr
+    v-bind="customAttrs"
+    v-on="customListeners"
+    :class="[
+      'ui-table-v2__row',
+      isLastItem && 'ui-table-v2__row--last',
+      isSelected && 'ui-table-v2__row--selected',
+      customAttrs.class
+    ]"
+    :style="rowStyle"
+  >
+    <TableCell
+      v-for="column in tableContext.columns.flat"
+      :key="column.key"
+      :column="column"
+      :record="record"
+      :offset="column.fixed === 'left' ? leftStickyOffsets[column.key] : rightStickyOffsets[column.key]"
+    >
+      <template #bodyCell="slotData">
+        <slot name="bodyCell" v-bind="slotData"></slot>
+      </template>
+    </TableCell>
+  </tr>
+</template>
+
+<script>
+import TableCell from './TableCell.vue'
+import { splitProps } from '../../../utils/common.js'
+
+export default {
+  name: 'TableV2Row',
+  components: { TableCell },
+  inject: ['tableContext'],
+  props: {
+    record: { type: Object, required: true },
+    rowIndex: { type: Number, required: true },
+    isLastItem: { type: Boolean, default: false }
+  },
+
+  computed: {
+    rowStyle() {
+      return { height: this.tableContext.layout.rowHeight + 'px' }
+    },
+
+    isSelected: function () {
+      var key = this.record[this.tableContext.layout.rowKey]
+      return this.tableContext.selection.selectedRowKeys.indexOf(key) !== -1
+    },
+
+    leftStickyOffsets() {
+      return this.tableContext.sticky.leftOffsets
+    },
+
+    rightStickyOffsets() {
+      return this.tableContext.sticky.rightOffsets
+    },
+
+    customProps: function () {
+      var fn = this.tableContext.rows.customRow
+      return typeof fn === 'function' ? fn(this.record, this.rowIndex) || {} : {}
+    },
+
+    customAttrs: function () {
+      return splitProps(this.customProps).attrs
+    },
+
+    customListeners: function () {
+      return splitProps(this.customProps).listeners
+    }
+  }
+}
+</script>

package/src/components/table-v2/composables/useColumns.js

@@ -0,0 +1,19 @@
+export function flattenColumns(columns) {
+  return (columns || []).map(function (col, i) {
+    return {
+      key: col.key || col.dataIndex || String(i),
+      type: col.type || null,
+      dataIndex: col.dataIndex || '',
+      title: col.title || '',
+      width: col.width || null,
+      align: col.align == 'left' ? null : col.align,
+      fixed: col.fixed || null,
+      ellipsis: col.ellipsis || false,
+      customCell: col.customCell || null,
+      customHeaderCell: col.customHeaderCell || null,
+      minWidth: col.minWidth || 50,
+      maxWidth: col.maxWidth || Infinity,
+      resizable: col.resizable || false
+    }
+  })
+}

package/src/components/table-v2/composables/useSorter.js

@@ -0,0 +1,12 @@
+export function sortData(source, columnKey, order) {
+  if (!columnKey || !order) return source
+  var arr = source.slice()
+  arr.sort(function (a, b) {
+    var av = a[columnKey]
+    var bv = b[columnKey]
+    if (av === bv) return 0
+    var asc = av < bv ? -1 : 1
+    return order === 'ascend' ? asc : -asc
+  })
+  return arr
+}

package/src/components/table-v2/composables/useSticky.js

@@ -0,0 +1,31 @@
+export function computeOffsets(columns, columnWidths) {
+  var left = {}
+  var right = {}
+  var leftAcc = 0
+  var rightAcc = 0
+
+  for (var i = 0; i < columns.length; i++) {
+    var col = columns[i]
+    if (col.fixed === 'left') {
+      left[col.key] = leftAcc
+      leftAcc += columnWidths.get(col.key) || parseWidth(col.width) || 0
+    }
+  }
+
+  for (var j = columns.length - 1; j >= 0; j--) {
+    var colR = columns[j]
+    if (colR.fixed === 'right') {
+      right[colR.key] = rightAcc
+      rightAcc += columnWidths.get(colR.key) || parseWidth(colR.width) || 0
+    }
+  }
+
+  return { left: left, right: right }
+}
+
+function parseWidth(width) {
+  if (!width) return 0
+  if (typeof width === 'number') return width
+  var n = parseInt(width, 10)
+  return isNaN(n) ? 0 : n
+}