webcake-ui-kit 1.0.28 → 1.0.30

package/src/components/menu/Menu.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ui-menu-host">
+    <slot name="trigger" v-bind="triggerSlotProps"></slot>
+    <div ref="portal" class="ui-menu-portal">
+      <transition name="ui-menu" @after-leave="onAfterLeave">
+        <div
+          v-if="isVisible"
+          ref="floating"
+          :id="menuUid"
+          class="ui-menu"
+          :class="floatingClasses"
+          :style="floatingStyle"
+          tabindex="-1"
+          role="menu"
+          @keydown="_kmOnKeydown"
+        >
+          <div class="ui-menu__content">
+            <slot></slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { acquire, release } from '../../floating/portal-root.js'
+import { nextZIndex } from '../../floating/layer-manager.js'
+import positionMixin from '../../floating/position-mixin.js'
+import clickOutsideMixin from '../../floating/click-outside-mixin.js'
+import keyboardMixin from '../../floating/keyboard-mixin.js'
+import focusMixin from '../../floating/focus-mixin.js'
+
+let _uid = 0
+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: 'Menu',
+  mixins: [keyboardMixin, focusMixin, clickOutsideMixin, positionMixin],
+  model: { prop: 'open', event: 'change' },
+  provide() {
+    return { menu: this }
+  },
+  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: 4 },
+    closeOnSelect: { type: Boolean, default: true },
+    closeOnEsc: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    anchorWidth: { type: Boolean, default: false },
+    width: { type: [String, Number], default: null }
+  },
+  emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
+  data() {
+    return {
+      menuUid: 'wk-menu-' + ++_uid,
+      isVisible: false,
+      zIndex: 0
+    }
+  },
+  computed: {
+    isOpen() {
+      return this.modelValue !== undefined ? this.modelValue : this.open
+    },
+    triggerSlotProps() {
+      return {
+        toggle: this.toggle,
+        open: this.openMenu,
+        close: this.closeMenu,
+        isOpen: this.isOpen,
+        attrs: this.triggerAttrs,
+        triggerRef: this._setTriggerEl
+      }
+    },
+    triggerAttrs() {
+      return {
+        'aria-haspopup': 'menu',
+        'aria-expanded': this.isOpen ? 'true' : 'false',
+        'aria-controls': this.isOpen ? this.menuUid : null
+      }
+    },
+    floatingClasses() {
+      return [this.pmResolvedPlacement && 'ui-menu--' + this.pmResolvedPlacement]
+    },
+    floatingStyle() {
+      const style = {
+        top: this.pmTop + 'px',
+        left: this.pmLeft + 'px',
+        zIndex: this.zIndex || null
+      }
+      if (this.anchorWidth && this.pmAnchorWidth) {
+        style.minWidth = this.pmAnchorWidth + 'px'
+      } else if (this.width) {
+        style.minWidth = typeof this.width === 'number' ? `${this.width}px` : this.width
+      }
+      return style
+    }
+  },
+  watch: {
+    isOpen(v) {
+      if (v) this.handleOpen()
+      else this.handleClose()
+    }
+  },
+  mounted() {
+    if (typeof document !== 'undefined' && this.$refs.portal) {
+      const root = acquire()
+      if (root) {
+        root.appendChild(this.$refs.portal)
+        this._portalAcquired = true
+      }
+    }
+    if (typeof this.$on === 'function') {
+      // eslint-disable-next-line vue/no-deprecated-events-api
+      this.$on('hook:beforeDestroy', this._cleanupAll)
+    }
+    if (!this._triggerEl && this.$el) {
+      const firstChild = this.$el.firstElementChild
+      if (firstChild && !firstChild.classList.contains('ui-menu-portal')) {
+        this._triggerEl = firstChild
+      }
+    }
+    if (this.isOpen) this.handleOpen()
+  },
+  beforeUnmount() {
+    this._cleanupAll()
+  },
+  methods: {
+    setOpenState(v) {
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    toggle() {
+      if (this.disabled) return
+      this.setOpenState(!this.isOpen)
+    },
+    openMenu() {
+      if (this.disabled || this.isOpen) return
+      this.setOpenState(true)
+    },
+    closeMenu() {
+      if (!this.isOpen) return
+      this.setOpenState(false)
+    },
+    selectItem(value) {
+      this.$emit('select', value)
+      if (this.closeOnSelect) this.closeMenu()
+    },
+    setActiveItem(el) {
+      const items = this._kmListItems()
+      const idx = items.indexOf(el)
+      if (idx !== -1) this.kmActiveIndex = idx
+    },
+    _setTriggerEl(el) {
+      this._triggerEl = el || null
+    },
+    handleOpen() {
+      this.isVisible = true
+      this.zIndex = nextZIndex()
+      this._fmCapture()
+      this._kmReset()
+      this.$emit('open')
+      this.$nextTick(() => {
+        const float = this.$refs.floating
+        if (!float) return
+        this._coSetElements(this._triggerEl, float)
+        this._kmSetFloatEl(float)
+        this._pmAttach(this._triggerEl, float)
+        this._coAttach()
+        this._fmFocus(float)
+      })
+    },
+    handleClose() {
+      this._pmDetach()
+      this._coDetach()
+      this.isVisible = false
+      this.$emit('close')
+    },
+    onAfterLeave() {
+      this._fmRestore()
+    },
+    _kmOnEscape() {
+      if (this.closeOnEsc) this.closeMenu()
+    },
+    _kmOnTab() {
+      this.closeMenu()
+    },
+    _coOnOutside() {
+      this.closeMenu()
+    },
+    _cleanupAll() {
+      this._pmDetach()
+      this._coDetach()
+      const portal = this.$refs.portal
+      if (portal && portal.parentNode) portal.parentNode.removeChild(portal)
+      if (this._portalAcquired) {
+        release()
+        this._portalAcquired = false
+      }
+    }
+  }
+}
+</script>
+
+<style src="./menu.css" scoped></style>

package/src/components/menu/menu.css

@@ -0,0 +1,64 @@
+.ui-menu-host {
+  display: contents;
+}
+
+.ui-menu-portal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.ui-menu {
+  position: fixed;
+  background: var(--card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  min-width: 176px;
+  max-width: 320px;
+  outline: none;
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+
+.ui-menu__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  max-height: 320px;
+  overflow-y: auto;
+  border-radius: var(--rounded-lg);
+}
+
+.ui-menu__content::-webkit-scrollbar {
+  width: 6px;
+}
+.ui-menu__content::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+/* Open/close animation — class names cover both Vue 2 and Vue 3 transition naming. */
+.ui-menu-enter-active,
+.ui-menu-leave-active {
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease;
+}
+.ui-menu-enter,
+.ui-menu-enter-from,
+.ui-menu-leave-to {
+  opacity: 0;
+  transform: scale(0.96);
+}
+.ui-menu-enter-to,
+.ui-menu-leave,
+.ui-menu-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}

package/src/components/select/Select.vue

@@ -1,73 +1,72 @@
 <template>
-  <div
-    class="ui-select"
-    :class="[
-      `ui-select--${size}`,
-      {
-        'ui-select--open': isOpen,
-        'ui-select--disabled': disabled,
-        'ui-select--error': error,
-        'ui-select--loading': loading
-      }
-    ]"
-    tabindex="0"
-    @click="toggle"
-    @keydown.esc="close"
-    @keydown.enter.prevent="toggle"
-    @keydown.space.prevent="toggle"
+  <Menu
+    :open="isOpen"
+    :disabled="disabled || loading"
+    placement="bottom-start"
+    :offset="4"
+    :anchor-width="true"
+    :close-on-select="false"
+    @change="onMenuChange"
+    @close="onMenuClose"
   >
-    <span class="ui-select__left">
-      <span v-if="hasIconSlot" class="ui-select__icon">
-        <slot name="icon" />
-      </span>
-      <span v-if="prepend" class="ui-select__prepend">{{ prepend }}</span>
-      <span class="ui-select__value" :class="{ 'ui-select__value--placeholder': !selectedLabel }">
-        {{ selectedLabel || placeholder }}
-      </span>
-    </span>
-
-    <spinner v-if="loading" type="mirrored" size="sm" />
-    <span v-else class="ui-select__chevron">
-      <ChevronDownIcon :size="16" />
-    </span>
-
-    <div ref="dropdown" v-show="isOpen" class="ui-select__dropdown" :style="dropdownStyle" @click.stop>
-      <div v-if="canScrollUp" class="ui-select__scroll-indicator ui-select__scroll-indicator--up">
-        <ChevronUpIcon :size="16" />
-      </div>
+    <template #trigger="{ toggle, isOpen: open, attrs, triggerRef }">
       <div
-        ref="options"
-        class="ui-select__options"
-        :style="listHeight ? { maxHeight: listHeight + 'px' } : {}"
-        @scroll="updateScrollIndicators"
+        :ref="triggerRef"
+        class="ui-select"
+        :class="[
+          `ui-select--${size}`,
+          {
+            'ui-select--open': open,
+            'ui-select--disabled': disabled,
+            'ui-select--error': error,
+            'ui-select--loading': loading
+          }
+        ]"
+        tabindex="0"
+        v-bind="attrs"
+        @click="toggle"
+        @keydown.enter.prevent="toggle"
+        @keydown.space.prevent="toggle"
       >
-        <slot>
-          <select-option
-            v-for="opt in normalizedOptions"
-            :key="opt.value"
-            :value="opt.value"
-            :label="opt.label"
-            :disabled="opt.disabled"
-          />
-        </slot>
-      </div>
-      <div v-if="canScrollDown" class="ui-select__scroll-indicator ui-select__scroll-indicator--down">
-        <ChevronDownIcon :size="16" />
+        <span class="ui-select__left">
+          <span v-if="hasIconSlot" class="ui-select__icon">
+            <slot name="icon" />
+          </span>
+          <span v-if="prepend" class="ui-select__prepend">{{ prepend }}</span>
+          <span class="ui-select__value" :class="{ 'ui-select__value--placeholder': !selectedLabel }">
+            {{ selectedLabel || placeholder }}
+          </span>
+        </span>
+        <Spinner v-if="loading" type="mirrored" size="sm" />
+        <span v-else class="ui-select__chevron">
+          <ChevronDownIcon :size="16" />
+        </span>
       </div>
+    </template>
+    <div class="ui-select__list" :style="listStyle">
+      <slot>
+        <SelectOption
+          v-for="opt in normalizedOptions"
+          :key="opt.value"
+          :value="opt.value"
+          :label="opt.label"
+          :disabled="opt.disabled"
+        />
+      </slot>
     </div>
-  </div>
+  </Menu>
 </template>
 
 <script>
 import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
-import ChevronUpIcon from '../../icons/ChevronUpIcon.vue'
+import Menu from '../menu/Menu.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
 
 export default {
   name: 'Select',
 
-  components: { SelectOption, Spinner, ChevronDownIcon, ChevronUpIcon },
+  components: { Menu, SelectOption, Spinner, ChevronDownIcon },
 
   provide() {
     return { select: this }
@@ -83,7 +82,7 @@ export default {
       type: String,
       default: 'default',
       validator: function (v) {
-        return ['xs', 'sm', 'default', 'lg'].includes(v)
+        return ['xs', 'sm', 'default', 'lg'].indexOf(v) !== -1
       }
     },
     value: {
@@ -125,24 +124,7 @@ export default {
   data() {
     return {
       isOpen: false,
-      canScrollUp: false,
-      canScrollDown: false,
-      labelCache: {},
-      dropdownStyle: {}
-    }
-  },
-
-  watch: {
-    isOpen(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.positionDropdown()
-          this.updateScrollIndicators()
-        })
-      } else {
-        this.canScrollUp = false
-        this.canScrollDown = false
-      }
+      labelCache: {}
     }
   },
 
@@ -162,76 +144,25 @@ export default {
     },
     hasIconSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
+    },
+    listStyle() {
+      return { maxHeight: this.listHeight + 'px' }
     }
   },
 
-  mounted() {
-    document.addEventListener('click', this.handleOutsideClick)
-    window.addEventListener('scroll', this.handleScroll, true)
-    window.addEventListener('resize', this.handleResize)
-    if (typeof document !== 'undefined' && this.$refs.dropdown) {
-      document.body.appendChild(this.$refs.dropdown)
-    }
-    if (typeof this.$on === 'function') {
-      // eslint-disable-next-line vue/no-deprecated-events-api
-      this.$on('hook:beforeDestroy', this.cleanup)
-    }
-  },
-
-  beforeUnmount() {
-    this.cleanup()
-  },
-
   methods: {
-    toggle() {
-      if (this.disabled || this.loading) return
-      this.isOpen = !this.isOpen
+    onMenuChange(v) {
+      this.isOpen = v
     },
-    close() {
+    onMenuClose() {
       this.isOpen = false
     },
     select(val) {
       this.$emit('change', val)
-      this.close()
+      this.isOpen = false
     },
     registerOption(value, label) {
       this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
-    },
-    positionDropdown() {
-      if (!this.$el || !this.$refs.dropdown) return
-      var rect = this.$el.getBoundingClientRect()
-      this.dropdownStyle = {
-        position: 'fixed',
-        top: rect.bottom + 4 + 'px',
-        left: rect.left + 'px',
-        width: rect.width + 'px',
-        zIndex: 1050
-      }
-    },
-    updateScrollIndicators() {
-      const el = this.$refs.options
-      if (!el) return
-      this.canScrollUp = el.scrollTop > 0
-      this.canScrollDown = el.scrollTop + el.clientHeight < el.scrollHeight
-    },
-    handleOutsideClick(e) {
-      if (!this.$el.contains(e.target) && !(this.$refs.dropdown && this.$refs.dropdown.contains(e.target))) {
-        this.close()
-      }
-    },
-    handleScroll() {
-      if (this.isOpen) this.positionDropdown()
-    },
-    handleResize() {
-      if (this.isOpen) this.positionDropdown()
-    },
-    cleanup() {
-      document.removeEventListener('click', this.handleOutsideClick)
-      window.removeEventListener('scroll', this.handleScroll, true)
-      window.removeEventListener('resize', this.handleResize)
-      if (this.$refs.dropdown && this.$refs.dropdown.parentNode === document.body) {
-        document.body.removeChild(this.$refs.dropdown)
-      }
     }
   }
 }

package/src/components/select/select.css

@@ -110,23 +110,6 @@
   transform: rotate(180deg);
 }
 
-.ui-select__spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--muted-fg);
-  animation: ui-select-spin 0.75s linear infinite;
-}
-
-@keyframes ui-select-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /* — sizes — */
 .ui-select--lg {
   min-height: 40px;
@@ -163,45 +146,20 @@
   line-height: var(--paragraph-mini-line-height);
 }
 
-/* Dropdown — position/size set inline via JS (portal to body) */
-.ui-select__dropdown {
-  background: var(--input);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-10);
-  box-shadow: var(--shadow-md);
-  overflow: hidden;
+/* List wrapper inside the portal'd Menu. Width is anchored to trigger via the
+   Menu component's anchorWidth prop (computes min-width). */
+.ui-select__list {
   display: flex;
   flex-direction: column;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.ui-select__dropdown .ui-select__options::-webkit-scrollbar {
-  display: none;
-}
-
-.ui-select__options {
   overflow-y: auto;
   padding: var(--spacing-2xs);
+  scrollbar-width: thin;
 }
 
-.ui-select__scroll-indicator {
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--muted-fg);
-  background: var(--input);
-  padding: var(--spacing-2xs) 0;
-}
-
-.ui-select__scroll-indicator--up {
-  top: 0;
+.ui-select__list::-webkit-scrollbar {
+  width: 6px;
 }
-
-.ui-select__scroll-indicator--down {
-  bottom: 0;
+.ui-select__list::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
 }

package/src/components/select-option/SelectOption.vue

@@ -1,16 +1,16 @@
 <template>
   <div
     class="ui-select-option"
-    :class="{
-      'ui-select-option--selected': isSelected,
-      'ui-select-option--disabled': isDisabled,
-      'ui-select-option--large': size === 'large',
-      'ui-select-option--destructive': variant === 'destructive'
-    }"
-    tabindex="0"
+    :class="[
+      size === 'large' ? 'ui-select-option--large' : null,
+      variant === 'destructive' ? 'ui-select-option--destructive' : null,
+      isDisabled ? 'ui-select-option--disabled' : null,
+      isSelected ? 'ui-select-option--selected' : null
+    ]"
+    role="option"
+    :aria-selected="isSelected ? 'true' : 'false'"
+    :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
-    @keydown.enter="handleClick"
-    @keydown.space.prevent="handleClick"
   >
     <slot>{{ label || value }}</slot>
   </div>
@@ -55,25 +55,21 @@ export default {
 
   emits: [],
 
-  mounted() {
-    if (this.select && this.select.registerOption) {
-      this.select.registerOption(this.value, this.label || this.value)
-    }
-  },
-
   computed: {
     isSelected() {
-      return this.select ? this.select.value === this.value : false
+      return !!(this.select && this.select.value !== undefined && this.select.value === this.value)
     },
     isDisabled() {
-      return this.disabled || (this.select ? this.select.disabled : false)
+      return this.disabled || !!(this.select && this.select.disabled)
     }
   },
 
   methods: {
     handleClick() {
-      if (this.isDisabled || !this.select) return
-      this.select.select(this.value)
+      if (this.isDisabled) return
+      if (this.select && typeof this.select.select === 'function') {
+        this.select.select(this.value)
+      }
     }
   }
 }