@volverjs/ui-vue 0.0.1-beta.11

package/src/stories/Textarea/TextareaAutoclear.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Autoclear" component={VvTextarea} />
+
+# Autoclear - Experimental
+
+`Autoclear` permette all'utente di cancellare il contenuto l'intero contenuto della textarea
+
+<Canvas>
+	<Story
+		name="Autoclear"
+		args={{
+			name: 'textarea-autoclear',
+			label: 'Autoclear',
+			autoclear: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaAutocomplete.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Autocomplete" component={VvTextarea} />
+
+# Autocomplete
+
+`Autocomplete` abilita (`ON`) o disabilita (`OFF`) l'autocomplete della singola textarea.
+
+<Canvas>
+	<Story
+		name="Autocomplete"
+		args={{
+			name: 'textarea-autocomplete-on',
+			label: 'Nome',
+			autocomplete: 'on'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaAutofocus.stories.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Autofocus" component={VvTextarea} />
+
+# Autofocus
+
+`Autofocus` abilita il focus al caricamento della pagina sull'elemento corrente.
+
+<Canvas>
+	<Story
+		name="Autofocus"
+		args={{
+			name: 'textarea-autofocus',
+			label: 'Campo in autofocus',
+			autofocus: true,
+			type: 'text'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaDebounce.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Debounce" component={VvTextarea} />
+
+# Debounce
+
+`Debounce` definisce l'intervallo di tempo in millisecondi che deve passare dall'ultima battuta prima che il testo venga sincronizzato.
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			name: 'textarea-disabled',
+			disabled: true,
+			modelValue: 'Prova'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaDisabled.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Disabled" component={VvTextarea} />
+
+# Disabled
+
+`Disabled` disablita la text area.
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			name: 'textarea-disabled',
+			disabled: true,
+			modelValue: 'Prova'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaError.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Error" component={VvTextarea} />
+
+# Error
+
+`Error` attiva lo stato errore della textarea.
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'textarea-error',
+			error: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaErrorLabel.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/ErrorLabel" component={VvTextarea} />
+
+# ErrorLabel
+
+`ErrorLabel` messaggio/messaggi di errore.
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'textarea-error',
+			label: 'Single error message',
+			error: true,
+			errorLabel: 'Error message!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Errors"
+		args={{
+			name: 'textarea-error',
+			label: 'Multiple error messages',
+			error: true,
+			errorLabel: ['Error message 1!', 'Error message 2!']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaFloating.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Floating" component={VvTextarea} />
+
+# Floating
+
+`Floating` enable floating label
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			name: 'textarea-floating',
+			label: 'Label di prova',
+			floating: true,
+			type: 'text',
+			placeholder: 'asdasd'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaHintLabel.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/HintLabel" component={VvTextarea} />
+
+# HintLabel
+
+`HintLabel` contiene un testo di aiuto visualizzato sotto la textarea.
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		args={{
+			name: 'textarea-hint',
+			hintLabel: 'Help text di prova!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaIcon.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Icon" component={VvTextarea} />
+
+# Icon
+
+`Icon` nome dell'icona da utilizzare
+
+<Canvas>
+	<Story
+		name="Icon"
+		args={{
+			name: 'textarea-icon',
+			icon: 'add'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaIconPosition.stories.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/IconPosition" component={VvTextarea} />
+
+# IconPosition
+
+`iconPosition` posizione dell'icona
+
+`iconPosition='right'` posiziona l'icona a dx
+
+<Canvas>
+	<Story
+		name="Left"
+		args={{
+			name: 'textarea-icon',
+			icon: 'add',
+			iconPosition: 'left'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+`iconPosition='left'` posiziona l'icona a sx
+
+<Canvas>
+	<Story
+		name="Right"
+		args={{
+			name: 'textarea-icon',
+			icon: 'add',
+			iconPosition: 'right'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaId.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Id" component={VvTextarea} />
+
+# Id
+
+`Id` definisce l'id della Textarea
+
+<Canvas>
+	<Story
+		name="Id"
+		args={{ name: 'textarea-id', id: 'ID_11_11', label: 'Label di prova' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaLabel.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Label" component={VvTextarea} />
+
+# Label
+
+`Label` definisce il testo della label della Textarea
+
+<Canvas>
+	<Story
+		name="Label"
+		args={{ name: 'textarea-label', label: 'Label di prova' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaLimit.stories.mdx

@@ -0,0 +1,50 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Limit" component={VvTextarea} />
+
+# Limit
+
+`Limit` mostra il contatore dei caratteri digitati.
+
+<Canvas>
+	<Story
+		name="Limit"
+		args={{
+			name: 'textarea-show-limit',
+			limit: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+Se imposto anche il maxlength, visualizza anche il numero massimo di caratteri che posso digitare
+
+<Canvas>
+	<Story
+		name="Limit with Max"
+		args={{
+			name: 'textarea-show-limit',
+			limit: true,
+			maxlength: 25
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+`limit='countdown'` conteggia quanti caratteri posso ancora inserire.
+
+<Canvas>
+	<Story
+		name="Limit countdown"
+		args={{
+			name: 'textarea-show-countdown',
+			limit: 'countdown',
+			maxlength: 25
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaLoading.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Loading" component={VvTextarea} />
+
+# Loading
+
+`Loading` se true, applica lo stato loading alla textarea
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			name: 'textarea-loading',
+			loading: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaLoadingLabel.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/LoadingLabel" component={VvTextarea} />
+
+# LoadingLabel
+
+`LoadingLabel` visualizza un messaggio in fase di loading.
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			name: 'textarea-loading',
+			loading: true,
+			loadingLabel: 'Loading label!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaMaxLength.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/MaxLength" component={VvTextarea} />
+
+# maxLength
+
+`maxlength` numero massimo di caratteri che posso digitare
+
+<Canvas>
+	<Story
+		name="MaxLength"
+		args={{ name: 'textarea-max-length', maxlength: 5 }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaMinLength.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/MinLength" component={VvTextarea} />
+
+# minlength
+
+`minlength` numero minimo di caratteri che posso digitare
+
+<Canvas>
+	<Story
+		name="MinLength"
+		args={{ name: 'textarea-min-length', minlength: 5 }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaModifiers.stories.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Modifiers" component={VvTextarea} />
+
+# Modifiers
+
+`Modifiers` mi permette di aggiungere uno o più modificatori alla textarea.
+
+Ogni modificatore verrà convertito in una classe `vv-textarea--${#modifier#}`
+
+<Canvas>
+	<Story
+		name="Modifiers"
+		args={{
+			name: 'textarea-modifiers',
+			modifiers: ['variante-1', 'variante-2']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaName.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Name" component={VvTextarea} />
+
+# Name
+
+`Name` definisce il name della Textarea
+
+<Canvas>
+	<Story
+		name="Name"
+		args={{
+			name: 'textarea-name',
+			name: 'my-name',
+			label: 'Label di prova'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaPlaceholder.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Placeholder" component={VvTextarea} />
+
+# Placeholder
+
+`Placeholder` testo da utilizzare come placeholder della textarea
+
+<Canvas>
+	<Story
+		name="Placeholder"
+		args={{ name: 'textarea-placeholder', placeholder: 'Prova' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaReadonly.stories.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Readonly" component={VvTextarea} />
+
+# Redonly
+
+`Redonly` attiva la modalità readonly sulla textarea
+
+<Canvas>
+	<Story
+		name="Readonly"
+		args={{
+			name: 'textarea-readonly',
+			readonly: true,
+			modelValue: 'Prova'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaRequired.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Required" component={VvTextarea} />
+
+# Required
+
+`Required` identifica la textarea come un campo required
+
+<Canvas>
+	<Story
+		name="Required"
+		args={{
+			name: 'textarea-required',
+			required: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaResizable.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Resizable" component={VvTextarea} />
+
+# Resizable
+
+`Resizable` abilita il ridimensionamento verticale della textarea
+
+<Canvas>
+	<Story
+		name="Resizable"
+		args={{
+			name: 'textarea-resizable',
+			resizable: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaRowsCols.stories.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/RowsCols" component={VvTextarea} />
+
+# Rows
+
+`Rows` numero di righe textarea
+
+<Canvas>
+	<Story
+		name="Rows"
+		args={{
+			name: 'textarea-rows',
+			icon: 'add',
+			rows: 150
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+# Cols
+
+`Cols` numero di colonne textarea
+
+<Canvas>
+	<Story
+		name="Cols"
+		args={{
+			name: 'textarea-cols',
+			icon: 'add',
+			cols: 150
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>