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

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

@@ -4,12 +4,20 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Autocomplete" component={VvTextarea} />
+<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', autocomplete: 'on' }}>
+		args={{
+			name: 'textarea-autocomplete-on',
+			label: 'Nome',
+			autocomplete: 'on'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Autofocus" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Autofocus" component={VvTextarea} />
+
+# Autofocus
+
+`Autofocus` abilita il focus al caricamento della pagina sull'elemento corrente.
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Disabled" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Disabled" component={VvTextarea} />
+
+# Disabled
+
+`Disabled` disablita la text area.
 
 <Canvas>
 	<Story

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

@@ -4,15 +4,18 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Error" component={VvTextarea} />
+<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,
-			errorLabel: 'Error message!'
+			error: true
 		}}>
 		{Template.bind({})}
 	</Story>

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

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

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/HintLabel" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/HintLabel" component={VvTextarea} />
+
+# HintLabel
+
+`HintLabel` contiene un testo di aiuto visualizzato sotto la textarea.
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Icon" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Icon" component={VvTextarea} />
+
+# Icon
+
+`Icon` nome dell'icona da utilizzare
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,13 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/IconPosition" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/IconPosition" component={VvTextarea} />
+
+# IconPosition
+
+`iconPosition` posizione dell'icona
+
+`iconPosition='right'` posiziona l'icona a dx
 
 <Canvas>
 	<Story
@@ -18,6 +24,8 @@ import { Template } from './Textarea.stories.mdx'
 	</Story>
 </Canvas>
 
+`iconPosition='left'` posiziona l'icona a sx
+
 <Canvas>
 	<Story
 		name="Right"

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Label" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Label" component={VvTextarea} />
+
+# Label
+
+`Label` definisce il testo della label della Textarea
 
 <Canvas>
 	<Story

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

@@ -4,15 +4,18 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Loading" component={VvTextarea} />
+<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,
-			loadingLabel: 'Loading label!'
+			loading: true
 		}}>
 		{Template.bind({})}
 	</Story>

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

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

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/MinLength" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/MinLength" component={VvTextarea} />
+
+# minlength
+
+`minlength` numero minimo di caratteri che posso digitare
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Placeholder" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Placeholder" component={VvTextarea} />
+
+# Placeholder
+
+`Placeholder` testo da utilizzare come placeholder della textarea
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/Readonly" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Readonly" component={VvTextarea} />
+
+# Redonly
+
+`Redonly` attiva la modalità readonly sulla textarea
 
 <Canvas>
 	<Story

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

@@ -4,7 +4,11 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/Textarea/RowsCols" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/RowsCols" component={VvTextarea} />
+
+# Rows
+
+`Rows` numero di righe textarea
 
 <Canvas>
 	<Story
@@ -18,6 +22,10 @@ import { Template } from './Textarea.stories.mdx'
 	</Story>
 </Canvas>
 
+# Cols
+
+`Cols` numero di colonne textarea
+
 <Canvas>
 	<Story
 		name="Cols"

package/src/stories/Textarea/TextareaValid.stories.mdx

@@ -4,15 +4,18 @@ import { action } from '@storybook/addon-actions'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
 
-<Meta title="Components/TextArea/Valid" component={VvTextarea} />
+<Meta title="Components/Textarea/Props/Valid" component={VvTextarea} />
+
+# Valid
+
+`Valid` imposta lo stato valid per la textarea.
 
 <Canvas>
 	<Story
 		name="Valid"
 		args={{
-			name: 'input-textarea',
-			valid: true,
-			validLabel: 'Valid label!'
+			name: 'textarea-valid',
+			valid: true
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/Textarea/TextareaValidLabel.stories.mdx

@@ -0,0 +1,35 @@
+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/ValidLabel" component={VvTextarea} />
+
+# ValidLabel
+
+`ValidLabel` messaggio associato allo stato valid.
+
+<Canvas>
+	<Story
+		name="ValidLabel"
+		args={{
+			name: 'textarea-validlabel',
+			valid: true,
+			validLabel: 'Il dato è corretto!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="ValidLabels"
+		args={{
+			name: 'textarea-validlabels',
+			valid: true,
+			validLabel: ['Il dato è corretto!', 'Ottimo!']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/stories.scss

@@ -22,3 +22,14 @@ $zero-specificity-for-utilities: false;
 @import '@volverjs/style/scss/components/vv-card';
 @import '@volverjs/style/scss/components/vv-textarea';
 @import '@volverjs/style/scss/components/vv-breadcrumb';
+
+
+//Custom classes for stories
+.vv-textarea {
+    &--variante-1{
+        --vv-textarea-element-input-color: red;
+    }
+    &--variante-2{
+        --vv-textarea-element-wrapper-background-color: green;
+    }
+}

package/src/stories/utils.ts

@@ -0,0 +1,12 @@
+type StorybookGroup = { [key: string]: any }
+
+export function toGroup(keys: string[], categoryName: string) {
+	return keys.reduce((acc, k) => {
+		acc[k] = {
+			table: {
+				category: categoryName
+			}
+		}
+		return acc
+	}, {} as StorybookGroup)
+}

package/src/stories/volver-ui-vue.stories.mdx

@@ -11,7 +11,13 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
 
 Volver ui-vue extend Vue type definition and will be available in `$ds` vue property [doc](https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties)
 
-Import and usage:
+## Style
+
+#### @volverjs/ui-vue is closely linked to [@volverjs/style](https://volverjs.github.io/style/) and is neeeded to style components
+
+<br />
+
+## Import and usage:
 
 ```typescript
 import { iconsSimple, iconsNormal, iconsDetailed } from '@volverjs/ui-vue/icons'