webcake-ui-kit 1.2.18 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.2.18",
+  "version": "1.3.0",
   "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

@@ -68,7 +68,8 @@ export default {
     },
     error: { type: Boolean, default: false },
     centered: { type: Boolean, default: false },
-    draggable: { type: Boolean, default: false }
+    draggable: { type: Boolean, default: false },
+    shiftStep: { type: Number, default: 10 }
   },
   emits: ['input', 'update:modelValue', 'change', 'focus', 'blur', 'pressEnter'],
   data() {
@@ -77,13 +78,18 @@ export default {
       inputText: '',
       dragActive: false,
       dragStartX: 0,
-      dragStartValue: 0
+      dragStartValue: 0,
+      dragShiftHeld: false,
     }
   },
   computed: {
     currentValue() {
       return this.modelValue !== undefined ? this.modelValue : this.value
     },
+    effectiveStep() {
+      if (this.shiftStep !== null && this.dragShiftHeld) return this.shiftStep
+      return this.step
+    },
     hasPrefix() {
       return !!((this.$scopedSlots && this.$scopedSlots['prefix']) || this.$slots['prefix'])
     },
@@ -195,6 +201,7 @@ export default {
       this.dragStartValue =
         this.currentValue !== null && this.currentValue !== undefined ? Number(this.currentValue) : 0
       this.dragActive = false
+      this.dragShiftHeld = e.shiftKey
       document.addEventListener('mousemove', this.onDragMove)
       document.addEventListener('mouseup', this.onDragEnd)
     },
@@ -206,20 +213,23 @@ export default {
         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.dragShiftHeld = e.shiftKey
+      const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.effectiveStep))
       this.$emit('input', newVal)
       this.$emit('update:modelValue', newVal)
+      this.$emit('change', 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))
+        const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.effectiveStep))
         this.$emit('change', newVal)
         document.body.style.cursor = ''
       }
       this.dragActive = false
+      this.dragShiftHeld = false
     },
     onKeydown(e) {
       if (e.key === 'ArrowUp') {

package/src/components/select/Select.vue

@@ -2,7 +2,7 @@
   <Menu
     :open="isOpen"
     :disabled="disabled || loading"
-    placement="bottom-start"
+    :placement="placement"
     :offset="4"
     :anchor-width="dropdownMatchSelectWidth"
     :close-on-select="false"
@@ -220,7 +220,11 @@ export default {
     overlayClassName: { type: [String, Array, Object], default: null },
     overlayStyle: { type: [Object, Array], default: null },
     dropdownMatchSelectWidth: { type: Boolean, default: true },
-    overlayWidth: { type: [String, Number], default: null }
+    overlayWidth: { type: [String, Number], default: null },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    }
   },
 
   emits: ['change', 'update:modelValue'],

package/src/components/table/TableWrapper.vue

@@ -124,7 +124,7 @@ export default {
         style = { overflow: 'auto hidden' }
       }
 
-      if (this.minHeight > 0) {
+      if (this.minHeight) {
         style.minHeight = `${this.toCssSize(this.minHeight)}`
       }
       return style

package/src/components/table/body/TableBody.vue

@@ -8,7 +8,7 @@
 
     <template v-if="isEmpty">
       <tr class="ui-table__row">
-        <td colspan="100">
+        <td colspan="100" :style="{ borderBottom: 'none' }">
           <div class="ui-table__row-empty ui-table__empty" :style="emptyStyle">
             <slot name="empty">
               <div class="wrapper-img">
@@ -41,6 +41,7 @@
 import Sortable from 'sortablejs'
 import TableRow from './TableRow.vue'
 import MeasureCell from './MeasureCell.vue'
+import { toCssSize } from '../../../utils/common'
 
 export default {
   name: 'TableBody',
@@ -73,10 +74,14 @@ export default {
     emptyText() {
       return this.tableContext.data.emptyText || 'Không có dữ liệu'
     },
+
+    minHeight: function () {
+      return this.tableContext.layout.height
+    },
+
     emptyStyle() {
-      const { height, rowHeight } = this.tableContext.layout
-      if (!height) return {}
-      return { minHeight: `calc(${height}px - ${rowHeight}px)` }
+      const { rowHeight } = this.tableContext.layout
+      return { minHeight: `calc(${toCssSize(this.minHeight)} - ${toCssSize(rowHeight)})` }
     }
   },
   beforeUnmount: function () {

package/src/components/textarea/Textarea.vue

@@ -25,7 +25,7 @@
       @focus="onFocus"
       @blur="onBlur"
     ></textarea>
-    <span v-if="showCounter" class="ui-textarea__counter"
+    <span v-if="showCount" class="ui-textarea__counter"
       >{{ charCount }}<template v-if="maxLength !== undefined"> / {{ maxLength }}</template></span
     >
   </span>