webcake-ui-kit 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -28,10 +28,12 @@
     "./WkCheckboxGroup": "./src/components/checkbox-group/CheckboxGroup.vue",
     "./WkDialog": "./src/components/dialog/Dialog.vue",
     "./WkDivider": "./src/components/divider/Divider.vue",
+    "./WkDropdown": "./src/components/dropdown/Dropdown.vue",
     "./WkEmpty": "./src/components/empty/Empty.vue",
     "./WkEmptyIcon": "./src/components/empty-icon/EmptyIcon.vue",
     "./WkField": "./src/components/field/Field.vue",
     "./WkInput": "./src/components/input/Input.vue",
+    "./WkMenu": "./src/components/menu/Menu.vue",
     "./WkPagination": "./src/components/pagination/Pagination.vue",
     "./WkRadio": "./src/components/radio/Radio.vue",
     "./WkRadioGroup": "./src/components/radio-group/RadioGroup.vue",

package/src/components/avatar/avatar.css

@@ -73,7 +73,7 @@
   right: 0;
   bottom: 0;
   border-radius: var(--rounded-full);
-  background: var(--positive-500);
+  background: var(--green-500);
   box-shadow: 0 0 0 2px var(--primary-bg);
 }
 .ui-avatar--regular .ui-avatar__indicator {

package/src/components/avatar-stack/AvatarStack.vue

@@ -1,17 +1,20 @@
 <template>
   <span :class="['ui-avatar-stack', `ui-avatar-stack--${size}`]">
-    <Avatar
+    <span
       v-for="(item, idx) in visibleItems"
       :key="`avatar-${idx}`"
-      :size="size"
-      :src="item.src || ''"
-      :alt="item.alt || ''"
-      :name="item.name || ''"
       :class="itemClasses"
-    />
-    <Avatar v-if="overflowCount > 0" :size="size" :class="[...itemClasses, 'ui-avatar-stack__overflow']">
-      <slot name="overflow" v-bind="{ count: overflowCount }">{{ formattedOverflow }}</slot>
-    </Avatar>
+      :style="{ zIndex: totalCount - idx }"
+    >
+      <slot name="avatar" :avatar="item" :index="idx" :size="size">
+        <Avatar :size="size" :src="item.src || ''" :alt="item.alt || ''" :name="item.name || ''" />
+      </slot>
+    </span>
+    <span v-if="overflowCount > 0" :class="itemClasses" :style="{ zIndex: 0 }">
+      <Avatar :size="size" class="ui-avatar-stack__overflow">
+        <slot name="overflow" v-bind="{ count: overflowCount }">{{ formattedOverflow }}</slot>
+      </Avatar>
+    </span>
   </span>
 </template>
 
@@ -65,6 +68,9 @@ export default {
       }
       return '+' + this.overflowCount
     },
+    totalCount() {
+      return this.visibleItems.length + (this.overflowCount > 0 ? 1 : 0)
+    },
     itemClasses() {
       const classes = ['ui-avatar-stack__item']
       if (this.animation !== 'none') {

package/src/components/avatar-stack/avatar-stack.css

@@ -4,35 +4,36 @@
   vertical-align: middle;
 }
 
-/* Each child avatar overlaps the previous one and shows a white ring to
-   "punch out" of its neighbours. Box-shadow follows border-radius and does
-   not take up layout space, so the avatar dimensions stay intact. */
 .ui-avatar-stack__item {
   position: relative;
   margin-left: -8px;
-  box-shadow: 0 0 0 2px var(--primary-bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+  z-index: 1;
+  border-radius: var(--rounded-full);
 }
+
 .ui-avatar-stack__item:first-child {
   margin-left: 0;
 }
 
-/* Stacking order: earlier siblings sit above later ones so the leftmost
-   avatar's ring is visible over its neighbour. */
-.ui-avatar-stack__item {
+/* Ring via pseudo-element so it follows the inner circle regardless of
+   how many wrapper elements sit between __item and the avatar (e.g. Tooltip). */
+.ui-avatar-stack__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--primary-bg);
+  pointer-events: none;
   z-index: 1;
 }
-.ui-avatar-stack__item:nth-child(1) {
-  z-index: 5;
-}
-.ui-avatar-stack__item:nth-child(2) {
-  z-index: 4;
-}
-.ui-avatar-stack__item:nth-child(3) {
-  z-index: 3;
-}
-.ui-avatar-stack__item:nth-child(4) {
-  z-index: 2;
-}
 
 /* Overflow chip — same shape as siblings, slightly darker background. */
 .ui-avatar-stack__overflow {
@@ -41,10 +42,8 @@
 }
 
 /* ============================ Animations ============================
-   Three loop animations the consumer opts into via the `animation` prop
-   on AvatarStack. Each animation is applied to every visible avatar
-   child (including the "+N" overflow chip). All honour
-   `prefers-reduced-motion: reduce`. */
+   Three loop animations the consumer opts into via the `animation` prop.
+   Applied to the wrapper span so the ring pseudo-element animates too. */
 
 @keyframes ui-avatar-stack-pulse {
   0%,
@@ -90,9 +89,12 @@
 .ui-avatar-stack__item--animation-ring::after {
   content: '';
   position: absolute;
-  inset: -3px;
+  top: -3px;
+  right: -3px;
+  bottom: -3px;
+  left: -3px;
   border-radius: inherit;
-  border: 2px solid var(--positive-500);
+  border: 2px solid var(--green-500);
   pointer-events: none;
   animation: ui-avatar-stack-ring 1.6s ease-out infinite;
 }

package/src/components/badge/badge.css

@@ -44,11 +44,11 @@
   color: var(--destructive-inverse-fg);
 }
 .ui-badge--info {
-  background: var(--info-500);
+  background: var(--blue-500);
   color: var(--inverse-fg);
 }
 .ui-badge--warning {
-  background: var(--warning-500);
+  background: var(--yellow-500);
   color: var(--inverse-fg);
 }
 
@@ -57,6 +57,11 @@
   box-shadow: 0 0 0 3px var(--focus-ring);
 }
 
+.ui-badge--destructive:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-ring-error);
+}
+
 .ui-badge__icon {
   display: inline-flex;
   align-items: center;

package/src/components/dialog/Dialog.vue

@@ -93,6 +93,7 @@
 </template>
 
 <script>
+import { acquire, release } from '../../floating/portal-root.js'
 import Button from '../button/Button.vue'
 import MinusIcon from '../../icons/MinusIcon.vue'
 import UnfoldVerticalIcon from '../../icons/UnfoldVerticalIcon.vue'
@@ -206,9 +207,9 @@ export default {
     this._prevFocus = null
     this._prevOverflow = ''
     this._prevPadding = ''
-    //Đẩy dialog ra ngoài body
-    if (typeof document !== 'undefined' && this.$el && this.$el.parentNode !== document.body) {
-      document.body.appendChild(this.$el)
+    if (typeof document !== 'undefined' && this.$el) {
+      this._dialogPortalRoot = acquire()
+      if (this._dialogPortalRoot) this._dialogPortalRoot.appendChild(this.$el)
     }
     if (typeof this.$on === 'function') {
       // eslint-disable-next-line vue/no-deprecated-events-api
@@ -234,7 +235,7 @@ export default {
       this.$emit('cancel', e)
       this.setOpen(false)
     },
-    onWrapMousedown(e) {
+    onWrapMousedown() {
       this._mousedownOnWrap = true
     },
     onWrapMouseup(e) {
@@ -296,8 +297,12 @@ export default {
     },
     cleanup() {
       this.unlockBody()
-      if (this.$el && this.$el.parentNode === document.body) {
-        document.body.removeChild(this.$el)
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      }
+      if (this._dialogPortalRoot) {
+        release()
+        this._dialogPortalRoot = null
       }
     }
   }

package/src/components/dropdown/Dropdown.vue

@@ -0,0 +1,135 @@
+<template>
+  <Menu
+    :open="isOpen"
+    :placement="placement"
+    :offset="4"
+    :close-on-esc="closeOnEsc"
+    :disabled="disabled"
+    @change="onMenuChange"
+    @open="$emit('open')"
+    @close="$emit('close')"
+    :width="width"
+  >
+    <template #trigger="{ triggerRef }">
+      <span
+        :ref="triggerRef"
+        class="ui-dropdown__anchor"
+        @click="triggerHasClick && handleClick()"
+        @mouseenter="triggerHasHover && handleMouseEnter()"
+        @mouseleave="triggerHasHover && handleMouseLeave()"
+      >
+        <slot></slot>
+      </span>
+    </template>
+    <DropdownMenuItems v-if="hasItems" :items="items" @select="onItemSelect" />
+    <slot v-else name="overlay"></slot>
+  </Menu>
+</template>
+
+<script>
+import Menu from '../menu/Menu.vue'
+import DropdownMenuItems from './DropdownMenuItems.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: 'Dropdown',
+  components: { Menu, DropdownMenuItems },
+  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
+    },
+    closeOnEsc: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    width: { type: [String, Number], default: null },
+    trigger: {
+      type: Array,
+      default: function () {
+        return ['click']
+      }
+    },
+    items: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
+  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
+    },
+    hasItems() {
+      return Array.isArray(this.items) && this.items.length > 0
+    }
+  },
+  watch: {
+    open(v) {
+      if (this.modelValue === undefined) this.isOpen = v
+    },
+    modelValue(v) {
+      if (v !== undefined) this.isOpen = v
+    }
+  },
+  methods: {
+    onMenuChange(v) {
+      this.isOpen = v
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    handleClick() {
+      if (this.disabled) return
+      this.onMenuChange(!this.isOpen)
+    },
+    handleMouseEnter() {
+      if (this.disabled) return
+      if (this._hoverTimer) {
+        clearTimeout(this._hoverTimer)
+        this._hoverTimer = null
+      }
+      this.onMenuChange(true)
+    },
+    handleMouseLeave() {
+      this._hoverTimer = setTimeout(() => {
+        this.onMenuChange(false)
+      }, 80)
+    },
+    onItemSelect(key) {
+      this.$emit('select', key)
+      this.onMenuChange(false)
+    }
+  },
+  beforeUnmount() {
+    if (this._hoverTimer) clearTimeout(this._hoverTimer)
+  }
+}
+</script>
+
+<style src="./dropdown.css" scoped></style>

package/src/components/dropdown/DropdownMenuItems.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="ui-dropdown-items">
+    <div v-for="item in normalizedItems" :key="item._key" class="ui-dropdown-items__entry">
+      <!-- Divider -->
+      <div v-if="item._type === 'divider'" class="ui-dropdown-items__divider"></div>
+
+      <!-- Group: non-clickable label + flat children -->
+      <div v-else-if="item._type === 'group'" class="ui-dropdown-items__group">
+        <div class="ui-dropdown-items__group-label" :title="item.title || undefined">
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
+          <span>{{ item.label }}</span>
+        </div>
+        <div
+          v-for="child in item.children || []"
+          :key="child.key"
+          class="ui-dropdown-items__item"
+          :class="{ 'ui-dropdown-items__item--disabled': child.disabled }"
+          :title="child.title || undefined"
+          @click="onItemClick(child)"
+        >
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" class="ui-dropdown-items__icon" />
+          <span class="ui-dropdown-items__label">{{ child.label }}</span>
+          <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+        </div>
+      </div>
+
+      <!-- Submenu: non-clickable label + indented flat children -->
+      <div v-else-if="item._type === 'submenu'" class="ui-dropdown-items__submenu">
+        <div
+          class="ui-dropdown-items__submenu-label"
+          :class="{ 'ui-dropdown-items__item--disabled': item.disabled }"
+          :title="item.title || undefined"
+        >
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
+          <span class="ui-dropdown-items__label">{{ item.label }}</span>
+        </div>
+        <div
+          v-for="child in item.children || []"
+          :key="child.key"
+          class="ui-dropdown-items__item ui-dropdown-items__item--sub"
+          :class="{ 'ui-dropdown-items__item--disabled': child.disabled || item.disabled }"
+          :title="child.title || undefined"
+          @click="onItemClick(child, item)"
+        >
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" class="ui-dropdown-items__icon" />
+          <span class="ui-dropdown-items__label">{{ child.label }}</span>
+          <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+        </div>
+      </div>
+
+      <!-- Regular item -->
+      <div
+        v-else
+        class="ui-dropdown-items__item"
+        :class="{ 'ui-dropdown-items__item--disabled': item.disabled }"
+        :title="item.title || undefined"
+        @click="onItemClick(item)"
+      >
+        <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" class="ui-dropdown-items__icon" />
+        <span class="ui-dropdown-items__label">{{ item.label }}</span>
+        <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+function skipReactive(val) {
+  if (val && typeof val === 'object' && !val.__v_skip) {
+    val.__v_skip = true
+  }
+}
+
+export default {
+  name: 'DropdownMenuItems',
+
+  props: {
+    items: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+
+  emits: ['select'],
+
+  computed: {
+    normalizedItems() {
+      return (this.items || []).map(function (item, i) {
+        var type
+        if (item.type === 'divider') {
+          type = 'divider'
+        } else if (item.type === 'group') {
+          type = 'group'
+        } else if (item.children && item.children.length) {
+          type = 'submenu'
+        } else {
+          type = 'item'
+        }
+        // Prevent Vue 3 from making component objects reactive (same as markRaw
+        // but without importing from 'vue', keeps dual-compat clean).
+        skipReactive(item.icon)
+        if (item.children)
+          item.children.forEach(function (c) {
+            skipReactive(c.icon)
+          })
+        return Object.assign({}, item, {
+          _type: type,
+          _key: item.key != null ? String(item.key) : 'item-' + i
+        })
+      })
+    }
+  },
+
+  methods: {
+    isComponent(val) {
+      return val !== null && typeof val === 'object'
+    },
+    onItemClick(item, parentItem) {
+      if (item.disabled || (parentItem && parentItem.disabled)) return
+      this.$emit('select', item.key)
+    }
+  }
+}
+</script>
+
+<style src="./dropdown-menu-items.css" scoped></style>

package/src/components/dropdown/dropdown-menu-items.css

@@ -0,0 +1,116 @@
+.ui-dropdown-items {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-2xs);
+}
+
+.ui-dropdown-items__entry {
+  display: contents;
+}
+
+/* 9px total height: 4px margin + 1px line + 4px margin */
+.ui-dropdown-items__divider {
+  height: 1px;
+  background: var(--border-primary);
+  margin: 4px 0;
+  flex-shrink: 0;
+}
+
+.ui-dropdown-items__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-7p5) var(--spacing-sm);
+  min-height: 36px;
+  border-radius: var(--radius-8, 8px);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.1s;
+}
+
+.ui-dropdown-items__item:hover:not(.ui-dropdown-items__item--disabled) {
+  background: var(--accent-bg);
+}
+
+.ui-dropdown-items__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-dropdown-items__item--sub {
+  padding-left: calc(var(--spacing-sm) + var(--spacing-md));
+}
+
+.ui-dropdown-items__group {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Mini label, 500 weight, muted — 5.5px vertical / 8px horizontal */
+.ui-dropdown-items__group-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-5p5) var(--spacing-xs);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-mini-font-size, 12px);
+  line-height: var(--paragraph-mini-line-height, 16px);
+  color: var(--muted-fg);
+  font-weight: 500;
+  cursor: default;
+  user-select: none;
+}
+
+.ui-dropdown-items__submenu {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-dropdown-items__submenu-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-7p5) var(--spacing-sm);
+  min-height: 36px;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--muted-fg);
+  cursor: default;
+  user-select: none;
+}
+
+/* 20px container — icon SVG inside is typically 16px, centred */
+.ui-dropdown-items__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.ui-dropdown-items__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Extra/shortcut text — paragraph small, muted, right-aligned */
+.ui-dropdown-items__extra {
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--muted-fg);
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: var(--spacing-sm);
+  white-space: nowrap;
+}

package/src/components/dropdown/dropdown.css

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