webcake-ui-kit 1.2.1 → 1.2.3

package/package.json

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

package/src/components/select/Select.vue

@@ -97,7 +97,15 @@
         />
       </slot>
       <slot v-if="showEmpty" name="empty">
-        <Empty description="No data" />
+        <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>
       </slot>
     </div>
   </Menu>
@@ -138,7 +146,7 @@ export default {
     optionSize: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'md', 'lg'].indexOf(v) !== -1
+      validator: v => ['sm', 'md', 'lg'].indexOf(v) !== -1
     },
     value: {
       type: [String, Array],

package/src/components/select/select.css

@@ -210,11 +210,12 @@
 
 .ui-select__search::placeholder {
   color: var(--muted-fg);
-  font-size: 14px;
+  font-size: inherit;
 }
 
-.ui-select--multiple.ui-select--xs .ui-select__search::placeholder {
-  font-size: 12px;
+.ui-select--xs .ui-select__search::placeholder {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
 }
 
 .ui-select__search--single {
@@ -247,6 +248,13 @@
   border-radius: 3px;
 }
 
-.ui-select__empty {
-  padding: var(--spacing-sm) var(--spacing-xs);
+.ui-select__list ::v-deep .select-empty {
+  height: 100px;
+  width: 100px;
+}
+
+.ui-select__list ::v-deep .select-empty img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }

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/Table.vue

@@ -6,6 +6,9 @@
           <template #bodyCell="slotData">
             <slot name="bodyCell" v-bind="slotData"></slot>
           </template>
+          <template #empty>
+            <slot name="empty"></slot>
+          </template>
         </TableWrapper>
       </TableResizeObserver>
     </TableLoading>
@@ -19,7 +22,6 @@ 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 TableEmpty from './TableEmpty.vue'
 import TableLoading from './TableLoading.vue'
 import TableResizeObserver from './TableResizeObserver.vue'
 
@@ -57,7 +59,8 @@ export default {
     enableFixedLeft: { type: Boolean, default: false },
     rowHeight: { type: Number, default: 36 },
     headerHeight: { type: Number, default: 50 },
-    emptyText: { type: String, default: '' }
+    emptyText: { type: String, default: '' },
+    height: { type: [Number, String], default: 0 }
   },
 
   emits: ['change', 'sort-change', 'select-change'],
@@ -90,7 +93,8 @@ export default {
         size: this.size,
         scroll: this.scroll,
         rowHeight: this.rowHeight,
-        headerHeight: this.headerHeight
+        headerHeight: this.headerHeight,
+        height: this.height
       }
     },
 
@@ -171,6 +175,7 @@ export default {
         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
       }
     },
 

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

@@ -1,5 +1,4 @@
 <script>
-import { getCurrentInstance } from 'vue'
 import { findDOMNode } from '../../utils/common'
 
 export default {
@@ -14,7 +13,6 @@ export default {
         offsetHeight: 0,
         offsetWidth: 0
       },
-      instance: getCurrentInstance(),
       currentElement: null,
       resizeObserver: null
     }

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

@@ -27,6 +27,9 @@
             <template #bodyCell="slotData">
               <slot name="bodyCell" v-bind="slotData"></slot>
             </template>
+            <template #empty>
+              <slot name="empty"></slot>
+            </template>
           </TableBody>
         </table>
       </div>
@@ -41,6 +44,9 @@
           <template #bodyCell="slotData">
             <slot name="bodyCell" v-bind="slotData"></slot>
           </template>
+          <template #empty>
+            <slot name="empty"></slot>
+          </template>
         </TableBody>
       </table>
     </div>
@@ -75,6 +81,10 @@ export default {
       return this.tableContext.layout.scroll
     },
 
+    minHeight: function () {
+      return this.tableContext.layout.height
+    },
+
     isEmpty() {
       return this.tableContext.data.display.length === 0
     },
@@ -135,9 +145,13 @@ export default {
 
     // Case 3 — body scroll container
     bodyHoldStyle: function () {
+      const rowHeight = this.tableContext.layout.headerHeight
+      const deduct = `${this.toCssSize(rowHeight)}`
+
       var style = {
         overflowY: 'auto',
-        maxHeight: this.toCssSize(this.scroll.y)
+        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'

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

@@ -2,10 +2,10 @@
   <table
     class="ui-table-v2__drag-preview"
     aria-hidden="true"
-    :style="{ width: containerWidth ? containerWidth + 'px' : '100%' }"
+    :style="{ width: containerWidth ? containerWidth + 'px' : '100%', tableLayout: 'fixed' }"
   >
     <tbody class="ui-table-v2__body">
-      <tr class="ui-table-v2__row">
+      <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">

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

@@ -9,13 +9,15 @@
     <template v-if="isEmpty">
       <tr class="ui-table-v2__row">
         <td colspan="100">
-          <div class="ui-table-v2__row-empty ui-table-v2__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>
+          <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>
@@ -70,6 +72,11 @@ export default {
   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 () {

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

@@ -20,7 +20,13 @@
       </span>
     </div>
 
-    <slot name="bodyCell" :column="column" :text="record[column.dataIndex]" :record="record">
+    <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>

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

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

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

@@ -36,10 +36,6 @@
   border-bottom: 1px solid var(--border-primary);
 }
 
-.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr:last-child td {
-  border-bottom: none;
-}
-
 .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header > tr > th:not(:last-child),
 .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__body > tr > td:not(:last-child) {
   border-inline-end: 1px solid var(--border-primary);

package/src/components/tabs/Tabs.vue

@@ -14,17 +14,15 @@
       :disabled="tab.disabled || undefined"
       @click="select(tab.value)"
     >
-      <div class="ui-tabs__item-inner">
-        <slot name="label" :tab="tab">
-          <span v-if="tab.icon" class="ui-tabs__icon">
-            <slot name="icon" :tab="tab">
-              <component :is="tab.icon" :size="iconSize[size]" />
-            </slot>
-          </span>
-          <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
-          <span v-if="tab.counter > 0" class="ui-tabs__counter">{{ tab.counter }}</span>
-        </slot>
-      </div>
+      <slot name="label" :tab="tab">
+        <span v-if="tab.icon" class="ui-tabs__icon">
+          <slot name="icon" :tab="tab">
+            <component :is="tab.icon" :size="iconSize[size]" />
+          </slot>
+        </span>
+        <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
+        <span v-if="tab.counter > 0" class="ui-tabs__counter">{{ tab.counter }}</span>
+      </slot>
     </button>
   </div>
 </template>
@@ -41,7 +39,8 @@ export default {
   data() {
     return {
       iconSize: {
-        xs: 14,
+        mini: 14,
+        xs: 16,
         sm: 16,
         md: 16,
         lg: 20
@@ -62,7 +61,7 @@ export default {
       type: String,
       default: 'sm',
       validator: function (v) {
-        return ['xs', 'sm', 'md', 'lg'].includes(v)
+        return ['mini', 'xs', 'sm', 'md', 'lg'].includes(v)
       }
     },
     stretchItems: {

package/src/components/tabs/tabs.css

@@ -7,14 +7,24 @@
   box-sizing: border-box;
 }
 
+.ui-tabs--mini {
+  padding: var(--spacing-3xs);
+  border-radius: var(--rounded-lg);
+}
+
 .ui-tabs--xs {
-  padding: 2px;
+  border-radius: var(--radius);
+}
+
+.ui-tabs--xs,
+.ui-tabs--sm {
+  padding: 3px;
 }
 .ui-tabs--md {
-  padding: 4px;
+  padding: var(--spacing-2xs);
 }
 .ui-tabs--lg {
-  padding: 4px;
+  padding: var(--spacing-2xs);
 }
 
 /* — tab item — */
@@ -35,24 +45,14 @@
   white-space: nowrap;
   user-select: none;
   outline: none;
-  box-sizing: border-box;
   flex-shrink: 0;
-  transition: color 0.1s;
+  font-weight: 500;
 }
 
 .ui-tabs__item--stretch {
   flex: 1;
 }
 
-.ui-tabs__item-inner {
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 var(--spacing-xs);
-}
-
 .ui-tabs__item:hover:not(.ui-tabs__item--active):not(.ui-tabs__item--disabled) {
   color: var(--primary-fg);
 }
@@ -78,51 +78,66 @@
 }
 
 /* — sizes — */
-.ui-tabs--xs .ui-tabs__item {
+.ui-tabs--mini .ui-tabs__item {
   height: 20px;
-  padding: 0 6px;
+  min-width: 20px;
+  gap: var(--spacing-2xs);
+  padding: 0 var(--spacing-6);
+  border-radius: var(--rounded-md);
+}
+
+.ui-tabs--xs .ui-tabs__item {
+  height: 22px;
+  min-width: 29px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  gap: 6px;
+  border-radius: var(--rounded-lg);
+}
+
+.ui-tabs--mini .ui-tabs__item,
+.ui-tabs--xs .ui-tabs__item {
   font-size: var(--paragraph-mini-font-size);
-  line-height: var(--paragraph-mini-line-height);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--paragraph-mini-line-height); /* 133.333% */
+  letter-spacing: var(--paragraph-mini-letter-spacing, 0);
 }
 
 .ui-tabs--md .ui-tabs__item {
-  height: 28px;
+  min-width: 32px;
+  padding: var(--spacing-2xs) var(--spacing-9);
+  gap: var(--spacing-xs);
+}
+
+.ui-tabs--sm .ui-tabs__item {
+  min-width: 29px;
+  height: 26px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  gap: 6px;
 }
 
 .ui-tabs--lg .ui-tabs__item {
-  height: 32px;
-  padding: 0 var(--spacing-10);
+  padding: var(--spacing-5p5) var(--spacing-10);
+  gap: var(--spacing-xs);
+}
+
+.ui-tabs--sm .ui-tabs__item,
+.ui-tabs--md .ui-tabs__item,
+.ui-tabs--lg .ui-tabs__item {
+  font-size: var(--paragraph-small-font-size, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--paragraph-small-line-height, 20px); /* 142.857% */
+  letter-spacing: var(--paragraph-small-letter-spacing, 0);
+  border-radius: var(--radius);
 }
 
-/* — icon + label elements — */
+/* Icons */
 .ui-tabs__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
   flex-shrink: 0;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.ui-tabs--lg .ui-tabs__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.ui-tabs--sm .ui-tabs__icon,
-.ui-tabs--md .ui-tabs__icon {
-  width: 16px;
-  height: 16px;
-}
-
-.ui-tabs--xs .ui-tabs__icon {
-  width: 14px;
-  height: 14px;
 }
 
 .ui-tabs__label {

package/src/icons/index.js

@@ -1773,5 +1773,6 @@ export { default as WkiSkewHeight } from './SkewHeight.vue'
 export { default as WkiSkewWidth } from './SkewWidth.vue'
 export { default as WkiStrokeLine } from './StrokeLine.vue'
 export { default as WkiTopline } from './Topline.vue'
+export { default as WkiLettersSpacing } from './LettersSpacing.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/.omc/state/agent-replay-645326b7-372b-463d-ab45-0adaafe31a51.jsonl

@@ -1,2 +0,0 @@
-{"t":0,"agent":"ae435b9","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae345ba","agent_type":"unknown","event":"agent_stop","success":true}

package/src/styles/.omc/state/subagent-tracking.json

@@ -1,7 +0,0 @@
-{
-  "agents": [],
-  "total_spawned": 0,
-  "total_completed": 0,
-  "total_failed": 0,
-  "last_updated": "2026-05-12T04:07:51.819Z"
-}