@volverjs/ui-vue 0.0.1 → 0.0.2

package/src/resolvers/unplugin.ts

@@ -38,17 +38,23 @@ export interface VolverResolverOptions {
 const STYLE_EXCLUDE = ['vv-icon']
 const VOLVER_PREFIX = 'vv'
 
-const getStyleName = function (kebabName: string) {
+const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
 		return undefined
 	}
-	if (kebabName === 'vv-native-select') {
-		return 'vv-select'
+	if (kebabName === 'vv-combobox') {
+		return ['vv-select', 'vv-dropdown']
 	}
 	if (kebabName === 'vv-accordion-group') {
-		return 'vv-accordion'
+		return ['vv-accordion-group', 'vv-accordion']
 	}
-	return kebabName
+	if (kebabName === 'vv-checkbox-group') {
+		return ['vv-checkbox-group', 'vv-checkbox']
+	}
+	if (kebabName === 'vv-radio-group') {
+		return ['vv-radio-group', 'vv-radio']
+	}
+	return [kebabName]
 }
 
 /**
@@ -83,17 +89,20 @@ export function VolverResolver({
 					sideEffects.push(customStylePath)
 				}
 
-				const styleName = getStyleName(kebabName)
-				if (styleName) {
-					// import component
-					sideEffects.push(
-						`@volverjs/style/${
-							importStyle === 'scss' ? 'scss/' : ''
-						}components/${styleName}`,
-					)
+				// import component style
+				const styleNames = getStyleNames(kebabName)
+				if (styleNames) {
+					styleNames.forEach((name) => {
+						sideEffects.push(
+							`@volverjs/style/${
+								importStyle === 'scss' ? 'scss/' : ''
+							}components/${name}`,
+						)
+					})
 				}
 			}
 
+			// import component
 			return {
 				from: `@volverjs/ui-vue/${kebabName}`,
 				sideEffects,

package/src/stories/Button/Button.settings.ts

@@ -3,6 +3,7 @@ import {
 	ModifiersArgTypes,
 	DisabledArgTypes,
 	LoadingArgTypes,
+	UnselectableArgTypes,
 } from '@/stories/argTypes'
 import normal from '@/assets/icons/normal.json'
 
@@ -68,13 +69,7 @@ export const argTypes = {
 			defaultValue: { summary: false },
 		},
 	},
-	unselectable: {
-		description: 'Whether the button is unselectable',
-		control: { type: 'boolean' },
-		table: {
-			defaultValue: { summary: true },
-		},
-	},
+	...UnselectableArgTypes,
 	...LoadingArgTypes,
 	...DisabledArgTypes,
 	pressed: {

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -1,4 +1,8 @@
-import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import {
+	DefaultSlotArgTypes,
+	ModifiersArgTypes,
+	UnselectableArgTypes,
+} from '@/stories/argTypes'
 import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvButtonGroupProps } from '@/components/VvButtonGroup'
 import { argTypes as buttonArgTypes } from '../Button/Button.settings'
@@ -24,5 +28,6 @@ export const argTypes = {
 			type: 'check',
 		},
 	},
+	...UnselectableArgTypes,
 	...DefaultSlotArgTypes,
 }

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
+
+<Meta
+	title="Components/ButtonGroup/Slots"
+	component={VvButtonGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvButton, VvButtonGroup },
+	data() {
+		return { value: undefined }
+	},
+	setup() {
+		return { args }
+	},
+	template: `
+        <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
+            <vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
+            <vv-button modifiers="secondary" name="2b">Button 2</vv-button>
+            <vv-button modifiers="danger" name="3c">Button 3</vv-button>
+        </vv-button-group>
+		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
+        `,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.mdx

@@ -12,7 +12,18 @@ import { defaultTest } from './ButtonGroup.test'
 />
 
 <Canvas>
-	<Story name="Default" play={defaultTest}>
+	<Story
+		name="Default"
+		args={{ toggle: true }}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
 		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Combobox/Combobox.settings.ts

@@ -9,12 +9,15 @@ import {
 	OptionsArgTypes,
 	IconArgTypes,
 	TabindexArgTypes,
+	FloatingArgTypes,
+	UnselectableArgTypes,
 } from '@/stories/argTypes'
 import { VvComboboxProps } from '@/components/VvCombobox'
 import { propsToObject } from '@/utils/ObjectUtilities'
 
 export const defaultArgs = {
 	...propsToObject(VvComboboxProps),
+	name: 'vv-combobox',
 	maxValues: undefined,
 	options: ['Option 1', 'Option 2', 'Option 3'],
 	placeholder: 'Select an option',
@@ -31,6 +34,8 @@ export const argTypes = {
 	...ModifiersArgTypes,
 	...OptionsArgTypes,
 	...IconArgTypes,
+	...FloatingArgTypes,
+	...UnselectableArgTypes,
 	multiple: {
 		type: 'boolean',
 		description:

package/src/stories/Combobox/Combobox.stories.mdx

@@ -71,6 +71,23 @@ export const Template = (args) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Valid"
@@ -151,3 +168,37 @@ export const Template = (args) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		play={defaultTest}
+		args={{ floating: true }}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Native"
+		play={defaultTest}
+		args={{ native: true }}
+		argTypes={{
+			native: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Combobox/Combobox.test.ts

@@ -3,8 +3,15 @@ import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
 import { sleep } from '@/test/sleep'
 import { getOptionValue } from '@/test/options'
+import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	// native
+	if (args.native) {
+		await selectDefaultTest({ canvasElement, args })
+		return
+	}
+
 	const element = (await within(canvasElement).findByTestId(
 		'element',
 	)) as HTMLElement

package/src/stories/Dropdown/Dropdown.settings.ts

@@ -1,6 +1,14 @@
-import { ModifiersArgTypes, OptionsArgTypes } from '@/stories/argTypes'
+import { VvDropdownProps } from '@/components/VvDropdown'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import {
+	ModifiersArgTypes,
+	OptionsArgTypes,
+	UnselectableArgTypes,
+} from '@/stories/argTypes'
 
 export const defaultArgs = {
+	...propsToObject(VvDropdownProps),
+	name: 'vv-dropdown',
 	disabled: false,
 	valueObject: false,
 	multiple: false,
@@ -39,4 +47,5 @@ export const argTypes = {
 	maxValues: {
 		control: { type: 'number' },
 	},
+	...UnselectableArgTypes,
 }

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -66,6 +66,23 @@ export const Template = (args) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Max values"

package/src/stories/Select/Select.settings.ts

@@ -10,18 +10,25 @@ import {
 	IconArgTypes,
 	TabindexArgTypes,
 	IdNameArgTypes,
+	FloatingArgTypes,
+	UnselectableArgTypes,
+	AutofocusArgTypes,
+	AutocompleteArgTypes,
 } from '@/stories/argTypes'
 import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvSelectProps } from '@/components/VvSelect'
 
 export const defaultArgs = {
 	...propsToObject(VvSelectProps),
+	name: 'vv-select',
 	options: ['Option 1', 'Option 2', 'Option 3'],
 	placeholder: 'Select an option',
 	label: 'Select label',
 }
 export const argTypes = {
 	...IdNameArgTypes,
+	...AutofocusArgTypes,
+	...AutocompleteArgTypes,
 	...TabindexArgTypes,
 	...ValidArgTypes,
 	...InvalidArgTypes,
@@ -32,29 +39,8 @@ export const argTypes = {
 	...ModifiersArgTypes,
 	...OptionsArgTypes,
 	...IconArgTypes,
-	autocomplete: {
-		type: {
-			summary: 'string',
-		},
-		description: 'Hint for for autofill feature.',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'off',
-			},
-		},
-	},
-	autofocus: {
-		type: 'boolean',
-		description: 'Global attribute autofocus.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
+	...FloatingArgTypes,
+	...UnselectableArgTypes,
 	multiple: {
 		type: 'boolean',
 		description:

package/src/stories/Select/Select.stories.mdx

@@ -70,6 +70,40 @@ export const Template = (args) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="Multiple"
+		play={defaultTest}
+		args={{ multiple: true }}
+		argTypes={{
+			multiple: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Valid"
@@ -128,6 +162,32 @@ export const Template = (args) => ({
 			loading: true,
 			loadingLabel: 'Loading...',
 		}}
+		argTypes={{
+			loading: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			floating: true,
+		}}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
 		play={defaultTest}
 	>
 		{Template.bind()}

package/src/stories/argTypes.ts

@@ -272,19 +272,31 @@ export const IdNameArgTypes = {
 	},
 }
 
-export const InputTextareaArgTypes = {
-	...IdNameArgTypes,
-	...TabindexArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...LoadingArgTypes,
-	...ModifiersArgTypes,
-	...CountArgTypes,
-	...DebounceArgTypes,
-	...IconArgTypes,
+export const UnselectableArgTypes = {
+	unselectable: {
+		type: 'boolean',
+		description: 'If true the field will be unselectable',
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
+}
+
+export const FloatingArgTypes = {
+	floating: {
+		type: 'boolean',
+		description: 'If true the label will be floating',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+}
+
+export const AutofocusArgTypes = {
 	autofocus: {
 		type: 'boolean',
 		description: 'Global attribute autofocus.',
@@ -294,6 +306,9 @@ export const InputTextareaArgTypes = {
 			},
 		},
 	},
+}
+
+export const AutocompleteArgTypes = {
 	autocomplete: {
 		type: {
 			summary: 'string',
@@ -308,6 +323,24 @@ export const InputTextareaArgTypes = {
 			},
 		},
 	},
+}
+
+export const InputTextareaArgTypes = {
+	...IdNameArgTypes,
+	...AutofocusArgTypes,
+	...AutocompleteArgTypes,
+	...TabindexArgTypes,
+	...DisabledArgTypes,
+	...ReadonlyArgTypes,
+	...ValidArgTypes,
+	...InvalidArgTypes,
+	...HintArgTypes,
+	...LoadingArgTypes,
+	...ModifiersArgTypes,
+	...CountArgTypes,
+	...DebounceArgTypes,
+	...IconArgTypes,
+	...FloatingArgTypes,
 	minlength: {
 		type: 'number',
 		description:
@@ -349,15 +382,6 @@ export const InputTextareaArgTypes = {
 			type: 'text',
 		},
 	},
-	floating: {
-		type: 'boolean',
-		description: 'If true the label will be floating',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
 }
 
 export const CheckboxRadioArgTypes = {