@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/components/VvButton/VvButton.vue

@@ -1,164 +1,175 @@
-<script lang="ts">
-	export default {
-		name: 'VvButton',
-	}
-</script>
-
 <script setup lang="ts">
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import VvAction from '../VvAction/VvAction.vue'
-	import { VvButtonEvents, VvButtonProps, useGroupProps } from '.'
-	import { Side } from '../../constants'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import VvAction from '../VvAction/VvAction.vue'
+import { Side } from '../../constants'
+import { VvButtonEvents, VvButtonProps, useGroupProps } from '.'
+
+// props, attrs, slots and emit
+const props = defineProps(VvButtonProps)
 
-	// props, attrs, slots and emit
-	const props = defineProps(VvButtonProps)
-	const attrs = useAttrs()
-	const slots = useSlots()
-	const emit = defineEmits(VvButtonEvents)
+const emit = defineEmits(VvButtonEvents)
 
-	// data
-	const {
-		id,
-		modifiers,
-		iconPosition,
-		icon,
-		label,
-		modelValue,
-		disabled,
-		toggle,
-		unselectable,
-	} = useGroupProps(props, emit)
-	const hasId = useUniqueId(id)
-	const name = computed(() => (attrs?.name as string) || hasId.value)
+const attrs = useAttrs()
+const slots = useSlots()
+// data
+const {
+    id,
+    modifiers,
+    iconPosition,
+    icon,
+    label,
+    modelValue,
+    disabled,
+    toggle,
+    unselectable,
+} = useGroupProps(props, emit)
+const hasId = useUniqueId(id)
+const name = computed(() => (attrs?.name as string) || hasId.value)
 
-	// expose el
-	const element = ref<{ $el: HTMLElement } | null>(null)
-	const $el = computed(() => element.value?.$el)
-	defineExpose({ $el })
+// expose el
+const element = ref<{ $el: HTMLElement } | null>(null)
+const $el = computed(() => element.value?.$el)
+defineExpose({ $el })
 
-	/**
-	 * @description The component pressed state by prop or group.
-	 * @returns {string} The component tag.
-	 */
-	const pressed = computed(() => {
-		if (!toggle.value) {
-			return props.pressed
-		}
-		if (Array.isArray(modelValue.value)) {
-			return contains(name.value, modelValue.value)
-		}
-		return equals(name.value, modelValue.value)
-	})
+/**
+ * @description The component pressed state by prop or group.
+ * @returns {string} The component tag.
+ */
+const pressed = computed(() => {
+    if (!toggle.value) {
+        return props.pressed
+    }
+    if (Array.isArray(modelValue.value)) {
+        return contains(name.value, modelValue.value)
+    }
+    return equals(name.value, modelValue.value)
+})
 
-	/**
-	 * @description Define component classes with BEM style.
-	 * @returns {Array} The component classes.
-	 */
-	const bemCssClasses = useModifiers(
-		'vv-button',
-		modifiers,
-		computed(() => ({
-			reverse: [Side.right, Side.bottom].includes(
-				iconPosition.value as Side,
-			),
-			column: [Side.top, Side.bottom].includes(
-				iconPosition.value as Side,
-			),
-			'icon-only': Boolean(
-				icon?.value && !label?.value && !slots.default,
-			),
-		})),
-	)
+/**
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
+ */
+const bemCssClasses = useModifiers(
+    'vv-button',
+    modifiers,
+    computed(() => ({
+        'reverse': [Side.right, Side.bottom].includes(
+            iconPosition.value as Side,
+        ),
+        'column': [Side.top, Side.bottom].includes(
+            iconPosition.value as Side,
+        ),
+        'icon-only': Boolean(
+            icon?.value && !label?.value && !slots.default,
+        ),
+    })),
+)
 
-	/**
-	 * @description Define icon attributes.
-	 * @returns {Object} The icon attributes.
-	 */
-	const hasIconProps = computed(() =>
-		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
-	)
+/**
+ * @description Define icon attributes.
+ * @returns {object} The icon attributes.
+ */
+const { hasIcon } = useComponentIcon(icon)
 
-	/**
-	 * @description Catch click event
-	 */
-	const toggleValue = computed(() => {
-		return props.value !== undefined ? props.value : name.value
-	})
-	const onClick = () => {
-		if (toggle.value) {
-			if (Array.isArray(modelValue.value)) {
-				if (contains(toggleValue.value, modelValue.value)) {
-					if (unselectable.value) {
-						modelValue.value = modelValue.value.filter(
-							(n) => n !== toggleValue.value,
-						)
-					}
-					return
-				}
-				modelValue.value.push(toggleValue.value)
-				return
-			}
-			if (toggleValue.value === modelValue.value && unselectable.value) {
-				modelValue.value = props.uncheckedValue
-				return
-			}
-			modelValue.value = toggleValue.value
-		}
-	}
+/**
+ * @description Catch click event
+ */
+const toggleValue = computed(() => {
+    return props.value !== undefined ? props.value : name.value
+})
+const hasListeners = computed(() => {
+    if (!toggle.value) {
+        return undefined
+    }
+    return {
+        onClick,
+    }
+})
+function onClick() {
+    if (toggle.value) {
+        if (Array.isArray(modelValue.value)) {
+            if (contains(toggleValue.value, modelValue.value)) {
+                if (unselectable.value) {
+                    modelValue.value = modelValue.value.filter(
+                        n => n !== toggleValue.value,
+                    )
+                }
+                return
+            }
+            modelValue.value.push(toggleValue.value)
+            return
+        }
+        if (toggleValue.value === modelValue.value && unselectable.value) {
+            modelValue.value = props.uncheckedValue
+            return
+        }
+        modelValue.value = toggleValue.value
+    }
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvButton',
+    inheritAttrs: false,
+}
 </script>
 
 <template>
-	<VvAction
-		v-bind="{
-			disabled,
-			pressed,
-			active,
-			type,
-			to,
-			href,
-			target,
-			rel,
-			ariaLabel,
-		}"
-		:id="hasId"
-		ref="element"
-		:class="bemCssClasses"
-		@click="onClick"
-	>
-		<!-- @slot Default slot -->
-		<slot>
-			<!-- #region loading -->
-			<template v-if="loading">
-				<!-- @slot Slot for loading content -->
-				<slot name="loading">
-					<VvIcon
-						v-if="loadingIcon"
-						class="vv-button__loading-icon"
-						:name="loadingIcon"
-					/>
-					<span v-if="loadingLabel" class="vv-button__label">
-						{{ loadingLabel }}
-					</span>
-				</slot>
-			</template>
-			<!-- #endregion -->
-			<!-- #region button -->
-			<template v-else>
-				<!-- @slot Before label and icon -->
-				<slot name="before" />
-				<template v-if="icon">
-					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
-				</template>
-				<span v-if="label" class="vv-button__label">
-					<!-- @slot Use this slot for button label -->
-					<slot name="label">
-						{{ label }}
-					</slot>
-				</span>
-				<!-- @slot After label and icon -->
-				<slot name="after" />
-			</template>
-			<!-- #endregion -->
-		</slot>
-	</VvAction>
+    <VvAction
+        v-bind="{
+            ...attrs,
+            ...hasListeners,
+            disabled,
+            pressed,
+            active,
+            type,
+            to,
+            href,
+            target,
+            rel,
+            ariaLabel,
+        }"
+        :id="hasId"
+        ref="element"
+        :class="bemCssClasses"
+    >
+        <!-- @slot Default slot -->
+        <slot>
+            <!-- #region loading -->
+            <template v-if="loading">
+                <!-- @slot Slot for loading content -->
+                <slot name="loading">
+                    <VvIcon
+                        v-if="loadingIcon"
+                        class="vv-button__loading-icon"
+                        :name="loadingIcon"
+                    />
+                    <span v-if="loadingLabel" class="vv-button__label">
+                        {{ loadingLabel }}
+                    </span>
+                </slot>
+            </template>
+            <!-- #endregion -->
+            <!-- #region button -->
+            <template v-else>
+                <!-- @slot Before label and icon -->
+                <slot name="before" />
+                <VvIcon
+                    v-if="hasIcon"
+                    v-bind="hasIcon"
+                    class="vv-button__icon"
+                />
+                <span v-if="label" class="vv-button__label">
+                    <!-- @slot Use this slot for button label -->
+                    <slot name="label">
+                        {{ label }}
+                    </slot>
+                </span>
+                <!-- @slot After label and icon -->
+                <slot name="after" />
+            </template>
+            <!-- #endregion -->
+        </slot>
+    </VvAction>
 </template>

package/src/components/VvButton/index.ts

@@ -1,66 +1,64 @@
-import type { Ref, PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue'
 import type { ButtonGroupState } from '../../types/group'
 import {
-	ActionProps,
-	IdProps,
-	LoadingProps,
-	ModifiersProps,
-	UnselectableProps,
+    ActionProps,
+    IdProps,
+    LoadingProps,
+    ModifiersProps,
+    UnselectableProps,
+    IconProps,
 } from '../../props'
 import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
 
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
-	...ActionProps,
-	...IdProps,
-	...ModifiersProps,
-	...UnselectableProps,
-	...LoadingProps,
-	/**
-	 * Button icon
-	 */
-	icon: [String, Object],
-	/**
-	 * Button icon position
-	 */
-	iconPosition: {
-		type: String as PropType<`${Side}`>,
-		default: Side.left,
-		validator: (value: Side) => Object.values(Side).includes(value),
-	},
-	/**
-	 * Loading icon
-	 */
-	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Enable button toggle
-	 */
-	toggle: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Button toggle value
-	 */
-	value: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-	/**
-	 * Value associated with the unchecked state
-	 */
-	uncheckedValue: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-	/**
-	 * Button toggle model value
-	 */
-	modelValue: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
+    ...ActionProps,
+    ...IdProps,
+    ...ModifiersProps,
+    ...UnselectableProps,
+    ...LoadingProps,
+    ...IconProps,
+    /**
+     * Button icon position
+     */
+    iconPosition: {
+        type: String as PropType<`${Side}`>,
+        default: Side.left,
+        validator: (value: Side) => Object.values(Side).includes(value),
+    },
+    /**
+     * Loading icon
+     */
+    loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
+    /**
+     * Enable button toggle
+     */
+    toggle: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Button toggle value
+     */
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined,
+    },
+    /**
+     * Value associated with the unchecked state
+     */
+    uncheckedValue: {
+        type: [String, Number, Boolean],
+        default: undefined,
+    },
+    /**
+     * Button toggle model value
+     */
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: undefined,
+    },
 }
 
 export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
@@ -69,64 +67,59 @@ export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
  * Merges local and group props
  */
 export function useGroupProps(
-	props: VvButtonPropsTypes,
-	emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
+    props: VvButtonPropsTypes,
+    emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
 ) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
+    const { group, isInGroup, getGroupOrLocalRef }
+		= useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
 
-	// local props
-	const { id, iconPosition, icon, label, pressed } = toRefs(props)
+    // local props
+    const { id, iconPosition, icon, label, pressed } = toRefs(props)
 
-	// group props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | number | boolean | (string | number | boolean)[] | undefined
-	>
-	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
-	const unselectable = getGroupOrLocalRef(
-		'unselectable',
-		props,
-	) as Ref<boolean>
-	const multiple = computed(() => group?.value.multiple.value ?? false)
-	// merge local and group modifiers
-	const modifiers = computed(() => {
-		let localModifiers = props.modifiers
-		let groupModifiers = group?.value.modifiers.value
+    // group props
+    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+    const toggle = getGroupOrLocalRef('toggle', props)
+    const unselectable = getGroupOrLocalRef('unselectable', props)
+    const multiple = computed(() => group?.multiple.value ?? false)
+    // merge local and group modifiers
+    const modifiers = computed(() => {
+        let localModifiers = props.modifiers
+        let groupModifiers = group?.modifiers.value
 
-		const toReturn = new Set<string>()
-		if (localModifiers) {
-			if (!Array.isArray(localModifiers)) {
-				localModifiers = localModifiers.split(' ')
-			}
-			localModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		if (groupModifiers) {
-			if (!Array.isArray(groupModifiers)) {
-				groupModifiers = groupModifiers.split(' ')
-			}
-			groupModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		return Array.from(toReturn)
-	})
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
-	)
+        const toReturn = new Set<string>()
+        if (localModifiers) {
+            if (!Array.isArray(localModifiers)) {
+                localModifiers = localModifiers.split(' ')
+            }
+            localModifiers.forEach(modifier => toReturn.add(modifier))
+        }
+        if (groupModifiers) {
+            if (!Array.isArray(groupModifiers)) {
+                groupModifiers = groupModifiers.split(' ')
+            }
+            groupModifiers.forEach(modifier => toReturn.add(modifier))
+        }
+        return Array.from(toReturn)
+    })
+    const disabled = computed(() =>
+        Boolean(props.disabled || group?.disabled.value),
+    )
 
-	return {
-		// group props
-		group,
-		isInGroup,
-		modelValue,
-		toggle,
-		unselectable,
-		multiple,
-		modifiers,
-		disabled,
-		// local props
-		id,
-		pressed,
-		iconPosition,
-		icon,
-		label,
-	}
+    return {
+        // group props
+        group,
+        isInGroup,
+        modelValue,
+        toggle,
+        unselectable,
+        multiple,
+        modifiers,
+        disabled,
+        // local props
+        id,
+        pressed,
+        iconPosition,
+        icon,
+        label,
+    }
 }