webcake-ui-kit 1.3.13 → 1.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/select/Select.vue

@@ -106,15 +106,13 @@
           />
         </slot>
         <slot v-if="showEmpty" name="empty">
-          <Empty description="No data">
-            <template #media>
-              <div class="select-empty">
-                <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>
-            </template>
-          </Empty>
+          <div class="ui-select__empty">
+            <img
+              src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
+              alt=""
+            />
+            <span>{{ emptyText }}</span>
+          </div>
         </slot>
         <div v-if="hasContentFooter()">
           <slot name="contentFooter"></slot>
@@ -142,12 +140,11 @@ import Menu from '../menu/Menu.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
 import Tag from '../tag/Tag.vue'
-import Empty from '../empty/Empty.vue'
 
 export default {
   name: 'Select',
 
-  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag, Empty },
+  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag },
 
   provide() {
     return { select: this }
@@ -242,6 +239,10 @@ export default {
     placement: {
       type: String,
       default: 'bottom-start'
+    },
+    emptyText: {
+      type: String,
+      default: 'Chưa có dữ liệu'
     }
   },
 

package/src/components/select/select.css

@@ -264,13 +264,23 @@
   border-left: 1px solid var(--border-primary);
 }
 
-.ui-select__list ::v-deep .select-empty {
-  height: 100px;
-  width: 100px;
+.ui-select__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 12px;
 }
 
-.ui-select__list ::v-deep .select-empty img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.ui-select__empty img {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.ui-select__empty span {
+  font-family: var(--font-family-body);
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--muted-fg);
 }

package/src/components/table/Table.vue

@@ -9,6 +9,9 @@
           <template #empty>
             <slot name="empty"></slot>
           </template>
+          <template #selectionHeader>
+            <slot name="selectionHeader"></slot>
+          </template>
         </TableWrapper>
       </TableResizeObserver>
     </TableLoading>
@@ -58,7 +61,7 @@ export default {
     rowDraggable: { type: Object, default: null },
     enableFixedLeft: { type: Boolean, default: false },
     rowHeight: { type: Number, default: 50 },
-    headerHeight: { type: Number, default: 36 },
+    headerHeight: { type: Number, default: 40 },
     emptyText: { type: String, default: '' },
     height: { type: [Number, String], default: 0 }
   },
@@ -88,13 +91,18 @@ export default {
     },
 
     layoutInput: function () {
+      const hasSlotSelectionHeader = !!(
+        (this.$scopedSlots && this.$scopedSlots['selectionHeader']) ||
+        this.$slots['selectionHeader']
+      )
       return {
         bordered: this.bordered,
         size: this.size,
         scroll: this.scroll,
         rowHeight: this.rowHeight,
         headerHeight: this.headerHeight,
-        height: this.height
+        height: this.height,
+        hasSlotSelectionHeader: hasSlotSelectionHeader
       }
     },
 
@@ -178,6 +186,7 @@ export default {
         this.tableCtx.layout.height = v.height
         this.tableCtx.layout.headerHeight = v.headerHeight
         this.tableCtx.layout.rowHeight = v.rowHeight
+        this.tableCtx.layout.hasSlotSelectionHeader = v.hasSlotSelectionHeader
       }
     },
 
@@ -208,7 +217,7 @@ export default {
       handler: function (v) {
         if (!v) return
         this.tableCtx.selection.selectedRowKeys = v.selectedRowKeys || []
-        this.tableCtx.selection.hideSelectAll = v.hideSelectAll
+        this.tableCtx.selection.hideSelectAll = !!v.hideSelectAll
         this.tableCtx.selection.columnWidth = v.columnWidth
         this.tableCtx.selection.type = v.type
         this.tableCtx.selection.onChange = v.onChange
@@ -247,13 +256,11 @@ export default {
     },
 
     handleSelect: function (keys, meta) {
-      var prevKeys = this.tableCtx.selection.selectedRowKeys
+      var prevKeys = this.tableCtx.selection.selectedRowKeys.slice()
       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
       })
@@ -265,17 +272,15 @@ export default {
       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) {
+        var addedRows = display.filter(function (r) {
           return prevKeys.indexOf(r[rowKey]) === -1
         })
-        if (rs.onSelectAll) rs.onSelectAll(true, selectedRows, changeRows)
+        if (rs.onSelectAll) rs.onSelectAll(true, selectedRows, addedRows)
       } else if (meta.type === 'none') {
-        // changeRows = rows bị uncheck (đang có trong prevKeys)
-        changeRows = display.filter(function (r) {
+        var removedRows = display.filter(function (r) {
           return prevKeys.indexOf(r[rowKey]) !== -1
         })
-        if (rs.onSelectAll) rs.onSelectAll(false, [], changeRows)
+        if (rs.onSelectAll) rs.onSelectAll(false, [], removedRows)
         if (rs.onSelectNone) rs.onSelectNone()
       }
     },

package/src/components/table/TableWrapper.vue

@@ -17,7 +17,11 @@
       <div ref="headerRef" class="ui-table__header-hold" style="overflow: hidden">
         <table :class="tableClass" :style="fixedTableStyle">
           <TableColGroup :is-header="true" />
-          <TableHeader />
+          <TableHeader>
+            <template #selectionHeader>
+              <slot name="selectionHeader"></slot>
+            </template>
+          </TableHeader>
         </table>
       </div>
       <div ref="bodyRef" class="ui-table__body-hold" :style="bodyHoldStyle" @scroll="handleBodyScroll">
@@ -39,7 +43,11 @@
     <div v-else class="ui-table__content" ref="bodyRef" :style="contentStyle" @scroll="handleBodyScroll">
       <table :class="tableClass" :style="tableStyle">
         <TableColGroup />
-        <TableHeader />
+        <TableHeader>
+          <template #selectionHeader>
+            <slot name="selectionHeader"></slot>
+          </template>
+        </TableHeader>
         <TableBody :measureColumnWidth="hasScrollY || hasScrollX || hasSticky" :is-empty="isEmpty">
           <template #bodyCell="slotData">
             <slot name="bodyCell" v-bind="slotData"></slot>
@@ -166,14 +174,22 @@ export default {
         style.overflowX = 'auto'
       }
       return style
+    },
+
+    hasSelectionHeader: function () {
+      const hasKeys = this.tableContext.selection.selectedRowKeys.length > 0
+      const hasSlot = this.tableContext.layout.hasSlotSelectionHeader
+
+      return hasKeys && hasSlot
     }
   },
   methods: {
     handleBodyScroll(e) {
       const { scrollLeft, scrollWidth, clientWidth } = e.currentTarget
-      if (this.$refs.headerRef) {
+      if (this.$refs.headerRef && !this.hasSelectionHeader) {
         this.$refs.headerRef.scrollLeft = scrollLeft
       }
+      if (!this.hasScrollX) return
 
       this.isPingedLeft = scrollLeft > 0
       this.isPingedRight = scrollLeft < scrollWidth - clientWidth
@@ -183,6 +199,8 @@ export default {
         const { width } = getTargetScrollBarSize(this.$refs.bodyRef)
         this.tableContext.layout.scrollBarWidth = width == 'auto' ? '0px' : width
 
+        if (!this.hasScrollX) return
+
         const { scrollWidth, clientWidth, scrollLeft } = this.$refs.bodyRef
         this.isPingedLeft = scrollLeft > 0
         this.isPingedRight = scrollLeft < scrollWidth - clientWidth
@@ -200,6 +218,24 @@ export default {
       this.$nextTick(() => {
         this.updateScrollState()
       })
+    },
+    'tableContext.layout.columnWidths': function () {
+      if (this.hasScrollY) {
+        clearTimeout(this._columnWidthsTimer)
+        this._columnWidthsTimer = setTimeout(() => {
+          this.$nextTick(() => {
+            this.updateScrollState()
+          })
+        })
+      }
+    },
+    hasSelectionHeader: function (val) {
+      if (!this.$refs.headerRef) return
+      if (!val && this.$refs.bodyRef) {
+        this.$refs.headerRef.scrollLeft = this.$refs.bodyRef.scrollLeft
+      } else {
+        this.$refs.headerRef.scrollLeft = 0
+      }
     }
   },
 

package/src/components/table/context/createTableContext.js

@@ -27,8 +27,9 @@ export function createTableContext() {
       containerWidth: 0,
       columnWidths: new Map(),
       rowHeight: 50,
-      headerHeight: 36,
-      height: 0
+      headerHeight: 40,
+      height: 0,
+      hasSlotSelectionHeader: false
     },
 
     sort: {

package/src/components/table/header/TableHeader.vue

@@ -1,6 +1,10 @@
 <template>
   <thead class="ui-table__header">
-    <TableHeaderRow />
+    <TableHeaderRow>
+      <template #selectionHeader>
+        <slot name="selectionHeader"></slot>
+      </template>
+    </TableHeaderRow>
   </thead>
 </template>
 

package/src/components/table/header/TableHeaderCell.vue

@@ -4,7 +4,6 @@
       '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'
@@ -12,7 +11,7 @@
     :style="cellStyle"
   >
     <div v-if="isSelectionCol && !isHideSelectAll" class="wrapper-option">
-      <Checkbox :checked="tableContext.selection.checkAll" @change="onCheckAll" />
+      <Checkbox :checked="hasChecked" @change="onCheckAll" :iconType="isCheckAll ? 'default' : 'minus'" />
     </div>
 
     <span v-else :class="[column.ellipsis && 'ui-table__header-cell--ellipsis']">{{ column.title }}</span>
@@ -36,12 +35,20 @@ export default {
     offset: { type: [Number, String], default: 0 }
   },
   computed: {
-    isHideSelectAll() {
-      return this.tableContext.selection.hideSelectAll
+    isHideSelectAll: function () {
+      return !!this.tableContext.selection.hideSelectAll
     },
     isSelectionCol: function () {
       return this.column.type === SELECTION_COLUMN
     },
+    hasChecked: function () {
+      return this.tableContext.selection.selectedRowKeys.length > 0
+    },
+    isCheckAll: function () {
+      var keys = this.tableContext.selection.selectedRowKeys
+      var display = this.tableContext.data.display
+      return display.length > 0 && keys.length === display.length
+    },
     isLastFixedLeft: function () {
       if (this.column.fixed !== 'left') return false
       const cols = this.tableContext.columns.flat
@@ -73,16 +80,17 @@ export default {
     }
   },
   methods: {
-    onCheckAll: function (checked) {
+    onCheckAll: function () {
       const key = this.tableContext.layout.rowKey
       const allKeys = this.tableContext.data.display.map(function (r) {
         return r[key]
       })
 
-      this.tableContext.actions.select(checked ? allKeys : [], {
-        type: checked ? 'all' : 'none',
-        selected: checked
-      })
+      if (this.isCheckAll) {
+        this.tableContext.actions.select([], { type: 'none', selected: false })
+      } else {
+        this.tableContext.actions.select(allKeys, { type: 'all', selected: true })
+      }
     }
   }
 }

package/src/components/table/header/TableHeaderRow.vue

@@ -5,24 +5,41 @@
     :class="['ui-table__header-row', customAttrs.class]"
     :style="rowStyle"
   >
-    <TableHeaderCell
-      v-for="(column, index) in tableContext.columns.flat"
-      :key="column.key"
-      :column="column"
-      :is-last-item="index === tableContext.columns.flat.length - 1"
-      :offset="column.fixed === 'left' ? leftStickyOffsets[column.key] : rightStickyOffsets[column.key]"
-    >
-      <template v-if="column.resizable && !isEmpty" #drag-handle>
-        <ColumnDragHandle
-          :column="column"
-          :width="columnWidths.get(column.key)"
-          :min-width="column.minWidth"
-          :max-width="column.maxWidth"
-          @resize="hanldeResize"
-        />
-      </template>
-    </TableHeaderCell>
-    <th v-if="hasScrollBar" class="ui-table__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
+    <template v-if="hasSelectionHeader">
+      <TableHeaderCell
+        v-for="column in systemColumns"
+        :key="column.key"
+        :column="column"
+        :is-last-item="false"
+        :offset="column.fixed === 'left' ? leftStickyOffsets[column.key] : rightStickyOffsets[column.key]"
+      />
+      <th :colspan="selectionHeaderColspan" class="ui-table__header-cell ui-table__header-cell--bulk">
+        <div :style="bulkHeaderStyle">
+          <slot name="selectionHeader"></slot>
+        </div>
+      </th>
+      <th v-if="hasScrollBar" class="ui-table__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
+    </template>
+    <template v-else>
+      <TableHeaderCell
+        v-for="(column, index) in tableContext.columns.flat"
+        :key="column.key"
+        :column="column"
+        :is-last-item="index === tableContext.columns.flat.length - 1"
+        :offset="column.fixed === 'left' ? leftStickyOffsets[column.key] : rightStickyOffsets[column.key]"
+      >
+        <template v-if="column.resizable && !isEmpty" #drag-handle>
+          <ColumnDragHandle
+            :column="column"
+            :width="columnWidths.get(column.key)"
+            :min-width="column.minWidth"
+            :max-width="column.maxWidth"
+            @resize="hanldeResize"
+          />
+        </template>
+      </TableHeaderCell>
+      <th v-if="hasScrollBar" class="ui-table__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
+    </template>
   </tr>
 </template>
 
@@ -30,6 +47,7 @@
 import TableHeaderCell from './TableHeaderCell.vue'
 import { splitProps } from '../../../utils/common.js'
 import ColumnDragHandle from '../ColumnDragHandle.vue'
+import { SELECTION_COLUMN, DRAGGABLE_COLUMN } from '../constants.js'
 
 export default {
   name: 'TableHeaderRow',
@@ -95,6 +113,35 @@ export default {
 
     isEmpty: function () {
       return this.tableContext.data.display.length === 0
+    },
+
+    hasSelectionHeader: function () {
+      const hasKeys = this.tableContext.selection.selectedRowKeys.length > 0
+      const hasSlot = this.tableContext.layout.hasSlotSelectionHeader
+
+      return hasKeys && hasSlot
+    },
+
+    systemColumns: function () {
+      return this.tableContext.columns.flat.filter(function (col) {
+        return col.type === SELECTION_COLUMN || col.type === DRAGGABLE_COLUMN
+      })
+    },
+
+    selectionHeaderColspan: function () {
+      return this.tableContext.columns.flat.length - this.systemColumns.length
+    },
+
+    bulkHeaderStyle: function () {
+      var container = this.tableContext.layout.containerWidth
+      if (!container) return {}
+      var self = this
+      var systemWidth = 0
+      this.systemColumns.forEach(function (col) {
+        var measured = self.columnWidths.get(col.key)
+        systemWidth += measured != null ? measured : col.width || 0
+      })
+      return { width: container - systemWidth - 2 + 'px' } // Trừ đi border của table
     }
   },
 

package/src/components/table/style/table-wrapper.css

@@ -1,8 +1,7 @@
 .ui-table__wrapper {
   overflow: hidden;
   border-radius: var(--rounded-2xl);
-  border-inline-end: 1px solid var(--border-primary);
-  border-inline-start: 1px solid var(--border-primary);
+  border: 1px solid var(--border-primary);
 }
 
 .ui-table__wrapper table {
@@ -13,19 +12,6 @@
   border-spacing: 0;
 }
 
-.ui-table__wrapper .ui-table__content {
-  border-top: 1px solid var(--border-primary);
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.ui-table__wrapper .ui-table__header-hold {
-  border-top: 1px solid var(--border-primary);
-}
-
-.ui-table__wrapper .ui-table__body-hold {
-  border-bottom: 1px solid var(--border-primary);
-}
-
 /* Common betwenn Header and Body */
 .ui-table__wrapper ::v-deep .ui-table__header > tr > th,
 .ui-table__wrapper ::v-deep .ui-table__body > tr > td {
@@ -300,3 +286,18 @@
   border-bottom: 1px solid transparent;
   background-clip: content-box;
 }
+
+.ui-table__wrapper ::v-deep .ui-table__header-cell--bulk.ui-table__header-cell--bulk {
+  padding: 0;
+  vertical-align: middle;
+}
+
+.ui-table__wrapper ::v-deep .ui-table__header-cell--bulk > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}