webcake-ui-kit 1.1.30 → 1.1.32

package/package.json

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

package/src/components/input-number/InputNumber.vue

@@ -8,6 +8,8 @@
       disabled && 'ui-input-number--disabled',
       $attrs.class
     ]"
+    :style="draggable && !focused && !disabled ? { cursor: 'ew-resize' } : {}"
+    @mousedown="onDragStart"
   >
     <span v-if="hasPrefix" class="ui-input-number__decoration ui-input-number__prefix" aria-hidden="true">
       <slot name="prefix"></slot>
@@ -17,13 +19,17 @@
       class="ui-input-number__field"
       type="text"
       inputmode="decimal"
-      :style="centered ? { textAlign: 'center' } : {}"
+      :style="{
+        ...(centered ? { textAlign: 'center' } : {}),
+        cursor: draggable && !focused && !disabled ? 'ew-resize' : ''
+      }"
       :value="displayValue"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       :name="name"
       v-bind="{ ...$attrs, class: undefined }"
+      v-on="nativeListeners"
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
@@ -61,13 +67,17 @@ export default {
       validator: v => ['default', 'round'].includes(v)
     },
     error: { type: Boolean, default: false },
-    centered: { type: Boolean, default: false }
+    centered: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false }
   },
   emits: ['input', 'update:modelValue', 'change', 'focus', 'blur', 'pressEnter'],
   data() {
     return {
       focused: false,
-      inputText: ''
+      inputText: '',
+      dragActive: false,
+      dragStartX: 0,
+      dragStartValue: 0
     }
   },
   computed: {
@@ -86,6 +96,11 @@ export default {
       const dot = s.indexOf('.')
       return dot >= 0 ? s.length - dot - 1 : 0
     },
+    nativeListeners() {
+      const excluded = new Set(['input', 'change', 'focus', 'blur', 'update:modelValue', 'pressEnter'])
+      const listeners = this.$listeners || {}
+      return Object.fromEntries(Object.entries(listeners).filter(([k]) => !excluded.has(k)))
+    },
     displayValue() {
       if (this.focused) return this.inputText
       const v = this.currentValue
@@ -174,6 +189,38 @@ export default {
       this.commitInput()
       this.$emit('blur', this.currentValue, e)
     },
+    onDragStart(e) {
+      if (!this.draggable || this.disabled || this.readonly) return
+      this.dragStartX = e.clientX
+      this.dragStartValue =
+        this.currentValue !== null && this.currentValue !== undefined ? Number(this.currentValue) : 0
+      this.dragActive = false
+      document.addEventListener('mousemove', this.onDragMove)
+      document.addEventListener('mouseup', this.onDragEnd)
+    },
+    onDragMove(e) {
+      const delta = e.clientX - this.dragStartX
+      if (!this.dragActive && Math.abs(delta) < 3) return
+      if (!this.dragActive) {
+        this.dragActive = true
+        document.body.style.cursor = 'ew-resize'
+        if (this.$refs.input) this.$refs.input.blur()
+      }
+      const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.step))
+      this.$emit('input', newVal)
+      this.$emit('update:modelValue', newVal)
+    },
+    onDragEnd(e) {
+      document.removeEventListener('mousemove', this.onDragMove)
+      document.removeEventListener('mouseup', this.onDragEnd)
+      if (this.dragActive) {
+        const delta = e.clientX - this.dragStartX
+        const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.step))
+        this.$emit('change', newVal)
+        document.body.style.cursor = ''
+      }
+      this.dragActive = false
+    },
     onKeydown(e) {
       if (e.key === 'ArrowUp') {
         e.preventDefault()
@@ -196,6 +243,11 @@ export default {
         this.$emit('pressEnter', this.currentValue, e)
       }
     }
+  },
+  beforeUnmount() {
+    document.removeEventListener('mousemove', this.onDragMove)
+    document.removeEventListener('mouseup', this.onDragEnd)
+    if (this.dragActive) document.body.style.cursor = ''
   }
 }
 </script>

package/src/icons/FrameCorners.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="M5.82716 13.3562C6.05636 13.3562 6.27659 13.4467 6.43866 13.6085C6.60073 13.7704 6.69136 13.9903 6.69136 14.2192V16.3151H8.79012C9.01932 16.3151 9.23955 16.4056 9.40162 16.5674C9.56369 16.7293 9.65432 16.9492 9.65432 17.1781C9.65432 17.407 9.56369 17.6269 9.40162 17.7887C9.23955 17.9506 9.01932 18.0411 8.79012 18.0411H5.82716C5.59796 18.0411 5.37773 17.9506 5.21566 17.7887C5.0536 17.6269 4.96296 17.407 4.96296 17.1781V14.2192C4.96296 13.9903 5.0536 13.7704 5.21566 13.6085C5.37773 13.4467 5.59796 13.3562 5.82716 13.3562Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.1728 5.9589C18.402 5.9589 18.6223 6.04941 18.7843 6.21126C18.9464 6.37311 19.037 6.59303 19.037 6.82192V9.78082C19.037 10.0097 18.9464 10.2296 18.7843 10.3915C18.6223 10.5533 18.402 10.6438 18.1728 10.6438C17.9436 10.6438 17.7234 10.5533 17.5613 10.3915C17.3993 10.2296 17.3086 10.0097 17.3086 9.78082V7.68493H15.2099C14.9807 7.68493 14.7604 7.59442 14.5984 7.43258C14.4363 7.27073 14.3457 7.0508 14.3457 6.82192C14.3457 6.59303 14.4363 6.37311 14.5984 6.21126C14.7604 6.04941 14.9807 5.9589 15.2099 5.9589H18.1728Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.3951 3C20.8207 3 21.2293 3.1685 21.5303 3.46907C21.8313 3.76964 22 4.17767 22 4.60274V19.3973C22 19.8223 21.8313 20.2304 21.5303 20.5309C21.2293 20.8315 20.8207 21 20.3951 21H3.60494C3.17928 21 2.7707 20.8315 2.46971 20.5309C2.16873 20.2304 2 19.8223 2 19.3973V4.60274C2 4.17767 2.16873 3.76964 2.46971 3.46907C2.7707 3.1685 3.17928 3 3.60494 3H20.3951ZM3.7284 19.274H20.2716V4.72603H3.7284V19.274Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'FrameCorners',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1741,5 +1741,6 @@ export { default as WkiSlash2 } from './Slash2.vue'
 export { default as WkiSquareNumber } from './SquareNumber.vue'
 export { default as WkiRows3Add } from './Rows3Add.vue'
 export { default as WkiColumns3Add } from './Columns3Add.vue'
+export { default as WkiFrameCorners } from './FrameCorners.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---