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

package/src/stories/Icon/Icon.settings.ts

@@ -0,0 +1,72 @@
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvIconProps } from '@/components/VvIcon'
+import normal from '@/assets/icons/normal.json'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvIconProps),
+	name: 'add-circle',
+}
+
+export const argTypes = {
+	name: {
+		options: Object.keys(normal.icons),
+		control: {
+			type: 'select',
+		},
+	},
+	mode: {
+		options: ['style', 'bg', 'mask', 'svg'],
+		control: {
+			type: 'select',
+		},
+	},
+	src: {
+		description: 'Url remote SVG icon',
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'url',
+			},
+		},
+	},
+	svg: {
+		description: 'Svg icon string',
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'xml',
+			},
+		},
+	},
+	prefix: {
+		options: ['simple', 'normal', 'detailed'],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'normal',
+			},
+		},
+	},
+	flip: {
+		options: ['', 'vertical', 'horizontal'],
+		control: {
+			type: 'radio',
+		},
+	},
+	onLoad: {
+		description: 'A callback that is called when icon data has been loaded',
+		table: {
+			type: {
+				summary: 'function',
+			},
+		},
+	},
+	...ModifiersArgTypes,
+}

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

@@ -1,29 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { VvIconProps } from '../../components/VvIcon/VvIcon'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { defaultArgs, argTypes } from './Icon.settings'
+import NormalIcons from '@/assets/icons/normal.json'
 
 <Meta
 	title="Components/Icon"
 	component={VvIcon}
-	args={{
-		...ObjectUtilities.propsToObject(VvIconProps),
-		name: 'add-circle'
-	}}
-	argTypes={{
-		mode: {
-			control: {
-				type: 'select',
-				options: ['style', 'bg', 'mask', 'svg']
-			}
-		},
-		prefix: {
-			control: {
-				type: 'select',
-				options: ['simple', 'normal', 'detailed']
-			}
-		}
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
@@ -31,43 +15,76 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-icon v-bind="args" />`
+	template: `<vv-icon v-bind="args" />`,
 })
 
-# VvIcon
-
-#### VvIcon use <a href="https://iconify.design/" target="_blank">Iconify</a> library and <a href="https://docs.iconify.design/icon-components/vue/" target="_blank">Iconify Vue component</a> under the hood.
-
-The UI Vue component library export a function (`createIconifyJsonFiles`) to create the <a href="https://docs.iconify.design/types/iconify-json.html" target="_blank">IconifyJSON</a> objects.
-This function for input params has the source path to the icons folder and the destination path for output json files.
-
-The source path can have subfolders and then SVG icons. In this case the last parent folder name will be the iconify <a href="https://docs.iconify.design/icon-components/vue/#icon" target="_blank">prefix</a> and all the children SVG icons will be the icons `name`.
-The `provider` is `vv` by default. (You can change it during the DesygnSystem instance.)
-
-<div class="flex justify-center py-lg">
-	<img src="iconify-name-structure.png" alt="iconify-name-structure" />
-</div>
-
-Ex: If my SVG icons folder root is structured like:
-
-    assets/icons/
-    			/simple/---.svg
-    			/normal/---.svg
-    			/detailed/---.svg
-
-The `createIconifyJsonFiles('assets/icons', 'assets/icons')` function will generate icons like `@vv:simple:{fileName}` or `@vv:detailed:{fileName}`
-
-In `VvIcon` component props: `name` `provider` and `prefix`, only `name` is required because the provider is `vv` by default and `prefix` is `normal` by default.
-
-So, if there is one or more custom folders with additional icons (ex: `assets/icons/custom/---.svg`) you can use it creating the IconifyJSON file with `createIconifyJsonFiles` function
-and passing it throught the DesignSystem instance like this:
-
-`new Design System({ iconifyCollections: [ myCustomIconifyJSON ] })` and use it with `vv-icon` component like this:
-
-`<vv-icon name="iconName" prefix="custom" />` or `<vv-icon name="custom:{iconName}" />`
-
-To use our playground `vv-icon` use the `Canvas` section
-
-<Story name="vv-icon" args={{}}>
-	{Template.bind({})}
-</Story>
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			width: 48,
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Remote"
+		args={{
+			name: 'fingerprint',
+			width: 48,
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
+		}}
+		argTypes={{
+			name: {
+				control: {
+					disable: true,
+				},
+			},
+			src: {
+				control: {
+					disable: true,
+				},
+			},
+			svg: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Inline"
+		args={{
+			name: 'bell-2',
+			width: 48,
+			svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
+		}}
+		argTypes={{
+			name: {
+				control: {
+					disable: true,
+				},
+			},
+			src: {
+				control: {
+					disable: true,
+				},
+			},
+			svg: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,68 @@
+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 { ref, watch } from 'vue'
+import { defaultArgs, argTypes } from './Icon.settings'
+
+<Meta
+	title="Components/Icon/Collection"
+	component={VvIcon}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	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: `
+		<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.settings.ts

@@ -0,0 +1,221 @@
+import { InputTextareaArgTypes } from '@/stories/argTypes'
+import { VvInputTextProps } from '@/components/VvInputText'
+import normal from '@/assets/icons/normal.json'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+	...propsToObject(VvInputTextProps),
+	name: 'vv-input-text',
+	label: 'Input label',
+	placeholder: 'Input placeholder',
+	min: undefined,
+	max: undefined,
+	minlength: undefined,
+	maxlength: undefined,
+}
+
+export const argTypes = {
+	...InputTextareaArgTypes,
+	type: {
+		description: 'Type of form control',
+		options: [
+			'color',
+			'date',
+			'datetime-local',
+			'email',
+			'month',
+			'number',
+			'password',
+			'search',
+			'tel',
+			'text',
+			'time',
+			'url',
+			'week',
+		],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'text',
+			},
+		},
+	},
+	min: {
+		description:
+			'Minimum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	max: {
+		description:
+			'Maximum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	step: {
+		description:
+			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
+		type: {
+			summary: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 1,
+			},
+		},
+	},
+	pattern: {
+		description:
+			'Pattern the value must match to be valid. Available for input types: text, search, url, tel, email and password.',
+		type: {
+			summary: 'regex',
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	multiple: {
+		type: 'boolean',
+		description:
+			'Whether to allow multiple values. Available for input type email.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	iconShowPassword: {
+		description: 'VvIcon name for show password button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'eye-on',
+			},
+		},
+	},
+	iconHidePassword: {
+		description: 'VvIcon name for hide password button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'eye-off',
+			},
+		},
+	},
+	iconClear: {
+		description: 'VvIcon name for clear button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'close',
+			},
+		},
+	},
+	labelStepUp: {
+		description: 'Label for step up button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Increase value',
+			},
+		},
+	},
+	labelStepDown: {
+		description: 'Label for step down button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Decrease value',
+			},
+		},
+	},
+	labelShowPassword: {
+		description: 'Label for show password button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Show password',
+			},
+		},
+	},
+	labelHidePassword: {
+		description: 'Label for hide password button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Hide password',
+			},
+		},
+	},
+	labelClear: {
+		description: 'Label for clear button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Clear',
+			},
+		},
+	},
+	before: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}