From 254b47f64ea43ad0b6787ed1a16c57656c2e50ec Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Thu, 13 Mar 2025 13:01:00 +0800 Subject: [PATCH] feat(stage-ui): mock hover state --- CONTRIBUTING.md | 14 +++---- packages/drizzle-duckdb-wasm/package.json | 4 +- packages/duckdb-wasm/package.json | 2 +- .../src/components/Menu/IconItem.story.vue | 20 ++++++++- .../stage-ui/src/components/Menu/IconItem.vue | 21 ++++++---- .../components/Menu/IconStatusItem.story.vue | 41 +++++++++++++++++++ .../src/components/Menu/IconStatusItem.vue | 21 ++++++---- packages/stage-ui/uno.config.ts | 17 ++++++++ packages/ui-transitions/package.json | 2 +- 9 files changed, 116 insertions(+), 26 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 00d1c2f28..78b5afb2a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -135,7 +135,7 @@ pnpm install ### Documentation site ```shell -pnpm -F @proj-airi/docs... dev +pnpm -F @proj-airi/docs... --parallel dev ``` > [!NOTE] @@ -143,13 +143,13 @@ pnpm -F @proj-airi/docs... dev > For [@antfu/ni](https://github.com/antfu-collective/ni) users, you can > > ```shell -> nr -F @proj-airi/docs... dev +> nr -F @proj-airi/docs... --parallel dev > ``` ### Stage web (Frontend for [airi.moeru.ai](https://airi.moeru.ai), or [airi.ayaka.io](https://airi.ayaka.io)) ```shell -pnpm -F @proj-airi/stage-web... dev +pnpm -F @proj-airi/stage-web... --parallel dev ``` > [!NOTE] @@ -157,13 +157,13 @@ pnpm -F @proj-airi/stage-web... dev > For [@antfu/ni](https://github.com/antfu-collective/ni) users, you can > > ```shell -> nr -F @proj-airi/stage-web... dev +> nr -F @proj-airi/stage-web... --parallel dev > ``` ### Stage Tamagotchi (Electron app for アイリ VTuber) ```shell -pnpm -F @proj-airi/stage-tamagotchi... dev +pnpm -F @proj-airi/stage-tamagotchi... --parallel dev ``` > [!NOTE] @@ -171,7 +171,7 @@ pnpm -F @proj-airi/stage-tamagotchi... dev > For [@antfu/ni](https://github.com/antfu-collective/ni) users, you can > > ```shell -> nr -F @proj-airi/stage-tamagotchi... dev +> nr -F @proj-airi/stage-tamagotchi... --parallel dev > ``` ### Telegram bot integration @@ -215,7 +215,7 @@ pnpm -F @proj-airi/telegram-bot start > For [@antfu/ni](https://github.com/antfu-collective/ni) users, you can > > ```shell -> nr -F @proj-airi/telegram-bot... dev +> nr -F @proj-airi/telegram-bot... --parallel dev > ``` ### Discord bot integration diff --git a/packages/drizzle-duckdb-wasm/package.json b/packages/drizzle-duckdb-wasm/package.json index bd076428b..f2f3304f3 100644 --- a/packages/drizzle-duckdb-wasm/package.json +++ b/packages/drizzle-duckdb-wasm/package.json @@ -48,8 +48,8 @@ "package.json" ], "scripts": { - "dev": "pnpm run stub && pnpm run play:dev", - "stub": "unbuild --stub", + "dev": "pnpm run stub", + "stub": "unbuild", "build": "unbuild && pnpm run play:build", "play:dev": "vite", "play:build": "vite build", diff --git a/packages/duckdb-wasm/package.json b/packages/duckdb-wasm/package.json index e12b354c1..db832c044 100644 --- a/packages/duckdb-wasm/package.json +++ b/packages/duckdb-wasm/package.json @@ -49,7 +49,7 @@ ], "scripts": { "dev": "pnpm run stub", - "stub": "unbuild --stub", + "stub": "unbuild", "build": "unbuild", "typecheck": "tsc --noEmit" }, diff --git a/packages/stage-ui/src/components/Menu/IconItem.story.vue b/packages/stage-ui/src/components/Menu/IconItem.story.vue index 506fe94e2..3f78d7b56 100644 --- a/packages/stage-ui/src/components/Menu/IconItem.story.vue +++ b/packages/stage-ui/src/components/Menu/IconItem.story.vue @@ -15,7 +15,25 @@ import IconItem from './IconItem.vue' id="global" title="IconItem" > - + + + + + diff --git a/packages/stage-ui/src/components/Menu/IconItem.vue b/packages/stage-ui/src/components/Menu/IconItem.vue index 3aeaa2ab0..464c9a3fa 100644 --- a/packages/stage-ui/src/components/Menu/IconItem.vue +++ b/packages/stage-ui/src/components/Menu/IconItem.vue @@ -68,7 +68,8 @@ defineProps<{ opacity: 0; } -.menu-icon-item:hover::before { +.menu-icon-item:hover::before, +.menu-icon-item._hover::before { --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent'; width: 85%; opacity: 1; @@ -87,31 +88,37 @@ defineProps<{ transition: all 0.35s ease-in-out; } -.menu-icon-item:hover .menu-icon-item-title { +.menu-icon-item:hover .menu-icon-item-title, +.menu-icon-item._hover .menu-icon-item-title { --at-apply: text-primary-600; } -.menu-icon-item:hover .menu-icon-item-description { +.menu-icon-item:hover .menu-icon-item-description, +.menu-icon-item._hover .menu-icon-item-description { --at-apply: text-primary-600; opacity: 0.8; } -.menu-icon-item:hover .menu-icon-item-icon { +.menu-icon-item:hover .menu-icon-item-icon, +.menu-icon-item._hover .menu-icon-item-icon { --at-apply: text-primary-500; scale: 1.2; opacity: 0.2; } -.dark .menu-icon-item:hover .menu-icon-item-title { +.dark .menu-icon-item:hover .menu-icon-item-title, +.dark .menu-icon-item._hover .menu-icon-item-title { --at-apply: text-primary-300; } -.dark .menu-icon-item:hover .menu-icon-item-description { +.dark .menu-icon-item:hover .menu-icon-item-description, +.dark .menu-icon-item._hover .menu-icon-item-description { --at-apply: text-primary-300; opacity: 0.8; } -.dark .menu-icon-item:hover .menu-icon-item-icon { +.dark .menu-icon-item:hover .menu-icon-item-icon, +.dark .menu-icon-item._hover .menu-icon-item-icon { --at-apply: text-primary-400; opacity: 0.2; } diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue index e91c27b5f..6ffb3d71b 100644 --- a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue +++ b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue @@ -23,5 +23,46 @@ import IconStatusItem from './IconStatusItem.vue' :configured="false" /> + + + + + + + + + + + + diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.vue index cb68b66fe..99219558b 100644 --- a/packages/stage-ui/src/components/Menu/IconStatusItem.vue +++ b/packages/stage-ui/src/components/Menu/IconStatusItem.vue @@ -100,7 +100,8 @@ const props = defineProps<{ opacity: 0; } -.menu-icon-status-item:hover::before { +.menu-icon-status-item:hover::before, +.menu-icon-status-item._hover::before { --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent'; width: 50%; opacity: 1; @@ -119,31 +120,37 @@ const props = defineProps<{ transition: all 0.35s ease-in-out; } -.menu-icon-status-item:hover .menu-icon-status-item-title { +.menu-icon-status-item:hover .menu-icon-status-item-title, +.menu-icon-status-item._hover .menu-icon-status-item-title { --at-apply: text-primary-600; } -.menu-icon-status-item:hover .menu-icon-status-item-description { +.menu-icon-status-item:hover .menu-icon-status-item-description, +.menu-icon-status-item._hover .menu-icon-status-item-description { --at-apply: text-primary-600; opacity: 0.8; } -.menu-icon-status-item:hover .menu-icon-status-item-icon { +.menu-icon-status-item:hover .menu-icon-status-item-icon, +.menu-icon-status-item._hover .menu-icon-status-item-icon { --at-apply: text-primary-500; scale: 1.2; opacity: 0.2; } -.dark .menu-icon-status-item:hover .menu-icon-status-item-title { +.dark .menu-icon-status-item:hover .menu-icon-status-item-title, +.dark .menu-icon-status-item._hover .menu-icon-status-item-title { --at-apply: text-primary-300; } -.dark .menu-icon-status-item:hover .menu-icon-status-item-description { +.dark .menu-icon-status-item:hover .menu-icon-status-item-description, +.dark .menu-icon-status-item._hover .menu-icon-status-item-description { --at-apply: text-primary-300; opacity: 0.8; } -.dark .menu-icon-status-item:hover .menu-icon-status-item-icon { +.dark .menu-icon-status-item:hover .menu-icon-status-item-icon, +.dark .menu-icon-status-item._hover .menu-icon-status-item-icon { --at-apply: text-primary-400; opacity: 0.2; } diff --git a/packages/stage-ui/uno.config.ts b/packages/stage-ui/uno.config.ts index 43b7227df..081d7aede 100644 --- a/packages/stage-ui/uno.config.ts +++ b/packages/stage-ui/uno.config.ts @@ -55,6 +55,23 @@ export default defineConfig({ }, }), presetScrollbar(), + { + name: 'story-mock-hover', + variants: [ + (matcher) => { + if (!matcher.includes('hover')) { + return matcher + } + + return { + matcher, + selector: (s) => { + return `${s}, ${s.replace(/:hover$/, '')}._hover` + }, + } + }, + ], + }, ], transformers: [ transformerDirectives({ diff --git a/packages/ui-transitions/package.json b/packages/ui-transitions/package.json index 458b2ce67..6a0027f21 100644 --- a/packages/ui-transitions/package.json +++ b/packages/ui-transitions/package.json @@ -21,7 +21,7 @@ } }, "scripts": { - "dev": "pnpm run stub && pnpm run play:dev", + "dev": "pnpm run stub", "stub": "unbuild --stub", "build": "unbuild && pnpm run play:build", "play:dev": "vite",