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

package/src/stories/Icon/IconList.vue

@@ -1,34 +0,0 @@
-<template>
-	<div class="vv-input-text">
-		<label for="search">Search</label>
-		<div class="vv-input-text__wrapper">
-			<input id="search" v-model="search" type="text" />
-		</div>
-	</div>
-	<div class="flex justify-center gap-16 flex-wrap mt-lg">
-		<div
-			v-for="iconName in icons"
-			:key="iconName"
-			class="icon-item flex items-center xl:w-1/6 md:w-1/5 sm:w-1/3 xs:w-full">
-			<VvIcon :name="iconName" width="25" class="mr-md" />
-			{{ iconName }}
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import IconsNormal from '../../assets/icons/normal.json'
-import { ref, watch, type Ref } from 'vue'
-
-const allIcons = Object.keys(IconsNormal.icons)
-const icons: Ref<string[]> = ref(allIcons)
-const search = ref('')
-watch(search, (newValue) => {
-	icons.value = allIcons.filter((icon) => icon.includes(newValue))
-})
-</script>
-
-<style lang="scss">
-@import '@volverjs/style/scss/components/vv-input-text';
-</style>

package/src/stories/Icon/IconPrefix.stories.mdx

@@ -1,79 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest } from './IconTest.js'
-
-<Meta title="Components/Icon/Props/prefix" />
-
-# VvIcon prefix
-
-Stories of `VvIcon` `prefix`.
-By default prefix generated are: `simple`, `normal`, `detailed`
-
-## Prefix normal (default)
-
-Let's define a story for our `normal` `prefix` icon.
-
-<Canvas>
-	<Story
-		name="normal"
-		play={(ctx) =>
-			iconTest({
-				...ctx,
-				functions: [classTest],
-				classNames: ['vv-icon', 'iconify', 'iconify--normal']
-			})
-		}>
-		{() => {
-			return {
-				components: { VvIcon },
-				template: `<vv-icon name="add" data-testid="img" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-## Prefix simple
-
-Let's define a story for our `simple` `prefix` icon.
-
-<Canvas>
-	<Story
-		name="simple"
-		play={(ctx) =>
-			iconTest({
-				...ctx,
-				functions: [classTest],
-				classNames: ['vv-icon', 'iconify', 'iconify--simple']
-			})
-		}>
-		{() => {
-			return {
-				components: { VvIcon },
-				template: `<vv-icon name="add" data-testid="img" prefix="simple" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-## Prefix detailed
-
-Let's define a story for our `detailed` `prefix` icon.
-
-<Canvas>
-	<Story
-		name="detailed"
-		play={(ctx) =>
-			iconTest({
-				...ctx,
-				functions: [classTest],
-				classNames: ['vv-icon', 'iconify', 'iconify--detailed']
-			})
-		}>
-		{() => {
-			return {
-				components: { VvIcon },
-				template: `<vv-icon name="add" data-testid="img" prefix="detailed" />`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Icon/IconRemote.stories.mdx

@@ -1,39 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest, childElementCountTest } from './IconTest.js'
-
-<Meta title="Components/Icon/Props/remote" />
-
-# VvIcon remote
-
-Stories of `VvIcon` with remote `src`.
-
-<Canvas>
-	<Story
-		name="remote"
-		play={(ctx) => {
-			setTimeout(() => {
-				iconTest({
-					...ctx,
-					functions: [classTest, childElementCountTest],
-					classNames: []
-				})
-			}, 500)
-		}}>
-		{() => {
-			return {
-				components: { VvIcon },
-				template: `<vv-icon name="address-book" data-testid="img" src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/d3a7818c253fcbafff9ebd1d4abb2866c192e1d7/svgs/regular/address-book.svg" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`
-	<vv-icon
-	name="address-book"
-	src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/d3a7818c253fcbafff9ebd1d4abb2866c192e1d7/svgs/regular/address-book.svg"
-/>`}
-/>

package/src/stories/Icon/IconTest.js

@@ -1,27 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function iconTest({ canvasElement, functions, ...args }) {
-	const icon = await within(canvasElement).findByTestId('img')
-	if (functions) {
-		functions.forEach(async (func) => {
-			await func({ icon, ...args })
-		})
-	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(icon)).toHaveNoViolations()
-}
-
-async function classTest({ icon, classNames = [] }) {
-	classNames.forEach((cssClass) => {
-		expect(icon).toHaveClass(cssClass)
-	})
-}
-
-async function childElementCountTest({ icon }) {
-	expect(icon.childElementCount).toBeGreaterThan(0)
-}
-
-export { iconTest, childElementCountTest, classTest }

package/src/stories/Icon/IconsList.stories.mdx

@@ -1,35 +0,0 @@
-import {
-	Canvas,
-	Meta,
-	Story,
-	IconGallery,
-	IconItem
-} from '@storybook/addon-docs'
-import IconList from './IconList.vue'
-import IconsNormal from '../../assets/icons/normal.json'
-
-# Iconography
-
-<Meta title="Components/Icon/iconography" component={IconList} />
-
-export const Template = (args) => ({
-	components: { IconList },
-	setup() {
-		return { args }
-	},
-	template: `<icon-list />`
-})
-
-<Story name="iconography" args={{}}>
-	{Template.bind({})}
-</Story>
-
-<IconGallery>
-	{/* {Object.keys(IconsNormal.icons).map((key) => {
-		return (
-			<IconItem key={key} name={key}>
-				{Template.bind({})}
-			</IconItem>
-		)
-	})} */}
-</IconGallery>

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

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Autocomplete" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Autocomplete"
-		args={{ name: 'input-text-autocomplete', autocomplete: 'on' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Autofocus" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Autofocus"
-		args={{
-			name: 'input-text-autofocus',
-			label: 'Campo in autofocus',
-			autofocus: true,
-			type: 'text'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Disabled" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Disabled"
-		args={{
-			name: 'input-text-disabled',
-			disabled: true,
-			modelValue: 'Prova'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Error" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'input-text-error',
-			error: true,
-			errorLabel: 'Error message!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Floating" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Floating"
-		args={{
-			name: 'input-text-floating',
-			label: 'Label di prova',
-			floating: true,
-			type: 'text'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,18 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/HintLabel" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="HintLabel"
-		args={{
-			name: 'input-text-hint',
-			hintLabel: 'Help text di prova!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,18 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Icon" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Icon"
-		args={{
-			name: 'input-text-icon',
-			icon: 'add'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Label" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Label"
-		args={{ name: 'input-text-label', label: 'Label di prova' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Loading" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Loading"
-		args={{
-			name: 'input-text-loading',
-			loading: true,
-			loadingLabel: 'Loading label!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,31 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Max" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Max - DateTime"
-		args={{
-			name: 'input-datetime-max',
-			type: 'date',
-			max: new Date().toISOString().split('T')[0]
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Max - Number"
-		args={{
-			name: 'input-number-max',
-			type: 'number',
-			max: 15
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,36 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/MaxLength" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="MaxLength"
-		args={{ name: 'input-text-min-length', maxlength: 5 }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="MaxLength - limit"
-		args={{ name: 'input-text-limit', maxlength: 5, showLimit: true }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="MaxLength - countdown"
-		args={{
-			name: 'input-text-limit-countdown',
-			maxlength: 5,
-			showLimit: true,
-			showLimitMode: 'countdown'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,31 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Min" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Min - DateTime"
-		args={{
-			name: 'input-datetime-min',
-			type: 'date',
-			max: new Date().toISOString().split('T')[0]
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Min - Number"
-		args={{
-			name: 'input-number-min',
-			type: 'number',
-			min: 5
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/MinLength" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="MinLength"
-		args={{ name: 'input-text-min-length', minlength: 5 }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Placeholder" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Placeholder"
-		args={{ name: 'input-text-placeholder', placeholder: 'Prova' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Readonly" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Readonly"
-		args={{
-			name: 'input-text-readonly',
-			readonly: true,
-			modelValue: 'Prova'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,31 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Step" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Step"
-		args={{
-			name: 'input-number-step',
-			type: 'number',
-			step: 1
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Step - decimal"
-		args={{
-			name: 'input-number-step-decimal',
-			type: 'number',
-			step: 0.5
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import { Template } from './InputText.stories.mdx'
-
-<Meta title="Components/InputText/Valid" component={VvInputText} />
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'input-text-valid',
-			valid: true,
-			validLabel: 'Valid label!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/NativeSelect/NativeSelect.stories.mdx

@@ -1,53 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
-import { VvNativeSelectProps } from '../../components/VvNativeSelect/VvNativeSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-
-<Meta
-	title="Components/NativeSelect"
-	component={VvNativeSelect}
-	args={{
-		...ObjectUtilities.propsToObject(VvNativeSelectProps),
-		label: 'Lorem Ipsum',
-		placeholder: 'Placeholder',
-		options: [
-			{
-				label: 'Option 1',
-				value: 1
-			},
-			{
-				label: 'Option 2',
-				value: 2
-			},
-			{
-				label: 'Option 3',
-				value: 3
-			}
-		]
-	}}
-/>
-
-export const Template = (args) => ({
-	components: { VvNativeSelect },
-	setup() {
-		return { args }
-	},
-	data() {
-		return {
-			selectValue: ''
-		}
-	},
-	template: `<div class="w-1/2">
-            <vv-native-select v-bind="args" v-model:modelValue="selectValue" />
-			value: {{ selectValue }}
-        </div>`
-})
-
-# VvNativeSelect
-
-Stories of `VvNativeSelect`.
-Let's define a story for our playground `select`:
-
-<Canvas>
-	<Story name="vv-native-select">{Template.bind({})}</Story>
-</Canvas>