@volverjs/ui-vue 0.0.9-beta.5 → 0.0.9-beta.7

package/src/components/VvCombobox/VvCombobox.vue

@@ -334,7 +334,7 @@
 		autoPlacement: propsDefaults.value.autoPlacement,
 		arrow: propsDefaults.value.arrow,
 		autofocusFirst: searchable.value
-			? false
+			? true
 			: propsDefaults.value.autofocusFirst,
 		triggerWidth: propsDefaults.value.triggerWidth,
 		modifiers: propsDefaults.value.dropdownModifiers,
@@ -390,7 +390,6 @@
 					<slot name="dropdown::before" />
 					<input
 						v-if="searchable"
-						v-show="expanded"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -579,7 +578,7 @@
 						<!-- Close button if dropdown custom position is enabled and floating-ui disabled -->
 						<VvButton
 							v-if="dropdownEl?.customPosition"
-							label="Close"
+							:label="propsDefaults.closeLabel"
 							modifiers="secondary"
 							@click="dropdownEl.hide()"
 						/>

package/src/components/VvCombobox/index.ts

@@ -40,6 +40,13 @@ export const VvComboboxProps = {
 	...UnselectableProps,
 	...DropdownProps,
 	...LabelProps,
+	/**
+	 * Dropdown show / hide transition name
+	 */
+	transitionName: {
+		type: String,
+		default: 'vv-dropdown--mobile-fade-block',
+	},
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -71,6 +78,10 @@ export const VvComboboxProps = {
 	 * Label for deselected option hint
 	 */
 	deselectHintLabel: { type: String, default: 'Press enter to remove' },
+	/**
+	 * Label close button
+	 */
+	closeLabel: { type: String, default: 'Close' },
 	/**
 	 * Select input placeholder
 	 */

package/src/components/VvDropdown/VvDropdown.vue

@@ -318,7 +318,7 @@
 		}
 		return [
 			...element.querySelectorAll(
-				'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+				'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
 			),
 		].filter(
 			(el) =>

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

@@ -86,7 +86,7 @@ export const argTypes = {
 		},
 	},
 	noResultsLabel: {
-		description: 'Label of "no results" options',
+		description: 'Label for no search results',
 		control: {
 			type: 'text',
 		},
@@ -96,6 +96,83 @@ export const argTypes = {
 			},
 		},
 	},
+	noOptionsLabel: {
+		description: 'Label for no options available',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'No options available',
+			},
+		},
+	},
+	selectedHintLabel: {
+		description: 'Label for selected option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Selected',
+			},
+		},
+	},
+	deselectActionLabel: {
+		description: 'Label for deselect action button',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Deselect',
+			},
+		},
+	},
+	selectHintLabel: {
+		description: 'Label for select option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Press enter to select',
+			},
+		},
+	},
+	deselectHintLabel: {
+		description: 'Label for deselected option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Press enter to remove',
+			},
+		},
+	},
+	closeLabel: {
+		description: 'Label for close button',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Close',
+			},
+		},
+	},
+	loadingLabel: {
+		description: 'Label for loading',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Loading...',
+			},
+		},
+	},
 	placeholder: {
 		description: 'Text that appears when it has no value set.',
 		control: {
@@ -116,6 +193,11 @@ export const argTypes = {
 		control: {
 			type: 'text',
 		},
+		table: {
+			defaultValue: {
+				summary: 'Search...',
+			},
+		},
 	},
 	debounceSearch: {
 		description: 'Debounce milliseconds for search',
@@ -173,6 +255,22 @@ export const argTypes = {
 			type: 'text',
 		},
 		description: 'Modifiers for dropdown',
+		table: {
+			defaultValue: {
+				summary: 'mobile',
+			},
+		},
+	},
+	transitionName: {
+		control: {
+			type: 'text',
+		},
+		description: 'Transition name for dropdown',
+		table: {
+			defaultValue: {
+				summary: 'vv-dropdown--mobile-fade-block',
+			},
+		},
 	},
 	autoOpen: {
 		description: 'Open dropdown on focus',
@@ -190,6 +288,14 @@ export const argTypes = {
 			},
 		},
 	},
+	autofocusFirst: {
+		description: 'Autofocus first option on open dropdown',
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
 	before: {
 		control: {
 			type: 'text',