@yunlefun/vue 0.1.1 → 0.1.2

package/components/separator/demo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="ylf-separator-demo">
+    <div>
+      <h3>给生活一点颜色</h3>
+      <p>六段纯色，连接云乐坊的每一份好奇。</p>
+      <YlfSeparator variant="spectrum" class="my-4" />
+      <div class="flex flex-wrap gap-2">
+        <YlfBadge variant="accent" tone="cyan" appearance="soft">
+          探索工具
+        </YlfBadge>
+        <YlfBadge variant="accent" tone="pink" appearance="soft">
+          记录灵感
+        </YlfBadge>
+        <YlfBadge variant="accent" tone="coral" appearance="soft">
+          参加活动
+        </YlfBadge>
+      </div>
+    </div>
+    <div class="text-sm">
+      <p>正文分节保持安静</p>
+      <YlfSeparator class="my-3" />
+      <p>中性细线负责结构，彩色线用于品牌或分类。</p>
+    </div>
+    <div class="flex items-center gap-3 text-sm">
+      <span>探索</span>
+      <YlfSeparator orientation="vertical" variant="accent" tone="cyan" class="h-4!" />
+      <span>创作</span>
+      <YlfSeparator orientation="vertical" variant="accent" tone="pink" class="h-4!" />
+      <span>分享</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ylf-separator-demo {
+  display: grid;
+  gap: var(--ylf-space-8);
+  width: 100%;
+  max-width: 560px;
+}
+.ylf-separator-demo h3 {
+  margin: 0 0 var(--ylf-space-2);
+  font-size: var(--ylf-text-lg);
+  font-weight: 600;
+}
+.ylf-separator-demo p {
+  margin: 0;
+  color: var(--ylf-c-text-2);
+  font-size: var(--ylf-text-sm);
+  line-height: var(--ylf-leading-body);
+}
+</style>

package/components/separator/index.md

@@ -0,0 +1,19 @@
+---
+title: Separator
+title_zh: 分隔线
+---
+
+分隔线：基于 [reka-ui](https://reka-ui.com)，支持水平 / 垂直与语义化（`decorative` 控制是否对屏幕阅读器可见）。
+
+正文默认使用中性细线。`brand` 使用晴空蓝；`accent` 配合 `tone` 区分内容；`spectrum` 用六段纯色拼接，适合页头、品牌区或活动入口。彩色拼接不铺在正文下方，也不作为唯一的状态提示。
+
+垂直分隔线需要父布局或调用方提供高度，例如 `style="height: 24px"`。
+
+## Props
+
+| 属性          | 说明                    | 类型                                            | 默认值       |
+| ------------- | ----------------------- | ----------------------------------------------- | ------------ |
+| `orientation` | 方向                    | `horizontal \| vertical`                        | `horizontal` |
+| `decorative`  | 仅装饰                  | `boolean`                                       | `true`       |
+| `variant`     | 视觉角色                | `neutral \| brand \| accent \| spectrum`        | `neutral`    |
+| `tone`        | 强调色，仅用于 `accent` | `blue \| sun \| cyan \| coral \| pink \| green` | `blue`       |

package/components/slider/demo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const single = ref([40])
+const range = ref([20, 70])
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
+      <YlfSlider v-model="single" />
+      <p class="m-0 text-sm op-70">
+        单值：{{ single[0] }}
+      </p>
+    </div>
+    <div class="flex flex-col gap-2">
+      <YlfSlider v-model="range" />
+      <p class="m-0 text-sm op-70">
+        区间：{{ range[0] }} – {{ range[1] }}
+      </p>
+    </div>
+  </div>
+</template>

package/components/slider/index.md

@@ -0,0 +1,16 @@
+---
+title: Slider
+title_zh: 滑块
+---
+
+滑块：拖拽、键盘步进、多滑块区间基于 [reka-ui](https://reka-ui.com)，外观走 token。`v-model` 为数组，单值传 `[n]`、区间传 `[a, b]`。
+
+## Props
+
+| 属性       | 说明   | 类型       | 默认值  |
+| ---------- | ------ | ---------- | ------- |
+| `v-model`  | 当前值 | `number[]` | `[50]`  |
+| `min`      | 最小值 | `number`   | `0`     |
+| `max`      | 最大值 | `number`   | `100`   |
+| `step`     | 步长   | `number`   | `1`     |
+| `disabled` | 禁用   | `boolean`  | `false` |

package/components/switch/demo.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const brand = ref(true)
+const accent = ref(true)
+const small = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-wrap items-center gap-6">
+      <div class="flex items-center gap-2">
+        <YlfSwitch v-model="brand" aria-label="主色开关" />
+        <span class="text-sm">brand 实色</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <YlfSwitch v-model="accent" aria-label="青色开关" variant="accent" tone="cyan" />
+        <span class="text-sm">accent 青色</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <YlfSwitch v-model="small" aria-label="小号开关" size="sm" />
+        <span class="text-sm">small</span>
+      </div>
+      <div class="flex items-center gap-2 op-60">
+        <YlfSwitch :model-value="true" aria-label="禁用开关" disabled />
+        <span class="text-sm">disabled</span>
+      </div>
+    </div>
+    <p class="text-sm op-70">
+      当前：brand = {{ brand }} · accent = {{ accent }}
+    </p>
+  </div>
+</template>

package/components/switch/index.md

@@ -0,0 +1,18 @@
+---
+title: Switch
+title_zh: 开关
+---
+
+开关：行为与可访问性基于 [reka-ui](https://reka-ui.com)（`role="switch"`、键盘 Space / Enter、焦点管理），外观使用共享主题 token —— reka 管行为，我们管皮肤。
+
+## Props
+
+| 属性       | 说明                      | 类型                                            | 默认值  |
+| ---------- | ------------------------- | ----------------------------------------------- | ------- |
+| `v-model`  | 开关状态                  | `boolean`                                       | `false` |
+| `variant`  | on 态轨道                 | `brand \| accent`                               | `brand` |
+| `tone`     | 强调色，仅作用于 `accent` | `blue \| sun \| cyan \| coral \| pink \| green` | `blue`  |
+| `size`     | 尺寸                      | `sm \| md`                                      | `md`    |
+| `disabled` | 禁用                      | `boolean`                                       | `false` |
+
+`tone` 接受 `blue | sun | cyan | coral | pink | green`，默认 `blue`（晴空蓝），只在 `accent` 下生效。旧 `aurora` 值映射到 `accent`。同一流程中的同类状态使用同一种颜色。

package/components/tabs/demo.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tab = ref('cloud')
+const items = [
+  { label: '云', value: 'cloud' },
+  { label: '乐', value: 'fun' },
+  { label: '坊', value: 'studio' },
+]
+</script>
+
+<template>
+  <YlfTabs v-model="tab" :items="items">
+    <template #cloud>
+      <p class="m-0 text-sm">
+        云：一片属于云乐坊的天空。
+      </p>
+    </template>
+    <template #fun>
+      <p class="m-0 text-sm">
+        乐：缤纷多彩，明快而笃定。
+      </p>
+    </template>
+    <template #studio>
+      <p class="m-0 text-sm">
+        坊：一套统一的组件工坊。
+      </p>
+    </template>
+  </YlfTabs>
+</template>

package/components/tabs/index.md

@@ -0,0 +1,18 @@
+---
+title: Tabs
+title_zh: 标签页
+---
+
+标签页：键盘导航（方向键 / Home / End）、roving focus 基于 [reka-ui](https://reka-ui.com)，滑动指示条与外观走 token。
+
+## Props
+
+| 属性          | 说明                                 | 类型                     | 默认值       |
+| ------------- | ------------------------------------ | ------------------------ | ------------ |
+| `v-model`     | 当前标签                             | `string`                 | —            |
+| `items`       | 标签项 `{ label, value, disabled? }` | `TabItem[]`              | —            |
+| `orientation` | 方向                                 | `horizontal \| vertical` | `horizontal` |
+
+## Slots
+
+每个标签的内容用 `value` 同名插槽提供，如 `#cloud`、`#fun`。

package/components/theme.ts

@@ -0,0 +1,5 @@
+/** Shared accents, defaulting to sky blue. Status colors use their own semantic variants. */
+export type YlfAccentTone = 'blue' | 'sun' | 'cyan' | 'coral' | 'pink' | 'green'
+
+/** Visual emphasis for accent and status buttons/badges. */
+export type YlfColorAppearance = 'solid' | 'soft' | 'outline'

package/components/tooltip/demo.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <YlfTooltip content="悬停在云端之上 ☁️" side="top">
+      <YlfButton variant="secondary">
+        上方提示
+      </YlfButton>
+    </YlfTooltip>
+    <YlfTooltip content="行为与定位都来自 reka-ui" side="bottom">
+      <YlfButton variant="secondary">
+        下方提示
+      </YlfButton>
+    </YlfTooltip>
+    <YlfTooltip content="皮肤是云乐坊 token" side="right">
+      <YlfButton variant="soft">
+        右侧提示
+      </YlfButton>
+    </YlfTooltip>
+  </div>
+</template>

package/components/tooltip/index.md

@@ -0,0 +1,21 @@
+---
+title: Tooltip
+title_zh: 文字提示
+---
+
+文字提示：定位与可访问性基于 [reka-ui](https://reka-ui.com)（floating 定位、延迟、`aria-describedby`），外观走 token。
+
+## Props
+
+| 属性      | 说明       | 类型                             | 默认值 |
+| --------- | ---------- | -------------------------------- | ------ |
+| `content` | 提示文字   | `string`                         | —      |
+| `side`    | 方向       | `top \| right \| bottom \| left` | `top`  |
+| `delay`   | 延迟（ms） | `number`                         | `300`  |
+
+## Slots
+
+| 名称      | 说明                   |
+| --------- | ---------------------- |
+| `default` | 触发元素（`as-child`） |
+| `content` | 自定义提示内容         |

package/dist/index.cjs

@@ -3,7 +3,8 @@
 const node_path = require('node:path');
 const node_url = require('node:url');
 
-const _dirname = typeof __dirname !== "undefined" ? __dirname : node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const _dirname = typeof __dirname !== "undefined" ? __dirname : node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))));
 const componentsDir = node_path.resolve(_dirname, "../components");
 
 exports._dirname = _dirname;

package/dist/index.d.cts

@@ -19,7 +19,13 @@ interface BottomMenuItem {
     onClick?: (...args: any[]) => void;
 }
 
+/** Shared accents, defaulting to sky blue. Status colors use their own semantic variants. */
+type YlfAccentTone = 'blue' | 'sun' | 'cyan' | 'coral' | 'pink' | 'green';
+/** Visual emphasis for accent and status buttons/badges. */
+type YlfColorAppearance = 'solid' | 'soft' | 'outline';
+
 declare const _dirname: string;
 declare const componentsDir: string;
 
-export { type BottomMenuItem, _dirname, componentsDir };
+export { _dirname, componentsDir };
+export type { BottomMenuItem, YlfAccentTone, YlfColorAppearance };

package/dist/index.d.mts

@@ -19,7 +19,13 @@ interface BottomMenuItem {
     onClick?: (...args: any[]) => void;
 }
 
+/** Shared accents, defaulting to sky blue. Status colors use their own semantic variants. */
+type YlfAccentTone = 'blue' | 'sun' | 'cyan' | 'coral' | 'pink' | 'green';
+/** Visual emphasis for accent and status buttons/badges. */
+type YlfColorAppearance = 'solid' | 'soft' | 'outline';
+
 declare const _dirname: string;
 declare const componentsDir: string;
 
-export { type BottomMenuItem, _dirname, componentsDir };
+export { _dirname, componentsDir };
+export type { BottomMenuItem, YlfAccentTone, YlfColorAppearance };

package/dist/index.d.ts

@@ -19,7 +19,13 @@ interface BottomMenuItem {
     onClick?: (...args: any[]) => void;
 }
 
+/** Shared accents, defaulting to sky blue. Status colors use their own semantic variants. */
+type YlfAccentTone = 'blue' | 'sun' | 'cyan' | 'coral' | 'pink' | 'green';
+/** Visual emphasis for accent and status buttons/badges. */
+type YlfColorAppearance = 'solid' | 'soft' | 'outline';
+
 declare const _dirname: string;
 declare const componentsDir: string;
 
-export { type BottomMenuItem, _dirname, componentsDir };
+export { _dirname, componentsDir };
+export type { BottomMenuItem, YlfAccentTone, YlfColorAppearance };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@yunlefun/vue",
   "type": "module",
-  "version": "0.1.1",
-  "description": "Components for YunLeFun",
+  "version": "0.1.2",
+  "description": "Vue components and Nuxt integration for YunLeFun Design",
   "exports": {
     "./components/*": "./components/*",
     "./nuxt": "./nuxt.mjs",
@@ -27,7 +27,22 @@
     "release": "bumpp --no-commit --no-tag --no-push && npm publish",
     "typecheck": "vue-tsc --noEmit"
   },
+  "peerDependencies": {
+    "nuxt": "^4.0.0",
+    "sass": "^1.101.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "nuxt": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "reka-ui": "^2.10.1"
+  },
   "devDependencies": {
-    "nuxt": "^3.9.3"
+    "nuxt": "^4.5.2",
+    "sass": "^1.101.0",
+    "typescript": "5.9.3"
   }
 }