@yunlefun/vue 0.1.1 → 0.1.2

package/components/YlfButton.vue

@@ -1,15 +1,298 @@
+<script lang="ts" setup>
+import type { YlfAccentTone, YlfColorAppearance } from './theme'
+import { computed } from 'vue'
+
+type ButtonVariant
+  = | 'primary' // 晴空蓝实色（主操作）
+    | 'accent' // 高饱和纯色强调
+    | 'aurora' // @deprecated 使用 accent；旧调用映射到纯色
+    | 'secondary' // 描边
+    | 'soft' // 柔色填充
+    | 'ghost' // 幽灵
+    | 'success'
+    | 'warning'
+    | 'danger'
+
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariant
+  /** 仅 accent 变体使用，默认晴空蓝 */
+  tone?: YlfAccentTone
+  /** accent 与状态变体的强调程度 */
+  appearance?: YlfColorAppearance
+  size?: ButtonSize
+  /** 胶囊圆角，默认开启（云是软的） */
+  round?: boolean
+  /** 占满整行宽度 */
+  block?: boolean
+  disabled?: boolean
+  loading?: boolean
+  /** 渲染标签，如 'a' */
+  tag?: string
+}>(), {
+  variant: 'primary',
+  tone: 'blue',
+  appearance: 'solid',
+  size: 'md',
+  round: true,
+  block: false,
+  disabled: false,
+  loading: false,
+  tag: 'button',
+})
+
+const emit = defineEmits<{ click: [e: MouseEvent] }>()
+
+const classes = computed(() => [
+  `ylf-button--${props.variant}`,
+  `ylf-button--${props.size}`,
+  `is-${props.appearance}`,
+  {
+    'is-round': props.round,
+    'is-block': props.block,
+    'is-loading': props.loading,
+    'is-disabled': props.disabled,
+  },
+])
+
+function onClick(e: MouseEvent) {
+  if (props.disabled || props.loading)
+    return
+  emit('click', e)
+}
+</script>
+
 <template>
-  <button class="ylf-button">
-    <slot />
-  </button>
+  <component
+    :is="tag"
+    class="ylf-button"
+    :class="classes"
+    :data-ylf-tone="tone"
+    :disabled="tag === 'button' ? (disabled || loading) : undefined"
+    :aria-busy="loading || undefined"
+    @click="onClick"
+  >
+    <span v-if="loading" class="ylf-button__spinner" aria-hidden="true" />
+    <slot name="icon" />
+    <span class="ylf-button__label"><slot /></span>
+  </component>
 </template>
 
 <style lang="scss">
 .ylf-button {
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  padding: 4px 12px;
+  --_radius: var(--ylf-radius, 14px);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--_radius);
+  font-family: var(--ylf-font-body, inherit);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition:
+    transform var(--ylf-duration-fast, 160ms) var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    box-shadow var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease),
+    background var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease),
+    color var(--ylf-duration-fast, 160ms) var(--ylf-ease-standard, ease),
+    border-color var(--ylf-duration-fast, 160ms) var(--ylf-ease-standard, ease);
+
+  &.is-round {
+    --_radius: var(--ylf-radius-pill, 999px);
+  }
+
+  &.is-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &:active {
+    transform: scale(0.96);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px var(--ylf-c-brand-soft, #eff6ff),
+      0 0 0 5px var(--ylf-c-brand, #2563eb);
+  }
+
+  // --- sizes ---
+  &--sm {
+    padding: 8px 18px;
+    font-size: 13px;
+  }
+
+  &--md {
+    padding: 11px 24px;
+    font-size: 15px;
+  }
+
+  &--lg {
+    padding: 14px 30px;
+    font-size: 17px;
+  }
+
+  // --- primary：晴空蓝实色（主操作，单色不花） ---
+  &--primary {
+    color: var(--ylf-c-text-on-accent, #fff);
+    background: var(--ylf-c-brand, #2563eb);
+    box-shadow: var(--ylf-shadow-sm);
+
+    &:hover {
+      background: var(--ylf-c-brand-hover, #1d4ed8);
+      transform: translateY(-2px);
+      box-shadow: var(--ylf-shadow-sm);
+    }
+  }
+
+  // 强调色来自共享上下文；实色上的文字与填充色成组维护。
+  &--accent,
+  &--aurora {
+    --_color: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+    --_soft: var(--ylf-accent-soft, var(--ylf-c-brand-soft, #eff6ff));
+    --_text: var(--ylf-accent-text, var(--ylf-c-brand, #2563eb));
+
+    color: var(--ylf-accent-on, var(--ylf-c-text-on-accent, #fff));
+    background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+    box-shadow: var(--ylf-shadow-sm);
+
+    &:hover {
+      background: var(--ylf-accent-hover, var(--ylf-c-brand-hover, #1d4ed8));
+    }
+  }
+
+  // --- secondary：描边 ---
+  &--secondary {
+    color: var(--ylf-c-text, #0f172a);
+    background: var(--ylf-c-surface, #fff);
+    border-color: var(--ylf-c-border-strong, #cbd5e1);
+
+    &:hover {
+      color: var(--ylf-c-brand, #2563eb);
+      border-color: var(--ylf-c-brand, #2563eb);
+      transform: translateY(-2px);
+    }
+  }
+
+  // --- soft：柔色填充 ---
+  &--soft {
+    color: var(--ylf-c-brand, #2563eb);
+    background: var(--ylf-c-brand-soft, #eff6ff);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--ylf-shadow-sm, 0 2px 8px -2px rgba(15, 23, 42, 0.12));
+    }
+  }
+
+  // --- ghost：幽灵 ---
+  &--ghost {
+    color: var(--ylf-c-text-2, #475569);
+    background: transparent;
+
+    &:hover {
+      color: var(--ylf-c-brand, #2563eb);
+      background: var(--ylf-c-brand-soft, #eff6ff);
+    }
+  }
+
+  // --- 语义色 ---
+  @each $status, $fill, $on, $hover in (success, #22c55e, #124324, #4ade80), (warning, #facc15, #64380e, #eab308),
+    (danger, #ff6b4a, #551b0a, #ff856b)
+  {
+    &--#{$status} {
+      --_color: var(--ylf-status-#{$status}, #{$fill});
+      --_soft: var(--ylf-status-#{$status}-soft, var(--ylf-c-bg-soft, #f1f5f9));
+      --_text: var(--ylf-status-#{$status}-text, #{$on});
+
+      color: var(--ylf-status-#{$status}-on, $on);
+      background: var(--ylf-status-#{$status}, $fill);
+
+      &:hover {
+        background: var(--ylf-status-#{$status}-hover, $hover);
+      }
+    }
+  }
+
+  &--accent,
+  &--aurora,
+  &--success,
+  &--warning,
+  &--danger {
+    &.is-soft,
+    &.is-outline {
+      color: var(--_text);
+      box-shadow: none;
+
+      &:hover {
+        background: var(--_soft);
+        border-color: var(--_text);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--ylf-c-brand, #2563eb);
+        outline-offset: 3px;
+      }
+    }
+
+    &.is-soft {
+      background: var(--_soft);
+    }
+
+    &.is-outline {
+      background: transparent;
+      border-color: var(--_text);
+    }
+  }
+
+  // --- 状态 ---
+  &.is-disabled,
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    box-shadow: none;
+    transform: none !important;
+  }
+
+  &.is-loading {
+    cursor: progress;
+  }
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: ylf-button-spin 0.7s linear infinite;
+  }
+}
+
+@keyframes ylf-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-button {
+    transition: none;
+  }
 
-  border-radius: 4px;
+  .ylf-button__spinner {
+    animation-duration: 1.4s;
+  }
 }
 </style>

package/components/YlfCard.vue

@@ -1,9 +1,80 @@
+<script lang="ts" setup>
+import type { YlfAccentTone } from './theme'
+
+type CardVariant
+  = | 'soft' // 柔影：默认表面 + 色染柔影
+    | 'glass' // 云玻璃：背景模糊通透
+    | 'accent' // 纯色顶部强调
+    | 'tinted' // 柔色表面，用于内容分组
+    | 'gradient' // @deprecated 使用 accent
+
+withDefaults(defineProps<{
+  variant?: CardVariant
+  tone?: YlfAccentTone
+  /** 悬停时轻轻抬升 */
+  hoverable?: boolean
+  /** 内边距，接受任意 CSS 值 */
+  padding?: string
+}>(), {
+  variant: 'soft',
+  tone: 'blue',
+  hoverable: true,
+  padding: '22px',
+})
+</script>
+
 <template>
   <div
-    class="flex items-center justify-center bg-white p-2 dark:bg-gray-800"
-
-    rounded shadow transition hover:shadow-md
+    class="ylf-card"
+    :data-ylf-tone="tone"
+    :class="[`ylf-card--${variant}`, { 'is-hoverable': hoverable }]"
+    :style="{ padding }"
   >
     <slot />
   </div>
 </template>
+
+<style lang="scss">
+.ylf-card {
+  position: relative;
+  border-radius: var(--ylf-radius-lg, 20px);
+  color: var(--ylf-c-text, #0f172a);
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  box-shadow: var(--ylf-shadow-sm, 0 2px 8px -2px rgba(15, 23, 42, 0.12));
+  transition:
+    transform var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease),
+    box-shadow var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease),
+    background var(--ylf-duration-normal, 240ms) var(--ylf-ease-standard, ease);
+
+  &.is-hoverable:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--ylf-shadow, 0 10px 28px -8px rgba(15, 23, 42, 0.16));
+  }
+
+  // 云玻璃
+  &--glass {
+    background: var(--ylf-glass-bg, rgba(255, 255, 255, 0.62));
+    border-color: var(--ylf-glass-border, rgba(255, 255, 255, 0.7));
+    -webkit-backdrop-filter: var(--ylf-glass-blur, saturate(160%) blur(16px));
+    backdrop-filter: var(--ylf-glass-blur, saturate(160%) blur(16px));
+  }
+
+  &--accent,
+  &--gradient {
+    border-top: 3px solid var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+  }
+
+  &--tinted {
+    background: var(--ylf-accent-soft, var(--ylf-c-brand-soft, #eff6ff));
+    border-color: color-mix(in srgb, var(--ylf-accent, var(--ylf-c-brand, #2563eb)) 35%, var(--ylf-c-surface, #fff));
+    box-shadow: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-card {
+    transition: none;
+  }
+}
+</style>

package/components/YlfCheckbox.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+// 行为 / 可访问性由 reka-ui 提供（role=checkbox、键盘、三态 indeterminate）；皮肤走 token。
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
+
+withDefaults(defineProps<{
+  disabled?: boolean
+  /** 表单提交值 */
+  value?: string
+}>(), {
+  disabled: false,
+})
+
+const checked = defineModel<boolean | 'indeterminate'>({ default: false })
+</script>
+
+<template>
+  <CheckboxRoot
+    v-model="checked"
+    :disabled="disabled"
+    :value="value"
+    class="ylf-checkbox"
+  >
+    <CheckboxIndicator class="ylf-checkbox__indicator">
+      <svg v-if="checked === 'indeterminate'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+        <path d="M5 12h14" />
+      </svg>
+      <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M5 12.5l4.5 4.5L19 7" />
+      </svg>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
+
+<style lang="scss">
+.ylf-checkbox {
+  --_size: 20px;
+
+  flex: none;
+  width: var(--_size);
+  height: var(--_size);
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 2px solid var(--ylf-c-border-strong, #cbd5e1);
+  border-radius: 7px;
+  background: var(--ylf-c-surface, #fff);
+  color: var(--ylf-c-text-on-accent, #fff);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.2s ease;
+
+  &:hover:not([data-disabled]) {
+    border-color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--ylf-c-brand-soft, #eff6ff);
+  }
+
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
+    background: var(--ylf-c-brand, #2563eb);
+    border-color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &__indicator {
+    display: inline-flex;
+  }
+
+  &__indicator svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+</style>

package/components/YlfDialog.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+// 行为 / 可访问性由 reka-ui 提供（遮罩、焦点陷阱、ESC / 点击外部关闭、滚动锁、aria）；皮肤走 token。
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  VisuallyHidden,
+} from 'reka-ui'
+import { computed, useSlots } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  description?: string
+  /** 没有可见标题时供屏幕阅读器使用 */
+  accessibleTitle?: string
+}>(), {
+  accessibleTitle: '对话框',
+})
+
+const open = defineModel<boolean>('open', { default: false })
+const slots = useSlots()
+const hasVisibleTitle = computed(() => Boolean(props.title || slots.title))
+const hasDescription = computed(() => Boolean(props.description || slots.description))
+const descriptionProps = computed(() => hasDescription.value
+  ? {}
+  : { 'aria-describedby': undefined })
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogTrigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </DialogTrigger>
+
+    <DialogPortal>
+      <DialogOverlay class="ylf-dialog__overlay" />
+      <DialogContent class="ylf-dialog__content" v-bind="descriptionProps">
+        <DialogTitle v-if="hasVisibleTitle" class="ylf-dialog__title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </DialogTitle>
+        <VisuallyHidden v-else as-child>
+          <DialogTitle>{{ accessibleTitle }}</DialogTitle>
+        </VisuallyHidden>
+
+        <DialogDescription v-if="hasDescription" class="ylf-dialog__desc">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </DialogDescription>
+
+        <div class="ylf-dialog__body">
+          <slot />
+        </div>
+
+        <DialogClose class="ylf-dialog__close" aria-label="关闭">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <path d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style lang="scss">
+.ylf-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: var(--ylf-c-overlay, rgba(13, 17, 32, 0.45));
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+
+  &[data-state='open'] {
+    animation: ylf-dialog-overlay-in 0.2s ease;
+  }
+}
+
+.ylf-dialog__content {
+  position: fixed;
+  z-index: 101;
+  top: 50%;
+  left: 50%;
+  width: calc(100vw - 32px);
+  max-width: 460px;
+  max-height: calc(100vh - 32px);
+  overflow: auto;
+  padding: 24px;
+  transform: translate(-50%, -50%);
+  border-radius: var(--ylf-radius-lg, 20px);
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  box-shadow: var(--ylf-shadow-lg, 0 22px 56px -14px rgba(15, 23, 42, 0.22));
+
+  &[data-state='open'] {
+    animation: ylf-dialog-in 0.22s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.ylf-dialog__title {
+  margin: 0 0 6px;
+  font-family: var(--ylf-font-heading, inherit);
+  font-size: 19px;
+  font-weight: 700;
+  color: var(--ylf-c-text, #0f172a);
+}
+
+.ylf-dialog__desc {
+  margin: 0 0 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--ylf-c-text-2, #475569);
+}
+
+.ylf-dialog__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--ylf-radius-sm, 10px);
+  background: transparent;
+  color: var(--ylf-c-text-3, #64748b);
+  cursor: pointer;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease;
+
+  &:hover {
+    background: var(--ylf-c-bg-mute, #e2e8f0);
+    color: var(--ylf-c-text, #0f172a);
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+@keyframes ylf-dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes ylf-dialog-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-dialog__overlay[data-state='open'],
+  .ylf-dialog__content[data-state='open'] {
+    animation: none;
+  }
+}
+</style>