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

package/src/components/VvAction/VvAction.vue

@@ -1,146 +1,160 @@
-<script lang="ts">
-	export default {
-		name: 'VvAction',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvActionProps, VvActionEvents } from '.'
-	import { ActionTag } from '../../constants'
+import { VvActionEvents, VvActionProps } from '.'
+import { ActionTag } from '../../constants'
+
+// props and emit
+const props = defineProps(VvActionProps)
 
-	// props and emit
-	const props = defineProps(VvActionProps)
-	const emit = defineEmits(VvActionEvents)
+const emit = defineEmits(VvActionEvents)
 
-	// inject plugin
-	const volver = useVolver()
+const instance = getCurrentInstance()
 
-	const element = ref<HTMLElement | null>(null)
-	defineExpose({ $el: element })
+// inject plugin
+const volver = useVolver()
 
-	// drowpdown trigger
-	const {
-		reference: dropdownTriggerReference,
-		bus: dropdownEventBus,
-		aria: dropdownAria,
-		expanded: dropdownExpanded,
-	} = useInjectedDropdownTrigger()
-	watch(
-		() => element.value,
-		(newValue) => {
-			if (dropdownTriggerReference) {
-				dropdownTriggerReference.value = newValue
-			}
-		},
-	)
+const element = ref<HTMLElement | null>(null)
+defineExpose({ $el: element })
 
-	// pressed
-	const pressed = computed(() => {
-		return props.pressed || dropdownExpanded?.value
-	})
+// drowpdown trigger
+const {
+    reference: dropdownTriggerReference,
+    bus: dropdownEventBus,
+    aria: dropdownAria,
+    expanded: dropdownExpanded,
+} = useInjectedDropdownTrigger()
+watch(
+    () => element.value,
+    (newValue) => {
+        if (dropdownTriggerReference) {
+            dropdownTriggerReference.value = newValue
+        }
+    },
+)
 
-	// dropdown parent
-	const { role } = useInjectedDropdownAction()
+// pressed
+const pressed = computed(() => {
+    return props.pressed || dropdownExpanded?.value
+})
 
-	/**
-	 * @description The tag defined by props.
-	 * @returns {string} The tag.
-	 */
-	const hasTag = computed(() => {
-		switch (true) {
-			case props.disabled:
-				return ActionTag.button
-			case props.to !== undefined:
-				return volver?.nuxt ? ActionTag.nuxtLink : ActionTag.routerLink
-			case props.href !== undefined:
-				return ActionTag.a
-			default:
-				return ActionTag.button
-		}
-	})
+// dropdown parent
+const { role } = useInjectedDropdownAction()
 
-	/**
-	 * @description Define component attributes.
-	 * @returns {Object} The component attributes.
-	 */
-	const hasProps = computed(() => {
-		const toReturn = {
-			...dropdownAria?.value,
-			ariaPressed: pressed.value ? true : undefined,
-			ariaLabel: props.ariaLabel,
-			role: role?.value,
-		}
-		switch (hasTag.value) {
-			case ActionTag.a:
-				return {
-					...toReturn,
-					href: props.href,
-					target: props.target,
-					rel: props.rel,
-				}
-			case ActionTag.routerLink:
-			case ActionTag.nuxtLink:
-				return {
-					...toReturn,
-					to: props.to,
-					target: props.target,
-				}
-			default:
-				return {
-					...toReturn,
-					type: props.type,
-					disabled: props.disabled,
-				}
-		}
-	})
+/**
+ * @description The tag defined by props.
+ * @returns {string} The tag.
+ */
+const hasTag = computed(() => {
+    switch (true) {
+        case props.disabled:
+            return ActionTag.button
+        case props.to !== undefined:
+            return volver?.nuxt ? ActionTag.nuxtLink : ActionTag.routerLink
+        case props.href !== undefined:
+            return ActionTag.a
+        default:
+            return props.defaultTag // button
+    }
+})
 
-	/**
-	 * @description Catch click event
-	 */
-	const onClick = (e: Event) => {
-		if (props.disabled) {
-			e.preventDefault()
-			return
-		}
-		dropdownEventBus?.emit('click', e)
-		emit('click', e)
-	}
+/**
+ * @description Define component attributes.
+ * @returns {object} The component attributes.
+ */
+const hasProps = computed(() => {
+    const toReturn = {
+        ...dropdownAria?.value,
+        ariaPressed: pressed.value ? true : undefined,
+        ariaLabel: props.ariaLabel,
+        role: role?.value,
+    }
+    switch (hasTag.value) {
+        case ActionTag.a:
+            return {
+                ...toReturn,
+                href: props.href,
+                target: props.target,
+                rel: props.rel,
+            }
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+            return {
+                ...toReturn,
+                to: props.to,
+                target: props.target,
+            }
+        case ActionTag.button:
+            return {
+                ...toReturn,
+                type: props.type,
+                disabled: props.disabled,
+            }
+        default:
+            return toReturn
+    }
+})
 
-	/**
-	 * @description Catch mouseover event
-	 */
-	const onMouseover = (e: Event) => {
-		dropdownEventBus?.emit('mouseover', e)
-		emit('mouseover', e)
-	}
+/**
+ * @description Catch click event
+ */
+function onClick(e: Event) {
+    if (props.disabled) {
+        e.preventDefault()
+        return
+    }
+    if (instance?.vnode.props?.onClick) {
+        emit('click', e)
+        return
+    }
+    dropdownEventBus?.emit('click', e)
+}
 
-	/**
-	 * @description Catch mouseleave event
-	 */
-	const onMouseleave = (e: Event) => {
-		dropdownEventBus?.emit('mouseleave', e)
-		emit('mouseleave', e)
-	}
+/**
+ * @description Catch mouseover event
+ */
+function onMouseover(e: Event) {
+    if (instance?.vnode.props?.onMouseover) {
+        emit('mouseover', e)
+        return
+    }
+    dropdownEventBus?.emit('mouseover', e)
+}
+
+/**
+ * @description Catch mouseleave event
+ */
+function onMouseleave(e: Event) {
+    if (instance?.vnode.props?.onMouseleave) {
+        emit('mouseleave', e)
+        return
+    }
+    dropdownEventBus?.emit('mouseleave', e)
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAction',
+}
 </script>
 
 <template>
-	<component
-		v-bind="hasProps"
-		:is="hasTag"
-		ref="element"
-		:class="{
-			active,
-			pressed,
-			disabled,
-			current,
-		}"
-		@click.passive="onClick"
-		@mouseover.passive="onMouseover"
-		@mouseleave.passive="onMouseleave"
-	>
-		<!-- @slot Default slot -->
-		<slot>
-			{{ label }}
-		</slot>
-	</component>
+    <component
+        v-bind="hasProps"
+        :is="hasTag"
+        ref="element"
+        :class="{
+            active,
+            pressed,
+            disabled,
+            current,
+        }"
+        @click.passive="onClick"
+        @mouseover.passive="onMouseover"
+        @mouseleave.passive="onMouseleave"
+    >
+        <!-- @slot Default slot -->
+        <slot>
+            {{ label }}
+        </slot>
+    </component>
 </template>

package/src/components/VvAlert/VvAlert.vue

@@ -1,76 +1,78 @@
-<script lang="ts">
-	export default {
-		name: 'VvAlert',
-	}
-</script>
-
 <script setup lang="ts">
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import { useVvAlert, VvAlertEvents, VvAlertProps } from '.'
+import { useVvAlert, VvAlertEvents, VvAlertProps } from '.'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+const props = defineProps(VvAlertProps)
 
-	const props = defineProps(VvAlertProps)
-	const emit = defineEmits(VvAlertEvents)
-	const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit)
-	defineExpose({ close })
+const emit = defineEmits(VvAlertEvents)
+
+const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit)
+defineExpose({ close })
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAlert',
+}
 </script>
 
 <template>
-	<div v-bind="hasProps">
-		<div
-			v-if="
-				$slots.header ||
-				$slots.title ||
-				$slots.close ||
-				$slots['title::before'] ||
-				$slots['title::after'] ||
-				title ||
-				dismissable ||
-				autoClose
-			"
-			class="vv-alert__header"
-		>
-			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
-			<!-- @slot Header slot -->
-			<slot name="header">
-				<!-- @slot Before title slot -->
-				<slot name="title::before" />
-				<strong
-					v-if="$slots.title || title"
-					:id="hasTitleId"
-					class="vv-alert__title"
-				>
-					<!-- @slot Title slot -->
-					<slot name="title">
-						{{ title }}
-					</slot>
-				</strong>
-				<!-- @slot After title slot -->
-				<slot name="title::after" />
-			</slot>
-			<!-- @slot Close button slot -->
-			<slot name="close" v-bind="{ close }">
-				<button
-					v-if="dismissable || autoClose"
-					class="vv-alert__close"
-					type="button"
-					:aria-label="closeLabel"
-					@click.stop="close"
-				>
-					<div class="vv-alert__close-mask"></div>
-				</button>
-			</slot>
-		</div>
-		<div v-if="$slots.default || content" class="vv-alert__content">
-			<!-- @slot Content slot -->
-			<slot>
-				{{ content }}
-			</slot>
-		</div>
-		<div v-if="$slots.footer || footer" class="vv-alert__footer">
-			<!-- @slot Footer slot -->
-			<slot name="footer">
-				{{ footer }}
-			</slot>
-		</div>
-	</div>
+    <div v-bind="hasProps">
+        <div
+            v-if="
+                $slots.header
+                    || $slots.title
+                    || $slots.close
+                    || $slots['title::before']
+                    || $slots['title::after']
+                    || title
+                    || dismissable
+                    || autoClose
+            "
+            class="vv-alert__header"
+        >
+            <VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
+            <!-- @slot Header slot -->
+            <slot name="header">
+                <!-- @slot Before title slot -->
+                <slot name="title::before" />
+                <strong
+                    v-if="$slots.title || title"
+                    :id="hasTitleId"
+                    class="vv-alert__title"
+                >
+                    <!-- @slot Title slot -->
+                    <slot name="title">
+                        {{ title }}
+                    </slot>
+                </strong>
+                <!-- @slot After title slot -->
+                <slot name="title::after" />
+            </slot>
+            <!-- @slot Close button slot -->
+            <slot name="close" v-bind="{ close }">
+                <button
+                    v-if="dismissable || autoClose"
+                    class="vv-alert__close"
+                    type="button"
+                    :aria-label="closeLabel"
+                    @click.stop="close"
+                >
+                    <div class="vv-alert__close-mask" />
+                </button>
+            </slot>
+        </div>
+        <div v-if="$slots.default || content" class="vv-alert__content">
+            <!-- @slot Content slot -->
+            <slot>
+                {{ content }}
+            </slot>
+        </div>
+        <div v-if="$slots.footer || footer" class="vv-alert__footer">
+            <!-- @slot Footer slot -->
+            <slot name="footer">
+                {{ footer }}
+            </slot>
+        </div>
+    </div>
 </template>