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

feat(stage-ui): new Textarea component

Browse Source 
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
This commit is contained in:
Neko Ayaka
2025-04-20 14:26:15 +08:00
parent 4485dff557
commit ca508b5f84
13 changed files with 76 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+4 -6
View File
@@ -10,6 +10,7 @@ import {
RadioCardSimple,
Skeleton,
TestDummyMarker,
Textarea,
VoiceCardManySelect,
} from '@proj-airi/stage-ui/components'
import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
@@ -454,13 +455,10 @@ function updateCustomModelName(value: string) {
/>
<template v-if="!useSSML">
<textarea
v-model="testText"
<Textarea
v-model="testText" h-24
w-full
:placeholder="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.input.placeholder')"
border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
transition="all duration-250 ease-in-out"
bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
/>
</template>
<template v-else>
apps/stage-web/src/pages/settings/modules/speech.vue
+4 -6
View File
@@ -10,6 +10,7 @@ import {
RadioCardSimple,
Skeleton,
TestDummyMarker,
Textarea,
VoiceCardManySelect,
} from '@proj-airi/stage-ui/components'
import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
@@ -454,13 +455,10 @@ function updateCustomModelName(value: string) {
/>
<template v-if="!useSSML">
<textarea
v-model="testText"
<Textarea
v-model="testText" h-24
w-full
:placeholder="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.input.placeholder')"
border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
transition="all duration-250 ease-in-out"
bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
/>
</template>
<template v-else>
apps/stage-web/src/pages/test/filter-message.vue
+2 -1
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { Textarea } from '@proj-airi/stage-ui/components'
import { ref } from 'vue'
const messageInput = ref<string>('')
@@ -58,7 +59,7 @@ async function onSendMessage() {
<template>
<div flex flex-col gap-2 p-2>
<div flex flex-row gap-2>
<BasicTextarea
<Textarea
v-model="messageInput"
placeholder="Message"
p="2" bg="neutral-100 dark:neutral-700"
apps/stage-web/src/pages/test/queues/delays.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { BasicTextarea } from '@proj-airi/stage-ui/components'
import { Textarea } from '@proj-airi/stage-ui/components'
import { useDelayMessageQueue } from '@proj-airi/stage-ui/composables'
import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
import { ref } from 'vue'
@@ -37,7 +37,7 @@ function onSendMessage() {
<template>
<div flex flex-col gap-2 p-2>
<div flex flex-row gap-2>
<BasicTextarea
<Textarea
v-model="messageInput"
placeholder="Message"
p="2" bg="neutral-100 dark:neutral-700"
apps/stage-web/src/pages/test/queues/emotions.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { Emotion } from '@proj-airi/stage-ui/constants/emotions'
import { BasicTextarea } from '@proj-airi/stage-ui/components'
import { Textarea } from '@proj-airi/stage-ui/components'
import { useQueue } from '@proj-airi/stage-ui/composables/queue'
import { useEmotionsMessageQueue } from '@proj-airi/stage-ui/composables/queues'
import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
@@ -37,7 +37,7 @@ function onSendMessage() {
<template>
<div flex flex-col gap-2 p-2>
<div flex flex-row gap-2>
<BasicTextarea
<Textarea
v-model="messageInput"
placeholder="Message"
p="2" bg="neutral-100 dark:neutral-700"
apps/stage-web/src/pages/test/queues/messages.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { BasicTextarea } from '@proj-airi/stage-ui/components'
import { Textarea } from '@proj-airi/stage-ui/components'
import { useQueue } from '@proj-airi/stage-ui/composables/queue'
import { useMessageContentQueue } from '@proj-airi/stage-ui/composables/queues'
import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
@@ -41,7 +41,7 @@ async function onSendMessage() {
<template>
<div flex flex-col gap-2 p-2>
<div flex flex-row gap-2>
<BasicTextarea
<Textarea
v-model="messageInput"
placeholder="Message"
p="2" bg="neutral-100 dark:neutral-700"
packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
import BasicTextarea from './Basic.vue'
</script>
<template>
<Story
title="Textarea (basic)"
group="form"
:layout="{ type: 'grid', width: 400 }"
>
<template #controls>
<ThemeColorsHueControl />
</template>
<Variant id="default">
<BasicTextarea />
</Variant>
</Story>
</template>
packages/stage-ui/src/components/BasicTextarea.vue → packages/stage-ui/src/components/Form/Textarea/Basic.vue
View File
packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup lang="ts">
import { ref } from 'vue'
import Textarea from './Textarea.vue'
const input = ref('')
</script>
<template>
<Story
title="Textarea"
group="form"
:layout="{ type: 'grid', width: 400 }"
>
<template #controls>
<ThemeColorsHueControl />
</template>
<Variant id="default">
<Textarea v-model="input" />
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Form/Textarea/Textarea.vue
+15
View File
@@ -0,0 +1,15 @@
<script setup lang="ts">
import BasicTextarea from './Basic.vue'
const modelValue = defineModel<string>({ default: '' })
</script>
<template>
<BasicTextarea
v-model="modelValue"
border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
transition="all duration-250 ease-in-out"
bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
rounded-lg px-3 py-2 text-sm outline-none
/>
</template>
packages/stage-ui/src/components/Form/Textarea/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { default as BasicTextarea } from './Basic.vue'
export { default as Textarea } from './Textarea.vue'
packages/stage-ui/src/components/Form/index.ts
+1
View File
@@ -4,5 +4,6 @@ export * from './Input'
export * from './Radio'
export { default as RadioCardDetailManySelect } from './RadioCardDetailManySelect.vue'
export * from './Range'
export * from './Textarea'
export { default as VoiceCard } from './VoiceCard.vue'
export { default as VoiceCardManySelect } from './VoiceCardManySelect.vue'
packages/stage-ui/src/components/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { default as BasicTextarea } from './BasicTextarea.vue'
export * from './Button'
export { default as Collapsable } from './Collapsable.vue'
export * from './Form'