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

feat(stage-ui): RadioCard stories

Browse Source
This commit is contained in:
Neko Ayaka
2025-03-13 13:24:40 +08:00
parent 43f59403e7
commit e45069b0e3
4 changed files with 216 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
+155
View File
@@ -0,0 +1,155 @@
<script setup lang="ts">
import { ref } from 'vue'
import RadioCardDetail from './RadioCardDetail.vue'
const modelValue = ref('test')
</script>
<template>
<Story :layout="{ type: 'grid', width: 500 }">
<Variant id="default" title="Default">
<RadioCardDetail
id="test"
value="non-selected"
title="Test"
description="Test description"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start"
/>
</Variant>
<Variant id="hover" title="Hover">
<RadioCardDetail
id="test"
value="non-selected"
title="Test"
description="Test description"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start _hover"
/>
</Variant>
<Variant id="default-long-description" title="Long description">
<RadioCardDetail
id="test"
value="non-selected"
title="Test"
:description="'Test description'.repeat(10)"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start"
/>
</Variant>
<Variant id="hover-long-description" title="Hover Long description">
<RadioCardDetail
id="test"
value="non-selected"
title="Test"
:description="'Test description'.repeat(10)"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start _hover"
/>
</Variant>
<Variant id="default-selected" title="Default Selected">
<RadioCardDetail
id="test"
value="test"
title="Test"
description="Test description"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start"
/>
</Variant>
<Variant id="hover-selected" title="Hover Selected">
<RadioCardDetail
id="test"
value="test"
title="Test"
description="Test description"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start _hover"
/>
</Variant>
<Variant id="default-selected-long-description" title="Long description Selected">
<RadioCardDetail
id="test"
value="test"
title="Test"
:description="'Test description'.repeat(10)"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start"
/>
</Variant>
<Variant id="hover-selected-long-description" title="Hover Long description Selected">
<RadioCardDetail
id="test"
value="test"
title="Test"
:description="'Test description'.repeat(10)"
:deprecated="false"
:show-expand-collapse="true"
:expand-collapse-threshold="100"
:show-custom-input="true"
custom-input-value="Test input value"
custom-input-placeholder="Test input placeholder"
:model-value="modelValue"
name="radio-card-detail-many-select"
class="scroll-snap-align-start _hover"
/>
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
+2 -1
View File
@@ -184,7 +184,8 @@ function updateCustomInput(event: Event) {
opacity: 0;
}
.form_radio-card-detail:hover::before {
.form_radio-card-detail:hover::before,
.form_radio-card-detail._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;
packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
+57
View File
@@ -0,0 +1,57 @@
<script setup lang="ts">
import { ref } from 'vue'
import RadioCardSimple from './RadioCardSimple.vue'
const modelValue = ref('test')
</script>
<template>
<Story :layout="{ type: 'grid', width: 500 }">
<Variant id="default" title="Default">
<RadioCardSimple
id="test"
name="radio-card-simple"
value="non-selected"
title="Test"
description="Test description"
:model-value="modelValue"
/>
</Variant>
<Variant id="hover" title="Hover">
<RadioCardSimple
id="test"
name="radio-card-simple"
value="non-selected"
title="Test"
description="Test description"
:model-value="modelValue"
class="_hover"
/>
</Variant>
<Variant id="default-selected" title="Default Selected">
<RadioCardSimple
id="test"
name="radio-card-simple"
value="test"
title="Test"
description="Test description"
:model-value="modelValue"
/>
</Variant>
<Variant id="hover-selected" title="Hover Selected">
<RadioCardSimple
id="test"
name="radio-card-simple"
value="test"
title="Test"
description="Test description"
:model-value="modelValue"
class="_hover"
/>
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
+2 -1
View File
@@ -102,7 +102,8 @@ defineEmits<{
opacity: 0;
}
.form_radio-card-simple:hover::before {
.form_radio-card-simple:hover::before,
.form_radio-card-simple._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;