@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/stories/argTypes.ts

@@ -3,7 +3,6 @@ import { Placement, Position, Side } from '../constants'
 
 export const ValidArgTypes = {
 	valid: {
-		type: 'boolean',
 		description: 'Valid state',
 		table: {
 			defaultValue: {
@@ -12,9 +11,6 @@ export const ValidArgTypes = {
 		},
 	},
 	validLabel: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Valid hint label',
 		control: {
 			type: 'text',
@@ -24,7 +20,6 @@ export const ValidArgTypes = {
 
 export const InvalidArgTypes = {
 	invalid: {
-		type: 'boolean',
 		description: 'Invalid state',
 		table: {
 			defaultValue: {
@@ -33,9 +28,6 @@ export const InvalidArgTypes = {
 		},
 	},
 	invalidLabel: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Invalid hint label',
 		control: {
 			type: 'text',
@@ -45,7 +37,6 @@ export const InvalidArgTypes = {
 
 export const LoadingArgTypes = {
 	loading: {
-		type: 'boolean',
 		description: 'Loading state',
 		table: {
 			defaultValue: {
@@ -54,9 +45,6 @@ export const LoadingArgTypes = {
 		},
 	},
 	loadingLabel: {
-		type: {
-			summary: 'string',
-		},
 		description: 'Loading label',
 		control: {
 			type: 'text',
@@ -66,8 +54,8 @@ export const LoadingArgTypes = {
 
 export const DisabledArgTypes = {
 	disabled: {
-		type: 'boolean',
-		description: 'Whether the form control is disabled',
+		control: 'boolean',
+		description: 'Whether the component is disabled',
 		table: {
 			defaultValue: {
 				summary: false,
@@ -78,7 +66,6 @@ export const DisabledArgTypes = {
 
 export const ReadonlyArgTypes = {
 	readonly: {
-		type: 'boolean',
 		description: 'The value is not editable',
 		table: {
 			defaultValue: {
@@ -90,9 +77,6 @@ export const ReadonlyArgTypes = {
 
 export const ModifiersArgTypes = {
 	modifiers: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Component BEM modifiers',
 		options: [],
 		control: {
@@ -123,18 +107,12 @@ export const IconArgTypes = {
 
 export const OptionsArgTypes = {
 	options: {
-		type: {
-			summary: ['string[]', 'object[]'],
-		},
 		description: 'List of options',
 		control: {
 			type: 'array',
 		},
 	},
 	labelKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of label in option object',
 		control: {
 			type: 'text',
@@ -146,9 +124,6 @@ export const OptionsArgTypes = {
 		},
 	},
 	valueKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of value in option object',
 		control: {
 			type: 'text',
@@ -160,9 +135,6 @@ export const OptionsArgTypes = {
 		},
 	},
 	disabledKey: {
-		type: {
-			summary: ['string', 'function'],
-		},
 		description: 'Key of disabled in option object',
 		control: {
 			type: 'text',
@@ -196,7 +168,6 @@ export const CountArgTypes = {
 
 export const DebounceArgTypes = {
 	debounce: {
-		type: 'number',
 		description: 'Debounce milliseconds',
 		control: {
 			type: 'number',
@@ -247,7 +218,6 @@ export const HintArgTypes = {
 
 export const TabindexArgTypes = {
 	tabindex: {
-		type: 'number',
 		description: 'Global attribute tabindex',
 		control: {
 			type: 'number',
@@ -262,9 +232,6 @@ export const TabindexArgTypes = {
 
 export const IdNameArgTypes = {
 	id: {
-		type: {
-			summary: ['string', 'number'],
-		},
 		description: 'Global attribute id.',
 		control: {
 			type: 'text',
@@ -276,9 +243,6 @@ export const IdNameArgTypes = {
 		},
 	},
 	name: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Name of the form control. Submitted with the form as part of a name/value pair.',
 		control: {
@@ -401,14 +365,14 @@ export const DropdownArgTypes = {
 			},
 		},
 	},
-	autoClose: {
-		description: 'Close dropdown on click outside',
+	keepOpen: {
+		description: 'Keep open dropdown on click outside',
 		control: {
 			type: 'boolean',
 		},
 		table: {
 			defaultValue: {
-				summary: true,
+				summary: false,
 			},
 			type: {
 				summary: 'boolean',
@@ -433,7 +397,6 @@ export const DropdownArgTypes = {
 
 export const UnselectableArgTypes = {
 	unselectable: {
-		type: 'boolean',
 		description: 'If true the field will be unselectable',
 		table: {
 			defaultValue: {
@@ -445,7 +408,6 @@ export const UnselectableArgTypes = {
 
 export const FloatingLabelArgTypes = {
 	floating: {
-		type: 'boolean',
 		description: 'If true the label will be floating',
 		table: {
 			defaultValue: {
@@ -457,7 +419,6 @@ export const FloatingLabelArgTypes = {
 
 export const AutofocusArgTypes = {
 	autofocus: {
-		type: 'boolean',
 		description: 'Global attribute autofocus.',
 		table: {
 			defaultValue: {
@@ -469,9 +430,6 @@ export const AutofocusArgTypes = {
 
 export const AutocompleteArgTypes = {
 	autocomplete: {
-		type: {
-			summary: 'string',
-		},
 		description: 'Hint for for autofill feature.',
 		control: {
 			type: 'text',
@@ -501,7 +459,6 @@ export const InputTextareaArgTypes = {
 	...IconArgTypes,
 	...FloatingLabelArgTypes,
 	minlength: {
-		type: 'number',
 		description:
 			'Minimum length (number of characters) of value. Available for input types: text, search, url, tel, email, password.',
 		control: {
@@ -509,7 +466,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	maxlength: {
-		type: 'number',
 		description:
 			'Maximum length (number of characters) of value. Available for input types: text, search, url, tel, email, password, number.',
 		control: {
@@ -517,7 +473,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	placeholder: {
-		type: 'string',
 		description:
 			'Text that appears in the form control when it has no value set. Available for input types: text, search, url, tel, email, password, number.',
 		control: {
@@ -525,7 +480,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	required: {
-		type: 'boolean',
 		description:
 			'A value is required or must be check for the form to be submittable. Available for all input types except color.',
 		table: {
@@ -535,7 +489,6 @@ export const InputTextareaArgTypes = {
 		},
 	},
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
@@ -552,14 +505,12 @@ export const CheckboxRadioArgTypes = {
 	...DisabledArgTypes,
 	...ReadonlyArgTypes,
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
 		},
 	},
 	value: {
-		type: ['string', 'number', 'boolean'],
 		description: 'Input value',
 		control: {
 			type: 'text',
@@ -575,16 +526,12 @@ export const CheckboxRadioGroupArgTypes = {
 	...DisabledArgTypes,
 	...ReadonlyArgTypes,
 	label: {
-		type: 'string',
 		description: 'Input label',
 		control: {
 			type: 'text',
 		},
 	},
 	name: {
-		type: {
-			summary: 'string',
-		},
 		description:
 			'Name of the form control. Submitted with the form as part of a name/value pair.',
 		control: {
@@ -592,7 +539,6 @@ export const CheckboxRadioGroupArgTypes = {
 		},
 	},
 	vertical: {
-		type: 'boolean',
 		description:
 			'If true the options will be displayed vertically instead of horizontally',
 		table: {

package/src/test/expect.ts

@@ -21,6 +21,13 @@ declare global {
 				expected?: HTMLElement,
 			) => CustomMatcherResult
 		}
+		// eslint-disable-next-line
+		interface Matchers<R> {
+			toHaveImgChild: (
+				imgTag: string,
+				expected?: HTMLElement,
+			) => CustomMatcherResult
+		}
 	}
 }
 
@@ -68,6 +75,14 @@ expect.extend({
 				`One of these classes doesn't exist: ${classes.join(', ')}`,
 		}
 	},
+	async toHaveImgChild(element: HTMLElement, imgTag: string) {
+		const img = element.getElementsByTagName(imgTag)
+		return {
+			pass: img.length === 1,
+			message: () =>
+				`${imgTag} not exist!`,
+		}
+	},
 })
 
 export { expect }

package/src/types/group.d.ts

@@ -23,12 +23,14 @@ export interface InputGroupState extends GroupState {
  * State shared in a group of buttons
  */
 export interface ButtonGroupState extends GroupState {
-	modelValue: Ref<string | Array<string> | undefined>
+	modelValue: Ref<
+		string | number | boolean | (string | number | boolean)[] | undefined
+	>
 	disabled: Ref<boolean>
 	toggle: Ref<boolean>
 	multiple: Ref<boolean>
 	unselectable: Ref<boolean>
-	itemModifiers?: Ref<string | Array<string> | undefined>
+	modifiers: Ref<string | string[] | undefined>
 }
 
 /**
@@ -37,6 +39,6 @@ export interface ButtonGroupState extends GroupState {
 export interface AccordionGroupState extends GroupState {
 	collapse: Ref<boolean>
 	disabled: Ref<boolean>
-	modifiers: Ref<Array<string> | string | undefined>
+	modifiers: Ref<string[] | string | undefined>
 	not: Ref<boolean>
 }

package/src/stories/Accordion/Accordion.stories.mdx

@@ -1,45 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
-
-<Meta
-	title="Components/Accordion"
-	component={VvAccordion}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvAccordion },
-	data() {
-		return {
-			open: false,
-		}
-	},
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<vv-accordion data-testId="element" v-bind="args" v-model="open">
-			<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
-			<template #default v-if="args.default"><div v-html="args.default"></div></template>
-		</vv-accordion>
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Not" play={defaultTest} args={{ not: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -1,58 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { Template } from './Accordion.stories.mdx'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
-
-<Meta
-	title="Components/Accordion/Slots"
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{
-			default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
-		}}
-		argTypes={{
-			content: {
-				control: {
-					disable: true,
-				},
-			},
-			summary: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Summary"
-		play={defaultTest}
-		args={{
-			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
-		}}
-		argTypes={{
-			title: {
-				control: {
-					disable: true,
-				},
-			},
-			details: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -1,58 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-
-<Meta
-	title="Components/AccordionGroup"
-	component={VvAccordionGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvAccordionGroup },
-	setup() {
-		return { args }
-	},
-	data() {
-		return {
-			selected: null,
-		}
-	},
-	template: /*html*/ `
-		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Not" play={defaultTest} args={{ not: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Collapse" play={defaultTest} args={{ collapse: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Collapse Not"
-		play={defaultTest}
-		args={{ collapse: true, not: true }}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -1,59 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-
-<Meta
-	title="Components/AccordionGroup/Slots"
-	component={VvAccordionGroup}
-	args={defaultArgs}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		argTypes={{
-			items: {
-				...argTypes.items,
-				control: {
-					disable: true,
-				},
-			},
-			default: {
-				...argTypes.items,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args, { argTypes }) => {
-			return {
-				props: Object.keys(argTypes),
-				components: { VvAccordionGroup, VvAccordion },
-				setup() {
-					return { args }
-				},
-				data() {
-					return {
-						selected: '',
-						content:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-					}
-				},
-				template: /*html*/ `
-					<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
-						<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
-						<vv-accordion name="a-2" title="Details 2" :content="content" />
-						<vv-accordion name="a-3" title="Details 3" :content="content" />
-					</vv-accordion-group>
-					<div class="mt-24"  >
-						Opened: <span data-testId="value">{{ selected }}</span>
-					</div>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Badge/Badge.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { defaultTest } from './Badge.test'
-import { defaultArgs, argTypes } from './Badge.settings'
-
-<Meta
-	title="Components/Badge"
-	component={VvBadge}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvBadge },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<vv-badge v-bind="args">
-			<template #default v-if="args.default"><span v-html="args.default"></span></template>	
-		</vv-badge>`,
-})
-
-<Canvas>
-	<Story name="Default" args={{ value: '14' }} play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Dot"
-		args={{ value: '' }}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-			value: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Badge/BadgeSlots.stories.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { defaultTest } from './Badge.test'
-import { defaultArgs, argTypes } from './Badge.settings'
-import { Template } from './Badge.stories.mdx'
-
-<Meta title="Components/Badge/Slots" component={VvBadge} args={defaultArgs} />
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{ default: 'Default <em class="italic">slot!</em>' }}
-		argTypes={{
-			default: { ...argTypes.default, table: { disable: true } },
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
-import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
-
-<Meta
-	title="Components/Breadcrumb"
-	component={VvBreadcrumb}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvBreadcrumb },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<div class="bg-surface p-lg">
-			<vv-breadcrumb v-bind="args" />
-		</div>`,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{}}
-		render={Template.bind()}
-	/>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Multiline"
-		play={defaultTest}
-		args={{
-			modifiers: 'multiline',
-		}}
-		argTypes={{
-			modifiers: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		render={Template.bind()}
-	/>
-</Canvas>