@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/components/VvCheckbox/index.ts

@@ -1,23 +1,23 @@
 import type { ExtractPropTypes, Ref } from 'vue'
 import type { InputGroupState } from '../../types/group'
-import { CheckboxRadioProps, ModifiersProps } from '../../props'
 import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
+import { CheckboxRadioProps, ModifiersProps } from '../../props'
 
 export const VvCheckboxProps = {
-	...CheckboxRadioProps,
-	...ModifiersProps,
-	/**
-	 * If true, the input will be indeterminated
-	 */
-	indeterminate: Boolean,
-	/**
-	 * Value associated with the unchecked state
-	 */
-	uncheckedValue: [String, Number, Boolean],
-	/**
-	 * If true, the input will be displayed as a switch
-	 */
-	switch: Boolean,
+    ...CheckboxRadioProps,
+    ...ModifiersProps,
+    /**
+     * If true, the input will be indeterminated
+     */
+    indeterminate: Boolean,
+    /**
+     * Value associated with the unchecked state
+     */
+    uncheckedValue: [String, Number, Boolean],
+    /**
+     * If true, the input will be displayed as a switch
+     */
+    switch: Boolean,
 }
 
 export const VvCheckboxEvents = ['click', 'update:modelValue', 'change', 'blur']
@@ -28,38 +28,38 @@ export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>
  * Merges local and group props
  */
 export function useGroupProps(
-	props: VvCheckboxPropsTypes,
-	emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
+    props: VvCheckboxPropsTypes,
+    emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
 ) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<InputGroupState>(INJECTION_KEY_CHECK_GROUP)
+    const { group, isInGroup, getGroupOrLocalRef }
+		= useGroupStateInject<InputGroupState>(INJECTION_KEY_CHECK_GROUP)
 
-	// local props
-	const { id, switch: propsSwitch, indeterminate } = toRefs(props)
+    // local props
+    const { id, switch: propsSwitch, indeterminate } = toRefs(props)
 
-	// global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
-	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
-	)
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
-	)
+    // global props
+    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+    const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
+    const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+    const readonly = computed(() =>
+        Boolean(props.readonly || group?.readonly.value),
+    )
+    const disabled = computed(() =>
+        Boolean(props.disabled || group?.disabled.value),
+    )
 
-	return {
-		// local props
-		id,
-		propsSwitch,
-		indeterminate,
-		// global props
-		group,
-		isInGroup,
-		modelValue,
-		valid,
-		invalid,
-		readonly,
-		disabled,
-	}
+    return {
+        // local props
+        id,
+        propsSwitch,
+        indeterminate,
+        // global props
+        group,
+        isInGroup,
+        modelValue,
+        valid,
+        invalid,
+        readonly,
+        disabled,
+    }
 }

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -1,99 +1,100 @@
-<script lang="ts">
-	export default {
-		name: 'VvCheckboxGroup',
-	}
-</script>
-
 <script setup lang="ts">
-	import type { Option } from '../../types/generic'
-	import type { InputGroupState } from '../../types/group'
-	import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
-	import { HintSlotFactory } from '../common/HintSlot'
-	import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
-	import { VvCheckboxGroupProps, VvCheckboxGroupEvents } from '.'
+import type { Option } from '../../types/generic'
+import type { InputGroupState } from '../../types/group'
+import { VvCheckboxGroupEvents, VvCheckboxGroupProps } from '.'
+import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
+import { HintSlotFactory } from '../common/HintSlot'
+import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
+
+// props, emit and slots
+const props = defineProps(VvCheckboxGroupProps)
 
-	// props, emit and slots
-	const props = defineProps(VvCheckboxGroupProps)
-	const emit = defineEmits(VvCheckboxGroupEvents)
-	const slots = useSlots()
+const emit = defineEmits(VvCheckboxGroupEvents)
 
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
-		'VvCheckboxGroup',
-		VvCheckboxGroupProps,
-		props,
-	)
+const slots = useSlots()
 
-	// data
-	const modelValue = useVModel(props, 'modelValue', emit)
-	const { disabled, readonly, vertical, valid, invalid, modifiers } =
-		toRefs(props)
+// props merged with volver defaults (now only for labels)
+const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
+    'VvCheckboxGroup',
+    VvCheckboxGroupProps,
+    props,
+)
 
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_CHECK_GROUP,
-		modelValue,
-		disabled,
-		readonly,
-		valid,
-		invalid,
-	})
+// data
+const modelValue = useVModel(props, 'modelValue', emit)
+const { disabled, readonly, vertical, valid, invalid, modifiers }
+		= toRefs(props)
 
-	// options
-	const { getOptionLabel, getOptionValue } = useOptions(props)
+useGroupStateProvide<InputGroupState>(INJECTION_KEY_CHECK_GROUP, {
+    modelValue,
+    disabled,
+    readonly,
+    valid,
+    invalid,
+})
 
-	// stypes
-	const bemCssClasses = useModifiers(
-		'vv-checkbox-group',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-			readonly: readonly.value,
-			horizontal: !vertical.value,
-			valid: valid.value,
-			invalid: invalid.value,
-		})),
-	)
+// options
+const { getOptionLabel, getOptionValue } = useOptions(props)
 
-	// methods
-	const getOptionProps = (option: string | Option, index: number) => {
-		return {
-			id: `${props.name}_opt${index}`,
-			name: props.name,
-			label: getOptionLabel(option),
-			value: getOptionValue(option),
-		}
-	}
-	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
+// stypes
+const bemCssClasses = useModifiers(
+    'vv-checkbox-group',
+    modifiers,
+    computed(() => ({
+        disabled: disabled.value,
+        readonly: readonly.value,
+        horizontal: !vertical.value,
+        valid: valid.value,
+        invalid: invalid.value,
+    })),
+)
+
+// methods
+function getOptionProps(option: string | Option, index: number) {
+    return {
+        id: `${props.name}_opt${index}`,
+        name: props.name,
+        label: getOptionLabel(option),
+        value: getOptionValue(option),
+    }
+}
+const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvCheckboxGroup',
+}
 </script>
 
 <template>
-	<fieldset :class="bemCssClasses">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-checkbox-group__wrapper">
-			<!-- #region options set up -->
-			<template v-if="options.length > 0">
-				<VvCheckbox
-					v-for="(option, index) in options"
-					:key="index"
-					v-bind="getOptionProps(option, index)"
-				/>
-			</template>
-			<!-- #endregion -->
-			<slot v-else />
-		</div>
-		<HintSlot class="vv-checkbox-group__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</fieldset>
+    <fieldset :class="bemCssClasses">
+        <legend v-if="label" v-text="label" />
+        <div class="vv-checkbox-group__wrapper">
+            <!-- #region options set up -->
+            <template v-if="options.length > 0">
+                <VvCheckbox
+                    v-for="(option, index) in options"
+                    :key="index"
+                    v-bind="getOptionProps(option, index)"
+                />
+            </template>
+            <!-- #endregion -->
+            <slot v-else />
+        </div>
+        <HintSlot class="vv-checkbox-group__hint">
+            <template v-if="$slots.hint" #hint>
+                <slot name="hint" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.loading" #loading>
+                <slot name="loading" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.valid" #valid>
+                <slot name="valid" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.invalid" #invalid>
+                <slot name="invalid" v-bind="hintSlotScope" />
+            </template>
+        </HintSlot>
+    </fieldset>
 </template>