webcake-ui-kit 1.2.13 → 1.2.14

package/src/components/table/table.css

@@ -1,396 +0,0 @@
-.ui-table {
-  width: 100%;
-  font-family: var(--font-family-body);
-  color: var(--primary-fg);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--rounded-2xl);
-  overflow: hidden;
-}
-
-.ui-table__table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* drag col is always 36px — the header cell is empty so it has no content to size it */
-.ui-table__col--drag {
-  width: 1%;
-}
-
-.ui-table__col--selection {
-  width: 1%;
-}
-
-/* ---------- Cells ---------- */
-.ui-table__cell {
-  padding: var(--spacing-xs);
-  font-size: var(--paragraph-small-font-size);
-  line-height: var(--paragraph-small-line-height);
-  letter-spacing: var(--paragraph-small-letter-spacing);
-  text-align: left;
-  vertical-align: middle;
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.ui-table__cell--right {
-  text-align: right;
-}
-
-.ui-table__cell--center {
-  text-align: center;
-}
-
-.ui-table__cell--ellipsis {
-  max-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.ui-table__cell--drag {
-  width: 1%;
-  white-space: nowrap;
-  text-align: center;
-}
-
-.ui-table__td.ui-table__cell--drag {
-  cursor: grab;
-  color: var(--muted-fg);
-}
-
-.ui-table__td.ui-table__cell--drag:active {
-  cursor: grabbing;
-}
-
-.ui-table__cell--selection {
-  width: 1%;
-  white-space: nowrap;
-  text-align: center;
-}
-
-.ui-table__cell--fixed-left,
-.ui-table__cell--fixed-right {
-  position: sticky;
-  z-index: 1;
-}
-
-@keyframes ui-table-sticky-shadow {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes ui-table-sticky-shadow-right {
-  to {
-    opacity: 0;
-  }
-}
-
-.ui-table__cell--fixed-left-last::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: -6px;
-  bottom: 0;
-  width: 6px;
-  box-shadow: inset var(--shadow-fixed-column-left);
-  pointer-events: none;
-  opacity: 0;
-  animation: ui-table-sticky-shadow linear both;
-  animation-timeline: scroll(nearest x);
-  animation-range: 0px 1px;
-}
-
-.ui-table__cell--fixed-right-first::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -6px;
-  bottom: 0;
-  width: 6px;
-  box-shadow: inset var(--shadow-fixed-column-right);
-  pointer-events: none;
-  animation: ui-table-sticky-shadow-right linear both;
-  animation-timeline: scroll(nearest x);
-  animation-range: calc(100% - 2px) 100%;
-}
-
-/* Sticky cells need an opaque background so content doesn't bleed through. */
-.ui-table__th.ui-table__cell--fixed-left,
-.ui-table__th.ui-table__cell--fixed-right {
-  background: var(--secondary-bg);
-}
-
-.ui-table__td.ui-table__cell--fixed-left,
-.ui-table__td.ui-table__cell--fixed-right {
-  background: var(--primary-bg);
-  transition: background-color 0.12s ease;
-}
-
-.ui-table__row--body:hover .ui-table__td.ui-table__cell--fixed-left,
-.ui-table__row--body:hover .ui-table__td.ui-table__cell--fixed-right {
-  background: var(--accent-bg);
-}
-
-.ui-table__row--selected .ui-table__td.ui-table__cell--fixed-left,
-.ui-table__row--selected .ui-table__td.ui-table__cell--fixed-right {
-  background: var(--secondary-bg);
-}
-
-/* ---------- Header ---------- */
-.ui-table__th {
-  background: var(--secondary-bg);
-  font-weight: var(--paragraph-medium-font-weight);
-  white-space: nowrap;
-  padding: 0;
-}
-
-.ui-table__th-inner-wrap {
-  padding: var(--spacing-xs);
-  position: relative;
-}
-
-.ui-table__resize-handle {
-  position: absolute;
-  top: 50%;
-  right: -4px;
-  width: 8px;
-  height: 50%;
-  transform: translateY(-50%);
-  cursor: col-resize;
-}
-
-.ui-table__resize-handle:hover {
-  height: 100%;
-}
-
-.ui-table__resize-handle--left {
-  right: auto;
-  left: -4px;
-}
-
-.ui-table__resize-handle::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  width: 1px;
-  transform: translateX(-50%);
-  background: var(--border-focus);
-}
-
-.ui-table__resize-handle:hover::before,
-.ui-table__resize-handle.resizing::before {
-  width: 3px;
-  background: #3f8dff;
-}
-
-.ui-table__th-inner {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  max-width: 100%;
-}
-
-.ui-table__th--sortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.ui-table__th--sortable:hover,
-.ui-table__th:has(:is(.ui-table__resize-handle, .ui-table__resize-handle--left)):hover {
-  background: var(--accent-2);
-}
-
-.ui-table__th--sortable:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--focus-ring);
-}
-
-.ui-table__sort {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  color: var(--muted-fg);
-}
-
-.ui-table__sort--inactive {
-  opacity: 0.5;
-}
-
-.ui-table__sort--active {
-  opacity: 1;
-  color: var(--primary-fg);
-}
-
-/* ---------- Body ---------- */
-.ui-table__td {
-  background: var(--primary-bg);
-  font-weight: var(--paragraph-font-weight);
-}
-
-.ui-table__row--body {
-  transition: background-color 0.12s ease;
-}
-
-.ui-table__row--dragging .ui-table__td {
-  opacity: 0.35;
-}
-
-.ui-table__row--drag-over .ui-table__td {
-  border-top: 2px solid var(--border-focus);
-}
-
-.ui-table__row--drag-preview .ui-table__td {
-  background: var(--accent-bg);
-}
-
-.ui-table__row--body:hover .ui-table__td {
-  background: var(--accent-bg);
-}
-
-.ui-table__row--selected .ui-table__td {
-  background: var(--secondary-bg);
-}
-
-/* ---------- Empty ---------- */
-.ui-table__empty-cell {
-  padding: var(--spacing-3xl) var(--spacing-xs);
-  text-align: center;
-}
-
-/* ---------- Bordered ---------- */
-.ui-table--bordered {
-  border: 1px solid var(--border-primary);
-  border-radius: var(--rounded-xl);
-  overflow: hidden;
-}
-
-.ui-table--bordered .ui-table__cell {
-  border-right: 1px solid var(--border-primary);
-}
-
-.ui-table--bordered .ui-table__cell:last-child {
-  border-right: none;
-}
-
-@keyframes ui-table-sticky-border-hide {
-  to {
-    border-right-width: 0;
-  }
-}
-
-.ui-table--bordered .ui-table__cell--fixed-left-last {
-  animation: ui-table-sticky-border-hide linear both;
-  animation-timeline: scroll(nearest x);
-  animation-range: 0px 1px;
-}
-
-/* With a scrollbar spacer present, the last real header column is second-to-last. */
-.ui-table--bordered .ui-table__row--has-scrollbar .ui-table__cell:nth-last-child(2) {
-  border-right: none;
-}
-
-.ui-table--bordered .ui-table__row--body:last-child .ui-table__td {
-  border-bottom: none;
-}
-
-/* ---------- Scroll viewport (fixed header, scrollable body) ---------- */
-.ui-table--scroll-y .ui-table__table,
-.ui-table--scroll-y .ui-table__head,
-.ui-table--scroll-y .ui-table__body {
-  display: block;
-}
-
-/*
- * Switch to separate borders in scroll mode so each cell owns its border width precisely.
- * border-collapse: collapse splits shared borders by 0.5px, which causes the scrollbar
- * spacer <th> to be off by 1px. separate + border-spacing: 0 is visually identical
- * (cells only have border-bottom and border-right, never border-top/left) but width-exact.
- */
-.ui-table--scroll-y .ui-table__table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-/* Each row becomes its own fixed-layout table so header and body columns line up. */
-.ui-table--scroll-y .ui-table__row {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-
-/* The body is the actual scroll area; the header above it stays put. */
-.ui-table--scroll-y .ui-table__body {
-  overflow-y: auto;
-}
-
-.ui-table__body::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.ui-table__body::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid var(--border-primary);
-}
-
-.ui-table__body::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid var(--border-primary);
-}
-
-.ui-table__body::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 3px;
-}
-
-.ui-table__body::-webkit-scrollbar-thumb:vertical {
-  border-left: 2px solid transparent;
-  border-right: 1px solid transparent;
-  background-clip: content-box;
-}
-
-.ui-table__body::-webkit-scrollbar-thumb:horizontal {
-  border-top: 2px solid transparent;
-  border-bottom: 1px solid transparent;
-  background-clip: content-box;
-}
-
-.ui-table--scroll-y .ui-table__head {
-  overflow: hidden;
-}
-
-.ui-table__th--scrollbar {
-  padding: 0;
-  border: none;
-  background: var(--secondary-bg);
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.ui-table--scroll-y .ui-table__cell--selection,
-.ui-table--scroll-y .ui-table__cell--drag {
-  width: 36px;
-}
-
-/* ---------- Virtual scroll spacers ---------- */
-/*
- * Spacer rows reserve the scroll height of the off-window rows. They must paint
- * nothing (no border/padding/background) so the row-height math stays exact, and
- * are display:block so their inline height is honored verbatim inside the
- * block-level scrolling tbody (the real rows are display:table; table-layout:fixed).
- */
-.ui-table__spacer {
-  display: block;
-  padding: 0;
-  border: none;
-  background: transparent;
-}
-
-.ui-table__spacer-cell {
-  padding: 0;
-  border: none;
-}

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

@@ -1,305 +0,0 @@
-<template>
-  <div class="ui-table-v2">
-    <TableLoading>
-      <TableResizeObserver @resize="handleContainerResize">
-        <TableWrapper>
-          <template #bodyCell="slotData">
-            <slot name="bodyCell" v-bind="slotData"></slot>
-          </template>
-          <template #empty>
-            <slot name="empty"></slot>
-          </template>
-        </TableWrapper>
-      </TableResizeObserver>
-    </TableLoading>
-  </div>
-</template>
-
-<script>
-import { createTableContext } from './context/createTableContext.js'
-import { flattenColumns } from './composables/useColumns.js'
-import { sortData } from './composables/useSorter.js'
-import { computeOffsets } from './composables/useSticky.js'
-import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from './constants.js'
-import TableWrapper from './TableWrapper.vue'
-import TableLoading from './TableLoading.vue'
-import TableResizeObserver from './TableResizeObserver.vue'
-
-export default {
-  name: 'TableV2',
-
-  components: { TableWrapper, TableLoading, TableResizeObserver },
-
-  provide: function () {
-    return { tableContext: this.tableCtx }
-  },
-
-  props: {
-    columns: {
-      type: Array,
-      default: function () {
-        return []
-      }
-    },
-    dataSource: {
-      type: Array,
-      default: function () {
-        return []
-      }
-    },
-    bordered: { type: Boolean, default: false },
-    size: { type: String, default: 'md' },
-    rowKey: { type: String, default: 'key' },
-    scroll: { type: Object, default: null },
-    loading: { type: Boolean, default: false },
-    rowSelection: { type: Object, default: null },
-    customRow: { type: Function, default: null },
-    customHeaderRow: { type: Function, default: null },
-    rowDraggable: { type: Object, default: null },
-    enableFixedLeft: { type: Boolean, default: false },
-    rowHeight: { type: Number, default: 50 },
-    headerHeight: { type: Number, default: 36 },
-    emptyText: { type: String, default: '' },
-    height: { type: [Number, String], default: 0 }
-  },
-
-  emits: ['change', 'sort-change', 'select-change'],
-
-  data: function () {
-    return { tableCtx: createTableContext() }
-  },
-
-  computed: {
-    isEmpty: function () {
-      return this.tableCtx.data.display.length === 0
-    },
-
-    columnsInput: function () {
-      return {
-        columns: this.columns,
-        rowKey: this.rowKey,
-        hasSelection: !!this.rowSelection,
-        hasDraggable: !!this.rowDraggable
-      }
-    },
-
-    rowsInput: function () {
-      return { customRow: this.customRow, customHeaderRow: this.customHeaderRow }
-    },
-
-    layoutInput: function () {
-      return {
-        bordered: this.bordered,
-        size: this.size,
-        scroll: this.scroll,
-        rowHeight: this.rowHeight,
-        headerHeight: this.headerHeight,
-        height: this.height
-      }
-    },
-
-    dataInput: function () {
-      return {
-        source: this.dataSource,
-        sortKey: this.tableCtx.sort.columnKey,
-        sortOrder: this.tableCtx.sort.order,
-        loading: this.loading,
-        emptyText: this.emptyText
-      }
-    },
-
-    stickyInput: function () {
-      return {
-        columns: this.tableCtx.columns.flat,
-        widths: this.tableCtx.layout.columnWidths
-      }
-    },
-
-    selectionInput: function () {
-      return this.rowSelection
-    },
-
-    draggableInput: function () {
-      return this.rowDraggable
-    }
-  },
-
-  watch: {
-    columnsInput: {
-      immediate: true,
-      handler: function (v) {
-        var cols = flattenColumns(v.columns)
-        const isHasFixedLeft = cols.some(col => col.fixed === 'left')
-        if (v.hasSelection) {
-          cols.unshift({
-            key: '__selection__',
-            type: SELECTION_COLUMN,
-            width: 36,
-            dataIndex: '',
-            title: '',
-            align: null,
-            fixed: isHasFixedLeft || this.enableFixedLeft ? 'left' : null,
-            ellipsis: false
-          })
-        }
-        if (v.hasDraggable) {
-          cols.unshift({
-            key: '__draggable__',
-            type: DRAGGABLE_COLUMN,
-            width: 36,
-            dataIndex: '',
-            title: '',
-            align: null,
-            fixed: isHasFixedLeft || this.enableFixedLeft ? 'left' : null,
-            ellipsis: false
-          })
-        }
-        this.tableCtx.columns.flat = cols
-        this.tableCtx.layout.rowKey = v.rowKey
-      }
-    },
-
-    rowsInput: {
-      immediate: true,
-      handler: function (v) {
-        this.tableCtx.rows.customRow = v.customRow
-        this.tableCtx.rows.customHeaderRow = v.customHeaderRow
-      }
-    },
-
-    layoutInput: {
-      immediate: true,
-      deep: true,
-      handler: function (v) {
-        this.tableCtx.layout.bordered = v.bordered
-        this.tableCtx.layout.size = v.size
-        this.tableCtx.layout.scroll = v.scroll
-        this.tableCtx.layout.tableLayout = v.scroll && v.scroll.y ? 'fixed' : 'auto'
-        this.tableCtx.layout.height = v.height
-        this.tableCtx.layout.headerHeight = v.headerHeight
-        this.tableCtx.layout.rowHeight = v.rowHeight
-      }
-    },
-
-    dataInput: {
-      immediate: true,
-      handler: function (v) {
-        this.tableCtx.data.source = v.source
-        ;((this.tableCtx.data.display = v.sortKey ? sortData(v.source, v.sortKey, v.sortOrder) : v.source),
-          (this.tableCtx.data.loading = v.loading))
-        this.tableCtx.data.emptyText = v.emptyText
-      }
-    },
-
-    stickyInput: {
-      deep: true,
-      immediate: true,
-      handler: function (v) {
-        if (!v.columns.length) return
-        var offsets = computeOffsets(v.columns, v.widths)
-        this.tableCtx.sticky.leftOffsets = offsets.left
-        this.tableCtx.sticky.rightOffsets = offsets.right
-      }
-    },
-
-    selectionInput: {
-      immediate: true,
-      deep: true,
-      handler: function (v) {
-        if (!v) return
-        this.tableCtx.selection.selectedRowKeys = v.selectedRowKeys || []
-        this.tableCtx.selection.hideSelectAll = v.hideSelectAll
-        this.tableCtx.selection.columnWidth = v.columnWidth
-        this.tableCtx.selection.type = v.type
-        this.tableCtx.selection.onChange = v.onChange
-        this.tableCtx.selection.onSelect = v.onSelect
-        this.tableCtx.selection.onSelectAll = v.onSelectAll
-        this.tableCtx.selection.onSelectNone = v.onSelectNone
-      }
-    },
-
-    draggableInput: {
-      immediate: true,
-      deep: true,
-      handler: function (v) {
-        this.tableCtx.draggable.enabled = !!v
-        if (!v) return
-        this.tableCtx.draggable.columnWidth = v.columnWidth || 36
-        this.tableCtx.draggable.handleReorder = v.handleReorder || null
-        this.tableCtx.draggable.enableAnimationFlip = v.enableAnimationFlip || false
-      }
-    }
-  },
-
-  created: function () {
-    this.tableCtx.actions.sort = this.handleSort
-    this.tableCtx.actions.select = this.handleSelect
-    this.tableCtx.actions.resize = this.handleResize
-    this.tableCtx.actions.reorder = this.handleReorder
-  },
-
-  methods: {
-    handleSort: function (columnKey, order) {
-      this.tableCtx.sort.columnKey = columnKey
-      this.tableCtx.sort.order = order
-      this.$emit('sort-change', { columnKey: columnKey, order: order })
-      this.$emit('change', { sort: { columnKey: columnKey, order: order } })
-    },
-
-    handleSelect: function (keys, meta) {
-      var prevKeys = this.tableCtx.selection.selectedRowKeys
-      var display = this.tableCtx.data.display
-      var rowKey = this.tableCtx.layout.rowKey
-      var rs = this.rowSelection || {}
-
-      this.tableCtx.selection.checkAll = keys.length === display.length && display.length > 0
-
-      var selectedRows = display.filter(function (r) {
-        return keys.indexOf(r[rowKey]) !== -1
-      })
-
-      if (rs.onChange) rs.onChange(keys, selectedRows)
-
-      if (!meta) return
-
-      if (meta.type === 'row') {
-        if (rs.onSelect) rs.onSelect(meta.record, meta.selected, selectedRows, meta.nativeEvent)
-      } else if (meta.type === 'all') {
-        // changeRows = rows mới được check (chưa có trong prevKeys)
-        var changeRows = display.filter(function (r) {
-          return prevKeys.indexOf(r[rowKey]) === -1
-        })
-        if (rs.onSelectAll) rs.onSelectAll(true, selectedRows, changeRows)
-      } else if (meta.type === 'none') {
-        // changeRows = rows bị uncheck (đang có trong prevKeys)
-        changeRows = display.filter(function (r) {
-          return prevKeys.indexOf(r[rowKey]) !== -1
-        })
-        if (rs.onSelectAll) rs.onSelectAll(false, [], changeRows)
-        if (rs.onSelectNone) rs.onSelectNone()
-      }
-    },
-
-    handleResize: function (colKey, width) {
-      var widths = new Map(this.tableCtx.layout.columnWidths)
-      widths.set(colKey, width)
-      this.tableCtx.layout.columnWidths = widths
-    },
-
-    handleReorder: function (oldIndex, newIndex) {
-      const display = this.tableCtx.data.display.slice()
-      const moved = display.splice(oldIndex, 1)[0]
-      display.splice(newIndex, 0, moved)
-
-      const cb = this.tableCtx.draggable.handleReorder
-      if (typeof cb === 'function') cb(oldIndex, newIndex, display)
-    },
-
-    handleContainerResize: function (size) {
-      this.tableCtx.layout.containerWidth = size.width
-    }
-  }
-}
-</script>
-
-<style src="./style/table.css" scoped></style>