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

package/src/stories/Combobox/Combobox.stories.mdx

@@ -1,324 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { defaultTest } from './Combobox.test'
-import { defaultArgs, argTypes } from './Combobox.settings'
-
-<Meta
-	title="Components/Combobox"
-	component={VvCombobox}
-    args={defaultArgs}
-	argTypes={argTypes}
-
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCombobox },
-	setup() {
-		return { args }
-	},
-	data() {
-		return {
-			inputValue: undefined,
-		}
-	},
-	template: /*html*/ `
-		<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-			<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
-			<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></div></template>
-			<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-combobox>
-		<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="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...',
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Searchable"
-		play={defaultTest}
-		args={{ searchable: true, searchPlaceholder: 'Search...' }}
-		argTypes={{
-			searchable: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Floating"
-		play={defaultTest}
-		args={{ floating: true }}
-		argTypes={{
-			floating: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Native"
-		play={defaultTest}
-		args={{ native: true }}
-		argTypes={{
-			native: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Arrow"
-		args={{
-			arrow: true,
-			offset: 10,
-			triggerWidth: false,
-			placement: 'bottom-end',
-			dropdownModifiers: 'full-bleed rounded',
-		}}
-		argTypes={{
-			arrow: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Badges"
-		args={{
-			badges: true,
-			multiple: true,
-		}}
-		argTypes={{
-			badges: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Auto open"
-		args={{
-			autoOpen: true,
-		}}
-		argTypes={{
-			autoOpen: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Auto close"
-		args={{
-			autoClose: true,
-		}}
-		argTypes={{
-			autoClose: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Size"
-		args={{
-			'dropdown::before':
-				'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
-			'dropdown::after':
-				'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
-			options: Array.from({ length: 30 }, (_, i) => ({
-				label: `Option ${i + 1}`,
-				value: String(i + 1),
-			})),
-		}}
-		argTypes={{
-			'dropdown::before': {
-				control: {
-					disable: true,
-				},
-			},
-			'dropdown::after': {
-				control: {
-					disable: true,
-				},
-			},
-			options: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Combobox/ComboboxIconPosition.stories.mdx

@@ -1,78 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { Template } from './Combobox.stories.mdx'
-import { defaultTest } from './Combobox.test.ts'
-import { defaultArgs, argTypes } from './Combobox.settings'
-
-<Meta
-	title="Components/Combobox/Icon"
-	component={VvCombobox}
-	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/Combobox/ComboboxMultiple.stories.mdx

@@ -1,73 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { defaultTest } from './Combobox.test'
-import { defaultArgs, argTypes } from './Combobox.settings'
-import { Template } from './Combobox.stories.mdx'
-
-<Meta
-	title="Components/Combobox/Multiple"
-	component={VvCombobox}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{ multiple: true }}
-		argTypes={{
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Max values"
-		play={defaultTest}
-		args={{ multiple: true, maxValues: 2 }}
-		argTypes={{
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-			maxValues: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Separator"
-		play={defaultTest}
-		args={{ multiple: true, separator: ' | ' }}
-		argTypes={{
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-			separator: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Combobox/ComboboxOptions.stories.mdx

@@ -1,135 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { Template } from './Combobox.stories.mdx'
-import { defaultArgs, argTypes } from './Combobox.settings'
-import { defaultTest } from './Combobox.test'
-
-<Meta
-	title="Components/Combobox/Options"
-	component={VvCombobox}
-	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>