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

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

@@ -1,23 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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>

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

@@ -1,22 +0,0 @@
-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/Valid" component={VvTextarea} />
-
-# Valid
-
-`Valid` imposta lo stato valid per la textarea.
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'textarea-valid',
-			valid: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,35 +0,0 @@
-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

@@ -1,35 +0,0 @@
-$zero-specificity-for-utilities: false;
-
-@import '@volverjs/style/scss/reset';
-@import '@volverjs/style/scss/props';
-@import '@volverjs/style/scss/themes/dark';
-@import '@volverjs/style/scss/utilities';
-
-// components
-@import '@volverjs/style/scss/components/vv-accordion';
-@import '@volverjs/style/scss/components/vv-badge';
-@import '@volverjs/style/scss/components/vv-button';
-@import '@volverjs/style/scss/components/vv-button-group';
-@import '@volverjs/style/scss/components/vv-input-checkbox';
-@import '@volverjs/style/scss/components/vv-input-checkbox-group';
-@import '@volverjs/style/scss/components/vv-input-text';
-@import '@volverjs/style/scss/components/vv-progress';
-@import '@volverjs/style/scss/components/vv-input-radio';
-@import '@volverjs/style/scss/components/vv-input-radio-group';
-@import '@volverjs/style/scss/components/vv-dialog';
-@import '@volverjs/style/scss/components/vv-select';
-@import '@volverjs/style/scss/components/vv-dropdown';
-@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

@@ -1,12 +0,0 @@
-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

@@ -1,77 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-
-<Meta title="Volver ui-vue" />
-
-<div class="flex justify-center pb-xl">
-	{/* <img src="https://raw.githubusercontent.com/volverjs/style/main/src/assets/volverjs.svg" /> */}
-	<img src="volverjs-beta.png" />
-</div>
-
-# @volverjs/ui-vue
-
-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)
-
-## 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'
-import { DesygnSystem } from '@volverjs/ui-vue'
-
-const volver = new DesignSystem({
-	iconsCollections: [iconsSimple, iconsNormal, iconsDetailed]
-})
-
-app.use(volver)
-```
-
-Constructor parameters:
-
-```typescript
-interface IDesignSystemParams {
-	/**
-	 * If true set "fetchOptions" with credentials: 'include'
-	 */
-	fetchWithCredentials?: boolean
-	/**
-	 * Optional fetch params
-	 */
-	fetchOptions?: RequestInit
-	/**
-	 * Array of https://docs.iconify.design/types/iconify-json.html
-	 * This collections will be added during plugin install
-	 */
-	iconsCollections?: IconifyJSON[]
-}
-```
-
-Design System definition
-
-```typescript
-interface IDesignSystem extends IDesignSystemParams {
-	/**
-	 * @param {String} src Icon source path (url)
-	 * @param {RequestInit} options
-	 * @returns {Promise<string | undefined>} String SVG if exist
-	 */
-	fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>
-	/**
-	 * Add iconify collection to library https://docs.iconify.design/icon-components/vue/add-collection.html
-	 * @param {IconifyJSON} collection
-	 * @param {String} providerName Optional provider name
-	 */
-	addCollection(collection: IconifyJSON, providerName?: string): boolean
-	/**
-	 * Add icon to collection https://docs.iconify.design/icon-components/vue/add-icon.html
-	 * @param {String} name
-	 * @param {IconifyIcon} data
-	 * @returns {Boolean} true on success, false if something is wrong with data
-	 */
-	addIcon(name: string, data: IconifyIcon): boolean
-}
-```