webcake-ui-kit 1.0.28 → 1.0.29

package/src/components/tooltip/Tooltip.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import { acquire, release } from '../../floating/portal-root.js'
+
 const GAP = 4
 
 export default {
@@ -83,7 +85,10 @@ export default {
   },
   mounted() {
     if (typeof document !== 'undefined' && this.$refs.tooltip) {
-      document.body.appendChild(this.$refs.tooltip)
+      this._tooltipPortalRoot = acquire()
+      if (this._tooltipPortalRoot) {
+        this._tooltipPortalRoot.appendChild(this.$refs.tooltip)
+      }
     }
     window.addEventListener('scroll', this.onScrollOrResize, true)
     window.addEventListener('resize', this.onScrollOrResize)
@@ -138,8 +143,12 @@ export default {
     cleanup() {
       window.removeEventListener('scroll', this.onScrollOrResize, true)
       window.removeEventListener('resize', this.onScrollOrResize)
-      if (this.$refs.tooltip && this.$refs.tooltip.parentNode === document.body) {
-        document.body.removeChild(this.$refs.tooltip)
+      if (this.$refs.tooltip && this.$refs.tooltip.parentNode) {
+        this.$refs.tooltip.parentNode.removeChild(this.$refs.tooltip)
+      }
+      if (this._tooltipPortalRoot) {
+        release()
+        this._tooltipPortalRoot = null
       }
     }
   }

package/src/floating/click-outside-mixin.js

@@ -0,0 +1,47 @@
+// Listens for pointerdown anywhere in the document and calls the component's
+// _coOnOutside() if the event target is not inside either the trigger or the
+// floating element. Uses pointerdown (not mousedown) so it covers touch + pen
+// + mouse and fires before focus moves.
+
+export default {
+  data() {
+    return { coAttached: false }
+  },
+  methods: {
+    _coSetElements(trigger, floating) {
+      this._coTriggerEl = trigger
+      this._coFloatEl = floating
+    },
+    _coAttach() {
+      if (typeof document === 'undefined' || this.coAttached) return
+      this._coHandler = e => {
+        const trigger = this._coTriggerEl
+        const floating = this._coFloatEl
+        const path = typeof e.composedPath === 'function' ? e.composedPath() : []
+        const target = e.target
+        const insideTrigger =
+          trigger && (path.indexOf(trigger) !== -1 || (trigger.contains && trigger.contains(target)))
+        const insideFloat =
+          floating && (path.indexOf(floating) !== -1 || (floating.contains && floating.contains(target)))
+        if (!insideTrigger && !insideFloat) this._coOnOutside(e)
+      }
+      document.addEventListener('pointerdown', this._coHandler, true)
+      this.coAttached = true
+    },
+    _coDetach() {
+      if (typeof document === 'undefined' || !this.coAttached) return
+      document.removeEventListener('pointerdown', this._coHandler, true)
+      this._coHandler = null
+      this.coAttached = false
+    },
+    _coOnOutside() {
+      // Override in component.
+    }
+  },
+  beforeDestroy() {
+    this._coDetach()
+  },
+  beforeUnmount() {
+    this._coDetach()
+  }
+}

package/src/floating/compute-position.js

@@ -0,0 +1,64 @@
+// Pure positioning function — no DOM mutation, no side effects.
+// Inputs are DOMRect-shaped objects; output is { top, left, placement } in
+// viewport coordinates suitable for `position: fixed`.
+
+function parsePlacement(p) {
+  const parts = String(p || 'bottom-start').split('-')
+  const side = ['top', 'bottom', 'left', 'right'].indexOf(parts[0]) === -1 ? 'bottom' : parts[0]
+  const align = ['start', 'end'].indexOf(parts[1]) === -1 ? 'center' : parts[1]
+  return { side, align }
+}
+
+function alignCross(refRect, floatRect, align, axis) {
+  if (axis === 'horizontal') {
+    if (align === 'start') return refRect.left
+    if (align === 'end') return refRect.right - floatRect.width
+    return refRect.left + (refRect.width - floatRect.width) / 2
+  }
+  if (align === 'start') return refRect.top
+  if (align === 'end') return refRect.bottom - floatRect.height
+  return refRect.top + (refRect.height - floatRect.height) / 2
+}
+
+export function computePosition(refRect, floatRect, placement, options) {
+  const opts = options || {}
+  const offset = typeof opts.offset === 'number' ? opts.offset : 4
+  const padding = typeof opts.padding === 'number' ? opts.padding : 8
+  const vw = opts.viewportWidth || (typeof window !== 'undefined' ? window.innerWidth : 1024)
+  const vh = opts.viewportHeight || (typeof window !== 'undefined' ? window.innerHeight : 768)
+
+  let { side, align } = parsePlacement(placement)
+
+  // Flip when the requested side has no room and the opposite does.
+  const fitsTop = refRect.top - floatRect.height - offset >= padding
+  const fitsBottom = refRect.bottom + floatRect.height + offset <= vh - padding
+  const fitsLeft = refRect.left - floatRect.width - offset >= padding
+  const fitsRight = refRect.right + floatRect.width + offset <= vw - padding
+
+  if (side === 'top' && !fitsTop && fitsBottom) side = 'bottom'
+  else if (side === 'bottom' && !fitsBottom && fitsTop) side = 'top'
+  else if (side === 'left' && !fitsLeft && fitsRight) side = 'right'
+  else if (side === 'right' && !fitsRight && fitsLeft) side = 'left'
+
+  let top = 0
+  let left = 0
+
+  if (side === 'top') {
+    top = refRect.top - floatRect.height - offset
+    left = alignCross(refRect, floatRect, align, 'horizontal')
+  } else if (side === 'bottom') {
+    top = refRect.bottom + offset
+    left = alignCross(refRect, floatRect, align, 'horizontal')
+  } else if (side === 'left') {
+    left = refRect.left - floatRect.width - offset
+    top = alignCross(refRect, floatRect, align, 'vertical')
+  } else {
+    left = refRect.right + offset
+    top = alignCross(refRect, floatRect, align, 'vertical')
+  }
+
+  left = Math.max(padding, Math.min(left, vw - floatRect.width - padding))
+  top = Math.max(padding, Math.min(top, vh - floatRect.height - padding))
+
+  return { top, left, placement: align === 'center' ? side : side + '-' + align }
+}

package/src/floating/focus-mixin.js

@@ -0,0 +1,35 @@
+// Save the currently focused element on open, restore it on close.
+// This is RESTORE only — there is no focus trap. Menus and dropdowns should
+// not trap focus (closing on Tab is the expected behavior). Dialogs trap;
+// menus don't. Don't add a trap "for consistency" — they are different
+// patterns by design.
+
+export default {
+  data() {
+    return { fmRestoreTarget: null }
+  },
+  methods: {
+    _fmCapture() {
+      if (typeof document === 'undefined') return
+      this.fmRestoreTarget = document.activeElement
+    },
+    _fmFocus(el) {
+      if (el && typeof el.focus === 'function') {
+        el.focus()
+      }
+    },
+    _fmRestore() {
+      const t = this.fmRestoreTarget
+      this.fmRestoreTarget = null
+      if (
+        t &&
+        typeof t.focus === 'function' &&
+        typeof document !== 'undefined' &&
+        document.contains &&
+        document.contains(t)
+      ) {
+        t.focus()
+      }
+    }
+  }
+}

package/src/floating/keyboard-mixin.js

@@ -0,0 +1,92 @@
+// Keyboard navigation for menu-like floating layers. Items are discovered by
+// querying the floating element's DOM for [data-wk-menu-item]:not([data-disabled])
+// at the moment a key is pressed — this avoids registration-array bugs when
+// items are added/removed via v-if. kmActiveIndex is clamped before every use.
+
+const KEYS = {
+  ArrowDown: 'down',
+  Down: 'down',
+  ArrowUp: 'up',
+  Up: 'up',
+  Home: 'home',
+  End: 'end',
+  Escape: 'escape',
+  Esc: 'escape',
+  Enter: 'enter',
+  ' ': 'space',
+  Spacebar: 'space',
+  Tab: 'tab'
+}
+
+export default {
+  data() {
+    return { kmActiveIndex: -1 }
+  },
+  methods: {
+    _kmSetFloatEl(el) {
+      this._kmFloatEl = el
+    },
+    _kmListItems() {
+      const float = this._kmFloatEl
+      if (!float || typeof float.querySelectorAll !== 'function') return []
+      const nodes = float.querySelectorAll('[data-wk-menu-item]:not([data-disabled])')
+      const arr = []
+      for (let i = 0; i < nodes.length; i++) arr.push(nodes[i])
+      return arr
+    },
+    _kmReset() {
+      this.kmActiveIndex = -1
+    },
+    _kmOnKeydown(e) {
+      const k = KEYS[e.key]
+      if (!k) return
+      if (k === 'escape') {
+        e.preventDefault()
+        this._kmOnEscape(e)
+        return
+      }
+      if (k === 'tab') {
+        this._kmOnTab(e)
+        return
+      }
+      const items = this._kmListItems()
+      if (!items.length) return
+      let idx = this.kmActiveIndex
+      if (k === 'down') {
+        idx = idx < 0 ? 0 : (idx + 1) % items.length
+        e.preventDefault()
+      } else if (k === 'up') {
+        idx = idx < 0 ? items.length - 1 : (idx - 1 + items.length) % items.length
+        e.preventDefault()
+      } else if (k === 'home') {
+        idx = 0
+        e.preventDefault()
+      } else if (k === 'end') {
+        idx = items.length - 1
+        e.preventDefault()
+      } else if (k === 'enter' || k === 'space') {
+        if (idx >= 0 && idx < items.length) {
+          e.preventDefault()
+          items[idx].click()
+        }
+        return
+      }
+      idx = Math.max(0, Math.min(idx, items.length - 1))
+      this.kmActiveIndex = idx
+      this._kmFocusActive()
+    },
+    _kmFocusActive() {
+      const items = this._kmListItems()
+      const idx = this.kmActiveIndex
+      if (idx >= 0 && idx < items.length && items[idx] && typeof items[idx].focus === 'function') {
+        items[idx].focus()
+      }
+    },
+    _kmOnEscape() {
+      // Override in component.
+    },
+    _kmOnTab() {
+      // Override in component.
+    }
+  }
+}

package/src/floating/layer-manager.js

@@ -0,0 +1,22 @@
+// Monotonic z-index counter shared across every floating component.
+// Each opening of a Menu / Dropdown / Select calls nextZIndex() and applies
+// the result inline. Closing does NOT decrement — keeping the counter
+// monotonic avoids fights between concurrent opens (matches Radix UI's
+// approach).
+
+const BASE = 1000
+let _counter = BASE
+
+export function nextZIndex() {
+  _counter++
+  return _counter
+}
+
+export function currentZIndex() {
+  return _counter
+}
+
+// Test helper — reset between specs.
+export function _reset() {
+  _counter = BASE
+}

package/src/floating/portal-mixin.js

@@ -0,0 +1,45 @@
+// Moves an element into the shared portal root on demand. Refcounts acquire/
+// release so the portal root is cleaned up when nothing is using it. Used by
+// Menu; reusable by future Popover/Tooltip/ContextMenu migrations.
+//
+// Non-reactive instance refs use leading underscore so they don't enter Vue's
+// reactivity system. Reactive data is namespaced with the `pmHost` prefix to
+// avoid collisions with other mixins.
+
+import { acquire, release } from './portal-root.js'
+
+export default {
+  data() {
+    return { pmHostMounted: false }
+  },
+  methods: {
+    _pmHostMount(el) {
+      if (!el || typeof document === 'undefined') return
+      const root = acquire()
+      if (!root) return
+      if (el.parentNode !== root) root.appendChild(el)
+      this._pmHostAcquired = true
+      this.pmHostMounted = true
+    },
+    _pmHostUnmount(el) {
+      if (el && el.parentNode) el.parentNode.removeChild(el)
+      if (this._pmHostAcquired) {
+        release()
+        this._pmHostAcquired = false
+      }
+      this.pmHostMounted = false
+    }
+  },
+  beforeDestroy() {
+    if (this._pmHostAcquired) {
+      release()
+      this._pmHostAcquired = false
+    }
+  },
+  beforeUnmount() {
+    if (this._pmHostAcquired) {
+      release()
+      this._pmHostAcquired = false
+    }
+  }
+}

package/src/floating/portal-root.js

@@ -0,0 +1,44 @@
+// Shared portal root for floating components (Menu, Dropdown, Select, and any
+// future Popover/Tooltip/ContextMenu/Combobox). All access is lazy and inside
+// functions — never at module top level — so SSR consumers don't blow up on
+// import.
+
+let _root = null
+let _refCount = 0
+
+export function ensureRoot() {
+  if (typeof document === 'undefined') return null
+  if (_root && document.body && document.body.contains(_root)) return _root
+  _root = document.createElement('div')
+  _root.id = 'wk-portal-root'
+  _root.setAttribute('data-wk-portal-root', '')
+  // The root itself takes no space; children position themselves via fixed.
+  _root.style.position = 'absolute'
+  _root.style.top = '0'
+  _root.style.left = '0'
+  _root.style.width = '0'
+  _root.style.height = '0'
+  document.body.appendChild(_root)
+  return _root
+}
+
+export function acquire() {
+  const root = ensureRoot()
+  if (root) _refCount++
+  return root
+}
+
+export function release() {
+  if (_refCount > 0) _refCount--
+  if (_refCount === 0 && _root && _root.parentNode) {
+    _root.parentNode.removeChild(_root)
+    _root = null
+  }
+}
+
+// Test helper — reset module state between specs.
+export function _reset() {
+  if (_root && _root.parentNode) _root.parentNode.removeChild(_root)
+  _root = null
+  _refCount = 0
+}

package/src/floating/position-mixin.js

@@ -0,0 +1,74 @@
+// Tracks a reference element and updates a floating element's position
+// whenever either resizes or the viewport scrolls. Uses ResizeObserver +
+// a single passive-capture scroll listener throttled via requestAnimationFrame
+// so the work stays cheap even on long-scroll containers.
+
+import { computePosition } from './compute-position.js'
+
+export default {
+  data() {
+    return { pmTop: 0, pmLeft: 0, pmResolvedPlacement: '', pmAnchorWidth: 0 }
+  },
+  methods: {
+    _pmAttach(refEl, floatEl) {
+      if (typeof window === 'undefined') return
+      this._pmRefEl = refEl
+      this._pmFloatEl = floatEl
+      this._pmTick = () => {
+        if (this._pmRaf) return
+        this._pmRaf = window.requestAnimationFrame(() => {
+          this._pmRaf = null
+          this._pmUpdate()
+        })
+      }
+      window.addEventListener('scroll', this._pmTick, { passive: true, capture: true })
+      window.addEventListener('resize', this._pmTick)
+      if (typeof window.ResizeObserver === 'function') {
+        this._pmRO = new window.ResizeObserver(this._pmTick)
+        if (refEl) this._pmRO.observe(refEl)
+        if (floatEl) this._pmRO.observe(floatEl)
+      }
+      this._pmUpdate()
+    },
+    _pmDetach() {
+      if (typeof window === 'undefined') return
+      if (this._pmTick) {
+        window.removeEventListener('scroll', this._pmTick, true)
+        window.removeEventListener('resize', this._pmTick)
+      }
+      if (this._pmRaf) {
+        window.cancelAnimationFrame(this._pmRaf)
+        this._pmRaf = null
+      }
+      if (this._pmRO) {
+        this._pmRO.disconnect()
+        this._pmRO = null
+      }
+      this._pmRefEl = null
+      this._pmFloatEl = null
+      this._pmTick = null
+    },
+    _pmUpdate() {
+      const ref = this._pmRefEl
+      const float = this._pmFloatEl
+      if (!ref || !float || typeof ref.getBoundingClientRect !== 'function') return
+      const placement = this.placement || 'bottom-start'
+      const offset = typeof this.offset === 'number' ? this.offset : 4
+      const r = ref.getBoundingClientRect()
+      // Use offsetWidth/offsetHeight (pre-transform layout size) so that CSS enter/leave
+      // animations (e.g. scale(0.96)) don't skew the dimension used in top/left placement math.
+      const f = { width: float.offsetWidth, height: float.offsetHeight }
+      const result = computePosition(r, f, placement, { offset })
+      this.pmTop = result.top
+      this.pmLeft = result.left
+      this.pmResolvedPlacement = result.placement
+      this.pmAnchorWidth = r.width
+    }
+  },
+  beforeDestroy() {
+    this._pmDetach()
+  },
+  beforeUnmount() {
+    this._pmDetach()
+  }
+}

package/src/index.js

@@ -11,10 +11,12 @@ export { default as WkCheckbox } from './components/checkbox/Checkbox.vue'
 export { default as WkCheckboxGroup } from './components/checkbox-group/CheckboxGroup.vue'
 export { default as WkDialog } from './components/dialog/Dialog.vue'
 export { default as WkDivider } from './components/divider/Divider.vue'
+export { default as WkDropdown } from './components/dropdown/Dropdown.vue'
 export { default as WkEmpty } from './components/empty/Empty.vue'
 export { default as WkEmptyIcon } from './components/empty-icon/EmptyIcon.vue'
 export { default as WkField } from './components/field/Field.vue'
 export { default as WkInput } from './components/input/Input.vue'
+export { default as WkMenu } from './components/menu/Menu.vue'
 export { default as WkPagination } from './components/pagination/Pagination.vue'
 export { default as WkRadio } from './components/radio/Radio.vue'
 export { default as WkRadioGroup } from './components/radio-group/RadioGroup.vue'