@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

@@ -1,100 +0,0 @@
-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}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Array of Objects"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			options: [
-				{ value: 'first', label: 'First' },
-				{ value: 'second', label: 'Second' },
-				{ value: 'third', label: 'Third' },
-			],
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<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="Option value key"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			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,68 +0,0 @@
-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'
-
-<Meta
-	title="Components/RadioGroup/Slots"
-	component={VvRadioGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	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>
-	`,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				control: {
-					disable: true,
-				},
-			},
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{ hint: 'Hint <em class="italic">slot!</em>' }}
-		argTypes={{
-			hint: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,196 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-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={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvSelect },
-	setup() {
-		return { args }
-	},
-	data() {
-		return {
-			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> 
-	`,
-})
-
-<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>
-
-<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="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>

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

@@ -1,78 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '@/components/VvSelect/VvSelect.vue'
-import { Template } from './Select.stories.mdx'
-import { defaultTest } from './Select.test.ts'
-import { defaultArgs, argTypes } from './Select.settings'
-
-<Meta
-	title="Components/Select/Icon"
-	component={VvSelect}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			icon: 'heart',
-		}}
-		argTypes={{
-			icon: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="After"
-		args={{
-			icon: 'heart',
-			iconPosition: 'after',
-		}}
-		argTypes={{
-			icon: {
-				control: {
-					disable: true,
-				},
-			},
-			iconPosition: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Src"
-		args={{
-			icon: {
-				name: 'engineering',
-				src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
-			},
-		}}
-		argTypes={{
-			icon: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,135 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '@/components/VvSelect/VvSelect.vue'
-import { Template } from './Select.stories.mdx'
-import { defaultArgs, argTypes } from './Select.settings'
-import { defaultTest } from './Select.test'
-
-<Meta
-	title="Components/Select/Options"
-	component={VvSelect}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Array of Objects"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			options: [
-				{ value: 'first', label: 'First' },
-				{ value: 'second', label: 'Second' },
-				{ value: 'third', label: 'Third' },
-			],
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<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="Option value key"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			valueKey: 'id',
-			options: [
-				{ id: 'first', label: 'First' },
-				{ id: 'second', label: 'Second' },
-				{ id: 'third', label: 'Third' },
-			],
-		}}
-		argTypes={{
-			options: {
-				valueKey: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Grouped options"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		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' },
-					]
-				},
-			],
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,48 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '@/components/VvSelect/VvSelect.vue'
-import { Template } from './Select.stories.mdx'
-import { defaultTest } from './Select.test.ts'
-import { defaultArgs, argTypes } from './Select.settings'
-
-<Meta
-	title="Components/Select/Slots"
-	component={VvSelect}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Before"
-		play={defaultTest}
-		args={{
-			before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="After"
-		play={defaultTest}
-		args={{
-			after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{
-			hint: 'Hint <em class="italic">slot!</em>',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Tab/Tab.stories.mdx

@@ -1,65 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvTab from '@/components/VvTab/VvTab.vue'
-import { defaultArgs, defaultArgTypes } from './Tab.settings'
-import { defaultTest } from './Tab.test'
-
-<Meta
-	title="Components/Tab"
-	component={VvTab}
-	args={defaultArgs}
-	argTypes={defaultArgTypes}
-/>
-
-export const Template = (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>`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>