@keyfunc/keybricks-ds 2.6.0 → 2.8.0

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.0",
+  "version": "2.8.0",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
@@ -81,6 +81,91 @@
         "value": "#2b7fff"
       }
     },
+    "--ai-glow-blur": {
+      "group": "ai",
+      "light": {
+        "raw": "6px",
+        "value": "6px"
+      }
+    },
+    "--ai-glow-opacity": {
+      "group": "ai",
+      "light": {
+        "raw": ".4",
+        "value": ".4"
+      },
+      "dark": {
+        "raw": ".3",
+        "value": ".3"
+      }
+    },
+    "--ai-gradient-end": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--pink-500)",
+        "value": "#e355b2"
+      }
+    },
+    "--ai-gradient-start": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--blue-500)",
+        "value": "#2b7fff"
+      }
+    },
+    "--ai-gradient-stops": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--ai-gradient-start),var(--ai-gradient-end),var(--ai-gradient-start)",
+        "value": "#2b7fff,#e355b2,#2b7fff"
+      }
+    },
+    "--ai-ring-rest-track": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--border-control)",
+        "value": "#e5e5e5"
+      },
+      "dark": {
+        "raw": "var(--border-control)",
+        "value": "#333333"
+      }
+    },
+    "--ai-ring-width": {
+      "group": "ai",
+      "light": {
+        "raw": "1px",
+        "value": "1px"
+      }
+    },
+    "--ai-spin-hover": {
+      "group": "ai",
+      "light": {
+        "raw": "1.2s",
+        "value": "1.2s"
+      }
+    },
+    "--ai-spin-rest": {
+      "group": "ai",
+      "light": {
+        "raw": "5s",
+        "value": "5s"
+      }
+    },
+    "--ai-tint": {
+      "group": "ai",
+      "light": {
+        "raw": "8%",
+        "value": "8%"
+      }
+    },
+    "--ai-tint-press": {
+      "group": "ai",
+      "light": {
+        "raw": "14%",
+        "value": "14%"
+      }
+    },
     "--amber-100": {
       "group": "colors-extended",
       "light": {
@@ -2431,6 +2516,17 @@
         "value": "#8f8f8f"
       }
     },
+    "--shadow-drawer": {
+      "group": "dark",
+      "light": {
+        "raw": "-8px 0 24px rgba(0,0,0,.12)",
+        "value": "-8px 0 24px rgba(0,0,0,.12)"
+      },
+      "dark": {
+        "raw": "-8px 0 24px rgba(0,0,0,.5)",
+        "value": "-8px 0 24px rgba(0,0,0,.5)"
+      }
+    },
     "--shadow-menu": {
       "group": "dark",
       "light": {
@@ -2464,6 +2560,17 @@
         "value": "0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5)"
       }
     },
+    "--shadow-raised": {
+      "group": "dark",
+      "light": {
+        "raw": "0 1px 2px rgba(0,0,0,.08)",
+        "value": "0 1px 2px rgba(0,0,0,.08)"
+      },
+      "dark": {
+        "raw": "0 1px 2px rgba(0,0,0,.4)",
+        "value": "0 1px 2px rgba(0,0,0,.4)"
+      }
+    },
     "--shadow-selected": {
       "group": "dark",
       "light": {
@@ -2475,6 +2582,17 @@
         "value": "0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6)"
       }
     },
+    "--shadow-thumb": {
+      "group": "dark",
+      "light": {
+        "raw": "0 1px 2px rgba(0,0,0,.15)",
+        "value": "0 1px 2px rgba(0,0,0,.15)"
+      },
+      "dark": {
+        "raw": "0 1px 2px rgba(0,0,0,.5)",
+        "value": "0 1px 2px rgba(0,0,0,.5)"
+      }
+    },
     "--sidebar-w": {
       "group": "layout",
       "light": {
@@ -2584,15 +2702,15 @@
     "--switch-h": {
       "group": "layout",
       "light": {
-        "raw": "20px",
-        "value": "20px"
+        "raw": "18px",
+        "value": "18px"
       }
     },
     "--switch-w": {
       "group": "layout",
       "light": {
-        "raw": "36px",
-        "value": "36px"
+        "raw": "32px",
+        "value": "32px"
       }
     },
     "--t-hover": {

package/components/feedback/_internal/MessageBoxView.vue

@@ -1,237 +0,0 @@
-<script setup>
-import { computed, h, isVNode, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import Button from '../../buttons/Button.vue'
-import IconButton from '../../buttons/IconButton.vue'
-import Icon from '../../icons/Icon.vue'
-import { contentNode, lockBody } from './service-utils.js'
-
-const props = defineProps({ options: { type: Object, required: true } })
-const emit = defineEmits(['action'])
-const panel = ref(null)
-const input = ref(null)
-const error = ref('')
-const validating = ref(false)
-const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
-const Title = () => contentNode(props.options.title)
-const icons = { success: 'circle-check', warning: 'triangle-alert', error: 'triangle-alert', info: 'info' }
-const colors = { success: 'var(--success-strong)', warning: 'var(--warning)', error: 'var(--danger)', info: 'var(--action-primary)' }
-const icon = computed(() => props.options.icon || icons[props.options.type])
-const CustomIcon = () => isVNode(icon.value) ? icon.value : h(icon.value)
-const confirmVariant = computed(() => props.options.confirmButtonClass?.includes('el-button--danger') ? 'danger' : 'primary')
-let unlock
-let previousFocus
-let disposed = false
-let validationRevision = 0
-
-async function confirm() {
-  const options = props.options
-  if (validating.value || options.confirmButtonDisabled || options.confirmButtonLoading) return
-  if (options.showInput) {
-    const revision = ++validationRevision
-    const value = options.inputValue ?? ''
-    validating.value = true
-    let message = ''
-    try {
-      if (options.inputPattern) {
-        // 避免全局正则的 lastIndex 导致同一输入校验结果交替。
-        const pattern = new RegExp(options.inputPattern.source, options.inputPattern.flags)
-        if (!pattern.test(value)) message = options.inputErrorMessage || 'Invalid input'
-      }
-      if (!message && options.inputValidator) {
-        const result = await options.inputValidator(value)
-        if (result === false || typeof result === 'string') message = result || options.inputErrorMessage || 'Invalid input'
-      }
-    } catch (reason) {
-      message = options.inputErrorMessage || reason?.message || 'Invalid input'
-    } finally {
-      validating.value = false
-    }
-    if (disposed || revision !== validationRevision) return
-    error.value = message
-    if (message) { input.value?.focus(); return }
-  }
-  emit('action', 'confirm')
-}
-
-function close() { emit('action', 'close') }
-function onKeydown(event) {
-  if (event.key === 'Escape' && props.options.closeOnPressEscape) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
-    close()
-  }
-  if (event.key !== 'Tab') return
-  const focusable = [...panel.value.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])')]
-    .filter(node => node.getClientRects().length)
-  const first = focusable[0], last = focusable[focusable.length - 1]
-  if (!first) { event.preventDefault(); panel.value.focus(); return }
-  if (event.shiftKey && (document.activeElement === first || !panel.value.contains(document.activeElement))) {
-    event.preventDefault(); last.focus()
-  } else if (!event.shiftKey && (document.activeElement === last || !panel.value.contains(document.activeElement))) {
-    event.preventDefault(); first.focus()
-  }
-}
-function keepFocus(event) {
-  if (!panel.value.contains(event.target)) panel.value.focus()
-}
-function changeInput(event) {
-  validationRevision++
-  props.options.inputValue = event.target.value
-  error.value = ''
-}
-onMounted(async () => {
-  previousFocus = document.activeElement
-  if (props.options.lockScroll) unlock = lockBody()
-  document.addEventListener('keydown', onKeydown, true)
-  document.addEventListener('focusin', keepFocus)
-  await nextTick()
-  if (disposed || !props.options.autofocus) return
-  const target = input.value || panel.value.querySelector('[data-confirm] button') || panel.value
-  target.focus()
-  if (input.value) input.value.select()
-})
-onBeforeUnmount(() => {
-  disposed = true
-  unlock?.()
-  document.removeEventListener('keydown', onKeydown, true)
-  document.removeEventListener('focusin', keepFocus)
-  if (previousFocus?.isConnected) previousFocus.focus()
-})
-</script>
-
-<template>
-  <div
-    :class="['kb-message-box-overlay', options.modalClass]"
-    :style="{ zIndex: options.zIndex ?? 'var(--z-modal)', background: options.modal === false ? 'transparent' : undefined }"
-    @click.self="options.closeOnClickModal && close()"
-  >
-    <section
-      ref="panel"
-      :class="['kb-message-box', options.customClass, { 'kb-message-box--center': options.center, 'kb-message-box--round': options.roundButton }]"
-      :style="{ width: typeof options.width === 'number' ? `${options.width}px` : options.width }"
-      :data-size="options.size || 'lg'"
-      :aria-labelledby="`${options.id}-title`"
-      :aria-describedby="`${options.id}-content`"
-      role="alertdialog"
-      aria-modal="true"
-      tabindex="-1"
-    >
-      <header class="kb-message-box__header">
-        <span :id="`${options.id}-title`"><Title /></span>
-        <IconButton v-if="options.showClose" icon="x" :label="options.closeLabel || 'Close'" @click="close" />
-      </header>
-      <div :id="`${options.id}-content`" class="kb-message-box__body">
-        <div class="kb-message-box__message">
-          <span v-if="icon" :style="{ color: colors[options.type], display: 'inline-flex' }">
-            <Icon v-if="typeof icon === 'string'" :name="icon" :size="20" />
-            <CustomIcon v-else />
-          </span>
-          <div><Content /></div>
-        </div>
-        <div v-if="options.showInput" class="kb-message-box__input-wrap">
-          <component
-            :is="options.inputType === 'textarea' ? 'textarea' : 'input'"
-            ref="input"
-            class="kb-message-box__input"
-            :type="options.inputType === 'textarea' ? undefined : options.inputType"
-            :value="options.inputValue"
-            :placeholder="options.inputPlaceholder"
-            :aria-label="options.inputPlaceholder || options.title || 'Input'"
-            :aria-invalid="!!error"
-            :aria-describedby="error ? `${options.id}-error` : undefined"
-            @input="changeInput"
-            @keydown.enter="!$event.isComposing && options.inputType !== 'textarea' && confirm()"
-          />
-          <div v-if="error" :id="`${options.id}-error`" class="kb-message-box__error" role="alert">{{ error }}</div>
-        </div>
-      </div>
-      <footer class="kb-message-box__footer">
-        <Button
-          v-if="options.showCancelButton"
-          variant="outline"
-          :class="options.cancelButtonClass"
-          :disabled="options.cancelButtonDisabled"
-          :loading="options.cancelButtonLoading"
-          @click="emit('action', 'cancel')"
-        >
-          {{ options.cancelButtonText ?? 'Cancel' }}
-        </Button>
-        <span v-if="options.showConfirmButton" data-confirm>
-          <Button
-            :variant="confirmVariant"
-            :class="options.confirmButtonClass"
-            :disabled="options.confirmButtonDisabled"
-            :loading="options.confirmButtonLoading || validating"
-            @click="confirm"
-          >
-            {{ options.confirmButtonText ?? 'OK' }}
-          </Button>
-        </span>
-      </footer>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-.kb-message-box-overlay {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-scrim);
-  animation: kb-fade-in var(--dur-fast) var(--ease-out);
-}
-.kb-message-box {
-  width: 440px;
-  max-width: 92vw;
-  max-height: 92vh;
-  overflow: auto;
-  box-sizing: border-box;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-card);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-modal);
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--leading-base);
-  letter-spacing: var(--tracking-base);
-  color: var(--text-body);
-  animation: kb-rise var(--dur) var(--ease-out);
-}
-.kb-message-box__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--group-gap);
-  padding: var(--section-gap) var(--section-gap) 0;
-  font-weight: var(--weight-semibold);
-  font-size: var(--text-md);
-  line-height: var(--leading-md);
-  letter-spacing: var(--tracking-md);
-  color: var(--text-heading);
-}
-.kb-message-box__header > span { min-width: 0; overflow-wrap: anywhere; }
-.kb-message-box__body { padding: 20px var(--section-gap) 0; }
-.kb-message-box__message { display: flex; align-items: flex-start; gap: var(--control-px); }
-.kb-message-box__message > div { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
-.kb-message-box__input-wrap { margin-top: var(--group-gap); }
-.kb-message-box__input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--control-h);
-  padding: 0 var(--control-px);
-  font: inherit;
-  color: var(--text-heading);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-control);
-  border-radius: var(--radius-md);
-}
-.kb-message-box__input:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--ring-focus); }
-.kb-message-box__input[aria-invalid="true"] { border-color: var(--danger); }
-.kb-message-box__error { margin-top: var(--control-gap); color: var(--danger-text); }
-.kb-message-box__footer { display: flex; justify-content: flex-end; gap: var(--control-gap); padding: var(--section-gap); }
-.kb-message-box--center .kb-message-box__message { justify-content: center; text-align: center; }
-.kb-message-box--center .kb-message-box__footer { justify-content: center; }
-.kb-message-box--round :deep(.kb-message-box__footer button) { border-radius: var(--radius-full) !important; }
-</style>

package/components/feedback/_internal/MessageView.vue

@@ -1,73 +0,0 @@
-<script setup>
-import { computed, h, isVNode, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import Toast from '../Toast.vue'
-import Icon from '../../icons/Icon.vue'
-import { contentNode } from './service-utils.js'
-
-const props = defineProps({ options: { type: Object, required: true } })
-const emit = defineEmits(['close', 'height'])
-const root = ref(null)
-const tone = computed(() => props.options.type === 'error' ? 'danger' : props.options.type)
-const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
-const CustomIcon = () => typeof props.options.icon === 'string'
-  ? h(Icon, { name: props.options.icon, size: 16 })
-  : isVNode(props.options.icon) ? props.options.icon : h(props.options.icon)
-let timer
-let observer
-let paused = false
-function stop() { clearTimeout(timer) }
-function start() {
-  stop()
-  if (!paused && props.options.duration > 0) timer = setTimeout(() => emit('close'), props.options.duration)
-}
-function onEscape(event) {
-  if (event.key === 'Escape') emit('close')
-}
-watch(() => [props.options.restart, props.options.duration], start)
-onMounted(() => {
-  start()
-  const measure = () => emit('height', root.value.getBoundingClientRect().height)
-  measure()
-  if (typeof ResizeObserver !== 'undefined') {
-    observer = new ResizeObserver(measure)
-    observer.observe(root.value)
-  }
-  document.addEventListener('keydown', onEscape)
-})
-onBeforeUnmount(() => {
-  stop()
-  observer?.disconnect()
-  document.removeEventListener('keydown', onEscape)
-})
-</script>
-
-<template>
-  <div
-    :id="options.id"
-    ref="root"
-    :class="['kb-message', options.customClass, { 'kb-message--center': options.center, 'kb-message--plain': options.plain }]"
-    :role="options.type === 'error' || options.type === 'warning' ? 'alert' : 'status'"
-    :style="{ position: 'fixed', top: `${options.top}px`, left: '50%', transform: 'translateX(-50%)', zIndex: options.zIndex ?? 'var(--z-toast)', maxWidth: '92vw' }"
-    @mouseenter="paused = true; stop()"
-    @mouseleave="paused = false; start()"
-    @focusin="paused = true; stop()"
-    @focusout="paused = false; start()"
-  >
-    <Toast
-      :tone="tone"
-      :dismissible="options.showClose"
-      :close-label="options.closeLabel"
-      :style="{ minWidth: 'min(280px, 92vw)', maxWidth: '100%', boxSizing: 'border-box', ...(options.plain ? { boxShadow: 'none' } : {}) }"
-      @close="emit('close')"
-    >
-      <template v-if="options.icon" #icon><CustomIcon /></template>
-      <Content />
-      <span v-if="options.repeatNum > 1" class="kb-message__count"> × {{ options.repeatNum }}</span>
-    </Toast>
-  </div>
-</template>
-
-<style scoped>
-.kb-message--center { text-align: center; }
-.kb-message__count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
-</style>

package/components/feedback/message.js

@@ -1,68 +0,0 @@
-import { getCurrentInstance, isVNode, reactive } from 'vue'
-import MessageView from './_internal/MessageView.vue'
-import { mountService, resolveTarget } from './_internal/service-utils.js'
-
-const instances = []
-let seed = 0
-const normalize = value => typeof value === 'string' || typeof value === 'function' || isVNode(value)
-  ? { message: value } : { ...value }
-
-/** Vue 消息服务；样式由 Toast 提供，业务错误脱敏仍由应用处理。 */
-export function Message(value = {}, appContext) {
-  if (typeof document === 'undefined') return { close() {} }
-  const options = { type: 'info', duration: 3000, offset: 16, ...Message.defaults, ...normalize(value) }
-  const target = resolveTarget(options)
-  if (options.grouping) {
-    const existing = instances.find(item => item.target === target && item.options.message === options.message)
-    if (existing) {
-      existing.options.repeatNum++
-      existing.options.type = options.type
-      existing.options.restart++
-      return existing.handle
-    }
-  }
-  const state = reactive({ ...options, id: `kb-message-${++seed}`, repeatNum: 1, restart: 0, height: 0, top: options.offset })
-  let dispose
-  let closed = false
-  const handle = { close() {
-    if (closed) return
-    closed = true
-    instances.splice(instances.indexOf(entry), 1)
-    dispose?.()
-    reflow()
-    options.onClose?.(handle)
-  } }
-  const entry = { options: state, handle, target }
-  function reflow() {
-    const tops = new Map()
-    for (const item of instances) {
-      const target = item.target
-      item.options.top = Math.max(Number(item.options.offset) || 0, tops.get(target) || 0)
-      tops.set(target, item.options.top + item.options.height + 16)
-    }
-  }
-  instances.push(entry)
-  try {
-    dispose = mountService(MessageView, {
-      options: state, onClose: handle.close,
-      onHeight: height => { state.height = height; reflow() },
-    }, options, appContext || getCurrentInstance()?.appContext)
-  } catch (error) {
-    instances.splice(instances.indexOf(entry), 1)
-    reflow()
-    throw error
-  }
-  reflow()
-  return handle
-}
-
-for (const type of ['success', 'info', 'warning', 'error']) {
-  Message[type] = (value, appContext) => Message({ ...normalize(value), type }, appContext)
-}
-Message.closeAll = type => {
-  for (const entry of [...instances]) {
-    if (!type || entry.options.type === type) entry.handle.close()
-  }
-}
-export default Message
-Message.defaults = {}