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

package/src/stories/Icon/IconsCollection.stories.mdx

@@ -1,69 +0,0 @@
-import { ref, watch } from 'vue'
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { icons as NormalIcons } from '@/assets/icons/normal.json'
-import { defaultArgs, argTypes } from './Icon.settings'
-
-<Meta
-	title="Components/Icon/Collection"
-	component={VvIcon}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvIcon },
-	setup() {
-		const allIcons = Object.keys(NormalIcons)
-		const icons = ref(allIcons)
-		const search = ref('')
-		watch(search, (newValue) => {
-			icons.value = allIcons.filter((icon) => icon.includes(newValue))
-		})
-		return { args, search, icons }
-	},
-	template: /*html*/ `
-		<div class="absolute inset-0 overflow-y-auto p-16">
-			<div class="vv-input-text">
-				<div class="vv-input-text__wrapper">
-					<input v-model="search" type="search" placeholder="Search..." />
-				</div>
-			</div>
-			<div class="grid grid-cols-5 gap-16 mt-16">
-				<div
-					v-for="iconName in icons"
-					:key="iconName"
-					class="flex items-center gap-16">
-					<VvIcon v-bind="args" :name="iconName" />
-					{{ iconName }}
-				</div>
-			</div>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story
-		name="Collection"
-		argTypes={{
-			name: {
-				control: {
-					disable: true,
-				},
-			},
-			src: {
-				control: {
-					disable: true,
-				},
-			},
-			svg: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/InputText/InputText.stories.mdx

@@ -1,211 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvInputText from '@/components/VvInputText/VvInputText.vue'
-import { defaultArgs, argTypes } from './InputText.settings'
-import { defaultTest } from './InputText.test'
-import { Position } from '@/constants'
-
-<Meta
-	title="Components/InputText"
-	component={VvInputText}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvInputText },
-	setup() {
-		return { args }
-	},
-	data: () => ({ inputValue: undefined }),
-	template: /*html*/ `
-		<vv-input-text 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-input-text>
-		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-    `,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Disabled"
-		args={{ disabled: true }}
-		argTypes={{
-			disabled: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Readonly"
-		args={{ readonly: true }}
-		argTypes={{
-			readonly: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			valid: true,
-			validLabel: 'The field is valid.',
-			icon: 'check',
-			iconPosition: Position.after,
-		}}
-		argTypes={{
-			valid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Invalid"
-		args={{
-			invalid: true,
-			invalidLabel: 'The field is required.',
-			icon: 'error-2',
-			iconPosition: Position.after,
-		}}
-		argTypes={{
-			invalid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		args={{
-			hintLabel: 'Please enter your name.',
-		}}
-		argTypes={{
-			hintLabel: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{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>
-
-<Canvas>
-	<Story
-		name="Mask"
-		args={{
-			mask: '##-###-##',
-		}}
-		argTypes={{
-			mask: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Unit"
-		args={{
-			unit: 'km',
-			autoWidth: true,
-			type: 'number',
-		}}
-		argTypes={{
-			unit: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/InputText/InputTextIconPosition.stories.mdx

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

@@ -1,110 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvInputText from '@/components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-import { defaultTest } from './InputText.test.ts'
-import { defaultArgs, argTypes } from './InputText.settings'
-
-<Meta
-	title="Components/InputText/Length"
-	component={VvInputText}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Maxlength"
-		args={{
-			maxlength: 5,
-		}}
-		argTypes={{
-			maxlength: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Minlength"
-		args={{
-			minlength: 5,
-		}}
-		argTypes={{
-			minlength: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Count"
-		args={{
-			count: true,
-			minlength: 100,
-		}}
-		argTypes={{
-			count: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Limit"
-		args={{
-			count: 'limit',
-			maxlength: 100,
-		}}
-		argTypes={{
-			count: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Countdown"
-		args={{
-			count: 'countdown',
-			maxlength: 100,
-		}}
-		argTypes={{
-			count: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/InputText/InputTextMinMax.stories.mdx

@@ -1,112 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvInputText from '@/components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-import { defaultTest } from './InputText.test.ts'
-import { defaultArgs, argTypes } from './InputText.settings'
-
-<Meta
-	title="Components/InputText/MinMax"
-	component={VvInputText}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Min - Number"
-		args={{
-			type: 'number',
-			min: -15,
-		}}
-		argTypes={{
-			type: {
-				control: {
-					disable: true,
-				},
-			},
-			min: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Max - Number"
-		args={{
-			type: 'number',
-			max: 15,
-		}}
-		argTypes={{
-			type: {
-				control: {
-					disable: true,
-				},
-			},
-			max: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Min - Date"
-		args={{
-			type: 'date',
-			min: new Date().toISOString().split('T')[0],
-		}}
-		argTypes={{
-			type: {
-				control: {
-					disable: true,
-				},
-			},
-			min: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Max - Date"
-		args={{
-			type: 'date',
-			max: new Date().toISOString().split('T')[0],
-		}}
-		argTypes={{
-			type: {
-				control: {
-					disable: true,
-				},
-			},
-			max: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/InputText/InputTextSlots.stories.mdx

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