webcake-ui-kit 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -39,6 +39,7 @@
     "./WkInput": "./src/components/input/Input.vue",
     "./WkInputCounter": "./src/components/input-counter/InputCounter.vue",
     "./WkInputNumber": "./src/components/input-number/InputNumber.vue",
+    "./WkItem": "./src/components/item/Item.vue",
     "./WkMenu": "./src/components/menu/Menu.vue",
     "./WkMenuItem": "./src/components/menuitem/MenuItem.vue",
     "./WkPagination": "./src/components/pagination/Pagination.vue",

package/src/components/dropdown/Dropdown.vue

@@ -2,7 +2,7 @@
   <Menu
     :open="isOpen"
     :placement="placement"
-    :offset="4"
+    :offset="offset"
     :close-on-esc="closeOnEsc"
     :disabled="disabled"
     :persistent="persistent"
@@ -12,12 +12,13 @@
     :width="width"
     :overlay-class-name="overlayClassName"
     :overlay-style="overlayStyle"
+    :anchor-width="dropdownMatchSelectWidth"
   >
     <template #trigger="{ triggerRef }">
       <span
         :ref="triggerRef"
         class="ui-dropdown__anchor"
-        @click="triggerHasClick && handleClick()"
+        @click.stop="triggerHasClick && handleClick()"
         @mouseenter="triggerHasHover && handleMouseEnter()"
         @mouseleave="triggerHasHover && handleMouseLeave()"
       >
@@ -100,7 +101,9 @@ export default {
     overlayClassName: { type: [String, Array, Object], default: null },
     overlayStyle: { type: [Object, Array], default: null },
     showChecked: { type: Boolean, default: false },
-    persistent: { type: Boolean, default: false }
+    persistent: { type: Boolean, default: false },
+    dropdownMatchSelectWidth: { type: Boolean, default: false },
+    offset: { type: Number, default: 4 }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
   data() {

package/src/components/empty/Empty.vue

@@ -8,7 +8,13 @@
         <Typography v-if="hasTitle" class="ui-empty__title" variant="paragraph-regular" weight="medium">
           <slot name="title">{{ title }}</slot>
         </Typography>
-        <Typography v-if="hasDescription" class="ui-empty__description" variant="paragraph-small" weight="regular">
+        <Typography
+          v-if="hasDescription"
+          class="ui-empty__description"
+          variant="paragraph-small"
+          weight="regular"
+          color="muted-fg"
+        >
           <slot name="description">{{ description }}</slot>
         </Typography>
       </div>

package/src/components/input/Input.vue

@@ -9,7 +9,7 @@
       $attrs.class
     ]"
   >
-    <span v-if="hasPrefix" class="ui-input__decoration ui-input__prefix" aria-hidden="true">
+    <span v-if="hasPrefix()" class="ui-input__decoration ui-input__prefix" aria-hidden="true">
       <slot name="prefix"></slot>
     </span>
     <input
@@ -28,7 +28,7 @@
       @blur="onBlur"
       @keydown="onKeydown"
     />
-    <span v-if="hasSuffix" class="ui-input__decoration ui-input__suffix" aria-hidden="true">
+    <span v-if="hasSuffix()" class="ui-input__decoration ui-input__suffix" aria-hidden="true">
       <slot name="suffix"></slot>
     </span>
   </span>
@@ -63,15 +63,15 @@ export default {
   computed: {
     currentValue() {
       return this.modelValue !== undefined ? this.modelValue : this.value
-    },
-    hasPrefix() {
-      return !!this.$slots['prefix']
-    },
-    hasSuffix() {
-      return !!this.$slots['suffix']
     }
   },
   methods: {
+    hasPrefix() {
+      return !!((this.$scopedSlots && this.$scopedSlots['prefix']) || this.$slots['prefix'])
+    },
+    hasSuffix() {
+      return !!((this.$scopedSlots && this.$scopedSlots['suffix']) || this.$slots['suffix'])
+    },
     focus() {
       if (this.$refs.input) this.$refs.input.focus()
     },

package/src/components/item/Item.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="ui-item"
+    :class="[
+      `ui-item--variant-${variant}`,
+      asChild && `ui-item--as-child`,
+      active && 'ui-item--active',
+      `ui-item--size-${size}`,
+      `ui-item--layout-${layout}`
+    ]"
+    :style="{ width: typeof width == 'string' ? width : `${width}px` }"
+  >
+    <div class="ui-item--prefix">
+      <slot name="prefix"></slot>
+    </div>
+    <slot>
+      <div class="ui-item-label-wrapper">
+        <div class="ui-item--label wk-paragraph-small wk-weight-medium">
+          {{ label }}
+        </div>
+        <div v-if="description && layout == 'vertical'" class="ui-item--description wk-paragraph-mini">
+          {{ description }}
+        </div>
+      </div>
+    </slot>
+    <div class="ui-item--suffix">
+      <slot name="suffix"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WkItem',
+  props: {
+    label: String,
+    variant: {
+      type: String,
+      validator: v => ['default', 'muted', 'outline'].includes(v),
+      default: 'default'
+    },
+    asChild: Boolean,
+    active: Boolean,
+    size: {
+      type: String,
+      validator: v => ['md', 'sm'].includes(v),
+      default: 'md'
+    },
+    layout: {
+      type: String,
+      validator: v => ['horizontal', 'vertical'].includes(v),
+      default: 'horizontal'
+    },
+    description: String,
+    width: {
+      type: [String, Number]
+    }
+  },
+  emits: [],
+  data() {
+    return {
+      // Add component state
+    }
+  },
+  computed: {
+    // Add computed properties
+  },
+  methods: {
+    // Add methods
+  }
+}
+</script>
+
+<style src="./item.css" scoped></style>

package/src/components/item/item.css

@@ -0,0 +1,54 @@
+.ui-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border: 1px solid transparent;
+  border-radius: var(--rounded-xl);
+  overflow: hidden;
+  min-height: 52px;
+  cursor: pointer;
+}
+.ui-item.ui-item--as-child.ui-item--variant-outline {
+  border: 1px solid var(--border-primary);
+  background: #ffffff;
+}
+.ui-item.ui-item--as-child.ui-item--variant-muted {
+  background: var(--muted-bg);
+}
+.ui-item.ui-item--as-child:hover,
+.ui-item.ui-item--as-child.ui-item--variant-outline:hover {
+  background: var(--primary-hover);
+}
+
+.ui-item.ui-item--as-child.ui-item--active {
+  border: 1px solid var(--border-brand);
+}
+.ui-item.ui-item--size-sm {
+  min-height: 44px;
+}
+
+.ui-item.ui-item--layout-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.ui-item-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+
+.ui-item--label {
+  color: var(--primary-fg);
+}
+.ui-item--description {
+  color: var(--muted-fg);
+}
+
+.ui-item--prefix,
+.ui-item--suffix {
+}

package/src/components/select/Select.vue

@@ -35,7 +35,7 @@
         @keydown.space.prevent="toggle()"
       >
         <span class="ui-select__left">
-          <span v-if="hasIconSlot" class="ui-select__icon">
+          <span v-if="hasIconSlot()" class="ui-select__icon">
             <slot name="icon" />
           </span>
           <span v-if="prepend" class="ui-select__prepend">{{ prepend }}</span>
@@ -87,7 +87,7 @@
       </div>
     </template>
     <div class="ui-select__list" :style="listStyle">
-      <div v-if="hasContentHeader">
+      <div v-if="hasContentHeader()">
         <slot name="contentHeader"></slot>
       </div>
       <slot>
@@ -97,6 +97,10 @@
           :value="opt.value"
           :label="opt.label"
           :disabled="opt.disabled"
+          :children="opt.children"
+          :placement="opt.placement"
+          :width="opt.width"
+          :offset="opt.offset"
         />
       </slot>
       <slot v-if="showEmpty" name="empty">
@@ -110,7 +114,7 @@
           </template>
         </Empty>
       </slot>
-      <div v-if="hasContentFooter">
+      <div v-if="hasContentFooter()">
         <slot name="contentFooter"></slot>
       </div>
     </div>
@@ -159,7 +163,7 @@ export default {
       default: false
     },
     value: {
-      type: [String, Array],
+      type: [String, Number, Array],
       default: null
     },
     modelValue: {
@@ -255,8 +259,16 @@ export default {
       var base = this.mode === 'tags' ? this.options.concat(this.tagOptions) : this.options
       return base.map(function (opt) {
         return typeof opt === 'string'
-          ? { label: opt, value: opt, disabled: false }
-          : { label: opt.label || opt.value, value: opt.value, disabled: !!opt.disabled }
+          ? { label: opt, value: opt, disabled: false, children: [], placement: 'right-start' }
+          : {
+              label: opt.label || opt.value,
+              value: opt.value,
+              disabled: !!opt.disabled,
+              children: opt.children || [],
+              placement: opt.placement || 'right-start',
+              width: opt.width || null,
+              offset: opt.offset || null
+            }
       })
     },
     filteredOptions() {
@@ -273,7 +285,17 @@ export default {
       if (this.isMultiMode) return ''
       if (!this.effectiveValue) return ''
       if (this.labelCache[this.effectiveValue]) return this.labelCache[this.effectiveValue]
-      const opt = this.normalizedOptions.find(o => o.value === this.effectiveValue)
+      const findOpt = (opts, val) => {
+        for (let i = 0; i < opts.length; i++) {
+          if (opts[i].value === val) return opts[i]
+          if (opts[i].children && opts[i].children.length > 0) {
+            const found = findOpt(opts[i].children, val)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      const opt = findOpt(this.normalizedOptions, this.effectiveValue)
       if (opt) return opt.label
       return this._findLabelInSlot(this.effectiveValue) || this.effectiveValue
     },
@@ -281,10 +303,18 @@ export default {
       if (!this.isMultiMode) return []
       var values = Array.isArray(this.effectiveValue) ? this.effectiveValue : []
       var self = this
+      const findOpt = (opts, val) => {
+        for (let i = 0; i < opts.length; i++) {
+          if (opts[i].value === val) return opts[i]
+          if (opts[i].children && opts[i].children.length > 0) {
+            const found = findOpt(opts[i].children, val)
+            if (found) return found
+          }
+        }
+        return null
+      }
       return values.map(function (v) {
-        var opt = self.normalizedOptions.find(function (o) {
-          return o.value === v
-        })
+        var opt = findOpt(self.normalizedOptions, v)
         return { value: v, label: opt ? opt.label : self.labelCache[v] || v }
       })
     },
@@ -297,15 +327,6 @@ export default {
       if (this.normalizedOptions.length === 0 && Object.keys(this.slotOptionVisible).length === 0) return true
       return false
     },
-    hasContentFooter() {
-      return !!((this.$scopedSlots && this.$scopedSlots['contentFooter']) || this.$slots['contentFooter'])
-    },
-    hasContentHeader() {
-      return !!((this.$scopedSlots && this.$scopedSlots['contentHeader']) || this.$slots['contentHeader'])
-    },
-    hasIconSlot() {
-      return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
-    },
     listStyle() {
       if (typeof this.listHeight === 'number') return { maxHeight: this.listHeight + 'px' }
       return { maxHeight: this.listHeight }
@@ -356,6 +377,15 @@ export default {
   },
 
   methods: {
+    hasContentFooter() {
+      return !!((this.$scopedSlots && this.$scopedSlots['contentFooter']) || this.$slots['contentFooter'])
+    },
+    hasContentHeader() {
+      return !!((this.$scopedSlots && this.$scopedSlots['contentHeader']) || this.$slots['contentHeader'])
+    },
+    hasIconSlot() {
+      return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
+    },
     onMenuChange(v) {
       this.isOpen = v
     },

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

@@ -15,26 +15,54 @@
     :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
   >
-    <span v-if="hasPrefix" 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="hasSuffix" class="ui-select-option__suffix">
+    <span v-if="hasSuffix()" class="ui-select-option__suffix">
       <slot name="suffix" />
     </span>
-    <WkiCheck v-if="isSelected && (isMultiMode || isShowChecked)" :size="16" color="var(--muted-fg)" />
+    <WkiCheck
+      v-if="isSelected && (isMultiMode || isShowChecked) && children.length === 0"
+      :size="16"
+      color="var(--muted-fg)"
+    />
+
+    <Dropdown v-if="children.length > 0" :placement="placement" :width="width || 280" :offset="offset">
+      <div class="expand-trigger">
+        <WkiChevronRight :size="16" />
+      </div>
+      <template #overlay>
+        <div class="ui-select__list">
+          <SelectOption
+            v-for="opt in children"
+            :key="opt.value"
+            :value="opt.value"
+            :label="opt.label"
+            :disabled="opt.disabled"
+            :children="opt.children"
+            :placement="opt.placement"
+            :width="opt.width"
+            :offset="opt.offset"
+          />
+        </div>
+      </template>
+    </Dropdown>
   </div>
 </template>
 
 <script>
-import { WkiCheck } from '../../icons'
+import { WkiCheck, WkiChevronRight } from '../../icons'
+import Dropdown from '../dropdown/Dropdown.vue'
 export default {
   name: 'SelectOption',
 
   components: {
-    WkiCheck
+    WkiCheck,
+    Dropdown,
+    WkiChevronRight
   },
 
   inject: {
@@ -43,7 +71,7 @@ export default {
 
   props: {
     value: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     label: {
@@ -67,6 +95,22 @@ export default {
       validator: function (v) {
         return ['default', 'destructive'].indexOf(v) !== -1
       }
+    },
+    children: {
+      type: Array,
+      default: () => []
+    },
+    placement: {
+      type: String,
+      default: 'right-start'
+    },
+    width: {
+      type: [String, Number],
+      default: null
+    },
+    offset: {
+      type: [String, Number],
+      default: null
     }
   },
 
@@ -100,12 +144,6 @@ 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()
@@ -118,10 +156,27 @@ export default {
     isSelected() {
       if (!this.select) return false
       var val = this.select.effectiveValue
-      if (this.select.isMultiMode) {
-        return Array.isArray(val) && val.indexOf(this.value) !== -1
+
+      const isMatch = v => {
+        if (this.select.isMultiMode) {
+          return Array.isArray(val) && val.indexOf(v) !== -1
+        }
+        return val !== undefined && val === v
+      }
+
+      if (isMatch(this.value)) return true
+      if (this.select.isMultiMode) return false
+
+      const checkChildren = children => {
+        if (!children || !children.length) return false
+        for (let i = 0; i < children.length; i++) {
+          if (isMatch(children[i].value)) return true
+          if (checkChildren(children[i].children)) return true
+        }
+        return false
       }
-      return val !== undefined && val === this.value
+
+      return checkChildren(this.children)
     },
     isDisabled() {
       return this.disabled || !!(this.select && this.select.disabled)
@@ -135,6 +190,12 @@ export default {
   },
 
   methods: {
+    hasPrefix() {
+      return !!((this.$scopedSlots && this.$scopedSlots.prefix) || this.$slots.prefix)
+    },
+    hasSuffix() {
+      return !!((this.$scopedSlots && this.$scopedSlots.suffix) || this.$slots.suffix)
+    },
     _registerLabel() {
       if (!this.select) return
       var labelEl = this.$el && this.$el.querySelector('.ui-select-option--label')

package/src/components/select-option/select_option.css

@@ -98,3 +98,65 @@
   font-size: var(--paragraph-mini-font-size);
   line-height: var(--paragraph-mini-line-height);
 }
+
+.ui-select-option ::v-deep .ui-dropdown__anchor {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  --submenu-offset: calc(var(--spacing-2xs) + 1px);
+}
+
+.ui-select-option--sm ::v-deep .ui-dropdown__anchor {
+  margin-top: calc(var(--spacing-2xs) * -1 - var(--submenu-offset));
+  margin-right: calc(var(--spacing-xs) * -1);
+  margin-bottom: calc(var(--spacing-2xs) * -1 + var(--submenu-offset));
+  padding: 0 var(--spacing-xs);
+}
+
+.ui-select-option--md ::v-deep .ui-dropdown__anchor {
+  margin-top: calc(var(--spacing-5p5) * -1 - var(--submenu-offset));
+  margin-right: calc(var(--spacing-xs) * -1);
+  margin-bottom: calc(var(--spacing-5p5) * -1 + var(--submenu-offset));
+  padding: 0 var(--spacing-xs);
+}
+
+.ui-select-option--lg ::v-deep .ui-dropdown__anchor {
+  margin-top: calc(var(--spacing-7p5) * -1 - var(--submenu-offset));
+  margin-right: calc(var(--spacing-sm) * -1);
+  margin-bottom: calc(var(--spacing-7p5) * -1 + var(--submenu-offset));
+  padding: 0 var(--spacing-sm);
+}
+
+.expand-trigger {
+  display: flex;
+  align-items: center;
+  transform: translateY(var(--submenu-offset));
+}
+
+.ui-select__list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--spacing-2xs);
+  gap: var(--spacing-3xs);
+}
+
+.ui-select__list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ui-select__list::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.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/table-v2/Table.vue

@@ -57,8 +57,8 @@ export default {
     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 },
+    rowHeight: { type: Number, default: 50 },
+    headerHeight: { type: Number, default: 36 },
     emptyText: { type: String, default: '' },
     height: { type: [Number, String], default: 0 }
   },
@@ -176,6 +176,8 @@ export default {
         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
       }
     },
 
@@ -186,7 +188,6 @@ export default {
         ;((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)
       }
     },
 

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

@@ -119,7 +119,15 @@ export default {
 
     // Case 1 & 2 — wrapper có overflow-x khi scroll.x
     contentStyle: function () {
-      return this.hasScrollX ? { overflow: 'auto hidden' } : {}
+      let style = {}
+      if (this.hasScrollX) {
+        style = { overflow: 'auto hidden' }
+      }
+
+      if (this.minHeight > 0) {
+        style.minHeight = `${this.toCssSize(this.minHeight)}`
+      }
+      return style
     },
 
     // Case 1 & 2 — table style
@@ -170,7 +178,6 @@ export default {
       this.isPingedRight = scrollLeft < scrollWidth - clientWidth
     },
     updateScrollState() {
-      console.log('update')
       if (this.$refs.bodyRef) {
         const { width } = getTargetScrollBarSize(this.$refs.bodyRef)
         this.tableContext.layout.scrollBarWidth = width == 'auto' ? '0px' : width
@@ -187,9 +194,6 @@ export default {
       this.$nextTick(() => {
         this.updateScrollState()
       })
-    },
-    hasScrollY(val) {
-      console.log('hasScrollY', val)
     }
   },
 

package/src/floating/click-outside-mixin.js

@@ -21,12 +21,24 @@ export default {
       if (!myFloat || typeof document === 'undefined') return false
       const portalRoot = document.querySelector('[data-wk-portal-root]')
       if (!portalRoot || !portalRoot.contains(target)) return false
-      const floatingEls = portalRoot.querySelectorAll('[id^="wk-menu-"]')
-      for (let i = 0; i < floatingEls.length; i++) {
-        const fp = floatingEls[i]
-        if (!fp.contains(target)) continue
+
+      const getFloatingPanel = el => {
+        let curr = el
+        while (curr && curr !== portalRoot) {
+          if (curr.id && curr.id.startsWith('wk-menu-')) return curr
+          curr = curr.parentElement
+        }
+        return null
+      }
+
+      let currTarget = target
+      while (currTarget) {
+        const fp = getFloatingPanel(currTarget)
+        if (!fp) return false
         const trig = fp._wkTrigger
-        if (trig && myFloat.contains(trig)) return true
+        if (!trig) return false
+        if (myFloat.contains(trig)) return true
+        currTarget = trig
       }
       return false
     },

package/src/index.js

@@ -20,6 +20,7 @@ export { default as WkField } from './components/field/Field.vue'
 export { default as WkHoverCard } from './components/hover-card/HoverCard.vue'
 export { default as WkInput } from './components/input/Input.vue'
 export { default as WkInputCounter } from './components/input-counter/InputCounter.vue'
+export { default as WkItem } from './components/item/Item.vue'
 export { default as WkInputNumber } from './components/input-number/InputNumber.vue'
 export { default as WkMenu } from './components/menu/Menu.vue'
 export { default as WkMenuItem } from './components/menuitem/MenuItem.vue'