webcake-ui-kit 1.1.14 → 1.1.16

package/package.json

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

package/src/components/dialog/Dialog.vue

@@ -94,6 +94,7 @@
 
 <script>
 import { acquire, release } from '../../floating/portal-root.js'
+import { bumpTo } from '../../floating/layer-manager.js'
 import Button from '../button/Button.vue'
 import WkiMinus from '../../icons/Minus.vue'
 import WkiUnfoldVertical from '../../icons/UnfoldVertical.vue'
@@ -257,6 +258,7 @@ export default {
     },
     onOpen() {
       this.hasOpened = true
+      bumpTo(this.zIndex)
       this.lockBody()
       if (typeof document !== 'undefined') {
         this._prevFocus = document.activeElement

package/src/components/empty/Empty.vue

@@ -5,12 +5,12 @@
         <slot name="media"></slot>
       </div>
       <div v-if="hasTextBlock" class="ui-empty__text">
-        <p v-if="hasTitle" class="ui-empty__title">
+        <Typography v-if="hasTitle" variant="paragraph" weight="medium">
           <slot name="title">{{ title }}</slot>
-        </p>
-        <p v-if="hasDescription" class="ui-empty__description">
+        </Typography>
+        <Typography v-if="hasDescription" variant="paragraph-small" weight="regular">
           <slot name="description">{{ description }}</slot>
-        </p>
+        </Typography>
       </div>
       <div v-if="hasFooter" class="ui-empty__footer">
         <slot></slot>
@@ -20,8 +20,11 @@
 </template>
 
 <script>
+import Typography from '../typography/Typography.vue'
+
 export default {
   name: 'Empty',
+  components: { Typography },
   props: {
     variant: {
       type: String,

package/src/components/empty/empty.css

@@ -49,26 +49,6 @@
   width: 100%;
 }
 
-.ui-empty__title {
-  margin: 0;
-  font-family: var(--font-family-body);
-  font-size: var(--paragraph-regular-font-size);
-  line-height: var(--paragraph-regular-line-height);
-  letter-spacing: var(--paragraph-regular-letter-spacing);
-  font-weight: var(--paragraph-medium-font-weight);
-  color: var(--primary-fg);
-}
-
-.ui-empty__description {
-  margin: 0;
-  font-family: var(--font-family-body);
-  font-size: var(--paragraph-small-font-size);
-  line-height: var(--paragraph-small-line-height);
-  letter-spacing: var(--paragraph-small-letter-spacing);
-  font-weight: var(--paragraph-font-weight);
-  color: var(--muted-fg);
-}
-
 /* Footer slot — stacks action group(s) below the text block.
    Consumer composes button rows / link rows freely; gap matches the
    outer content stack so a single child OR multiple children line up. */

package/src/components/select/Select.vue

@@ -56,6 +56,9 @@
               @click.stop="openIfClosed"
               @keydown.stop="onSearchKeydown"
             />
+            <span v-else-if="!selectedItems.length" class="ui-select__value ui-select__value--placeholder">{{
+              placeholder
+            }}</span>
           </span>
           <input
             v-else-if="isSearchable"
@@ -88,6 +91,7 @@
           :disabled="opt.disabled"
         />
       </slot>
+      <Empty v-if="showEmpty" description="No data" />
     </div>
   </Menu>
 </template>
@@ -98,11 +102,12 @@ 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 },
+  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag, Empty },
 
   provide() {
     return { select: this }
@@ -180,7 +185,8 @@ export default {
       isOpen: false,
       labelCache: {},
       filterText: '',
-      tagOptions: []
+      tagOptions: [],
+      slotOptionVisible: {}
     }
   },
 
@@ -243,6 +249,15 @@ export default {
         return { value: v, label: opt ? opt.label : self.labelCache[v] || v }
       })
     },
+    showEmpty() {
+      if (this.normalizedOptions.length > 0 && this.filteredOptions.length === 0) return true
+      if (this.filterText) {
+        var vals = Object.keys(this.slotOptionVisible)
+        if (vals.length > 0 && vals.every(v => !this.slotOptionVisible[v])) return true
+      }
+      if (this.normalizedOptions.length === 0 && Object.keys(this.slotOptionVisible).length === 0) return true
+      return false
+    },
     hasIconSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
     },
@@ -287,6 +302,7 @@ export default {
     onSearchKeydown(e) {
       if (e.key === 'Enter') {
         e.preventDefault()
+        if (e.isComposing) return
         if (this.mode === 'tags' && this.filterText.trim()) {
           const text = this.filterText.trim()
           const existing = this.normalizedOptions.find(function (o) {
@@ -364,6 +380,14 @@ export default {
     registerOption(value, label) {
       this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
     },
+    setSlotOptionVisible(value, visible) {
+      this.slotOptionVisible = Object.assign({}, this.slotOptionVisible, { [value]: visible })
+    },
+    removeSlotOption(value) {
+      var next = Object.assign({}, this.slotOptionVisible)
+      delete next[value]
+      this.slotOptionVisible = next
+    },
     _slotNodes() {
       // Vue 3: $slots.default is a function; Vue 2: it's an array
       return typeof this.$slots.default === 'function' ? this.$slots.default() : this.$slots.default || []

package/src/components/select/select.css

@@ -204,6 +204,7 @@
   margin: 0;
   min-width: 60px;
   flex: 1;
+  font-size: 12px;
 }
 
 .ui-select__search::placeholder {
@@ -228,7 +229,6 @@
   flex-direction: column;
   overflow-y: auto;
   padding: var(--spacing-2xs);
-  scrollbar-width: thin;
   gap: var(--spacing-3xs);
 }
 
@@ -240,3 +240,7 @@
   background: var(--border-primary);
   border-radius: 3px;
 }
+
+.ui-select__empty {
+  padding: var(--spacing-sm) var(--spacing-xs);
+}

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="!isHidden"
     class="ui-select-option"
     :class="[
       size === 'large' ? 'ui-select-option--large' : null,
@@ -12,14 +13,22 @@
     :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
   >
-    <slot>{{ label || value }}</slot>
+    <span class="ui-select-option--label">
+      <slot>{{ label || value }}</slot>
+    </span>
+    <WkiCheck v-if="isSelected" :size="16" color="var(--muted-fg)" />
   </div>
 </template>
 
 <script>
+import { WkiCheck } from '../../icons'
 export default {
   name: 'SelectOption',
 
+  components: {
+    WkiCheck
+  },
+
   inject: {
     select: { default: null }
   },
@@ -55,7 +64,35 @@ export default {
 
   emits: [],
 
+  mounted() {
+    this._registerLabel()
+    if (this.select) this.select.setSlotOptionVisible(this.value, !this.isHidden)
+  },
+
+  updated() {
+    this._registerLabel()
+  },
+
+  beforeUnmount() {
+    if (this.select) this.select.removeSlotOption(this.value)
+  },
+
+  watch: {
+    isHidden(val) {
+      if (this.select) this.select.setSlotOptionVisible(this.value, !val)
+    }
+  },
+
   computed: {
+    isHidden() {
+      if (!this.select || !this.select.filterText) return false
+      var q = this.select.filterText.toLowerCase()
+      var label = (this.select.labelCache && this.select.labelCache[this.value]) || this.label || String(this.value)
+      if (typeof this.select.filterOption === 'function') {
+        return !this.select.filterOption(this.select.filterText, { label: label, value: this.value })
+      }
+      return label.toLowerCase().indexOf(q) === -1
+    },
     isSelected() {
       if (!this.select) return false
       var val = this.select.effectiveValue
@@ -70,6 +107,13 @@ export default {
   },
 
   methods: {
+    _registerLabel() {
+      if (!this.select) return
+      var labelEl = this.$el && this.$el.querySelector('.ui-select-option--label')
+      var slotText = labelEl ? labelEl.textContent.trim() : ''
+      var labelText = slotText || this.label || String(this.value)
+      this.select.registerOption(this.value, labelText)
+    },
     handleClick() {
       if (this.isDisabled) return
       if (this.select && typeof this.select.select === 'function') {

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

@@ -58,3 +58,11 @@
   background: transparent;
   box-shadow: 0 0 0 3px var(--ring);
 }
+
+.ui-select-option--label {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/components/sidebar-item/SidebarItem.vue

@@ -8,7 +8,8 @@
       'ui-sidebar-item--level-2': level === 2,
       'ui-sidebar-item--has-children': hasChildren,
       'ui-sidebar-item--expanded': hasChildren && expanded,
-      'ui-sidebar-item--collapsed': collapsed
+      'ui-sidebar-item--collapsed': collapsed,
+      'ui-sidebar-item--icon-only': isIconOnly
     }"
     :tabindex="disabled ? -1 : 0"
     :aria-current="active ? 'page' : undefined"
@@ -19,7 +20,7 @@
     <span v-if="hasIconSlot" class="ui-sidebar-item__icon" aria-hidden="true">
       <slot name="icon" />
     </span>
-    <span class="ui-sidebar-item__label">
+    <span class="ui-sidebar-item__label" v-if="hasDefaultSlot || label">
       <slot>{{ label }}</slot>
     </span>
     <span v-if="badge" class="ui-sidebar-item__badge">{{ badge }}</span>
@@ -96,6 +97,12 @@ export default {
     },
     hasIconRightSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon-right']) || this.$slots['icon-right'])
+    },
+    hasDefaultSlot() {
+      return !!this.$slots['default']
+    },
+    isIconOnly() {
+      return !this.label && !this.hasDefaultSlot && this.hasIconSlot
     }
   },
 

package/src/components/sidebar-item/sidebar_item.css

@@ -53,6 +53,19 @@
   font-size: 15px;
 }
 
+.ui-sidebar-item--icon-only {
+  width: 32px;
+  height: 32px;
+  padding: var(--spacing-2xs);
+  justify-content: center;
+}
+
+.ui-sidebar-item--large.ui-sidebar-item--icon-only {
+  width: 36px;
+  height: 36px;
+  padding: var(--spacing-xs);
+}
+
 /* Level 2 — nested, indented */
 .ui-sidebar-item--level-2 {
   padding-left: var(--spacing-lg);

package/src/components/tooltip/Tooltip.vue

@@ -32,6 +32,7 @@
 
 <script>
 import { acquire, release } from '../../floating/portal-root.js'
+import { nextZIndex } from '../../floating/layer-manager.js'
 
 const GAP = 4
 
@@ -137,7 +138,7 @@ export default {
         position: 'fixed',
         top: top + 'px',
         left: left + 'px',
-        zIndex: 1050
+        zIndex: nextZIndex()
       }
     },
     cleanup() {

package/src/floating/layer-manager.js

@@ -16,6 +16,14 @@ export function currentZIndex() {
   return _counter
 }
 
+// Ensure subsequent nextZIndex() calls return values above `n`.
+// Call this when a layer (e.g. Dialog) opens with an explicit z-index so that
+// floating panels inside it always land on top.
+export function bumpTo(n) {
+  const v = Number(n)
+  if (!isNaN(v) && v > _counter) _counter = v
+}
+
 // Test helper — reset between specs.
 export function _reset() {
   _counter = BASE

package/src/icons/GeneratePrompt.vue

@@ -0,0 +1,42 @@
+<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
+        d="M11.0127 3.1592C11.4354 3.15928 11.7711 3.47887 11.7715 3.88088C11.7712 4.28295 11.4354 4.60347 11.0127 4.60354H4.5332C3.97403 4.60386 3.51894 5.03648 3.51855 5.56838V16.4229C3.51882 16.6786 3.6263 16.9247 3.81641 17.1055C4.00655 17.2861 4.26448 17.3876 4.5332 17.3877H7.19434C7.61726 17.3878 7.9541 17.709 7.9541 18.1114V19.9746L12.1533 17.4932C12.2732 17.4233 12.4153 17.3878 12.5586 17.3877H18.5967C19.0339 17.3877 19.4044 17.1224 19.5469 16.753H19.626V13.6319C19.626 13.2296 19.9619 12.9093 20.3848 12.9092C20.8077 12.9092 21.1445 13.2295 21.1445 13.6319V16.4229C21.144 17.7476 20.0146 18.833 18.6104 18.833H12.8008L12.7168 18.8819L7.61328 21.8936C7.49342 21.9636 7.35241 21.9999 7.20898 22H7.2041C7.10381 22.0011 7.00318 21.9839 6.91016 21.9483C6.81741 21.9126 6.73238 21.8598 6.66113 21.793C6.58975 21.7259 6.53287 21.6438 6.49414 21.5557C6.45572 21.4679 6.43559 21.3735 6.43555 21.2783V18.833H4.5332C3.14078 18.8327 2.00053 17.7583 2 16.4229V5.56838C2.00039 4.24476 3.14176 3.15952 4.5332 3.1592H11.0127Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.9209 10.3262C7.38785 10.3264 7.76657 10.6998 7.7666 11.1602C7.7666 11.6206 7.38787 11.994 6.9209 11.9942C6.45378 11.9942 6.0752 11.6207 6.0752 11.1602C6.07523 10.6997 6.4538 10.3262 6.9209 10.3262Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.9951 10.3262C12.4622 10.3262 12.8408 10.6997 12.8408 11.1602C12.8408 11.6207 12.4622 11.9942 11.9951 11.9942C11.5281 11.994 11.1494 11.6206 11.1494 11.1602C11.1495 10.6998 11.5281 10.3263 11.9951 10.3262Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2246 10.3262C16.6916 10.3263 17.0703 10.6998 17.0703 11.1602C17.0703 11.6206 16.6916 11.994 16.2246 11.9942C15.7575 11.9942 15.3789 11.6207 15.3789 11.1602C15.3789 10.6997 15.7575 10.3262 16.2246 10.3262Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.2188 2.41116C18.4376 1.86298 19.2538 1.86299 19.4727 2.41116L20.2197 4.27444C20.2891 4.44691 20.428 4.57858 20.6094 4.64456L22.5674 5.35549C23.1437 5.56362 23.1437 6.33976 22.5674 6.54788L20.6094 7.25881C20.4279 7.32481 20.2891 7.45732 20.2197 7.62991L19.4727 9.49221C19.2539 10.0405 18.4376 10.0405 18.2188 9.49221L17.4717 7.62991C17.4023 7.45732 17.2634 7.32481 17.082 7.25881L15.124 6.54788C14.5478 6.33976 14.5478 5.56362 15.124 5.35549L17.082 4.64456C17.2633 4.57858 17.4023 4.44694 17.4717 4.27444L18.2188 2.41116Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'GeneratePrompt',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1735,4 +1735,5 @@ export { default as WkiLayersUp } from './LayersUp.vue'
 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'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---