webcake-ui-kit 1.1.5 → 1.1.7

package/package.json

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

package/src/components/dialog/dialog.css

@@ -173,7 +173,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   background: var(--accent-0);
 }
 

package/src/components/input/input.css

@@ -14,31 +14,34 @@
 
 /* Size — paddings, gaps, heights, typography. Inner field inherits typography. */
 .ui-input--size-md {
-  min-height: 36px;
+  height: 36px;
   gap: var(--spacing-xs);
   padding: var(--spacing-7p5) var(--spacing-sm);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-lg {
-  min-height: 40px;
+  height: 40px;
   gap: var(--spacing-sm);
   padding: var(--spacing-9p5) var(--spacing-md);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-sm {
-  min-height: 32px;
+  height: 32px;
   gap: var(--spacing-6);
   padding: var(--spacing-5p5) var(--spacing-xs);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-xs {
-  min-height: 28px;
+  height: 28px;
   gap: var(--spacing-2xs);
   padding: var(--spacing-6);
   font-size: var(--paragraph-mini-font-size);
@@ -50,9 +53,11 @@
 .ui-input--round-default {
   border-radius: var(--rounded-xl);
 }
+
 .ui-input--size-xs.ui-input--round-default {
   border-radius: var(--radius);
 }
+
 .ui-input--round-round {
   border-radius: var(--rounded-full);
 }
@@ -68,6 +73,7 @@
   border-color: var(--destructive-border);
   box-shadow: none;
 }
+
 .ui-input--error:focus-within {
   border-color: var(--destructive-border);
   box-shadow: 0 0 0 3px var(--focus-ring-error);
@@ -77,6 +83,7 @@
 .ui-input--disabled {
   opacity: 0.5;
 }
+
 .ui-input--disabled:focus-within {
   border-color: var(--border-primary);
   box-shadow: var(--shadow-xs);
@@ -96,10 +103,12 @@
   font: inherit;
   letter-spacing: inherit;
 }
+
 .ui-input__field::placeholder {
   color: var(--muted-fg);
   opacity: 1;
 }
+
 .ui-input__field:disabled {
   cursor: not-allowed;
 }
@@ -114,6 +123,7 @@
   height: 20px;
   color: var(--muted-fg);
 }
+
 .ui-input--size-xs .ui-input__decoration {
   width: 16px;
   height: 16px;

package/src/components/select/Select.vue

@@ -89,6 +89,9 @@ export default {
       type: String,
       default: ''
     },
+    modelValue: {
+      default: null
+    },
     options: {
       type: Array,
       default: () => []
@@ -119,7 +122,7 @@ export default {
     }
   },
 
-  emits: ['change'],
+  emits: ['change', 'update:modelValue'],
 
   data() {
     return {
@@ -129,6 +132,9 @@ export default {
   },
 
   computed: {
+    effectiveValue() {
+      return this.modelValue !== null ? this.modelValue : this.value
+    },
     normalizedOptions() {
       return this.options.map(opt =>
         typeof opt === 'string'
@@ -137,10 +143,10 @@ export default {
       )
     },
     selectedLabel() {
-      if (!this.value) return ''
-      if (this.labelCache[this.value]) return this.labelCache[this.value]
-      const opt = this.normalizedOptions.find(o => o.value === this.value)
-      return opt ? opt.label : this.value
+      if (!this.effectiveValue) return ''
+      if (this.labelCache[this.effectiveValue]) return this.labelCache[this.effectiveValue]
+      const opt = this.normalizedOptions.find(o => o.value === this.effectiveValue)
+      return opt ? opt.label : this.effectiveValue
     },
     hasIconSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
@@ -159,6 +165,7 @@ export default {
     },
     select(val) {
       this.$emit('change', val)
+      this.$emit('update:modelValue', val)
       this.isOpen = false
     },
     registerOption(value, label) {

package/src/components/select/select.css

@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  min-height: 36px;
+  height: 36px;
   width: 100%;
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
   border: 1px solid var(--border-primary);
@@ -102,7 +102,7 @@
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--muted-fg);
+  color: var(--primary-fg);
   transition: transform 0.2s ease;
 }
 
@@ -112,10 +112,11 @@
 
 /* — sizes — */
 .ui-select--lg {
-  min-height: 40px;
+  height: 40px;
   padding: var(--spacing-10) var(--spacing-xs) var(--spacing-10) var(--spacing-md);
   gap: var(--spacing-sm);
 }
+
 .ui-select--lg .ui-select__left {
   gap: var(--spacing-sm);
 }
@@ -123,23 +124,26 @@
 /* default size is the base — no extra rules needed */
 
 .ui-select--sm {
-  min-height: 32px;
+  height: 32px;
   padding: var(--spacing-6) var(--spacing-xs);
   gap: var(--spacing-6);
 }
+
 .ui-select--sm .ui-select__left {
   gap: var(--spacing-6);
 }
 
 .ui-select--xs {
-  min-height: 28px;
+  height: 28px;
   padding: var(--spacing-2xs) var(--spacing-6);
   gap: var(--spacing-2xs);
   border-radius: var(--rounded-lg);
 }
+
 .ui-select--xs .ui-select__left {
   gap: var(--spacing-2xs);
 }
+
 .ui-select--xs .ui-select__value,
 .ui-select--xs .ui-select__prepend {
   font-size: var(--paragraph-mini-font-size);
@@ -160,6 +164,7 @@
 .ui-select__list::-webkit-scrollbar {
   width: 6px;
 }
+
 .ui-select__list::-webkit-scrollbar-thumb {
   background: var(--border-primary);
   border-radius: 3px;

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

@@ -57,7 +57,7 @@ export default {
 
   computed: {
     isSelected() {
-      return !!(this.select && this.select.value !== undefined && this.select.value === this.value)
+      return !!(this.select && this.select.effectiveValue !== undefined && this.select.effectiveValue === this.value)
     },
     isDisabled() {
       return this.disabled || !!(this.select && this.select.disabled)

package/src/components/slider/Slider.vue

@@ -61,8 +61,15 @@
 <script>
 export default {
   name: 'Slider',
+
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+
   props: {
-    value: { type: Number, default: 50 },
+    value: { type: [Number, Array], default: 50 },
+    modelValue: { default: null },
     rangeValue: {
       type: Array,
       default: function () {
@@ -82,12 +89,17 @@ export default {
     },
     disabled: { type: Boolean, default: false }
   },
-  emits: ['change', 'input'],
+
+  emits: ['change', 'input', 'update:modelValue'],
+
   data: function () {
+    var mv = this.modelValue !== null ? this.modelValue : this.value
+    var singleInit = typeof mv === 'number' ? mv : 50
+    var rangeInit = Array.isArray(mv) ? mv : Array.isArray(this.rangeValue) ? this.rangeValue : [25, 75]
     return {
-      localValue: this.value,
-      localRangeMin: Array.isArray(this.rangeValue) ? this.rangeValue[0] : 25,
-      localRangeMax: Array.isArray(this.rangeValue) ? this.rangeValue[1] : 75,
+      localValue: singleInit,
+      localRangeMin: rangeInit[0],
+      localRangeMax: rangeInit[1],
       dragging: null,
       boundMouseMove: null,
       boundMouseUp: null,
@@ -95,9 +107,21 @@ export default {
       boundTouchEnd: null
     }
   },
+
   watch: {
     value: function (v) {
-      this.localValue = v
+      if (typeof v === 'number') this.localValue = v
+      else if (Array.isArray(v)) {
+        this.localRangeMin = v[0]
+        this.localRangeMax = v[1]
+      }
+    },
+    modelValue: function (v) {
+      if (typeof v === 'number') this.localValue = v
+      else if (Array.isArray(v)) {
+        this.localRangeMin = v[0]
+        this.localRangeMax = v[1]
+      }
     },
     rangeValue: function (v) {
       if (Array.isArray(v)) {
@@ -191,19 +215,23 @@ export default {
       document.removeEventListener('touchend', this.boundTouchEnd)
     },
     applyValue: function (which, val) {
+      var arr
       if (which === 'single') {
         this.localValue = val
         this.$emit('input', val)
+        this.$emit('update:modelValue', val)
         this.$emit('change', val)
-      } else if (which === 'min') {
-        var newMin = Math.min(val, this.localRangeMax - this.step)
-        this.localRangeMin = this.snap(newMin)
-        this.$emit('change', [this.localRangeMin, this.localRangeMax])
-      } else if (which === 'max') {
-        var newMax = Math.max(val, this.localRangeMin + this.step)
-        this.localRangeMax = this.snap(newMax)
-        this.$emit('change', [this.localRangeMin, this.localRangeMax])
+        return
+      }
+      if (which === 'min') {
+        this.localRangeMin = this.snap(Math.min(val, this.localRangeMax - this.step))
+      } else {
+        this.localRangeMax = this.snap(Math.max(val, this.localRangeMin + this.step))
       }
+      arr = [this.localRangeMin, this.localRangeMax]
+      this.$emit('input', arr)
+      this.$emit('update:modelValue', arr)
+      this.$emit('change', arr)
     },
     onTrackClick: function (event) {
       if (this.disabled) return

package/src/components/tabs/Tabs.vue

@@ -6,9 +6,10 @@
       type="button"
       class="ui-tabs__item"
       :class="{
-        'ui-tabs__item--active': tab.value === value,
+        'ui-tabs__item--active': tab.value === effectiveValue,
         'ui-tabs__item--disabled': tab.disabled,
-        'ui-tabs__item--stretch': stretchItems
+        'ui-tabs__item--stretch': stretchItems,
+        'ui-tabs__item--allow-deselect': allowDeselect
       }"
       :disabled="tab.disabled || undefined"
       @click="select(tab.value)"
@@ -31,8 +32,15 @@
 <script>
 export default {
   name: 'Tabs',
+
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+
   props: {
     value: { type: [String, Number], default: null },
+    modelValue: { default: null },
     tabs: {
       type: Array,
       default: function () {
@@ -49,13 +57,29 @@ export default {
     stretchItems: {
       type: Boolean,
       default: () => false
+    },
+    allowDeselect: {
+      type: Boolean,
+      default: () => false
     }
   },
-  emits: ['input', 'change'],
+  emits: ['input', 'change', 'update:modelValue'],
+
+  computed: {
+    effectiveValue: function () {
+      return this.modelValue !== null ? this.modelValue : this.value
+    }
+  },
+
   methods: {
-    select: function (val) {
-      if (val === this.value) return
+    select: function (value) {
+      if (!this.allowDeselect && val == this.effectiveValue) return
+      let val = value
+      if (this.allowDeselect && val == this.effectiveValue) {
+        val = undefined
+      }
       this.$emit('input', val)
+      this.$emit('update:modelValue', val)
       this.$emit('change', val)
     }
   }

package/src/components/tabs/tabs.css

@@ -67,6 +67,9 @@
   box-shadow: var(--shadow-sm);
   cursor: default;
 }
+.ui-tabs__item--active.ui-tabs__item--allow-deselect {
+  cursor: pointer;
+}
 
 .ui-tabs__item--disabled {
   opacity: 0.4;

package/src/icons/GenerateImage.vue

@@ -0,0 +1,36 @@
+<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="M21.4838 5.04818L20.0696 4.50868C19.9385 4.45858 19.8383 4.35839 19.7882 4.22737L19.2488 2.81311C19.0908 2.39693 18.5012 2.39693 18.3431 2.81311L17.8036 4.22737C17.7535 4.35839 17.6533 4.45858 17.5224 4.50868L16.108 5.04818C15.6919 5.20617 15.6919 5.79577 16.108 5.95376L17.5224 6.49326C17.6533 6.54336 17.7535 6.64356 17.8036 6.77457L18.3431 8.18884C18.5012 8.60502 19.0908 8.60502 19.2488 8.18884L19.7882 6.77457C19.8383 6.64356 19.9385 6.54336 20.0696 6.49326L21.4838 5.95376C21.9 5.79577 21.9 5.20617 21.4838 5.04818Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.45 9.46744L13.1405 9.73221C13.2437 9.77092 13.3276 9.85489 13.3663 9.95821L13.6309 10.6491C13.76 10.9849 14.2375 10.9849 14.3634 10.6491L14.6279 9.95821C14.6666 9.85489 14.7505 9.77092 14.8538 9.73221L15.5443 9.46744C15.8798 9.33829 15.8798 8.86048 15.5443 8.73453L14.8538 8.46977C14.7505 8.43103 14.6666 8.34708 14.6279 8.24376L14.3634 7.55281C14.2343 7.21703 13.7567 7.21703 13.6309 7.55281L13.3663 8.24376C13.3276 8.34708 13.2437 8.43103 13.1405 8.46977L12.45 8.73453C12.1112 8.86365 12.1112 9.34153 12.45 9.46744Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.45 3.20184C12.8642 3.20184 13.2 3.53763 13.2 3.95184C13.2 4.36605 12.8642 4.70184 12.45 4.70184H3.75001L3.75 15.6039L7.56328 11.7895C7.8445 11.5084 8.22626 11.3512 8.62383 11.3512C9.02143 11.3512 9.40311 11.5084 9.68438 11.7895L13.8094 15.9145L15.6844 14.0395C15.8235 13.9003 15.9889 13.7902 16.1707 13.7148C16.3526 13.6395 16.548 13.6 16.7449 13.6C16.9419 13.6 17.1371 13.6394 17.3191 13.7148C17.501 13.7902 17.6663 13.9003 17.8055 14.0395L20.25 16.4828V13.15C20.25 12.7358 20.5858 12.4 21 12.4C21.4142 12.4 21.75 12.7358 21.75 13.15V20.35C21.75 20.7478 21.5919 21.1293 21.3105 21.4106C21.0292 21.6919 20.6478 21.85 20.25 21.85H3.75C3.35218 21.85 2.97076 21.6919 2.68945 21.4106C2.40815 21.1293 2.25 20.7478 2.25 20.35L2.25001 4.70184C2.25001 4.30402 2.40816 3.9226 2.68947 3.64129C2.97077 3.35999 3.35219 3.20184 3.75001 3.20184H12.45ZM3.75 17.725V20.35H16.125L8.625 12.85L3.75 17.725ZM14.8711 16.975L18.2461 20.35H20.25V18.6039L16.7461 15.1L14.8711 16.975Z"
+        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

@@ -1730,4 +1730,5 @@ export { default as WkiZoomIn } from './ZoomIn.vue'
 export { default as WkiZoomOut } from './ZoomOut.vue'
 export { default as WkiClickButton } from './ClickButton.vue'
 export { default as WkiSectionBuilder } from './SectionBuilder.vue'
+export { default as WkiGenerateImage } from './GenerateImage.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---