webcake-ui-kit 1.2.0 → 1.2.2

package/src/components/select-option/SelectOption.vue

@@ -15,13 +15,13 @@
     :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
   >
-    <span v-if="$slots.prefix" class="ui-select-option__prefix">
+    <span v-if="hasPrefix" class="ui-select-option__prefix">
       <slot name="prefix" />
     </span>
     <span class="ui-select-option--label">
       <slot>{{ label || value }}</slot>
     </span>
-    <span v-if="$slots.suffix" class="ui-select-option__suffix">
+    <span v-if="hasSuffix" class="ui-select-option__suffix">
       <slot name="suffix" />
     </span>
     <WkiCheck v-if="isSelected && isMultiMode" :size="16" color="var(--muted-fg)" />
@@ -100,6 +100,12 @@ export default {
       // explicit prop wins; otherwise inherit from parent Select; else regular
       return this.size || (this.select && (this.select.optionSize || this.select.size)) || 'md'
     },
+    hasPrefix() {
+      return !!((this.$scopedSlots && this.$scopedSlots.prefix) || this.$slots.prefix)
+    },
+    hasSuffix() {
+      return !!((this.$scopedSlots && this.$scopedSlots.suffix) || this.$slots.suffix)
+    },
     isHidden() {
       if (!this.select || !this.select.filterText) return false
       var q = this.select.filterText.toLowerCase()

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    :class="['ui-table-v2__cell-resize-handle', dragging && 'dragging', reversed && 'reversed']"
+    @mousedown.stop.prevent="handleMouseDown"
+    @touchstart.stop.prevent="handleTouchStart"
+    @click.stop.prevent
+  >
+    <div class="ui-table-v2__cell-resize-line"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColumnDragHandle',
+  props: {
+    column: { type: Object, required: true },
+    width: { type: Number, default: 0 },
+    minWidth: { type: Number, default: 50 },
+    maxWidth: { type: Number, default: Infinity },
+    reversed: { type: Boolean, default: false }
+  },
+  emits: ['resize'],
+  data: function () {
+    return {
+      dragging: false
+    }
+  },
+  created: function () {
+    this._startX = 0
+    this._baseWidth = 0
+    this._rafId = null
+    this._moveHandler = null
+    this._stopHandler = null
+  },
+  beforeUnmount: function () {
+    this._removeEvents()
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy: function () {
+    this._removeEvents()
+  },
+  methods: {
+    _getPageX: function (e) {
+      if (e.touches) {
+        return e.touches.length ? e.touches[0].pageX : e.changedTouches[0].pageX
+      }
+      return e.pageX
+    },
+    _clampWidth: function (w) {
+      const min = typeof this.minWidth === 'number' && !isNaN(this.minWidth) ? this.minWidth : 50
+      const max = typeof this.maxWidth === 'number' && !isNaN(this.maxWidth) ? this.maxWidth : Infinity
+      return Math.min(Math.max(w, min), max)
+    },
+    _updateWidth: function (e) {
+      const deltaX = this._startX - this._getPageX(e)
+      const w = this._clampWidth(this.reversed ? this._baseWidth + deltaX : this._baseWidth - deltaX)
+      if (this._rafId) cancelAnimationFrame(this._rafId)
+      this._rafId = requestAnimationFrame(() => {
+        this.$emit('resize', w, this.column)
+      })
+    },
+    _removeEvents: function () {
+      if (this._moveHandler) {
+        document.documentElement.removeEventListener('mousemove', this._moveHandler)
+        document.documentElement.removeEventListener('touchmove', this._moveHandler)
+        this._moveHandler = null
+      }
+      if (this._stopHandler) {
+        document.documentElement.removeEventListener('mouseup', this._stopHandler)
+        document.documentElement.removeEventListener('touchend', this._stopHandler)
+        this._stopHandler = null
+      }
+      if (this._rafId) {
+        cancelAnimationFrame(this._rafId)
+        this._rafId = null
+      }
+    },
+    _handleStart: function (e) {
+      this.dragging = true
+      this._removeEvents()
+      this._baseWidth = this.$el.parentNode.getBoundingClientRect().width
+      this._startX = this._getPageX(e)
+      this._moveHandler = this._updateWidth.bind(this)
+      this._stopHandler = e => {
+        this.dragging = false
+        this._updateWidth(e)
+        this._removeEvents()
+      }
+      document.documentElement.addEventListener('mousemove', this._moveHandler)
+      document.documentElement.addEventListener('touchmove', this._moveHandler, { passive: false })
+      document.documentElement.addEventListener('mouseup', this._stopHandler)
+      document.documentElement.addEventListener('touchend', this._stopHandler)
+    },
+    handleMouseDown: function (e) {
+      if (e.which !== 1) return
+      this._handleStart(e)
+    },
+    handleTouchStart: function (e) {
+      this._handleStart(e)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,304 @@
+<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: 36 },
+    headerHeight: { type: Number, default: 50 },
+    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
+      }
+    },
+
+    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
+        console.log(this.tableCtx.data.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>

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

@@ -0,0 +1,55 @@
+<template>
+  <colgroup>
+    <col
+      v-for="col in tableContext.columns.flat"
+      :key="col.key"
+      :class="isSelectionCol(col) ? 'ui-table-v2__selection-col' : ''"
+      :style="colStyle(col)"
+    />
+    <col v-if="hasScrollBar" :style="{ width: tableContext.layout.scrollBarWidth }" />
+  </colgroup>
+</template>
+
+<script>
+import { toCssSize } from '../../utils/common'
+import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from './constants.js'
+
+export default {
+  name: 'TableV2ColGroup',
+  inject: ['tableContext'],
+  props: {
+    isHeader: { type: Boolean, default: false }
+  },
+  methods: {
+    toCssSize,
+    colStyle: function (col) {
+      const res = {}
+      res.width = (this.tableContext.layout.columnWidths.get(col.key) || col.width) + 'px'
+      if (col.type === SELECTION_COLUMN) {
+        const w = (this.tableContext.selection.columnWidth || 36) + 'px'
+        res.width = w
+        res.minWidth = w
+        res.maxWidth = w
+      }
+      if (col.type === DRAGGABLE_COLUMN) {
+        const w = (this.tableContext.draggable.columnWidth || 36) + 'px'
+        res.width = w
+        res.minWidth = w
+        res.maxWidth = w
+      }
+      return res
+    },
+    isSelectionCol: function (col) {
+      return col.type === SELECTION_COLUMN
+    },
+    isDraggableCol: function (col) {
+      return col.key === DRAGGABLE_COLUMN
+    }
+  },
+  computed: {
+    hasScrollBar: function () {
+      return this.isHeader && this.tableContext.layout.scrollBarWidth != '0px'
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="ui-table-v2__loading-wrap" :class="{ 'ui-table-v2__loading-wrap--loading': isLoading }">
+    <slot />
+    <div v-if="isLoading" class="ui-table-v2__loading-overlay">
+      <Spinner size="md" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Spinner from '../spinner/Spinner.vue'
+
+export default {
+  name: 'TableV2Loading',
+  components: { Spinner },
+  inject: ['tableContext'],
+  computed: {
+    isLoading: function () {
+      return this.tableContext.data.loading
+    }
+  }
+}
+</script>
+
+<style src="./style/table-loading.css" scoped></style>

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

@@ -0,0 +1,91 @@
+<script>
+import { findDOMNode } from '../../utils/common'
+
+export default {
+  name: 'TableResizeObserver',
+  emits: ['resize'],
+
+  data() {
+    return {
+      state: {
+        width: 0,
+        height: 0,
+        offsetHeight: 0,
+        offsetWidth: 0
+      },
+      currentElement: null,
+      resizeObserver: null
+    }
+  },
+
+  render() {
+    // eslint-disable-next-line vue/require-slots-as-functions
+    const slot = this.$slots.default
+    if (typeof slot === 'function') {
+      return slot()
+    }
+    return (slot && slot[0]) || null
+  },
+
+  methods: {
+    registerObserver() {
+      const element = findDOMNode(this)
+      const elementChanged = element !== this.currentElement
+      if (elementChanged) {
+        this.destroyObserver()
+        this.currentElement = element
+      }
+      if (!element) return
+      this.resizeObserver = new ResizeObserver(entries => {
+        this.handleEmitResize(entries)
+      })
+      this.resizeObserver.observe(this.currentElement)
+    },
+    handleEmitResize(entries) {
+      const target = entries[0].target
+
+      const { width, height } = target.getBoundingClientRect()
+      const { offsetWidth, offsetHeight } = target
+
+      const fixedWidth = Math.floor(width)
+      const fixedHeight = Math.floor(height)
+
+      if (
+        this.state.width !== fixedWidth ||
+        this.state.height !== fixedHeight ||
+        this.state.offsetWidth !== offsetWidth ||
+        this.state.offsetHeight !== offsetHeight
+      ) {
+        const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight }
+
+        Object.assign(this.state, size)
+        Promise.resolve().then(() => {
+          this.$emit('resize', {
+            ...size,
+            offsetWidth,
+            offsetHeight
+          })
+        })
+      }
+    },
+    destroyObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+    }
+  },
+
+  mounted() {
+    this.registerObserver()
+  },
+
+  beforeUnmount() {
+    this.destroyObserver()
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.destroyObserver()
+  }
+}
+</script>