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

package/src/stories/RadioGroup/RadioGroupOptions.stories.mdx

@@ -1,58 +1,100 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import {
-	mainOptionsTest,
-	radioOptionsTest,
-	arrayOptionsTest
-} from './RadioOptionsTest.js'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
 
-<Meta title="Components/RadioGroup/Options" component={VvRadioGroup} />
-
-# Options
-
-Check group based on list of object list
+<Meta
+	title="Components/RadioGroup/Options"
+	component={VvRadioGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
 	<Story
-		name="Options"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [radioOptionsTest]
-			})
-		}
+		name="Array of Objects"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
 		args={{
-			name: 'options',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+				{ value: 'third', label: 'Third' },
 			],
-			role: 'radiogroup'
-		}}>
-		{Template.bind({})}
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-# Options as Array
+<Canvas>
+	<Story
+		name="Option label key"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			labelKey: 'name',
+			options: [
+				{ value: 'first', name: 'First' },
+				{ value: 'second', name: 'Second' },
+				{ value: 'third', name: 'Third' },
+			],
+		}}
+		argTypes={{
+			labelKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
 	<Story
-		name="Options as Array"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [arrayOptionsTest]
-			})
-		}
+		name="Option value key"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
 		args={{
-			name: 'options',
-			options: ['Primo', 'Secondo', 'Terzo']
-		}}>
-		{Template.bind({})}
+			valueKey: 'id',
+			options: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second' },
+				{ id: 'third', label: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				valueKey: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -1,162 +1,67 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
 
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
+<Meta
+	title="Components/RadioGroup/Slots"
+	component={VvRadioGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-import { slotsTest } from './RadioSlotsTest.js'
-
-<Meta title="Components/RadioGroup/Slots" component={VvRadioGroup} />
-
-# Default
+export const Template = (args) => ({
+	components: { VvRadioGroup, VvRadio },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: undefined }),
+	template: `
+           <vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+				<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+				<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-radio-group>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div>
+        `,
+})
 
 <Canvas>
 	<Story
 		name="Default"
-		args={{
-			name: 'story-slot-default'
-		}}>
-		{(args) => {
-			return {
-				components: { VvRadioGroup, VvRadio },
-				data: () => ({ selected: args.modelValue || null }),
-				setup() {
-					return { args }
+		play={defaultTest}
+		argTypes={{
+			options: {
+				control: {
+					disable: true,
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Hint
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement })
-		}}
-		args={{
-			name: 'story-slot-hint'
-		}}>
-		{(args) => {
-			return {
-				components: { VvRadioGroup, VvRadio },
-				data: () => ({ selected: args.modelValue || null }),
-				setup() {
-					return { args }
+			},
+			default: {
+				control: {
+					disable: true,
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT! {{slotProps}}</p> 
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
+			},
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-# Valid
-
 <Canvas>
 	<Story
-		name="Valid"
-		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'valid')
-		}}
-		args={{
-			name: 'story-slot-valid',
-			valid: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvRadioGroup, VvRadio },
-				data: () => ({ selected: args.modelValue || null }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Error
-
-<Canvas>
-	<Story
-		name="Error"
-		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'invalid')
-		}}
-		args={{
-			name: 'story-slot-error',
-			error: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvRadioGroup, VvRadio },
-				data: () => ({ selected: args.modelValue || null }),
-				setup() {
-					return { args }
+		name="Hint"
+		play={defaultTest}
+		args={{ hint: 'Hint <em class="italic">slot!</em>' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
+			},
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Select/Select.settings.ts

@@ -0,0 +1,86 @@
+import {
+	ValidArgTypes,
+	InvalidArgTypes,
+	HintArgTypes,
+	LoadingArgTypes,
+	DisabledArgTypes,
+	ReadonlyArgTypes,
+	ModifiersArgTypes,
+	OptionsArgTypes,
+	IconArgTypes,
+	TabindexArgTypes,
+	IdNameArgTypes,
+	FloatingArgTypes,
+	UnselectableArgTypes,
+	AutofocusArgTypes,
+	AutocompleteArgTypes,
+} from '@/stories/argTypes'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvSelectProps } from '@/components/VvSelect'
+
+export const defaultArgs = {
+	...propsToObject(VvSelectProps),
+	name: 'vv-select',
+	options: ['Option 1', 'Option 2', 'Option 3'],
+	placeholder: 'Select an option',
+	label: 'Select label',
+}
+export const argTypes = {
+	...IdNameArgTypes,
+	...AutofocusArgTypes,
+	...AutocompleteArgTypes,
+	...TabindexArgTypes,
+	...ValidArgTypes,
+	...InvalidArgTypes,
+	...HintArgTypes,
+	...LoadingArgTypes,
+	...DisabledArgTypes,
+	...ReadonlyArgTypes,
+	...ModifiersArgTypes,
+	...OptionsArgTypes,
+	...IconArgTypes,
+	...FloatingArgTypes,
+	...UnselectableArgTypes,
+	multiple: {
+		type: 'boolean',
+		description:
+			'This Boolean attribute indicates that multiple options can be selected in the list.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	required: {
+		type: 'boolean',
+		description:
+			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	size: {
+		type: 'string',
+		description:
+			'If the control is presented as a scrolling list box this attribute represents the number of rows in the list.',
+		control: {
+			type: 'text',
+		},
+	},
+	label: {
+		type: 'string',
+		description: '<label> value for the select',
+		control: {
+			type: 'text',
+		},
+	},
+	placeholder: {
+		type: 'string',
+		description: 'Text that appears when it has no value set.',
+		control: {
+			type: 'text',
+		},
+	},
+}

package/src/stories/Select/Select.stories.mdx

@@ -1,31 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
-import { VvSelectProps } from '../../components/VvSelect/VvSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { defaultTest } from './Select.test'
+import { defaultArgs, argTypes } from './Select.settings'
 
 <Meta
 	title="Components/Select"
 	component={VvSelect}
-	args={{
-		...ObjectUtilities.propsToObject(VvSelectProps),
-		maxValues: -1,
-		label: 'Lorem Ipsum',
-		placeholder: 'Placeholder',
-		options: [
-			{
-				label: 'Option 1',
-				value: 1
-			},
-			{
-				label: 'Option 2',
-				value: 2
-			},
-			{
-				label: 'Option 3',
-				value: 3
-			}
-		]
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
@@ -35,21 +17,179 @@ export const Template = (args) => ({
 	},
 	data() {
 		return {
-			value: '',
-			optionsString: ['Option 4', 'Option 5', 'Option 6']
+			inputValue: undefined,
 		}
 	},
-	template: `<div class="w-1/2">
-            <vv-select v-bind="args" v-model:modelValue="value" />
-			value: {{ value }}
-        </div>`
+	template: `
+		<vv-select v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
+		</vv-select>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+	`,
 })
 
-# VvSelect
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Multiple"
+		play={defaultTest}
+		args={{ multiple: true }}
+		argTypes={{
+			multiple: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-Stories of `VvSelect`.
-Let's define a story for our playground `select`:
+<Canvas>
+	<Story
+		name="Valid"
+		play={defaultTest}
+		args={{ valid: true, validLabel: 'Selected response is valid.' }}
+		argTypes={{
+			valid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
-	<Story name="vv-select">{Template.bind({})}</Story>
+	<Story
+		name="Invalid"
+		play={defaultTest}
+		args={{ invalid: true, invalidLabel: 'This field is required.' }}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{ hintLabel: 'Please fill the input above.' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			loading: true,
+			loadingLabel: 'Loading...',
+		}}
+		argTypes={{
+			loading: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			floating: true,
+		}}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
 </Canvas>