nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(stage-ui): mock hover state

Browse Source
This commit is contained in:
Neko Ayaka
2025-03-13 13:01:00 +08:00
parent 4b4f660b9a
commit 254b47f64e
9 changed files with 116 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONTRIBUTING.md
+7 -7
View File
@@ -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
packages/drizzle-duckdb-wasm/package.json
+2 -2
View File
@@ -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",
packages/duckdb-wasm/package.json
+1 -1
View File
@@ -49,7 +49,7 @@
],
"scripts": {
"dev": "pnpm run stub",
"stub": "unbuild --stub",
"stub": "unbuild",
"build": "unbuild",
"typecheck": "tsc --noEmit"
},
packages/stage-ui/src/components/Menu/IconItem.story.vue
+19 -1
View File
@@ -15,7 +15,25 @@ import IconItem from './IconItem.vue'
id="global"
title="IconItem"
>
<IconItem title="Modules" description="Thinking, vision, speech synthesis, gaming, etc." icon="i-lucide:blocks" to="/settings/modules" />
<IconItem
title="Modules"
description="Thinking, vision, speech synthesis, gaming, etc."
icon="i-lucide:blocks"
to="/settings/modules"
/>
</Variant>
<Variant
id="global-hover"
title="IconItem"
>
<IconItem
title="Modules"
description="Thinking, vision, speech synthesis, gaming, etc."
icon="i-lucide:blocks"
to="/settings/modules"
class="_hover"
/>
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Menu/IconItem.vue
+14 -7
View File
@@ -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;
}
packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
+41
View File
@@ -23,5 +23,46 @@ import IconStatusItem from './IconStatusItem.vue'
:configured="false"
/>
</Variant>
<Variant
id="global-configured"
title="IconItem"
>
<IconStatusItem
title="Title"
description="Description"
icon=" i-lucide:ghost"
to="/"
:configured="true"
/>
</Variant>
<Variant
id="global-hover"
title="IconItem"
>
<IconStatusItem
title="Title"
description="Description"
icon=" i-lucide:ghost"
to="/"
:configured="false"
class="_hover"
/>
</Variant>
<Variant
id="global-hover-configured"
title="IconItem"
>
<IconStatusItem
title="Title"
description="Description"
icon=" i-lucide:ghost"
to="/"
:configured="true"
class="_hover"
/>
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Menu/IconStatusItem.vue
+14 -7
View File
@@ -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;
}
packages/stage-ui/uno.config.ts
+17
View File
@@ -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({
packages/ui-transitions/package.json
+1 -1
View File
@@ -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",