webcake-ui-kit 1.1.29 → 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/input/input.css

@@ -126,6 +126,11 @@
   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;

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);
+}

package/src/components/message/message.css

@@ -0,0 +1,69 @@
+.ui-message {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  max-width: 480px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+  box-shadow: var(--shadow-sonner);
+}
+
+.ui-message__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ui-message__wrapper {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+
+.ui-message__content {
+  color: var(--primary-fg);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing, 0);
+  word-break: break-word;
+}
+
+.ui-message__description {
+  color: var(--muted-fg);
+  font-size: var(--paragraph-small-font-size);
+  font-family: var(--font-family-body);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  word-break: break-word;
+}
+
+.ui-message--success .ui-message__icon {
+  color: var(--positive);
+}
+
+.ui-message--error .ui-message__icon {
+  color: var(--destructive);
+}
+
+.ui-message--warning .ui-message__icon {
+  color: var(--warning);
+}
+
+.ui-message--info .ui-message__icon {
+  color: var(--infor);
+}
+
+.ui-message--loading .ui-message__icon {
+  color: var(--primary-fg);
+}