webcake-ui-kit 1.1.28 → 1.1.30

package/src/components/date-picker/panel-header.css

@@ -0,0 +1,71 @@
+.ui-cal-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: 32px;
+  font-family: var(--font-family-body);
+}
+
+.ui-cal-header__nav {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+  flex-shrink: 0;
+}
+
+/* One label/select group per visible month, centered over its grid. */
+.ui-cal-header__labels {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.ui-cal-header__group {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+}
+
+/* Clickable month/year text label (default when selects are disabled). */
+.ui-cal-header__label {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  font-weight: 400;
+  color: var(--primary-fg);
+  border-radius: var(--rounded-md);
+}
+
+/* .ui-select fills its container (width:100%), so size via these wrappers. */
+.ui-cal-header__select {
+  display: block;
+}
+
+.ui-cal-header__select--month {
+  flex: 1 1 auto;
+  max-width: 98px;
+}
+
+.ui-cal-header__select--year {
+  flex: 0 0 88px;
+  width: 88px;
+}
+
+.ui-cal-header__label_month_not_select,
+.ui-cal-header__label_year_not_select {
+  font-weight: 500;
+}
+
+.ui-cal-header__label_year_not_select {
+  margin-left: 4px;
+}
+
+.ui-cal-header__label_month_not_select {
+  margin-right: 4px;
+}

package/src/components/date-picker/time-panel.css

@@ -0,0 +1,63 @@
+.ui-time-panel {
+  display: flex;
+  gap: var(--spacing-3xs);
+  height: 200px;
+  font-family: var(--font-family-body);
+}
+
+/* Each part (hour/minute/second) scrolls independently. */
+.ui-time-panel__col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 var(--spacing-3xs);
+}
+
+.ui-time-panel__col + .ui-time-panel__col {
+  border-left: 1px solid var(--border-primary);
+}
+
+.ui-time-panel__col::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ui-time-panel__col::-webkit-scrollbar-thumb {
+  background: var(--accent-2);
+  border-radius: 999px;
+
+  border: 0 solid transparent;
+  background-clip: padding-box;
+}
+
+.ui-time-panel__opt {
+  flex-shrink: 0;
+  width: 44px;
+  height: 30px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--rounded-md);
+  font-family: inherit;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+  text-align: center;
+}
+
+.ui-time-panel__opt:hover:not(.is-disabled):not(.is-active) {
+  background: var(--accent-1);
+}
+
+.ui-time-panel__opt.is-active {
+  background: var(--primary-brand-bg);
+  color: var(--inverse-fg);
+  font-weight: 600;
+}
+
+.ui-time-panel__opt.is-disabled {
+  color: var(--muted-fg);
+  cursor: not-allowed;
+}

package/src/components/dropdown/Dropdown.vue

@@ -9,6 +9,8 @@
     @open="$emit('open')"
     @close="$emit('close')"
     :width="width"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
   >
     <template #trigger="{ triggerRef }">
       <span
@@ -21,7 +23,14 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" :size="size" />
+    <DropdownMenuItems
+      v-if="hasItems"
+      :items="items"
+      :value="value"
+      @select="onItemSelect"
+      :size="size"
+      :showChecked="showChecked"
+    />
     <slot v-else name="overlay"></slot>
   </Menu>
 </template>
@@ -80,7 +89,10 @@ export default {
       type: String,
       default: 'md',
       validator: v => ['sm', 'md', 'lg'].includes(v)
-    }
+    },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null },
+    showChecked: { type: Boolean, default: false }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
   data() {

package/src/components/dropdown/DropdownMenuItems.vue

@@ -35,7 +35,7 @@
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
-          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
+          <WkiCheck v-if="isActive(child.key) && showChecked" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -87,7 +87,7 @@
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
-          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
+          <WkiCheck v-if="isActive(child.key) && showChecked" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -116,7 +116,7 @@
           item.label
         }}</span>
         <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
-        <WkiCheck v-if="isActive(item.key)" :size="16" color="var(--muted-fg)" />
+        <WkiCheck v-if="isActive(item.key) && showChecked" :size="16" color="var(--muted-fg)" />
       </div>
     </div>
   </div>
@@ -150,6 +150,10 @@ export default {
     size: {
       type: String,
       default: 'md'
+    },
+    showChecked: {
+      type: Boolean,
+      default: false
     }
   },
 

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

@@ -54,6 +54,10 @@
   background: var(--destructive-subtle) !important;
 }
 
+.ui-dropdown-items__item--destructive.ui-dropdown-items__item--active {
+  background: var(--destructive-subtle) !important;
+}
+
 .ui-dropdown-items__item--sub {
   padding-left: calc(var(--spacing-sm) + var(--spacing-md));
 }
@@ -139,17 +143,6 @@
   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;

package/src/components/input/input.css

@@ -126,19 +126,24 @@
   cursor: not-allowed;
 }
 
+.ui-input__field::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
 /* Decoration slot wrappers — fixed-size icon containers. */
 .ui-input__decoration {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 20px;
+  min-width: 20px;
   height: 20px;
   color: var(--muted-fg);
 }
 
 .ui-input--size-xs .ui-input__decoration,
 .ui-input--size-tiny .ui-input__decoration {
-  width: 16px;
+  min-width: 16px;
   height: 16px;
 }

package/src/components/menu/Menu.vue

@@ -14,7 +14,7 @@
           role="menu"
           @keydown="_kmOnKeydown"
         >
-          <div class="ui-menu__content">
+          <div :class="['ui-menu__content', overlayClassName]" :style="overlayStyle">
             <slot></slot>
           </div>
         </div>
@@ -67,7 +67,9 @@ export default {
     closeOnEsc: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     anchorWidth: { type: Boolean, default: false },
-    width: { type: [String, Number], default: null }
+    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', 'select'],
   data() {
@@ -182,6 +184,9 @@ export default {
       this.$nextTick(() => {
         const float = this.$refs.floating
         if (!float) return
+        // Tag the floating panel with its trigger so click-outside-mixin can
+        // detect nested portals opened from within this panel.
+        float._wkTrigger = this._triggerEl
         this._coSetElements(this._triggerEl, float)
         this._kmSetFloatEl(float)
         this._pmAttach(this._triggerEl, float)

package/src/components/menu/menu.css

@@ -20,7 +20,6 @@
   display: flex;
   flex-direction: column;
   min-width: 176px;
-  max-width: 320px;
   outline: none;
   pointer-events: auto;
   box-sizing: border-box;

package/src/components/message/Message.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="ui-message" :class="`ui-message--${type}`" role="status" aria-live="polite">
+    <span class="ui-message__icon">
+      <WkSpinner v-if="type === 'loading'" size="sm" />
+      <component :is="iconComponent" v-else :size="18" />
+    </span>
+    <div class="ui-message__wrapper">
+      <span class="ui-message__content">
+        <slot>{{ content }}</slot>
+      </span>
+      <span v-if="description" class="ui-message__description">{{ description }}</span>
+    </div>
+    <WkButton v-if="action" size="mini" :variant="action.variant || 'primary'" @click="handleAction">{{
+      action.label
+    }}</WkButton>
+  </div>
+</template>
+
+<script>
+import WkSpinner from '../spinner/Spinner.vue'
+import WkButton from '../button/Button.vue'
+import { WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo } from '../../icons'
+
+const ICON_BY_TYPE = {
+  success: 'WkiCircleCheck',
+  error: 'WkiCircleX',
+  warning: 'WkiTriangleAlert',
+  info: 'WkiInfo'
+}
+
+export default {
+  name: 'Message',
+  components: { WkSpinner, WkButton, WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo },
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+      validator: function (v) {
+        return ['info', 'success', 'error', 'warning', 'loading'].includes(v)
+      }
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['close'],
+  computed: {
+    iconComponent: function () {
+      return ICON_BY_TYPE[this.type] || ICON_BY_TYPE.info
+    }
+  },
+  methods: {
+    handleAction: function () {
+      if (typeof this.action.onClick === 'function') {
+        this.action.onClick()
+      }
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style src="./message.css" scoped></style>

package/src/components/message/MessageContainer.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="ui-message-container"
+    :class="`ui-message-container--${placement}`"
+    :style="containerStyle"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div :class="['ui-message-list', { 'ui-message-list--expanded': hovered }]">
+      <div v-for="(item, idx) in messages" :key="item.key" class="ui-message-item" :style="itemStyle(idx)">
+        <Message
+          :type="item.type"
+          :content="item.content"
+          :description="item.description"
+          :action="item.action"
+          @close="remove(item.key)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from './Message.vue'
+
+let seed = 0
+
+// Center placements ('top'/'bottom') flow messages as a spaced column; the four
+// corner placements anchor to a corner and overlap messages (newest on top).
+const PLACEMENTS = ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right']
+
+export default {
+  name: 'MessageContainer',
+  components: { Message },
+  emits: [],
+  data() {
+    return {
+      messages: [],
+      placement: 'top',
+      offset: 24,
+      maxCount: 0,
+      hovered: false,
+      itemOffsets: []
+    }
+  },
+  computed: {
+    containerStyle() {
+      const p = this.placement
+      const o = this.offset + 'px'
+      const isBottom = p === 'bottom' || p === 'bottom-left' || p === 'bottom-right'
+      const style = {}
+      style[isBottom ? 'bottom' : 'top'] = o
+      // Corner placements pin a horizontal edge and drop the CSS center transform.
+      if (p === 'top-left' || p === 'bottom-left') {
+        style.left = o
+        style.right = 'auto'
+        style.transform = 'none'
+      } else if (p === 'top-right' || p === 'bottom-right') {
+        style.right = o
+        style.left = 'auto'
+        style.transform = 'none'
+      }
+      return style
+    }
+  },
+  watch: {
+    hovered(val) {
+      if (val) {
+        this.$nextTick(this.measureOffsets)
+      } else {
+        this.itemOffsets = []
+      }
+    },
+    'messages.length'() {
+      if (this.hovered) this.$nextTick(this.measureOffsets)
+    }
+  },
+  // Timers live off the reactive data map so mutating them never triggers a render.
+  created() {
+    this._timers = {}
+    this._hoverTimer = null
+  },
+  // Declare both teardown hooks: Vue 2.7 fires beforeDestroy, Vue 3.4 fires beforeUnmount.
+  beforeUnmount() {
+    this.clear()
+    clearTimeout(this._hoverTimer)
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.clear()
+    clearTimeout(this._hoverTimer)
+  },
+  methods: {
+    onMouseEnter() {
+      clearTimeout(this._hoverTimer)
+      this.hovered = true
+    },
+    onMouseLeave() {
+      this._hoverTimer = setTimeout(() => {
+        this.hovered = false
+      }, 200)
+    },
+    // Measure each item's real offsetHeight and compute cumulative Y offsets
+    // for the expanded stack. Newest item (last in DOM) anchors at Y=0.
+    measureOffsets() {
+      if (!this.$el) return
+      const items = Array.from(this.$el.querySelectorAll('.ui-message-item'))
+      if (!items.length) {
+        this.itemOffsets = []
+        return
+      }
+      const GAP = 8
+      const n = items.length
+      const offsets = new Array(n)
+      let cumulative = 0
+      for (let reverseIdx = 0; reverseIdx < n; reverseIdx++) {
+        offsets[reverseIdx] = cumulative
+        cumulative += items[n - 1 - reverseIdx].offsetHeight + GAP
+      }
+      this.itemOffsets = offsets
+    },
+    // Returns inline style for item at v-for index idx (0 = oldest, last = newest).
+    itemStyle(idx) {
+      if (!this.hovered || !this.itemOffsets.length) return {}
+      const reverseIdx = this.messages.length - 1 - idx
+      const y = this.itemOffsets[reverseIdx]
+      if (y === undefined) return {}
+      const isBottom =
+        this.placement === 'bottom' || this.placement === 'bottom-left' || this.placement === 'bottom-right'
+      return { transform: 'translateY(' + (isBottom ? -y : y) + 'px) scaleX(1)', opacity: '1' }
+    },
+    // Merge global/service config into the container's own reactive state.
+    configure(opts) {
+      if (!opts) return
+      if (opts.placement) this.placement = PLACEMENTS.includes(opts.placement) ? opts.placement : 'top'
+      if (opts.offset != null) this.offset = opts.offset
+      if (opts.maxCount != null) this.maxCount = opts.maxCount
+    },
+    // Add (or update, when the key already exists) a message. Returns its key.
+    add(config) {
+      const key = config.key != null ? config.key : `wk-msg-${++seed}`
+      const existing = this.messages.find(m => m.key === key)
+      if (existing) {
+        existing.type = config.type || 'info'
+        existing.content = config.content != null ? config.content : ''
+        existing.description = config.description || null
+        existing.action = config.action || null
+        existing.onClose = config.onClose || null
+        this.scheduleRemoval(key, config.duration)
+        return key
+      }
+      this.messages.push({
+        key,
+        type: config.type || 'info',
+        content: config.content != null ? config.content : '',
+        description: config.description || null,
+        action: config.action || null,
+        onClose: config.onClose || null
+      })
+      // Enforce maxCount by evicting the oldest entries.
+      if (this.maxCount > 0 && this.messages.length > this.maxCount) {
+        const overflow = this.messages.slice(0, this.messages.length - this.maxCount)
+        overflow.forEach(m => this.remove(m.key))
+      }
+      this.scheduleRemoval(key, config.duration)
+      return key
+    },
+    scheduleRemoval(key, duration) {
+      this.clearTimer(key)
+      // duration <= 0 (or missing) => sticky; caller removes it manually.
+      if (duration && duration > 0) {
+        this._timers[key] = setTimeout(() => this.remove(key), duration)
+      }
+    },
+    remove(key) {
+      this.clearTimer(key)
+      const idx = this.messages.findIndex(m => m.key === key)
+      if (idx === -1) return
+      const [removed] = this.messages.splice(idx, 1)
+      if (removed && typeof removed.onClose === 'function') removed.onClose()
+    },
+    clear() {
+      Object.keys(this._timers).forEach(k => this.clearTimer(k))
+      const items = this.messages
+      this.messages = []
+      items.forEach(m => {
+        if (typeof m.onClose === 'function') m.onClose()
+      })
+    },
+    clearTimer(key) {
+      if (this._timers[key]) {
+        clearTimeout(this._timers[key])
+        delete this._timers[key]
+      }
+    }
+  }
+}
+</script>
+
+<style src="./message-container.css" scoped></style>

package/src/components/message/message-container.css

@@ -0,0 +1,108 @@
+.ui-message-container {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  pointer-events: none;
+}
+
+.ui-message-list {
+  display: grid;
+  pointer-events: auto;
+  --step: 44px;
+}
+
+/* All items share one grid cell; DOM order sets z — last in DOM = newest = on top */
+.ui-message-item {
+  grid-area: 1 / 1;
+  pointer-events: auto;
+  transition:
+    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ── Collapsed stack peek ──────────────────────────────────── */
+
+.ui-message-item:nth-last-child(1) {
+  z-index: 3;
+}
+
+.ui-message-item:nth-last-child(2) {
+  z-index: 2;
+  transform: translateY(8px) scaleX(0.95);
+}
+
+.ui-message-item:nth-last-child(n + 3) {
+  z-index: 1;
+  transform: translateY(16px) scaleX(0.9);
+}
+
+.ui-message-item:nth-last-child(n + 5) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Bottom placements: peek cards appear above the top card */
+.ui-message-container--bottom .ui-message-item:nth-last-child(2),
+.ui-message-container--bottom-left .ui-message-item:nth-last-child(2),
+.ui-message-container--bottom-right .ui-message-item:nth-last-child(2) {
+  transform: translateY(-8px) scaleX(0.95);
+}
+
+.ui-message-container--bottom .ui-message-item:nth-last-child(n + 3),
+.ui-message-container--bottom-left .ui-message-item:nth-last-child(n + 3),
+.ui-message-container--bottom-right .ui-message-item:nth-last-child(n + 3) {
+  transform: translateY(-16px) scaleX(0.9);
+}
+
+/* ── Alignment ─────────────────────────────────────────────── */
+
+.ui-message-container--top .ui-message-item,
+.ui-message-container--bottom .ui-message-item {
+  justify-self: center;
+}
+
+.ui-message-container--top-left .ui-message-item,
+.ui-message-container--bottom-left .ui-message-item {
+  justify-self: start;
+}
+
+.ui-message-container--top-right .ui-message-item,
+.ui-message-container--bottom-right .ui-message-item {
+  justify-self: end;
+}
+
+/* ── Enter/leave animation ─────────────────────────────────── */
+/*
+ * Vue 2 applies `-enter` / `-leave` for the start frame;
+ * Vue 3 applies `-enter-from` / `-leave-from`. Both listed for dual compat.
+ */
+.ui-message-anim-enter-active,
+.ui-message-anim-leave-active {
+  transition:
+    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ui-message-anim-enter-from,
+.ui-message-anim-enter,
+.ui-message-anim-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+
+.ui-message-container--bottom .ui-message-anim-enter-from,
+.ui-message-container--bottom .ui-message-anim-enter,
+.ui-message-container--bottom .ui-message-anim-leave-to,
+.ui-message-container--bottom-left .ui-message-anim-enter-from,
+.ui-message-container--bottom-left .ui-message-anim-enter,
+.ui-message-container--bottom-left .ui-message-anim-leave-to,
+.ui-message-container--bottom-right .ui-message-anim-enter-from,
+.ui-message-container--bottom-right .ui-message-anim-enter,
+.ui-message-container--bottom-right .ui-message-anim-leave-to {
+  transform: translateY(16px);
+}
+
+.ui-message-anim-move {
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}