@volverjs/ui-vue 0.0.9 → 0.0.10-beta.2

package/src/components/VvCombobox/VvCombobox.vue

@@ -182,8 +182,8 @@
 	const {
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
 		getOptionGrouped,
+		isOptionDisabled,
 	} = useOptions(props)
 
 	// options filtered by search text
@@ -210,7 +210,7 @@
 	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
 	 * @param {String | Option} option
 	 */
-	function getOptionSelected(option: string | Option) {
+	function isOptionSelected(option: string | Option) {
 		if (Array.isArray(props.modelValue)) {
 			// check if contain whole option or option value
 			return (
@@ -230,29 +230,17 @@
 	 * Check if is multiple mode, object mode or "string" mode
 	 */
 	const selectedOptions = computed(() => {
-		let selectedValues: Array<typeof props.modelValue> = []
-		if (Array.isArray(props.modelValue)) {
-			selectedValues = props.modelValue as Array<typeof props.modelValue>
-		} else if (props.modelValue) {
-			selectedValues = [props.modelValue]
-		}
-		const options = props.options.reduce(
+		const options = props.options.reduce<Array<Option | string>>(
 			(acc, value) => {
 				if (isGroup(value)) {
 					return [...acc, ...getOptionGrouped(value)]
 				}
 				return [...acc, value]
 			},
-			[] as Array<Option | string>,
+			[],
 		)
-
 		return options.filter((option) => {
-			if (isGroup(option)) {
-				return getOptionGrouped(option).some((item) =>
-					selectedValues.includes(getOptionValue(item)),
-				)
-			}
-			return selectedValues.includes(getOptionValue(option))
+			return isOptionSelected(option)
 		})
 	})
 
@@ -518,8 +506,8 @@
 										option,
 									)"
 									v-bind="{
-										disabled: getOptionDisabled(item),
-										selected: getOptionSelected(item),
+										selected: isOptionSelected(item),
+										disabled: isOptionDisabled(item),
 										unselectable,
 										deselectHintLabel:
 											propsDefaults.deselectHintLabel,
@@ -538,8 +526,8 @@
 										v-bind="{
 											option,
 											selectedOptions,
-											selected: getOptionSelected(item),
-											disabled: getOptionDisabled(item),
+											selected: isOptionSelected(item),
+											disabled: isOptionDisabled(item),
 										}"
 									>
 										{{ getOptionLabel(item) }}
@@ -549,8 +537,8 @@
 							<VvDropdownOption
 								v-else
 								v-bind="{
-									disabled: getOptionDisabled(option),
-									selected: getOptionSelected(option),
+									selected: isOptionSelected(option),
+									disabled: isOptionDisabled(option),
 									unselectable,
 									deselectHintLabel:
 										propsDefaults.deselectHintLabel,
@@ -568,8 +556,8 @@
 									v-bind="{
 										option,
 										selectedOptions,
-										selected: getOptionSelected(option),
-										disabled: getOptionDisabled(option),
+										selected: isOptionSelected(option),
+										disabled: isOptionDisabled(option),
 									}"
 								>
 									{{ getOptionLabel(option) }}

package/src/components/VvSelect/VvSelect.vue

@@ -139,7 +139,7 @@
 	const {
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
+		isOptionDisabled,
 		getOptionGrouped,
 	} = useOptions(props)
 
@@ -195,7 +195,7 @@
 						<option
 							v-if="!isGroup(option)"
 							:key="index"
-							:disabled="getOptionDisabled(option)"
+							:disabled="isOptionDisabled(option)"
 							:value="getOptionValue(option)"
 						>
 							{{ getOptionLabel(option) }}
@@ -203,13 +203,13 @@
 						<optgroup
 							v-else
 							:key="`group-${index}`"
-							:disabled="getOptionDisabled(option)"
+							:disabled="isOptionDisabled(option)"
 							:label="getOptionLabel(option)"
 						>
 							<option
 								v-for="(item, i) in getOptionGrouped(option)"
 								:key="`group-${index}-item-${i}`"
-								:disabled="getOptionDisabled(item)"
+								:disabled="isOptionDisabled(item)"
 								:value="getOptionValue(item)"
 							>
 								{{ getOptionLabel(item) }}

package/src/composables/useOptions.ts

@@ -24,7 +24,7 @@ export function useOptions(props: any) {
 			: get(option, valueKey.value)
 	}
 
-	const getOptionDisabled = (option: string | Option): boolean => {
+	const isOptionDisabled = (option: string | Option): boolean => {
 		if (typeof option !== 'object' && option !== null) return false
 
 		return typeof disabledKey.value === 'function'
@@ -41,7 +41,7 @@ export function useOptions(props: any) {
 		options,
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
+		isOptionDisabled,
 		getOptionGrouped,
 	}
 }

package/src/stories/Button/ButtonModifiers.stories.ts

@@ -3,7 +3,6 @@ import VvButton from '@/components/VvButton/VvButton.vue'
 import { Default } from './Button.stories'
 import { argTypes, defaultArgs } from './Button.settings'
 
-
 const meta: Meta<typeof VvButton> = {
 	title: 'Components/Button/Modifiers',
 	component: VvButton,
@@ -70,9 +69,6 @@ export const StaticLight: Story = {
 	},
 	render: (args) => ({
 		components: { VvButton },
-		backgrounds: {
-			default: 'dark',
-		},
 		setup() {
 			return { args }
 		},
@@ -81,23 +77,18 @@ export const StaticLight: Story = {
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	})
-
+	}),
 }
 
-
 export const StaticDark: Story = {
 	...Default,
 	args: {
 		...Default.args,
-		label: 'Static light',
-		modifiers: 'static-light',
+		label: 'Static dark',
+		modifiers: 'static-dark',
 	},
 	render: (args) => ({
 		components: { VvButton },
-		backgrounds: {
-			default: 'dark',
-		},
 		setup() {
 			return { args }
 		},
@@ -106,7 +97,7 @@ export const StaticDark: Story = {
 				<vv-button v-bind="args" data-testId="element" />
 			</div>
 		`,
-	})
+	}),
 }
 
 export const Block: Story = {
@@ -137,7 +128,6 @@ export const FullBleed: Story = {
 	},
 }
 
-
 export const Action: Story = {
 	...Default,
 	args: {

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -94,3 +94,21 @@ export const DotPathOptions: Story = {
 		],
 	},
 }
+
+export const ObjectValue: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		multiple: true,
+		options: [
+			{
+				value: { name: 'John Doe', email: 'john.doe@test.com' },
+				label: 'John Doe',
+			},
+			{
+				value: { name: 'Jane Doe', email: 'jane.doe@test.com' },
+				label: 'Jane Doe',
+			},
+		],
+	},
+}

package/src/stories/InputText/InputTextMask.stories.ts

@@ -14,7 +14,7 @@ export default meta
 
 type Story = StoryObj<typeof VvInputText>
 
-export const RegExp: Story = {
+export const Regex: Story = {
 	...Default,
 	args: {
 		...defaultArgs,

package/src/utils/ObjectUtilities.ts

@@ -9,9 +9,10 @@ import type { Ref } from 'vue'
  */
 // eslint-disable-next-line
 export function equals(obj1: any, obj2: any, field?: string) {
-	if (field)
+	if (field) {
 		return resolveFieldData(obj1, field) === resolveFieldData(obj2, field)
-	else return deepEquals(obj1, obj2)
+	}
+	return deepEquals(obj1, obj2)
 }
 
 /**