webcake-ui-kit 1.2.0 → 1.2.2

package/src/components/input-counter/InputCounter.vue

@@ -0,0 +1,250 @@
+<template>
+  <span
+    :class="[
+      'ui-input-counter',
+      `ui-input-counter--size-${size}`,
+      `ui-input-counter--round-${roundness}`,
+      error && 'ui-input-counter--error',
+      disabled && 'ui-input-counter--disabled',
+      $attrs.class
+    ]"
+  >
+    <span class="ui-input-counter__main">
+      <span v-if="hasPrefix" class="ui-input-counter__decoration ui-input-counter__prefix" aria-hidden="true">
+        <slot name="prefix"></slot>
+      </span>
+      <input
+        ref="input"
+        class="ui-input-counter__field"
+        type="text"
+        inputmode="decimal"
+        :style="centered ? { textAlign: 'center' } : {}"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :name="name"
+        v-bind="{ ...$attrs, class: undefined }"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      />
+      <span v-if="hasSuffix" class="ui-input-counter__decoration ui-input-counter__suffix" aria-hidden="true">
+        <slot name="suffix"></slot>
+      </span>
+    </span>
+    <span class="ui-input-counter__controls">
+      <button
+        type="button"
+        class="ui-input-counter__btn ui-input-counter__btn--minus"
+        aria-label="Decrease"
+        tabindex="-1"
+        :disabled="!canDecrement"
+        @mousedown.prevent
+        @click="decrement"
+      >
+        <WkiMinus :size="12" />
+      </button>
+      <button
+        type="button"
+        class="ui-input-counter__btn ui-input-counter__btn--add"
+        aria-label="Increase"
+        tabindex="-1"
+        :disabled="!canIncrement"
+        @mousedown.prevent
+        @click="increment"
+      >
+        <WkiPlus :size="12" />
+      </button>
+    </span>
+  </span>
+</template>
+
+<script>
+import { WkiMinus, WkiPlus } from '../../icons'
+
+export default {
+  name: 'InputCounter',
+  inheritAttrs: false,
+  components: {
+    WkiMinus,
+    WkiPlus
+  },
+  props: {
+    value: { default: null },
+    modelValue: { default: undefined },
+    min: { type: Number, default: null },
+    max: { type: Number, default: null },
+    step: { type: Number, default: 1 },
+    precision: { type: Number, default: null },
+    placeholder: { type: String, default: '' },
+    name: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    centered: { type: Boolean, default: false },
+    size: {
+      type: String,
+      default: 'md',
+      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
+    }
+  },
+  emits: ['input', 'update:modelValue', 'change', 'focus', 'blur', 'pressEnter'],
+  data() {
+    return {
+      focused: false,
+      inputText: ''
+    }
+  },
+  computed: {
+    currentValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value
+    },
+    hasPrefix() {
+      return !!((this.$scopedSlots && this.$scopedSlots['prefix']) || this.$slots['prefix'])
+    },
+    hasSuffix() {
+      return !!((this.$scopedSlots && this.$scopedSlots['suffix']) || this.$slots['suffix'])
+    },
+    effectivePrecision() {
+      if (this.precision !== null) return this.precision
+      const s = String(this.step)
+      const dot = s.indexOf('.')
+      return dot >= 0 ? s.length - dot - 1 : 0
+    },
+    numericValue() {
+      const v = this.currentValue
+      if (v === null || v === undefined || v === '') return null
+      const n = Number(v)
+      return isNaN(n) ? null : n
+    },
+    canDecrement() {
+      if (this.disabled || this.readonly) return false
+      if (this.min === null) return true
+      return (this.numericValue === null ? 0 : this.numericValue) > this.min
+    },
+    canIncrement() {
+      if (this.disabled || this.readonly) return false
+      if (this.max === null) return true
+      return (this.numericValue === null ? 0 : this.numericValue) < this.max
+    },
+    displayValue() {
+      if (this.focused) return this.inputText
+      if (this.numericValue === null) return ''
+      return this.numericValue.toFixed(this.effectivePrecision)
+    }
+  },
+  methods: {
+    focus() {
+      if (this.$refs.input) this.$refs.input.focus()
+    },
+    blur() {
+      if (this.$refs.input) this.$refs.input.blur()
+    },
+    toPrecision(num) {
+      return parseFloat(num.toFixed(this.effectivePrecision))
+    },
+    clamp(num) {
+      let v = num
+      if (this.max !== null && v > this.max) v = this.max
+      if (this.min !== null && v < this.min) v = this.min
+      return v
+    },
+    sanitize(raw) {
+      let s = raw.replace(/[^\d.-]/g, '')
+      const hasMinus = s.charAt(0) === '-'
+      s = s.replace(/-/g, '')
+      if (hasMinus) s = '-' + s
+      if (this.effectivePrecision === 0) {
+        s = s.replace(/\./g, '')
+      } else {
+        const firstDot = s.indexOf('.')
+        if (firstDot >= 0) {
+          s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '')
+        }
+      }
+      return s
+    },
+    emitValue(v) {
+      this.$emit('input', v)
+      this.$emit('update:modelValue', v)
+      this.$emit('change', v)
+    },
+    stepBy(direction) {
+      if (this.disabled || this.readonly) return
+      const base = this.numericValue === null ? 0 : this.numericValue
+      const next = this.clamp(this.toPrecision(base + direction * this.step))
+      this.emitValue(next)
+      if (this.focused) this.inputText = String(next)
+    },
+    increment() {
+      this.stepBy(1)
+    },
+    decrement() {
+      this.stepBy(-1)
+    },
+    commitInput() {
+      const raw = this.inputText
+      if (raw === '' || raw === '-') {
+        this.emitValue(null)
+        return
+      }
+      const num = parseFloat(raw)
+      if (!isNaN(num)) {
+        const committed = this.clamp(this.toPrecision(num))
+        this.emitValue(committed)
+        this.inputText = committed.toFixed(this.effectivePrecision)
+      }
+    },
+    onInput(e) {
+      const sanitized = this.sanitize(e.target.value)
+      if (sanitized !== e.target.value) {
+        const pos = Math.max(0, e.target.selectionStart - (e.target.value.length - sanitized.length))
+        e.target.value = sanitized
+        try {
+          e.target.setSelectionRange(pos, pos)
+        } catch (err) {
+          console.error(err)
+        }
+      }
+      this.inputText = sanitized
+      if (sanitized === '' || sanitized === '-') return
+      const num = parseFloat(sanitized)
+      if (!isNaN(num)) {
+        this.$emit('input', this.toPrecision(num))
+        this.$emit('update:modelValue', this.toPrecision(num))
+      }
+    },
+    onFocus(e) {
+      this.focused = true
+      this.inputText = this.numericValue === null ? '' : String(this.numericValue)
+      this.$emit('focus', this.currentValue, e)
+    },
+    onBlur(e) {
+      this.focused = false
+      this.commitInput()
+      this.$emit('blur', this.currentValue, e)
+    },
+    onKeydown(e) {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        this.increment()
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        this.decrement()
+      } else if (e.key === 'Enter') {
+        this.commitInput()
+        this.$emit('pressEnter', this.currentValue, e)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./input-counter.css" scoped></style>

package/src/components/input-counter/input-counter.css

@@ -0,0 +1,209 @@
+/* Shell — mirrors the vetted Input/InputNumber shell so the counter sits
+   consistently alongside the other form controls. */
+.ui-input-counter {
+  display: inline-flex;
+  align-items: center;
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+/* Size — heights, paddings, gaps, typography. Right padding is trimmed vs the
+   plain input because the stepper buttons occupy the trailing edge. */
+.ui-input-counter--size-md {
+  height: 36px;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-7p5) var(--spacing-xs) 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-counter--size-lg {
+  height: 40px;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-9p5) var(--spacing-6) 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-counter--size-sm {
+  height: 32px;
+  gap: var(--spacing-6);
+  padding: var(--spacing-5p5) var(--spacing-6) 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-counter--size-xs {
+  height: 28px;
+  gap: var(--spacing-6);
+  padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
+.ui-input-counter--size-tiny {
+  height: 24px;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
+/* Roundness — Mini uses the smaller default radius per Figma (rounded-xl → radius). */
+.ui-input-counter--round-default {
+  border-radius: var(--rounded-xl);
+}
+
+.ui-input-counter--size-xs.ui-input-counter--round-default {
+  border-radius: var(--radius);
+}
+
+.ui-input-counter--size-tiny.ui-input-counter--round-default {
+  border-radius: var(--rounded-lg);
+}
+
+.ui-input-counter--round-round {
+  border-radius: var(--rounded-full);
+}
+
+/* Focus (interactive) — wrapper highlights when the inner field is focused. */
+.ui-input-counter:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+/* Error (logical) — red border, no base shadow. */
+.ui-input-counter--error {
+  border-color: var(--destructive-border);
+  box-shadow: none;
+}
+
+.ui-input-counter--error:focus-within {
+  border-color: var(--destructive-border);
+  box-shadow: 0 0 0 3px var(--focus-ring-error);
+}
+
+/* Disabled — visual only; buttons + field carry their own disabled state. */
+.ui-input-counter--disabled {
+  opacity: 0.5;
+  background: var(--secondary-bg);
+}
+
+.ui-input-counter--disabled:focus-within {
+  border-color: var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* Left group — prefix + field + suffix, grows to fill available width. */
+.ui-input-counter__main {
+  display: inline-flex;
+  align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
+  gap: var(--spacing-2xs);
+  overflow: hidden;
+}
+
+/* The native input — strips browser chrome and inherits typography from shell. */
+.ui-input-counter__field {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.ui-input-counter__field::-webkit-inner-spin-button,
+.ui-input-counter__field::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.ui-input-counter__field::placeholder {
+  color: var(--muted-fg);
+  opacity: 1;
+}
+
+.ui-input-counter__field:disabled {
+  cursor: not-allowed;
+}
+
+/* Decoration slot wrappers — prepend/append hints, muted like the placeholder. */
+.ui-input-counter__decoration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+}
+
+/* Stepper group — two segmented mini buttons pinned to the trailing edge. */
+.ui-input-counter__controls {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-2xs);
+}
+
+.ui-input-counter__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: var(--input);
+  color: var(--secondary-fg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-lg);
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.ui-input-counter__btn > svg {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+
+.ui-input-counter__btn:hover {
+  background: var(--ghost-hover);
+}
+
+.ui-input-counter__btn:active {
+  background: var(--secondary-bg);
+}
+
+.ui-input-counter__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-input-counter__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/menu/Menu.vue

@@ -65,6 +65,8 @@ export default {
     offset: { type: Number, default: 4 },
     closeOnSelect: { type: Boolean, default: true },
     closeOnEsc: { type: Boolean, default: true },
+    closeOnTab: { type: Boolean, default: true },
+    autoFocus: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     persistent: { type: Boolean, default: false },
     anchorWidth: { type: Boolean, default: false },
@@ -196,7 +198,7 @@ export default {
         this._kmSetFloatEl(float)
         this._pmAttach(this._triggerEl, float)
         this._coAttach()
-        this._fmFocus(float)
+        if (this.autoFocus) this._fmFocus(float)
       })
     },
     handleClose() {
@@ -212,7 +214,7 @@ export default {
       if (this.closeOnEsc) this.closeMenu()
     },
     _kmOnTab() {
-      this.closeMenu()
+      if (this.closeOnTab) this.closeMenu()
     },
     _coOnOutside() {
       if (this.persistent) return

package/src/components/popover/Popover.vue

@@ -0,0 +1,144 @@
+<template>
+  <Menu
+    :open="isOpen"
+    :placement="placement"
+    :offset="offset"
+    :close-on-esc="closeOnEsc"
+    :close-on-tab="false"
+    :disabled="disabled"
+    :persistent="persistent"
+    :anchor-width="anchorWidth"
+    :width="width"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
+    @change="onOpenChange"
+    @open="$emit('open')"
+    @close="$emit('close')"
+  >
+    <template #trigger="{ triggerRef }">
+      <span
+        :ref="triggerRef"
+        class="ui-popover__anchor"
+        @click="triggerHasClick && toggle()"
+        @mouseenter="triggerHasHover && handleMouseEnter()"
+        @mouseleave="triggerHasHover && handleMouseLeave()"
+      >
+        <slot name="trigger" :is-open="isOpen"></slot>
+      </span>
+    </template>
+    <div
+      style="display: contents"
+      @mouseenter="triggerHasHover && handleMouseEnter()"
+      @mouseleave="triggerHasHover && handleMouseLeave()"
+    >
+      <slot :close="close" :is-open="isOpen"></slot>
+    </div>
+  </Menu>
+</template>
+
+<script>
+import Menu from '../menu/Menu.vue'
+
+const PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end'
+]
+
+export default {
+  name: 'Popover',
+  components: { Menu },
+  model: { prop: 'open', event: 'change' },
+  props: {
+    open: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+      validator: v => PLACEMENTS.indexOf(v) !== -1
+    },
+    offset: { type: Number, default: 8 },
+    // 'click', 'hover', or both
+    trigger: {
+      type: Array,
+      default: function () {
+        return ['click']
+      }
+    },
+    closeOnEsc: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    persistent: { type: Boolean, default: false },
+    anchorWidth: { type: Boolean, default: false },
+    width: { type: [String, Number], default: null },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null }
+  },
+  emits: ['change', 'update:modelValue', 'open', 'close'],
+  data() {
+    return {
+      isOpen: this.modelValue !== undefined ? this.modelValue : this.open
+    }
+  },
+  computed: {
+    triggerHasClick() {
+      return this.trigger.indexOf('click') !== -1
+    },
+    triggerHasHover() {
+      return this.trigger.indexOf('hover') !== -1
+    }
+  },
+  watch: {
+    open(v) {
+      if (this.modelValue === undefined) this.isOpen = v
+    },
+    modelValue(v) {
+      if (v !== undefined) this.isOpen = v
+    }
+  },
+  methods: {
+    onOpenChange(v) {
+      this.isOpen = v
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    toggle() {
+      if (this.disabled) return
+      this.onOpenChange(!this.isOpen)
+    },
+    close() {
+      this.onOpenChange(false)
+    },
+    handleMouseEnter() {
+      if (this.disabled) return
+      if (this._hoverTimer) {
+        clearTimeout(this._hoverTimer)
+        this._hoverTimer = null
+      }
+      this.onOpenChange(true)
+    },
+    handleMouseLeave() {
+      this._hoverTimer = setTimeout(() => {
+        this.onOpenChange(false)
+      }, 80)
+    }
+  },
+  beforeUnmount() {
+    if (this._hoverTimer) clearTimeout(this._hoverTimer)
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    if (this._hoverTimer) clearTimeout(this._hoverTimer)
+  }
+}
+</script>
+
+<style src="./popover.css" scoped></style>

package/src/components/popover/popover.css

@@ -0,0 +1,3 @@
+.ui-popover__anchor {
+  display: inline-block;
+}

package/src/components/select/Select.vue

@@ -97,7 +97,15 @@
         />
       </slot>
       <slot v-if="showEmpty" name="empty">
-        <Empty description="No data" />
+        <Empty description="No data">
+          <template #media>
+            <div class="select-empty">
+              <img
+                src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
+              />
+            </div>
+          </template>
+        </Empty>
       </slot>
     </div>
   </Menu>
@@ -138,7 +146,7 @@ export default {
     optionSize: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'md', 'lg'].indexOf(v) !== -1
+      validator: v => ['sm', 'md', 'lg'].indexOf(v) !== -1
     },
     value: {
       type: [String, Array],

package/src/components/select/select.css

@@ -213,8 +213,9 @@
   font-size: 14px;
 }
 
-.ui-select--multiple.ui-select--xs .ui-select__search::placeholder {
-  font-size: 12px;
+.ui-select--xs .ui-select__search::placeholder {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
 }
 
 .ui-select__search--single {
@@ -247,6 +248,13 @@
   border-radius: 3px;
 }
 
-.ui-select__empty {
-  padding: var(--spacing-sm) var(--spacing-xs);
+.ui-select__list ::v-deep .select-empty {
+  height: 100px;
+  width: 100px;
+}
+
+.ui-select__list ::v-deep .select-empty img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }