@yunlefun/vue 0.1.1 → 0.1.2

package/components/YlfDropdownMenu.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from 'reka-ui'
+
+interface MenuItem {
+  label?: string
+  value?: string
+  disabled?: boolean
+  /** 渲染成分隔线 */
+  separator?: boolean
+}
+
+defineProps<{
+  items: MenuItem[]
+}>()
+
+const emit = defineEmits<{ select: [value: string] }>()
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent class="ylf-menu" :side-offset="6" align="start">
+        <template v-for="(it, i) in items" :key="i">
+          <DropdownMenuSeparator v-if="it.separator" class="ylf-menu__sep" />
+          <DropdownMenuItem
+            v-else
+            class="ylf-menu__item"
+            :disabled="it.disabled"
+            @select="it.value && emit('select', it.value)"
+          >
+            {{ it.label }}
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<style lang="scss">
+.ylf-menu {
+  z-index: 105;
+  min-width: 180px;
+  padding: 6px;
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  border-radius: var(--ylf-radius, 14px);
+  box-shadow: var(--ylf-shadow-lg, 0 22px 56px -14px rgba(15, 23, 42, 0.22));
+  transform-origin: var(--reka-dropdown-menu-content-transform-origin);
+
+  &[data-state='open'] {
+    animation: ylf-pop-in 0.16s ease;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: var(--ylf-c-text, #0f172a);
+    border-radius: var(--ylf-radius-sm, 10px);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+
+    &[data-highlighted] {
+      background: var(--ylf-c-brand-soft, #eff6ff);
+      color: var(--ylf-c-brand, #2563eb);
+    }
+
+    &[data-disabled] {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+  }
+
+  &__sep {
+    height: 1px;
+    margin: 6px 4px;
+    background: var(--ylf-c-border, #e2e8f0);
+  }
+}
+
+@keyframes ylf-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-menu[data-state='open'] {
+    animation: none;
+  }
+}
+</style>

package/components/YlfLogo.vue

@@ -1,10 +1,86 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  size?: 'sm' | 'md' | 'lg'
+  layout?: 'vertical' | 'horizontal'
+  /** 是否显示「云乐坊」文字 */
+  wordmark?: boolean
+}>(), {
+  size: 'md',
+  layout: 'vertical',
+  wordmark: true,
+})
+</script>
+
 <template>
-  <div inline-flex cursor-default font-300>
-    <div flex flex-col children:mx-auto>
-      <div class="i-ri-cloud-line" text-8xl />
-      <span mt--2 text-2xl text-black>
-        云乐坊
-      </span>
-    </div>
+  <div class="ylf-logo" :class="[`ylf-logo--${size}`, `ylf-logo--${layout}`]">
+    <span class="ylf-logo__mark" aria-hidden="true">
+      <svg viewBox="0 0 100 70" fill="currentColor">
+        <path d="M44 35L27.5 44.5263V25.4737L44 35Z" />
+        <circle cx="65" cy="35" r="9" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M85 0H15V15H0V55H15V70H85V55H100V15H85V0ZM85 15H15V55H85V15Z" />
+      </svg>
+    </span>
+    <span v-if="wordmark" class="ylf-logo__name">云乐坊</span>
   </div>
 </template>
+
+<style lang="scss">
+.ylf-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: default;
+  line-height: 1;
+
+  &--vertical {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__mark {
+    flex: none;
+    display: grid;
+    place-items: center;
+    color: var(--ylf-c-brand, #2563eb);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__name {
+    font-family: var(--ylf-font-wordmark, var(--ylf-font-display, sans-serif));
+    font-weight: 700;
+    color: var(--ylf-c-text, #0f172a);
+  }
+
+  // sizes
+  &--sm &__mark {
+    width: 36px;
+    height: 25.2px;
+  }
+
+  &--sm &__name {
+    font-size: 18px;
+  }
+
+  &--md &__mark {
+    width: 48px;
+    height: 33.6px;
+  }
+
+  &--md &__name {
+    font-size: 24px;
+  }
+
+  &--lg &__mark {
+    width: 72px;
+    height: 50.4px;
+  }
+
+  &--lg &__name {
+    font-size: 34px;
+  }
+}
+</style>

package/components/YlfPopover.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+
+withDefaults(defineProps<{
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+}>(), {
+  side: 'bottom',
+  align: 'center',
+})
+
+const open = defineModel<boolean>('open', { default: false })
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open">
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent :side="side" :align="align" :side-offset="8" class="ylf-popover">
+        <slot />
+        <PopoverArrow class="ylf-popover__arrow" :width="12" :height="6" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<style lang="scss">
+.ylf-popover {
+  z-index: 105;
+  min-width: 180px;
+  max-width: 320px;
+  padding: 16px;
+  color: var(--ylf-c-text, #0f172a);
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  border-radius: var(--ylf-radius, 14px);
+  box-shadow: var(--ylf-shadow-lg, 0 22px 56px -14px rgba(15, 23, 42, 0.22));
+  transform-origin: var(--reka-popover-content-transform-origin);
+
+  &[data-state='open'] {
+    animation: ylf-pop-in 0.18s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  &__arrow {
+    fill: var(--ylf-c-surface, #fff);
+    stroke: var(--ylf-c-border, #e2e8f0);
+  }
+}
+
+@keyframes ylf-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-popover[data-state='open'] {
+    animation: none;
+  }
+}
+</style>

package/components/YlfProgress.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { YlfAccentTone } from './theme'
+import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  value?: number
+  max?: number
+  /** 进度条填充：brand 主色或 accent 纯色；aurora 是 accent 的旧别名 */
+  variant?: 'brand' | 'accent' | 'aurora'
+  tone?: YlfAccentTone
+}>(), {
+  value: 0,
+  max: 100,
+  variant: 'brand',
+  tone: 'blue',
+})
+
+const percent = computed(() => Math.max(0, Math.min(100, (props.value / props.max) * 100)))
+</script>
+
+<template>
+  <ProgressRoot
+    :model-value="value"
+    :max="max"
+    class="ylf-progress"
+    :data-ylf-tone="tone"
+    :class="`ylf-progress--${variant}`"
+  >
+    <ProgressIndicator
+      class="ylf-progress__indicator"
+      :style="{ transform: `translateX(-${100 - percent}%)` }"
+    />
+  </ProgressRoot>
+</template>
+
+<style lang="scss">
+.ylf-progress {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--ylf-c-bg-mute, #e2e8f0);
+}
+
+.ylf-progress__indicator {
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--ylf-c-brand, #2563eb);
+  transition: transform 0.4s var(--ylf-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.ylf-progress--accent .ylf-progress__indicator,
+.ylf-progress--aurora .ylf-progress__indicator {
+  background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-progress__indicator {
+    transition: none;
+  }
+}
+</style>

package/components/YlfRadioGroup.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+// 行为 / 可访问性由 reka-ui 提供（role=radiogroup、方向键 roving focus）；皮肤走 token。
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+
+interface RadioOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  options: RadioOption[]
+  disabled?: boolean
+  orientation?: 'vertical' | 'horizontal'
+}>(), {
+  disabled: false,
+  orientation: 'vertical',
+})
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-model="model"
+    :disabled="disabled"
+    :orientation="orientation"
+    class="ylf-radio-group"
+    :class="`ylf-radio-group--${orientation}`"
+  >
+    <RadioGroupItem
+      v-for="opt in options"
+      :key="opt.value"
+      :value="opt.value"
+      :disabled="opt.disabled"
+      class="ylf-radio"
+    >
+      <span class="ylf-radio__control">
+        <RadioGroupIndicator class="ylf-radio__dot" />
+      </span>
+      <span class="ylf-radio__label">{{ opt.label }}</span>
+    </RadioGroupItem>
+  </RadioGroupRoot>
+</template>
+
+<style lang="scss">
+.ylf-radio-group {
+  display: flex;
+  gap: 14px;
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.ylf-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ylf-c-text, #0f172a);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &__control {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    display: inline-grid;
+    place-items: center;
+    border: 2px solid var(--ylf-c-border-strong, #cbd5e1);
+    border-radius: 50%;
+    background: var(--ylf-c-surface, #fff);
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.2s ease;
+  }
+
+  &:hover:not([data-disabled]) .ylf-radio__control {
+    border-color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus-visible .ylf-radio__control {
+    box-shadow: 0 0 0 3px var(--ylf-c-brand-soft, #eff6ff);
+  }
+
+  &[data-state='checked'] .ylf-radio__control {
+    border-color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &__dot {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--ylf-c-brand, #2563eb);
+  }
+
+  &__label {
+    font-size: 15px;
+  }
+}
+</style>

package/components/YlfSelect.vue

@@ -0,0 +1,195 @@
+<script lang="ts" setup generic="T extends string = string">
+import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from 'reka-ui'
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  /** color 可使用 CSS 色值或公共 token，例如 var(--ylf-accent-blue) */
+  options: { label: string, value: T, disabled?: boolean, color?: string }[]
+  placeholder?: string
+  disabled?: boolean
+}>(), {
+  placeholder: '请选择',
+  disabled: false,
+})
+
+const model = defineModel<T>()
+const selectedOption = computed(() => props.options.find(option => option.value === model.value))
+</script>
+
+<template>
+  <SelectRoot v-model="model" :disabled="disabled">
+    <SelectTrigger class="ylf-select__trigger" :aria-label="$attrs.id || $attrs['aria-labelledby'] ? undefined : placeholder" v-bind="$attrs">
+      <SelectValue :placeholder="placeholder" class="ylf-select__label">
+        <span v-if="selectedOption?.color" class="ylf-select__swatch" :style="{ backgroundColor: selectedOption.color }" aria-hidden="true" />
+        <span>{{ selectedOption?.label ?? placeholder }}</span>
+      </SelectValue>
+      <SelectIcon class="ylf-select__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </SelectIcon>
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent class="ylf-select__content" position="popper" :side-offset="6">
+        <SelectViewport class="ylf-select__viewport">
+          <SelectItem
+            v-for="o in options"
+            :key="o.value"
+            :value="o.value"
+            :disabled="o.disabled"
+            class="ylf-select__item"
+          >
+            <SelectItemText class="ylf-select__label">
+              <span v-if="o.color" class="ylf-select__swatch" :style="{ backgroundColor: o.color }" aria-hidden="true" />
+              <span>{{ o.label }}</span>
+            </SelectItemText>
+            <SelectItemIndicator class="ylf-select__check">
+              <svg 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>
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<style lang="scss">
+.ylf-select__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 180px;
+  min-height: 44px;
+  padding: 10px 14px;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--ylf-c-text, #0f172a);
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border-strong, #cbd5e1);
+  border-radius: var(--ylf-radius, 14px);
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.2s ease;
+
+  &[data-placeholder] {
+    color: var(--ylf-c-text-3, #64748b);
+  }
+
+  &:hover:not([data-disabled]) {
+    border-color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ylf-c-brand, #2563eb);
+    box-shadow: 0 0 0 3px var(--ylf-c-brand-soft, #eff6ff);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.ylf-select__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ylf-select__swatch {
+  flex: none;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  border: 1px solid color-mix(in srgb, var(--ylf-c-text, #0f172a) 15%, transparent);
+  border-radius: 50%;
+}
+
+.ylf-select__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--ylf-c-text-3, #64748b);
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.ylf-select__content {
+  z-index: 105;
+  box-sizing: border-box;
+  min-width: var(--reka-select-trigger-width);
+  max-width: var(--reka-select-content-available-width);
+  max-height: var(--reka-select-content-available-height);
+  padding: 6px;
+  background: var(--ylf-c-surface, #fff);
+  border: 1px solid var(--ylf-c-border, #e2e8f0);
+  border-radius: var(--ylf-radius, 14px);
+  box-shadow: var(--ylf-shadow-lg, 0 22px 56px -14px rgba(15, 23, 42, 0.22));
+
+  &[data-state='open'] {
+    animation: ylf-pop-in 0.16s ease;
+  }
+}
+
+.ylf-select__viewport {
+  max-height: calc(var(--reka-select-content-available-height) - 14px);
+}
+
+.ylf-select__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--ylf-c-text, #0f172a);
+  border-radius: var(--ylf-radius-sm, 10px);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+
+  &[data-highlighted] {
+    background: var(--ylf-c-brand-soft, #eff6ff);
+    color: var(--ylf-c-brand, #2563eb);
+  }
+
+  &[data-disabled] {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+}
+
+.ylf-select__check {
+  display: inline-flex;
+  color: var(--ylf-c-brand, #2563eb);
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+@keyframes ylf-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ylf-select__content[data-state='open'] {
+    animation: none;
+  }
+}
+</style>

package/components/YlfSeparator.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { YlfAccentTone } from './theme'
+import { Separator } from 'reka-ui'
+
+withDefaults(defineProps<{
+  orientation?: 'horizontal' | 'vertical'
+  /** 仅装饰（不被屏幕阅读器作为分节朗读） */
+  decorative?: boolean
+  variant?: 'neutral' | 'brand' | 'accent' | 'spectrum'
+  tone?: YlfAccentTone
+}>(), {
+  orientation: 'horizontal',
+  decorative: true,
+  variant: 'neutral',
+  tone: 'blue',
+})
+</script>
+
+<template>
+  <Separator
+    class="ylf-separator"
+    :class="[`ylf-separator--${orientation}`, `ylf-separator--${variant}`]"
+    :data-ylf-tone="tone"
+    :orientation="orientation"
+    :decorative="decorative"
+  />
+</template>
+
+<style lang="scss">
+.ylf-separator {
+  --_separator-size: 1px;
+
+  flex: none;
+  background: var(--ylf-c-border, #e2e8f0);
+
+  &--horizontal {
+    width: 100%;
+    height: var(--_separator-size);
+  }
+
+  &--vertical {
+    width: var(--_separator-size);
+    height: 100%;
+    align-self: stretch;
+  }
+
+  &--brand {
+    background: var(--ylf-c-brand, #2563eb);
+  }
+
+  &--accent {
+    --_separator-size: 2px;
+
+    background: var(--ylf-accent, var(--ylf-c-brand, #2563eb));
+  }
+
+  &--spectrum {
+    --_separator-size: 4px;
+
+    border-radius: var(--ylf-radius-pill, 999px);
+    background: linear-gradient(90deg, var(--ylf-spectrum-stops, #2563eb, #facc15));
+
+    &.ylf-separator--vertical {
+      background: linear-gradient(180deg, var(--ylf-spectrum-stops, #2563eb, #facc15));
+    }
+  }
+}
+</style>