webcake-ui-kit 1.1.17 → 1.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -48,6 +48,7 @@
     "./WkSpinner": "./src/components/spinner/Spinner.vue",
     "./WkSwitch": "./src/components/switch/Switch.vue",
     "./WkSwitchGroup": "./src/components/switch-group/SwitchGroup.vue",
+    "./WkTable": "./src/components/table/Table.vue",
     "./WkTabs": "./src/components/tabs/Tabs.vue",
     "./WkTag": "./src/components/tag/Tag.vue",
     "./WkToggle": "./src/components/toggle/Toggle.vue",

package/src/components/button/button.css

@@ -224,6 +224,7 @@
   color: var(--primary-brand-fg);
   height: fit-content;
   padding: 0;
+  border: none;
 }
 
 .ui-btn--link:hover,

package/src/components/checkbox/checkbox.css

@@ -40,6 +40,7 @@
   transition:
     background-color 0.12s ease,
     border-color 0.12s ease;
+  inset: 0;
 }
 
 .ui-checkbox__input:checked + .ui-checkbox__box,

package/src/components/dropdown/Dropdown.vue

@@ -21,7 +21,7 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems v-if="hasItems" :items="items" @select="onItemSelect" />
+    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" />
     <slot v-else name="overlay"></slot>
   </Menu>
 </template>
@@ -71,6 +71,10 @@ export default {
       default: function () {
         return []
       }
+    },
+    value: {
+      type: [String, Array],
+      default: null
     }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],

package/src/components/dropdown/DropdownMenuItems.vue

@@ -7,12 +7,7 @@
       <!-- Group: non-clickable label + flat children -->
       <div v-else-if="item._type === 'group'" class="ui-dropdown-items__group">
         <div class="ui-dropdown-items__group-label" :title="item.title || undefined">
-          <component
-            :is="item.icon"
-            v-if="item.icon && isComponent(item.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
           <span :style="item.color ? { color: item.color } : undefined">{{ item.label }}</span>
         </div>
         <div
@@ -21,21 +16,18 @@
           class="ui-dropdown-items__item"
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled,
-            'ui-dropdown-items__item--destructive': child.destructive
+            'ui-dropdown-items__item--destructive': child.destructive,
+            'ui-dropdown-items__item--active': isActive(child.key)
           }"
           :title="child.title || undefined"
           @click="onItemClick(child)"
         >
-          <component
-            :is="child.icon"
-            v-if="child.icon && isComponent(child.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -49,12 +41,7 @@
           }"
           :title="item.title || undefined"
         >
-          <component
-            :is="item.icon"
-            v-if="item.icon && isComponent(item.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
             item.label
           }}</span>
@@ -65,21 +52,18 @@
           class="ui-dropdown-items__item ui-dropdown-items__item--sub"
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled || item.disabled,
-            'ui-dropdown-items__item--destructive': child.destructive
+            'ui-dropdown-items__item--destructive': child.destructive,
+            'ui-dropdown-items__item--active': isActive(child.key)
           }"
           :title="child.title || undefined"
           @click="onItemClick(child, item)"
         >
-          <component
-            :is="child.icon"
-            v-if="child.icon && isComponent(child.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -89,27 +73,26 @@
         class="ui-dropdown-items__item"
         :class="{
           'ui-dropdown-items__item--disabled': item.disabled,
-          'ui-dropdown-items__item--destructive': item.destructive
+          'ui-dropdown-items__item--destructive': item.destructive,
+          'ui-dropdown-items__item--active': isActive(item.key)
         }"
         :title="item.title || undefined"
         @click="onItemClick(item)"
       >
-        <component
-          :is="item.icon"
-          v-if="item.icon && isComponent(item.icon)"
-          class="ui-dropdown-items__icon"
-          :color="item.colorIcon"
-        />
+        <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
         <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
           item.label
         }}</span>
         <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
+        <WkiCheck v-if="isActive(item.key)" :size="16" color="var(--muted-fg)" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import WkiCheck from '../../icons/Check.vue'
+
 function skipReactive(val) {
   if (val && typeof val === 'object' && !val.__v_skip) {
     val.__v_skip = true
@@ -119,12 +102,18 @@ function skipReactive(val) {
 export default {
   name: 'DropdownMenuItems',
 
+  components: { WkiCheck },
+
   props: {
     items: {
       type: Array,
       default: function () {
         return []
       }
+    },
+    value: {
+      type: [String, Array],
+      default: null
     }
   },
 
@@ -162,6 +151,11 @@ export default {
     isComponent(val) {
       return val !== null && typeof val === 'object'
     },
+    isActive(key) {
+      if (this.value === null || this.value === undefined) return false
+      if (Array.isArray(this.value)) return this.value.indexOf(key) !== -1
+      return this.value === key
+    },
     onItemClick(item, parentItem) {
       if (item.disabled || (parentItem && parentItem.disabled)) return
       this.$emit('select', item.key)

package/src/components/dropdown/dropdown-menu-items.css

@@ -37,6 +37,11 @@
   background: var(--accent-bg);
 }
 
+.ui-dropdown-items__item--active {
+  background: var(--accent-2);
+  font-weight: var(--paragraph-medium-font-weight);
+}
+
 .ui-dropdown-items__item--disabled {
   opacity: 0.4;
   cursor: not-allowed;

package/src/components/empty/Empty.vue

@@ -5,10 +5,10 @@
         <slot name="media"></slot>
       </div>
       <div v-if="hasTextBlock" class="ui-empty__text">
-        <Typography v-if="hasTitle" variant="paragraph" weight="medium">
+        <Typography v-if="hasTitle" class="ui-empty__title" variant="paragraph-regular" weight="medium">
           <slot name="title">{{ title }}</slot>
         </Typography>
-        <Typography v-if="hasDescription" variant="paragraph-small" weight="regular">
+        <Typography v-if="hasDescription" class="ui-empty__description" variant="paragraph-small" weight="regular">
           <slot name="description">{{ description }}</slot>
         </Typography>
       </div>

package/src/components/select/Select.vue

@@ -91,7 +91,9 @@
           :disabled="opt.disabled"
         />
       </slot>
-      <Empty v-if="showEmpty" description="No data" />
+      <slot v-if="showEmpty" name="empty">
+        <Empty description="No data" />
+      </slot>
     </div>
   </Menu>
 </template>

package/src/components/table/Table.vue

@@ -0,0 +1,310 @@
+<template>
+  <div
+    :class="['ui-table', bordered && 'ui-table--bordered', hasVerticalScroll && 'ui-table--scroll-y']"
+    :style="containerStyle"
+  >
+    <table class="ui-table__table" :style="tableStyle">
+      <colgroup>
+        <col v-if="hasSelection" class="ui-table__col ui-table__col--selection" />
+        <col v-for="col in columns" :key="colKey(col)" :style="colStyle(col)" />
+      </colgroup>
+      <thead class="ui-table__head">
+        <tr
+          :class="['ui-table__row', 'ui-table__row--head', scrollbarWidth > 0 && 'ui-table__row--has-scrollbar']"
+          :style="{ height: toCssSize(headerHeight) }"
+        >
+          <th
+            v-if="hasSelection"
+            class="ui-table__cell ui-table__th ui-table__cell--selection"
+            :style="headCellStyle(0)"
+          >
+            <WkCheckbox :checked="allSelected" :disabled="!rows.length" @change="onToggleAll" />
+          </th>
+          <th
+            v-for="(col, i) in columns"
+            :key="colKey(col)"
+            :class="[
+              'ui-table__cell',
+              'ui-table__th',
+              `ui-table__cell--${alignOf(col)}`,
+              isSortable(col) && 'ui-table__th--sortable'
+            ]"
+            :style="headCellStyle(hasSelection ? i + 1 : i, col)"
+            :tabindex="isSortable(col) ? 0 : undefined"
+            :aria-sort="ariaSort(col)"
+            @click="onHeaderClick(col)"
+            @keydown.enter.prevent="onHeaderClick(col)"
+            @keydown.space.prevent="onHeaderClick(col)"
+          >
+            <span class="ui-table__th-inner">
+              <slot name="headerCell" :column="col">{{ col.title }}</slot>
+              <span
+                v-if="isSortable(col)"
+                :class="['ui-table__sort', sortStateOf(col) ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
+                aria-hidden="true"
+              >
+                <WkiArrowUp v-if="sortStateOf(col) === 'ascend'" :size="16" />
+                <WkiArrowDown v-else-if="sortStateOf(col) === 'descend'" :size="16" />
+                <WkiArrowDownUp v-else :size="16" />
+              </span>
+            </span>
+          </th>
+          <th
+            v-if="scrollbarWidth > 0"
+            class="ui-table__th--scrollbar"
+            :style="{ width: scrollbarWidth + 'px' }"
+            aria-hidden="true"
+          />
+        </tr>
+      </thead>
+      <tbody class="ui-table__body" :style="bodyStyle">
+        <tr v-if="!rows.length" class="ui-table__row ui-table__row--empty">
+          <td class="ui-table__cell ui-table__empty-cell" :colspan="totalColumns">
+            <slot name="emptyText">
+              <WkEmpty :title="emptyText" />
+            </slot>
+          </td>
+        </tr>
+        <tr
+          v-for="(record, index) in rows"
+          v-else
+          :key="getRowKey(record, index)"
+          :class="['ui-table__row', 'ui-table__row--body', isSelected(record, index) && 'ui-table__row--selected']"
+          :style="{ height: toCssSize(rowHeight) }"
+          @click="onRowClick(record, index, $event)"
+        >
+          <td v-if="hasSelection" class="ui-table__cell ui-table__td ui-table__cell--selection">
+            <WkCheckbox :checked="isSelected(record, index)" @change="checked => onToggleRow(record, index, checked)" />
+          </td>
+          <td
+            v-for="col in columns"
+            :key="colKey(col)"
+            :class="[
+              'ui-table__cell',
+              'ui-table__td',
+              `ui-table__cell--${alignOf(col)}`,
+              col.ellipsis && 'ui-table__cell--ellipsis'
+            ]"
+            :style="colStyle(col)"
+          >
+            <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="index">{{
+              cellText(col, record)
+            }}</slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import WkCheckbox from '../checkbox/Checkbox.vue'
+import WkEmpty from '../empty/Empty.vue'
+import WkiArrowUp from '../../icons/ArrowUp.vue'
+import WkiArrowDown from '../../icons/ArrowDown.vue'
+import WkiArrowDownUp from '../../icons/ArrowDownUp.vue'
+import { toCssSize } from '../../utils/common'
+
+function defaultCompare(a, b) {
+  if (a == null && b == null) return 0
+  if (a == null) return -1
+  if (b == null) return 1
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b))
+}
+
+export default {
+  name: 'Table',
+  components: { WkCheckbox, WkEmpty, WkiArrowUp, WkiArrowDown, WkiArrowDownUp },
+  props: {
+    // Column descriptors: { title, dataIndex, key?, width?, align?, sorter?, ellipsis? }
+    columns: { type: Array, default: () => [] },
+    // Row records. Each record should expose a stable key (see rowKey).
+    dataSource: { type: Array, default: () => [] },
+    // How to derive a row's key: a record field name, or a function (record) => key.
+    rowKey: { type: [String, Function], default: 'key' },
+    // Outer border + vertical column dividers.
+    bordered: { type: Boolean, default: false },
+    // Render a leading checkbox column for row selection.
+    rowSelection: { type: Boolean, default: false },
+    // Controlled selection — array of selected row keys.
+    selectedRowKeys: { type: Array, default: () => [] },
+    // Placeholder shown when dataSource is empty.
+    emptyText: { type: String, default: 'No data' },
+    // Fixed scroll viewport: { x, y } as px (number) or any CSS size (string).
+    // x sets the table min-width (horizontal scroll); y caps the body height (vertical scroll + sticky header).
+    scroll: { type: Object, default: null },
+    // Fixed overall height of the table viewport (px number or CSS size). Enables vertical scroll + sticky header.
+    height: { type: [Number, String], default: null },
+    rowHeight: { type: [Number, String], default: 39 },
+    headerHeight: { type: [Number, String], default: 39 }
+  },
+  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change', 'row-click'],
+  data() {
+    return {
+      sortField: null,
+      sortOrder: null,
+      internalSelected: this.selectedRowKeys.slice(),
+      scrollbarWidth: 0,
+      colWidths: [],
+      toCssSize
+    }
+  },
+  computed: {
+    hasSelection() {
+      return !!this.rowSelection
+    },
+    totalColumns() {
+      return this.columns.length + (this.hasSelection ? 1 : 0)
+    },
+    rows() {
+      const data = this.dataSource.slice()
+      if (!this.sortField || !this.sortOrder) return data
+      const col = this.columns.find(c => this.fieldOf(c) === this.sortField)
+      if (!col || !col.sorter) return data
+      const cmp =
+        typeof col.sorter === 'function' ? col.sorter : (a, b) => defaultCompare(a[this.sortField], b[this.sortField])
+      data.sort(cmp)
+      if (this.sortOrder === 'descend') data.reverse()
+      return data
+    },
+    allSelected() {
+      if (!this.rows.length) return false
+      return this.rows.every((record, index) => this.internalSelected.includes(this.getRowKey(record, index)))
+    },
+    hasVerticalScroll() {
+      return this.height != null || !!(this.scroll && this.scroll.y != null)
+    },
+    containerStyle() {
+      const scroll = this.scroll || {}
+      return scroll.x != null ? { overflowX: 'auto' } : {}
+    },
+    bodyStyle() {
+      const scroll = this.scroll || {}
+      if (this.height != null) return { height: toCssSize(this.height) }
+      if (scroll.y != null) return { maxHeight: toCssSize(scroll.y) }
+      return {}
+    },
+    tableStyle() {
+      const scroll = this.scroll || {}
+      return scroll.x != null ? { minWidth: toCssSize(scroll.x) } : {}
+    }
+  },
+  watch: {
+    selectedRowKeys(next) {
+      this.internalSelected = (next || []).slice()
+    }
+  },
+  mounted() {
+    this.$nextTick(this.syncScrollbarGutter)
+  },
+  updated() {
+    this.$nextTick(this.syncScrollbarGutter)
+  },
+  methods: {
+    syncScrollbarGutter() {
+      if (!this.$el) return
+      const body = this.$el.querySelector('.ui-table__body')
+      this.scrollbarWidth = body && this.hasVerticalScroll ? body.offsetWidth - body.clientWidth : 0
+
+      if (this.hasVerticalScroll) {
+        const firstRow = this.$el.querySelector('.ui-table__row--body')
+        if (firstRow) {
+          const cells = Array.from(firstRow.children)
+          const widths = cells.map(c => c.getBoundingClientRect().width)
+          const changed =
+            widths.length !== this.colWidths.length ||
+            widths.some((w, i) => Math.abs(w - (this.colWidths[i] || 0)) > 0.1)
+          if (changed) {
+            this.colWidths = widths
+          }
+        } else if (this.colWidths.length) {
+          this.colWidths = []
+        }
+      } else if (this.colWidths.length) {
+        this.colWidths = []
+      }
+    },
+    headCellStyle(index, col = null) {
+      if (this.hasVerticalScroll && this.colWidths[index] !== undefined) {
+        return { width: `${this.colWidths[index]}px` }
+      }
+      return col ? this.colStyle(col) : {}
+    },
+    fieldOf(col) {
+      return col.dataIndex != null ? col.dataIndex : col.key
+    },
+    colKey(col) {
+      return col.key != null ? col.key : col.dataIndex
+    },
+    colStyle(col) {
+      if (col.width == null) return {}
+      return { width: typeof col.width === 'number' ? `${col.width}px` : col.width }
+    },
+    alignOf(col) {
+      return ['left', 'right', 'center'].includes(col.align) ? col.align : 'left'
+    },
+    cellText(col, record) {
+      const field = this.fieldOf(col)
+      return field != null ? record[field] : ''
+    },
+    isSortable(col) {
+      return !!col.sorter
+    },
+    sortStateOf(col) {
+      return this.sortField === this.fieldOf(col) ? this.sortOrder : null
+    },
+    ariaSort(col) {
+      const state = this.sortStateOf(col)
+      if (state === 'ascend') return 'ascending'
+      if (state === 'descend') return 'descending'
+      return undefined
+    },
+    onHeaderClick(col) {
+      if (!this.isSortable(col)) return
+      const field = this.fieldOf(col)
+      let order
+      if (this.sortField !== field) {
+        order = 'ascend'
+      } else {
+        order = this.sortOrder === 'ascend' ? 'descend' : this.sortOrder === 'descend' ? null : 'ascend'
+      }
+      this.sortField = order ? field : null
+      this.sortOrder = order
+      const payload = { field: this.sortField, order }
+      this.$emit('sort-change', payload)
+      this.$emit('change', { sorter: payload })
+    },
+    getRowKey(record, index) {
+      if (typeof this.rowKey === 'function') return this.rowKey(record)
+      const key = record[this.rowKey]
+      return key != null ? key : index
+    },
+    isSelected(record, index) {
+      return this.internalSelected.includes(this.getRowKey(record, index))
+    },
+    emitSelection() {
+      const keys = this.internalSelected.slice()
+      const selectedRows = this.dataSource.filter((record, index) => keys.includes(this.getRowKey(record, index)))
+      this.$emit('update:selectedRowKeys', keys)
+      this.$emit('selection-change', keys, selectedRows)
+    },
+    onToggleRow(record, index, checked) {
+      const key = this.getRowKey(record, index)
+      const set = this.internalSelected.filter(k => k !== key)
+      if (checked) set.push(key)
+      this.internalSelected = set
+      this.emitSelection()
+    },
+    onToggleAll(checked) {
+      this.internalSelected = checked ? this.rows.map((record, index) => this.getRowKey(record, index)) : []
+      this.emitSelection()
+    },
+    onRowClick(record, index, event) {
+      this.$emit('row-click', record, index, event)
+    }
+  }
+}
+</script>
+
+<style src="./table.css" scoped></style>

package/src/components/table/table.css

@@ -0,0 +1,197 @@
+.ui-table {
+  width: 100%;
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+}
+
+.ui-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.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--selection {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+/* ---------- Header ---------- */
+.ui-table__th {
+  background: var(--secondary-bg);
+  font-weight: var(--paragraph-medium-font-weight);
+  white-space: nowrap;
+}
+
+.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 {
+  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--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;
+}
+
+/* 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: 6px;
+}
+
+.ui-table__body::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.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);
+  box-sizing: border-box;
+}
+
+.ui-table--scroll-y .ui-table__cell--selection {
+  width: 44px;
+}

package/src/components/typography/Typography.vue

@@ -75,8 +75,7 @@ export default {
     },
     color: {
       type: String,
-      default: '',
-      validator: v => COLORS.indexOf(v) !== -1
+      default: ''
     },
     align: {
       type: String,
@@ -95,7 +94,10 @@ export default {
     },
     rootStyle() {
       if (!this.color) return null
-      return { '--ui-typography-color': 'var(--' + this.color + ')' }
+      if (COLORS.includes(this.color)) {
+        return { '--ui-typography-color': 'var(--' + this.color + ')' }
+      }
+      return { '--ui-typography-color': this.color }
     }
   }
 }

package/src/floating/focus-mixin.js

@@ -28,6 +28,11 @@ export default {
         document.contains &&
         document.contains(t)
       ) {
+        // Skip restore if the user has already focused another element (e.g. clicked a different input
+        // while the close animation was running). Only restore when focus fell back to body/html,
+        // which happens when the floating panel itself held focus and then disappeared.
+        const active = document.activeElement
+        if (active && active !== document.body && active !== document.documentElement) return
         t.focus()
       }
     }

package/src/icons/ClippingMask.vue

@@ -0,0 +1,56 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.4203 4.82946C18.1574 4.82946 22.0111 8.68328 22.0112 13.4203C22.0112 18.1574 18.1574 22.0112 13.4203 22.0112C8.68326 22.0111 4.82946 18.1574 4.82946 13.4203C4.82951 8.68331 8.6833 4.82951 13.4203 4.82946ZM15.6194 14.8406C15.6194 15.2707 15.2707 15.6194 14.8406 15.6194H6.74129C7.66689 18.4238 10.3101 20.4535 13.4203 20.4536C17.2986 20.4536 20.4536 17.2986 20.4536 13.4203C20.4535 10.3102 18.4238 7.6669 15.6194 6.74129V14.8406ZM6.5558 11.9183C6.44868 12.4033 6.38705 12.9044 6.38704 13.4203C6.38704 13.6365 6.39852 13.8504 6.41785 14.0618H8.69932L6.5558 11.9183ZM7.93057 9.03147C7.62082 9.41901 7.35486 9.84227 7.13102 10.2911L10.9018 14.0618H12.9609L7.93057 9.03147ZM10.2911 7.13103C9.84223 7.35488 9.41836 7.62013 9.0308 7.92991L14.0618 12.9609V10.9018L10.2911 7.13103ZM13.4203 6.38705C12.9044 6.38706 12.4033 6.44869 11.9183 6.5558L14.0618 8.69933V6.41719C13.8504 6.39786 13.6365 6.38705 13.4203 6.38705Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 12.6415C3.19754 12.6417 3.54637 12.9904 3.54642 13.4203V14.0618H4.28705L4.2924 14.1254C4.32931 14.607 4.40392 15.0769 4.51271 15.535L4.5328 15.6194H2.76763C2.33755 15.6194 1.98883 15.2707 1.98883 14.8406V13.4203C1.98888 12.9903 2.33758 12.6415 2.76763 12.6415Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 9.0904C3.19751 9.09056 3.54632 9.4393 3.54642 9.8692V11.2895C3.54642 11.7195 3.19757 12.0681 2.76763 12.0683C2.33755 12.0683 1.98883 11.7196 1.98883 11.2895V9.8692C1.98893 9.4392 2.33761 9.0904 2.76763 9.0904Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 5.53928C3.19748 5.53944 3.54627 5.88823 3.54642 6.31808V7.73906C3.54626 8.16891 3.19748 8.5177 2.76763 8.51786C2.33764 8.51786 1.98899 8.16901 1.98883 7.73906V6.31808C1.98899 5.88813 2.33764 5.53928 2.76763 5.53928Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.18794 1.98884C4.61793 1.98894 4.96673 2.33762 4.96673 2.76763C4.96658 3.19752 4.61783 3.54632 4.18794 3.54643H3.54642V4.18795C3.54632 4.61784 3.19751 4.96659 2.76763 4.96674C2.33761 4.96674 1.98893 4.61794 1.98883 4.18795V2.76763C1.98883 2.33755 2.33755 1.98884 2.76763 1.98884H4.18794Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.8406 1.98884C15.2707 1.98884 15.6194 2.33755 15.6194 2.76763V4.53281L15.535 4.51272C15.0769 4.40392 14.607 4.32932 14.1254 4.29241L14.0618 4.28705V3.54643H13.4203C12.9904 3.54638 12.6417 3.19755 12.6415 2.76763C12.6415 2.33759 12.9903 1.98889 13.4203 1.98884H14.8406Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.73905 1.98884C8.169 1.989 8.51785 2.33765 8.51785 2.76763C8.51769 3.19748 8.1689 3.54627 7.73905 3.54643H6.31807C5.88822 3.54628 5.53943 3.19749 5.53928 2.76763C5.53928 2.33765 5.88812 1.98899 6.31807 1.98884H7.73905Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.2895 1.98884C11.7196 1.98884 12.0683 2.33755 12.0683 2.76763C12.0681 3.19758 11.7195 3.54643 11.2895 3.54643H9.86919C9.4393 3.54632 9.09055 3.19751 9.09039 2.76763C9.09039 2.33762 9.4392 1.98895 9.86919 1.98884H11.2895Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'GenerateImage',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1736,4 +1736,5 @@ export { default as WkiLayersDown } from './LayersDown.vue'
 export { default as WkiLayersUpToTop } from './LayersUpToTop.vue'
 export { default as WkiLayersDownToBottom } from './LayersDownToBottom.vue'
 export { default as WkiGeneratePrompt } from './GeneratePrompt.vue'
+export { default as WkiClippingMask } from './ClippingMask.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/index.js

@@ -31,6 +31,7 @@ export { default as WkSlider } from './components/slider/Slider.vue'
 export { default as WkSpinner } from './components/spinner/Spinner.vue'
 export { default as WkSwitch } from './components/switch/Switch.vue'
 export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.vue'
+export { default as WkTable } from './components/table/Table.vue'
 export { default as WkTabs } from './components/tabs/Tabs.vue'
 export { default as WkTag } from './components/tag/Tag.vue'
 export { default as WkToggle } from './components/toggle/Toggle.vue'

package/src/utils/common.js

@@ -0,0 +1,4 @@
+export const toCssSize = v => {
+  if (v == null) return undefined
+  return typeof v === 'number' ? `${v}px` : v
+}