webcake-ui-kit 1.1.28 → 1.1.30

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

package/src/components/message/message.js

@@ -0,0 +1,133 @@
+// Global message service — an Ant-Design-style singleton.
+//
+// Usage:
+//   import { wkMessage } from 'webcake-ui-kit'
+//   wkMessage.success('Saved')
+//   const hide = wkMessage.loading('Uploading...')  // sticky; call hide() to dismiss
+//   wkMessage.config({ placement: 'bottom', maxCount: 3, duration: 5000 })
+//
+// A single MessageContainer is lazily mounted to document.body the first time a
+// message is shown; consumers never render it themselves.
+//
+// Dual-compat note: the library ships raw SFCs consumed by both Vue 2.7 and
+// Vue 3.4. We namespace-import `vue` (which never errors on a missing member)
+// and branch at runtime to avoid static import errors in Vue 2.
+// eslint-disable-next-line no-restricted-imports
+import * as VueRuntime from 'vue'
+import MessageContainer from './MessageContainer.vue'
+
+const DEFAULTS = { duration: 3000, placement: 'top', offset: 24, maxCount: 0 }
+
+let globalConfig = { ...DEFAULTS }
+let app = null // Vue 3 application instance (needed for unmount)
+let containerVm = null // MessageContainer instance we drive imperatively
+let hostEl = null
+
+function ensureContainer() {
+  if (containerVm) return containerVm
+  if (typeof document === 'undefined') return null
+
+  hostEl = document.createElement('div')
+  hostEl.setAttribute('data-wk-message-host', '')
+  document.body.appendChild(hostEl)
+
+  // Bypass strict static analysis in bundlers (e.g. Webpack 5)
+  const createAppKey = 'createApp'
+  const defaultKey = 'default'
+
+  if (typeof VueRuntime[createAppKey] === 'function') {
+    app = VueRuntime[createAppKey](MessageContainer)
+    containerVm = app.mount(hostEl)
+  } else {
+    const Vue = VueRuntime[defaultKey] || VueRuntime
+    const vm = new Vue({
+      render: h => h(MessageContainer)
+    }).$mount(hostEl)
+    containerVm = vm.$children[0]
+  }
+
+  containerVm.configure(globalConfig)
+  return containerVm
+}
+
+// Accept either a config object, (content, optsObj), or (content, duration?, onClose?).
+function toConfig(content, durationOrOpts, onClose) {
+  const cfg = content && typeof content === 'object' ? { ...content } : { content }
+  if (durationOrOpts && typeof durationOrOpts === 'object') {
+    Object.assign(cfg, durationOrOpts)
+  } else if (typeof durationOrOpts === 'function') {
+    cfg.onClose = durationOrOpts
+  } else {
+    if (durationOrOpts !== undefined) cfg.duration = durationOrOpts
+    if (onClose !== undefined) cfg.onClose = onClose
+  }
+  return cfg
+}
+
+// Show a message. Returns a function that dismisses it early.
+function open(config) {
+  const vm = ensureContainer()
+  if (!vm) return function () {}
+
+  // Per-call placement/offset override (applied before add so the container
+  // is positioned correctly when the message enters).
+  if (config.placement != null || config.offset != null) {
+    vm.configure({
+      placement: config.placement,
+      offset: config.offset
+    })
+  }
+
+  const type = config.type || 'info'
+  const duration = config.duration !== undefined ? config.duration : type === 'loading' ? 0 : globalConfig.duration
+
+  const key = vm.add({
+    key: config.key,
+    type,
+    content: config.content,
+    description: config.description,
+    action: config.action,
+    duration,
+    onClose: config.onClose
+  })
+
+  return function close() {
+    vm.remove(key)
+  }
+}
+
+function makeOpener(type) {
+  return function (content, duration, onClose) {
+    const cfg = toConfig(content, duration, onClose)
+    cfg.type = type
+    return open(cfg)
+  }
+}
+
+export const wkMessage = {
+  open,
+  success: makeOpener('success'),
+  error: makeOpener('error'),
+  info: makeOpener('info'),
+  warning: makeOpener('warning'),
+  loading: makeOpener('loading'),
+  // destroy(key) removes one message; destroy() with no key removes all.
+  destroy(key) {
+    if (!containerVm) return
+    if (key === undefined) {
+      containerVm.clear()
+      return
+    }
+    containerVm.remove(key)
+  },
+  destroyAll() {
+    if (containerVm) containerVm.clear()
+  },
+  // Update global defaults (placement/offset/maxCount/duration). Applies live.
+  config(options) {
+    globalConfig = { ...globalConfig, ...options }
+    if (containerVm) containerVm.configure(globalConfig)
+  }
+}
+
+export default wkMessage

package/src/components/progress/Progress.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ui-progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="max" :aria-valuenow="clampedValue">
+    <div class="ui-progress__bar" :style="{ width: percent + '%' }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Progress',
+
+  props: {
+    // Current progress value, clamped to the [0, max] range.
+    value: {
+      type: Number,
+      default: 0
+    },
+    // Upper bound of the progress scale (value === max renders a full bar).
+    max: {
+      type: Number,
+      default: 100,
+      validator: function (v) {
+        return v > 0
+      }
+    }
+  },
+
+  emits: [],
+
+  computed: {
+    clampedValue() {
+      if (this.value < 0) return 0
+      if (this.value > this.max) return this.max
+      return this.value
+    },
+    percent() {
+      return (this.clampedValue / this.max) * 100
+    }
+  }
+}
+</script>
+
+<style src="./progress.css" scoped></style>

package/src/components/progress/progress.css

@@ -0,0 +1,15 @@
+.ui-progress {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  overflow: hidden;
+  background: var(--accent-2);
+  border-radius: var(--rounded-xl);
+}
+
+.ui-progress__bar {
+  height: 100%;
+  background: var(--primary-fg);
+  border-radius: var(--rounded-md) 0 0 var(--rounded-md);
+  transition: width 0.2s ease;
+}

package/src/components/radio/Radio.vue

@@ -36,7 +36,7 @@ export default {
       default: ''
     },
     value: {
-      type: String,
+      type: [String, Number, Boolean],
       required: true
     },
     checked: {

package/src/components/radio-group/RadioGroup.vue

@@ -29,8 +29,8 @@ export default {
 
   props: {
     value: {
-      type: String,
-      default: ''
+      type: [String, Number, Boolean],
+      default: null
     },
     options: {
       type: Array,

package/src/components/select/Select.vue

@@ -8,6 +8,8 @@
     :close-on-select="false"
     @change="onMenuChange"
     @close="onMenuClose"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
   >
     <template #trigger="{ toggle, isOpen: open, attrs, triggerRef }">
       <div
@@ -187,7 +189,9 @@ export default {
     filterOption: {
       type: Function,
       default: null
-    }
+    },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null }
   },
 
   emits: ['change', 'update:modelValue'],

package/src/components/select/select.css

@@ -154,28 +154,30 @@
 
 /* — multiple mode — */
 .ui-select--multiple {
-  height: 36px;
+  min-height: 36px;
+  height: auto;
   align-items: center;
   flex-wrap: wrap;
   padding: var(--spacing-2xs) var(--spacing-sm) var(--spacing-2xs) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--lg {
-  height: 40px;
+  min-height: 40px;
   height: auto;
-  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  padding: var(--spacing-7) var(--spacing-md) var(--spacing-7) var(--spacing-xs);
   align-items: center;
 }
 
 .ui-select--multiple.ui-select--sm {
-  height: 32px;
+  min-height: 32px;
   height: auto;
-  padding: var(--spacing-5p5) var(--spacing-xs);
+  padding: var(--spacing-5) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--xs {
-  height: 28px;
-  padding: var(--spacing-2xs) var(--spacing-6) var(--spacing-2xs) var(--spacing-2xs);
+  min-height: 28px;
+  height: auto;
+  padding: var(--spacing-3) var(--spacing-6) var(--spacing-3) var(--spacing-2xs);
 }
 
 .ui-select--multiple .ui-select__chevron {
@@ -211,6 +213,10 @@
   font-size: 14px;
 }
 
+.ui-select--multiple.ui-select--xs .ui-select__search::placeholder {
+  font-size: 12px;
+}
+
 .ui-select__search--single {
   width: 100%;
   flex: 1;

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

@@ -15,9 +15,15 @@
     :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
   >
+    <span v-if="$slots.prefix" class="ui-select-option__prefix">
+      <slot name="prefix" />
+    </span>
     <span class="ui-select-option--label">
       <slot>{{ label || value }}</slot>
     </span>
+    <span v-if="$slots.suffix" class="ui-select-option__suffix">
+      <slot name="suffix" />
+    </span>
     <WkiCheck v-if="isSelected && isMultiMode" :size="16" color="var(--muted-fg)" />
   </div>
 </template>

package/src/components/select-option/select_option.css

@@ -78,3 +78,23 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.ui-select-option__prefix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: 20px;
+  height: 20px;
+}
+
+.ui-select-option--sm .ui-select-option__prefix {
+  min-width: 16px;
+  height: 16px;
+}
+
+.ui-select-option__suffix {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}