webcake-ui-kit 1.1.6 → 1.1.8

package/package.json

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

package/src/components/input/input.css

@@ -14,7 +14,7 @@
 
 /* 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);
@@ -23,7 +23,7 @@
 }
 
 .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);
@@ -32,7 +32,7 @@
 }
 
 .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);
@@ -41,7 +41,7 @@
 }
 
 .ui-input--size-xs {
-  min-height: 28px;
+  height: 28px;
   gap: var(--spacing-2xs);
   padding: var(--spacing-6);
   font-size: var(--paragraph-mini-font-size);

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);
@@ -112,7 +112,7 @@
 
 /* — 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);
 }
@@ -124,7 +124,7 @@
 /* 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);
 }
@@ -134,7 +134,7 @@
 }
 
 .ui-select--xs {
-  min-height: 28px;
+  height: 28px;
   padding: var(--spacing-2xs) var(--spacing-6);
   gap: var(--spacing-2xs);
   border-radius: var(--rounded-lg);

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) {
+      let val = value
+      if (!this.allowDeselect && val == this.effectiveValue) return
+      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;