@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

package/src/stories/Radio/Radio.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './Radio.settings'
+import { defaultTest } from './Radio.test'
+
+const meta: Meta<typeof VvRadio> = {
+	title: 'Components/Radio',
+	component: VvRadio,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadio>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadio },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-radio v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-radio>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		disabled: true,
+	},
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'You must accept terms and conditions',
+		label: 'Accept terms and conditions',
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Thank you for accepting terms and conditions',
+		label: 'Accept terms and conditions',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please accept terms and conditions',
+	},
+}

package/src/stories/Radio/RadioSlots.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './Radio.settings'
+import { Default as DefaultStory } from './Radio.stories'
+
+const meta: Meta<typeof VvRadio> = {
+	title: 'Components/Radio/Slots',
+	component: VvRadio,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadio>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		default: 'DefaultStory <em class="italic">slot!</em>',
+	},
+}
+
+export const HintSlot: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/RadioGroup/RadioGroup.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
+
+const meta: Meta<typeof VvRadioGroup> = {
+	title: 'Components/RadioGroup',
+	component: VvRadioGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadioGroup },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<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> 
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		disabled: true,
+	},
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Vertical: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		vertical: true,
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'This field is required.',
+	},
+}
+
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Selected response is valid.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please fill the input above.',
+	},
+}

package/src/stories/RadioGroup/RadioGroupOptions.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { Default } from './RadioGroup.stories'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+
+const meta: Meta<typeof VvRadioGroup> = {
+	title: 'Components/RadioGroup/Options',
+	component: VvRadioGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const ArrayOfObjects: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{ value: 'first', label: 'First' },
+			{ value: 'second', label: 'Second' },
+			{ value: 'third', label: 'Third' },
+		],
+	},
+}
+
+export const OptionLabelKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		labelKey: 'name',
+		options: [
+			{ value: 'first', name: 'First' },
+			{ value: 'second', name: 'Second' },
+			{ value: 'third', name: 'Third' },
+		],
+	},
+}
+
+export const OptionValueKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		valueKey: 'id',
+		options: [
+			{ id: 'first', label: 'First' },
+			{ id: 'second', label: 'Second' },
+			{ id: 'third', label: 'Third' },
+		],
+	},
+}

package/src/stories/RadioGroup/RadioGroupSlots.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+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'
+
+const meta: Meta<typeof VvRadioGroup> = {
+	title: 'Components/RadioGroup/Slots',
+	component: VvRadioGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvRadioGroup, VvRadio },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<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>	
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

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

@@ -41,7 +41,6 @@ export const argTypes = {
 	...FloatingLabelArgTypes,
 	...UnselectableArgTypes,
 	multiple: {
-		type: 'boolean',
 		description:
 			'This Boolean attribute indicates that multiple options can be selected in the list.',
 		table: {
@@ -51,7 +50,6 @@ export const argTypes = {
 		},
 	},
 	required: {
-		type: 'boolean',
 		description:
 			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
 		table: {
@@ -61,7 +59,6 @@ export const argTypes = {
 		},
 	},
 	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: {
@@ -69,14 +66,12 @@ export const argTypes = {
 		},
 	},
 	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.ts

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { defaultTest } from './Select.test'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvSelect },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /*html*/ `
+			<vv-select v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
+				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-select>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		disabled: true,
+	},
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Multiple: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		multiple: true,
+	},
+}
+
+export const Unselectable: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		unselectable: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Selected response is valid.',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'Selected response is invalid.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please fill the input above.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		floating: true,
+	},
+}

package/src/stories/Select/SelectIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Icon',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const DefaultIconPosition: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+	},
+}
+
+export const After: Story ={
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+		iconPosition: 'after',
+	},
+}
+
+export const Src: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: {
+			name: 'engineering',
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+		},
+	},
+}

package/src/stories/Select/SelectOptions.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Options',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const ArrayOfObjects: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{ value: 'first', label: 'First' },
+			{ value: 'second', label: 'Second' },
+			{ value: 'third', label: 'Third' },
+		],
+	},
+}
+
+export const OptionLabelKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		labelKey: 'name',
+		options: [
+			{ value: 'first', name: 'First' },
+			{ value: 'second', name: 'Second' },
+			{ value: 'third', name: 'Third' },
+		],
+	},
+}
+
+export const OptionValueKey: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		valueKey: 'id',
+		options: [
+			{ id: 'first', label: 'First' },
+			{ id: 'second', label: 'Second' },
+			{ id: 'third', label: 'Third' },
+		],
+
+	},
+}
+
+export const GroupedOptions: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		options: [
+			{
+				label: 'Group 1',
+				options: [
+					{ value: 'first', label: 'First' },
+					{ value: 'second', label: 'Second' },
+				],
+			},
+			{
+				label: 'Group 2',
+				options: [
+					{ value: 'third', label: 'Third' },
+					{ value: 'fourth', label: 'Fourth' },
+				],
+			},
+		],
+	},
+}

package/src/stories/Select/SelectSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Default } from './Select.stories'
+import { defaultArgs, argTypes } from './Select.settings'
+
+const meta: Meta<typeof VvSelect> = {
+	title: 'Components/Select/Slots',
+	component: VvSelect,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvSelect>
+
+export const Before: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Tab/Tab.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvTab from '@/components/VvTab/VvTab.vue'
+import { defaultArgs, defaultArgTypes } from './Tab.settings'
+import { defaultTest } from './Tab.test'
+
+const meta: Meta<typeof VvTab> = {
+	title: 'Components/Tab',
+	component: VvTab,
+	args: defaultArgs,
+	argTypes: defaultArgTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvTab>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: {VvTab},
+		setup() {
+			return {args}
+		},
+		template: /* html */ `
+			<div class="m-md w-1/2">
+				<vv-tab v-bind="args" data-testId="element">
+					<template #tab-item_0>
+						<span class="text-20 font-semibold">Tab 1</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-item_1>
+						<span class="text-20 font-semibold">Tab 2</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+					<template #tab-3>
+						<span class="text-20 font-semibold">Tab 3</span>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+							vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+							ultricies vehicula ut id elit. Morbi leo risus, porta ac
+							consectetur ac, vestibulum at eros. Praesent commodo cursus
+							magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+							Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+							elit libero, a pharetra augue.
+						</p>
+					</template>
+				</vv-tab>
+			</div>`
+	}),
+	play: defaultTest,
+}