@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/stories/CheckGroup/CheckGroupHintLabel.stories.mdx

@@ -1,27 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/HintLabel" component={VvCheckGroup} />
-
-# HintLabel
-
-<Canvas>
-	<Story
-		name="HintLabel"
-		args={{
-			name: 'vv-group-options-hint-label',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			hintLabel: 'Prova prova prova prova'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupLabel.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Label" component={VvCheckGroup} />
-
-# Label
-
-<Canvas>
-	<Story
-		name="Label"
-		args={{
-			name: 'story-label',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			label: 'Custom label'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupOptionLabel.stories.mdx

@@ -1,48 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/OptionLabel" component={VvCheckGroup} />
-
-# OptionLabel
-
-Change object prop for label
-
-<Canvas>
-	<Story
-		name="OptionsLabel - string"
-		args={{
-			name: 'vv-group-options-label-string',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: 'name'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# OptionLabel Function
-
-Use function to define option label
-
-<Canvas>
-	<Story
-		name="OptionsLabel - function"
-		args={{
-			name: 'vv-group-options-label-function',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupOptionValue.stories.mdx

@@ -1,48 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/OptionValue" component={VvCheckGroup} />
-
-# OptionValue
-
-Change object prop for value
-
-<Canvas>
-	<Story
-		name="OptionValue - string"
-		args={{
-			name: 'vv-group-options-value-string',
-			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
-			],
-			optionValue: 'qta'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# OptionValue Function
-
-Use function to define option value
-
-<Canvas>
-	<Story
-		name="OptionValue - function"
-		args={{
-			name: 'vv-group-options-value-function',
-			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
-			],
-			optionValue: (o) => `${o.qta}_${o.label}`
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupOptions.stories.mdx

@@ -1,40 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Options" component={VvCheckGroup} />
-
-# Options
-
-Check group based on list of object list
-
-<Canvas>
-	<Story
-		name="Options"
-		args={{
-			name: 'story-options',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			]
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Options as Array
-
-<Canvas>
-	<Story
-		name="Options as Array"
-		args={{
-			name: 'story-options-strings',
-			options: ['Primo', 'Secondo', 'Terzo']
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupReadonly.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Readonly" component={VvCheckGroup} />
-
-# Readonly
-
-<Canvas>
-	<Story
-		name="Readonly"
-		args={{
-			name: 'story-readonly',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			readonly: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupSlots.stories.mdx

@@ -1,152 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta title="Components/CheckGroup/Slots" component={VvCheckGroup} />
-
-# Default
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			name: 'story-slot-default'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                            <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                            <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Hint
-
-<Canvas>
-	<Story
-		name="Hint"
-		args={{
-			name: 'story-slot-hint'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT!</p>
-								<p>{{slotProps}}</p> 
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Valid
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'story-slot-valid',
-			valid: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Error
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'story-slot-error',
-			error: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupValid.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Valid" component={VvCheckGroup} />
-
-# Valid & Valid label
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'vv-group-options-valid-label',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			valid: true,
-			validLabel: 'Campo corretto'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupVertical.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Vertical" component={VvCheckGroup} />
-
-# Vertical
-
-<Canvas>
-	<Story
-		name="Vertical"
-		args={{
-			name: 'story-vertical',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			vertical: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Dialog/DialogAutoClose.stories.mdx

@@ -1,18 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
-
-import { Template } from './Dialog.stories.mdx'
-
-<Meta title="Components/Dialog/AutoClose" component={VvDialog} />
-
-# Close on click outside
-
-<Canvas>
-	<Story
-		name="AutoClose"
-		args={{ id: 'dialog-autoclose', size: '', autoClose: true }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Dialog/DialogSize.stories.mdx

@@ -1,36 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
-
-import { Template } from './Dialog.stories.mdx'
-
-<Meta title="Components/Dialog/Size" component={VvDialog} />
-
-# Normal
-
-<Canvas>
-	<Story name="Normal" args={{ id: 'dialog-normal', size: '' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Small
-
-<Canvas>
-	<Story
-		name="Small"
-		args={{ id: 'dialog-small', size: 'small', transition: 'scale' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Fullscreen
-
-<Canvas>
-	<Story
-		name="Fullscreen"
-		args={{ id: 'dialog-fullscreen', size: 'fullscreen' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Dropdown/DropdownDisabled.stories.mdx

@@ -1,25 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-
-<Meta title="Components/Dropdown/Props/disabled" />
-
-# VvDropdown disabled
-
-Let's define a story for our `disabled` dropdown.
-
-<Canvas>
-	<Story
-		name="disabled"
-		args={{
-			options: ['Option 4', 'Option 5', 'Option 6'],
-			disabled: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" disabled />`}
-/>

package/src/stories/Dropdown/DropdownLabelNoResults.stories.mdx

@@ -1,25 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-
-<Meta title="Components/Dropdown/Props/labelNoResults" />
-
-# VvDropdown maxValues
-
-Let's define a story for our multple `max-values` dropdown.
-
-<Canvas>
-	<Story
-		name="labelNoResults"
-		args={{
-			options: [],
-			labelNoResults: 'Non sono presenti elementi!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" label-no-results="Non sono presenti elementi!" />`}
-/>

package/src/stories/Dropdown/DropdownMaxValues.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-
-<Meta title="Components/Dropdown/Props/maxValues" />
-
-# VvDropdown maxValues
-
-Let's define a story for our multple `max-values` dropdown.
-
-<Canvas>
-	<Story
-		name="maxValues"
-		args={{
-			options: ['Option 4', 'Option 5', 'Option 6'],
-			multiple: true,
-			maxValues: 2
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple max-values="2" />`}
-/>

package/src/stories/Dropdown/DropdownMultiple.stories.mdx

@@ -1,56 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-
-<Meta title="Components/Dropdown/Props/multiple" />
-
-# VvDropdown multiple
-
-Let's define a story for our `multiple` dropdown.
-
-<Source
-	language="json"
-	code={`[
-	{
-		"label": "Option 1",
-		"value": 1
-	},
-	{
-		"label": "Option 2",
-		"value": 2
-	},
-	{
-		"label": "Option 3",
-		"value": 3
-	}
-]`}
-/>
-
-<Canvas>
-	<Story
-		name="multiple"
-		args={{
-			options: [
-				{
-					label: 'Option 1',
-					value: 1
-				},
-				{
-					label: 'Option 2',
-					value: 2
-				},
-				{
-					label: 'Option 3',
-					value: 3
-				}
-			],
-			multiple: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple />`}
-/>

package/src/stories/Dropdown/DropdownUseObject.stories.mdx

@@ -1,58 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-
-<Meta title="Components/Dropdown/Props/useObject" />
-
-# VvDropdown useObject
-
-Let's define a story for our `useObject` dropdown.
-
-Options object array and default `valueKey` ("value") and `labelKey` ("label"):
-
-<Source
-	language="json"
-	code={`[
-	{
-		"label": "Option 1",
-		"value": 1
-	},
-	{
-		"label": "Option 2",
-		"value": 2
-	},
-	{
-		"label": "Option 3",
-		"value": 3
-	}
-]`}
-/>
-
-<Canvas>
-	<Story
-		name="useObject"
-		args={{
-			options: [
-				{
-					label: 'Option 1',
-					value: 1
-				},
-				{
-					label: 'Option 2',
-					value: 2
-				},
-				{
-					label: 'Option 3',
-					value: 3
-				}
-			],
-			useObject: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" use-object />`}
-/>