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

package/src/components/VvAlert/VvAlert.vue

@@ -34,7 +34,11 @@
 			<slot name="header">
 				<!-- @slot Before title slot -->
 				<slot name="title::before" />
-				<strong :id="hasTitleId" class="vv-alert__title">
+				<strong
+					v-if="$slots.title || title"
+					:id="hasTitleId"
+					class="vv-alert__title"
+				>
 					<!-- @slot Title slot -->
 					<slot name="title">
 						{{ title }}

package/src/components/VvAlert/index.ts

@@ -40,7 +40,7 @@ export const VvAlertProps = {
 	 */
 	title: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert content
@@ -49,7 +49,7 @@ export const VvAlertProps = {
 	 */
 	content: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert footer
@@ -58,7 +58,7 @@ export const VvAlertProps = {
 	 */
 	footer: {
 		type: String,
-		default: '',
+		default: undefined,
 	},
 	/**
 	 * The alert role

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -13,6 +13,13 @@
 	const emit = defineEmits(VvCheckboxEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvCheckboxProps>(
+		'VvCheckbox',
+		VvCheckboxProps,
+		props,
+	)
+
 	// data
 	const {
 		id,
@@ -150,7 +157,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -17,6 +17,13 @@
 	const emit = defineEmits(VvCheckboxGroupEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
+		'VvCheckboxGroup',
+		VvCheckboxGroupProps,
+		props,
+	)
+
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
@@ -56,7 +63,7 @@
 			value: getOptionValue(option),
 		}
 	}
-	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvCombobox/VvCombobox.vue

@@ -50,7 +50,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)

package/src/components/VvInputText/VvInputText.vue

@@ -22,6 +22,13 @@
 	const emit = defineEmits(VvInputTextEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvInputTextProps>(
+		'VvInputText',
+		VvInputTextProps,
+		props,
+	)
+
 	// template refs
 	const inputEl = ref()
 	const innerEl = ref()
@@ -278,7 +285,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 	const PasswordInputActions = VvInputTextActionsFactory(
 		INPUT_TYPES.PASSWORD,
 		props,

package/src/components/VvRadio/VvRadio.vue

@@ -13,6 +13,13 @@
 	const emit = defineEmits(VvRadioEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioProps>(
+		'VvRadio',
+		VvRadioProps,
+		props,
+	)
+
 	// data
 	const { id, disabled, readonly, modelValue, valid, invalid } =
 		useGroupProps(props, emit)
@@ -77,7 +84,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -17,6 +17,13 @@
 	const emit = defineEmits(VvRadioGroupEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioGroupProps>(
+		'VvRadioGroup',
+		VvRadioGroupProps,
+		props,
+	)
+
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
@@ -58,7 +65,7 @@
 	}
 
 	// hint
-	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvSelect/VvSelect.vue

@@ -16,6 +16,13 @@
 	const emit = defineEmits(VvSelectEmits)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvSelectProps>(
+		'VvSelect',
+		VvSelectProps,
+		props,
+	)
+
 	// template refs
 	const select = ref()
 
@@ -25,7 +32,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// data
 	const {

package/src/components/VvTextarea/VvTextarea.vue

@@ -15,6 +15,13 @@
 	const emit = defineEmits(VvTextareaEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvTextareaProps>(
+		'VvTextarea',
+		VvTextareaProps,
+		props,
+	)
+
 	// template refs
 	const textarea = ref()
 
@@ -91,7 +98,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// styles
 	const bemCssClasses = useModifiers(

package/src/components/common/HintSlot.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, Slots } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Merge array of string
@@ -19,7 +20,7 @@ export type HintSlotProps = Readonly<
 			default: ''
 			required: true
 		}
-		modelValue: null
+		modelValue: unknown
 		valid: BooleanConstructor
 		validLabel: (StringConstructor | ArrayConstructor)[]
 		invalid: BooleanConstructor
@@ -35,7 +36,11 @@ export type HintSlotProps = Readonly<
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
+export function HintSlotFactory(
+	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+	slots: Slots,
+) {
+	const props = unref(propsOrRef)
 	// label
 	const invalidLabel = computed(() => joinLines(props.invalidLabel))
 	const validLabel = computed(() => joinLines(props.validLabel))

package/src/composables/index.ts

@@ -1,3 +1 @@
-import { useAlert } from './alert/useAlert'
-
-export { useAlert }
+export { useAlert } from './alert/useAlert'