Skip to content

Commit

Permalink
feat(stories): VaSelect stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@m0ksem
m0ksem committed Apr 15, 2023
1 parent 040cdaa commit aaa1b2a
Show file tree
Hide file tree
Showing 15 changed files with 1,467 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/ui/histoire.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export default defineConfig({
defaultStoryProps: {
layout: {
type: 'grid',
width: '30%',
},
},
})
202 changes: 202 additions & 0 deletions packages/ui/src/components/va-select/stories/AutoComplete.story.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<script setup lang="ts">
import { VaSelect } from '..'
const options = [
{ id: '0', text: 'one', value: 'one' },
{ id: '1', text: 'two', value: 'two' },
{ id: '2', text: 'three', value: 'three' },
{ id: '3', text: 'four', value: 'four' },
{ id: '4', text: 'five', value: 'five' },
]
const addNewOption = (newOption: string, state: { options: any[] }) => {
const option = {
id: String(state.options.length),
text: newOption,
value: newOption,
}
state.options.push(option)
}
</script>

<template>
<Story title="VaSelect/AutoComplete">
<Variant
title="Autocomplete"
:initState="() => ({ value: null })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
autocomplete
:options="[
{ id: '1', text: 'Option 1' },
{ id: '2', text: 'Option 2' },
{ id: '3', text: 'Option 3' },
{ id: '4', text: 'Option 4' },
]"
/>
</Variant>

<Variant
title="Autocomplete readonly"
:initState="() => ({ value: null })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
autocomplete
readonly
:options="[
{ id: '1', text: 'Option 1' },
{ id: '2', text: 'Option 2' },
{ id: '3', text: 'Option 3' },
{ id: '4', text: 'Option 4' },
]"
/>
</Variant>

<Variant
title="Autocomplete disabled"
:initState="() => ({ value: null })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
autocomplete
disabled
:options="[
{ id: '1', text: 'Option 1' },
{ id: '2', text: 'Option 2' },
{ id: '3', text: 'Option 3' },
{ id: '4', text: 'Option 4' },
]"
/>
</Variant>

<Variant
title="Multiple autocomplete"
:initState="() => ({ value: [] })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
autocomplete
multiple
:options="[
{ id: '1', text: 'Option 1' },
{ id: '2', text: 'Option 2' },
{ id: '3', text: 'Option 3' },
{ id: '4', text: 'Option 4' },
]"
/>
</Variant>

<Variant
title="Multiple autocomplete with max visible options"
:initState="() => ({ value: [] })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
autocomplete
multiple
:max-visible-options="2"
:options="[
{ id: '1', text: 'Option 1' },
{ id: '2', text: 'Option 2' },
{ id: '3', text: 'Option 3' },
{ id: '4', text: 'Option 4' },
]"
/>
</Variant>

<Variant
title="Autocomplete with create new option"
:initState="
() => ({
value: '',
options,
})
"
#default="{ state }"
>
<va-select
v-model="state.value"
:options="state.options"
autocomplete
allow-create
@create-new="addNewOption($event, state)"
/>
</Variant>

<Variant
title="'unique' mode and single select"
:initState="() => ({ value: '', options })"
#default="{ state }"
>
<va-select
v-model="state.allowUniqueValue"
class="mb-6"
:options="options"
@create-new="addNewOption($event, state)"
track-by="id"
allow-create="unique"
/>
</Variant>

<Variant
title="'true' mode and multi select"
:initState="() => ({ value: [], options })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
:options="options"
@create-new="addNewOption($event, state)"
track-by="id"
allow-create
multiple
/>
</Variant>

<Variant
title="'unique' mode and multi select"
:initState="() => ({ value: [], options })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
:options="options"
@create-new="addNewOption($event, state)"
track-by="id"
allow-create="unique"
multiple
/>
</Variant>

<Variant
title="'true' mode and multi select, Max 3 selections"
:initState="() => ({ value: [], options })"
#default="{ state }"
>
<va-select
v-model="state.valueMultipleMax"
class="mb-6"
:options="options"
@create-new="addNewOption($event, state)"
track-by="id"
allow-create
multiple
:max-selections="3"
/>
</Variant>
</Story>
</template>
68 changes: 68 additions & 0 deletions packages/ui/src/components/va-select/stories/Clearable.story.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<script setup lang="ts">
import { VaSelect } from '..'
</script>

<template>
<Story title="VaSelect/Clearable">
<Variant
title="Clearable"
:initState="
() => ({
value: null,
options: [
{ id: 1, text: 'one', value: 1 },
{ id: 2, text: 'two', value: 2 },
{ id: 3, text: 'three', value: 3 },
],
})
"
#default="{ state }"
>
<va-select v-model="state.value" :options="state.options" clearable />
</Variant>

<Variant
title="Clearable with custom clear value as string"
:initState="
() => ({
value: null,
options: [
{ id: 1, text: 'one', value: 1 },
{ id: 2, text: 'two', value: 2 },
{ id: 3, text: 'three', value: 3 },
],
})
"
#default="{ state }"
>
<va-select
v-model="state.value"
:options="state.options"
clear-value="None"
clearable
/>
</Variant>

<Variant
title="Clearable with custom clear value as object"
:initState="
() => ({
value: null,
options: [
{ id: 1, text: 'one', value: 1 },
{ id: 2, text: 'two', value: 2 },
{ id: 3, text: 'three', value: 3 },
],
})
"
#default="{ state }"
>
<va-select
v-model="state.value"
:options="state.options"
:clear-value="{ id: 0, text: 'None', value: null }"
clearable
/>
</Variant>
</Story>
</template>
94 changes: 94 additions & 0 deletions packages/ui/src/components/va-select/stories/Decorators.story.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<script setup lang="ts">
import { VaSelect } from '..'
const options = [
{ id: '0', text: 'Option 1', value: 'Option 1' },
{ id: '1', text: 'Option 2', value: 'Option 2' },
{ id: '2', text: 'Option 3', value: 'Option 3' },
]
</script>

<template>
<Story title="VaSelect/Visual/Decorators">
<Variant
title="With label"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
label="With label"
:options="options"
/>
</Variant>

<Variant
title="Long label"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
placeholder="Long label"
:options="options"
/>
</Variant>

<Variant
title="With placeholder"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
placeholder="With placeholder"
:options="options"
/>
</Variant>

<Variant
title="Long placeholder"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
label="Long placeholder"
placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
:options="options"
/>
</Variant>

<Variant
title="No options"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
label="No options"
:options="[]"
/>
</Variant>

<Variant
title="No options with custom text"
:initState="() => ({ value: '' })"
#default="{ state }"
>
<va-select
v-model="state.value"
class="mb-6"
label="No options with custom text"
:options="[]"
no-options-text="Sorry, nothing to show :("
/>
</Variant>
</Story>
</template>
Loading

0 comments on commit aaa1b2a

Please sign in to comment.