Vue 3 Composition API - Props default and DOM inside lifecycle methods - vue.js

Question

I have a Vue component inside a NuxtJS app and I'm using the #nuxtjs/composition-api.
I have this component which is a <Link> component and I would like to make the code clearer.
I have a computed property that determines to color of my UiIcon from iconColor, iconColorHover, IconActive. But most importantly, I want to set it to a specific color if I have a disable class on my root component. It works like that but it doesn't look too good I believe.
I found out that undefined is the only value that I can use to take UiIcon default props if not defined. Empty string like '' would make more sense to more but it's considered as a valid value. I would have to do some ternary conditions in my UiIcon and I'd like to avoid that.
<template>
<div ref="rootRef" class="row">
<UiIcon
v-if="linkIcon"
:type="linkIcon"
:color="linkIconColor"
class="icon"
/>
<a
class="link"
:href="linkHref"
:target="linkTarget"
:rel="linkTarget === 'blank' ? 'noopener noreferrer' : null"
#mouseover="linkActive = true"
#mouseout="linkActive = false"
>
<slot></slot>
</a>
</div>
</template>
<script lang="ts">
import {
defineComponent,
computed,
ref,
toRefs,
nextTick,
onBeforeMount,
} from '#nuxtjs/composition-api';
import { Colors } from '~/helpers/styles';
export default defineComponent({
name: 'Link',
props: {
href: {
type: String,
default: undefined,
},
target: {
type: String as () => '_blank' | '_self' | '_parent' | '_top',
default: '_self',
},
icon: {
type: String,
default: undefined,
},
iconColor: {
type: String,
default: undefined,
},
iconHoverColor: {
type: String,
default: undefined,
},
},
setup(props) {
const { href, target, icon, iconColor, iconHoverColor } = toRefs(props);
const linkActive = ref(false);
const rootRef = ref<HTMLDivElement | null>(null);
const writableIconColor = ref('');
const linkIconColor = computed({
get: () => {
const linkDisabled = rootRef.value?.classList.contains('disabled');
if (linkDisabled) {
return Colors.DARK_GREY;
}
if (linkActive.value && iconHoverColor.value) {
return iconHoverColor.value;
}
return iconColor.value;
},
set: (value) => {
writableIconColor.value = value;
},
});
onBeforeMount(() => {
nextTick(() => {
const linkDisabled = rootRef.value?.classList.contains('disabled');
if (linkDisabled) {
linkIconColor.value = Colors.DARK_GREY;
}
});
});
return {
rootRef,
linkHref: href,
linkTarget: target,
linkIcon: icon,
linkIconColor,
linkActive,
};
},
});
</script>

Answer 1

Implementing disabled status for a component means it will handle two factors: style (disabled color) and function. Displaying a disabled color is only a matter of style/css. implementing it in programmatical way means it'll take longer time to render completely on user's side and it'll lose more SEO scores. examine UiIcon's DOM from browser and override styles using Deep selectors.
If I were handling this case, I would have described the color with css and try to minimize programmatic manipulation of style.
<template>
<div :disabled="disabled">
</div>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false,
}
}
}
</script>
// it does not have to be scss.
// just use anything that's
// easier to handle variables.
<style lang="scss">
// I would normally import css with prepend option from webpack,
// but this is just to illustrate the usage.
#import 'custom-styles.scss';
&::v-deep button[disabled] {
color: $disabled-color;
}
</style>
attach validator function on the props object. it'll automatically throw errors on exceptions.
{
props: {
icon: {
type: String,
default: "default-icon",
validator(val) {
return val !== "";
// or something like,
// return val.includes(['iconA', 'iconB'])
},
},
}
}