VueJS, using Computed property instead of Template Literal

Question

I was trying to pass a custom css class to tailwindCSS through a template literal. However, being the component rendered on Storybook, this doesn't seem to work due to some conflict. Instead, I'd like to pass a computed property, but I'm not sure how to write it in the most scalable way, since maybe there will be more css properties in the future.

This doesn't work:

    const textSize = computed(() => { return `text-${props.textSize}`}

This works but it's pretty ugly:

    const textSize = computed(() => {
    return props.textSize === "xs"
        ? "text-xs"
        : props.textSize === "sm"
        ? "text-sm"
        : props.textSize === "base"
        ? "text-base"
        : props.textSize === "lg"
        ? "text-lg"
        : props.textSize === "xl"
        ? "text-xl"
        : props.textSize === "2xl"
        ? "text-2xl"
        : "text-3xl"
})

The whole component:

<template>
    <div :class="[`h-full w-full p-2`, !props.isDisabled || `opacity-30`]">
        <div
            :class="[
                'flex relative items-center h-full w-full',
                props.checkBoxType === 'reverse-between' ? 'justify-between' : 'justify-start',
                props.direction === 'vertical' ? 'flex-col justify-start gap-2' : 'items-center',
            ]"
        >
            <input
                type="checkbox"
                v-model="checked"
                :class="[
                    'absolute z-50 order-1 w-6 h-6 opacity-0',
                    props.checkBoxType === 'reverse-between' && ' right-0',
                    props.checkBoxType === 'standard' ? 'order-0' : 'order-1',
                    props.direction === 'vertical' && 'top-0 right-4',
                ]"
                :disabled="props.isDisabled"
            />
            <div
                :class="[
                    'bg-white w-6 h-6 flex flex-shrink-0 justify-center items-center p-1 border-2 border-gray',
                    props.checkBoxType === 'standard' && props.direction === 'horizontal' && 'order-0 mr-2',
                    props.checkBoxType === 'reverse-between' && props.direction === 'horizontal' && 'order-1 ml-2',
                    props.direction === 'vertical' && 'mr-0',
                    inputShape === 'square' ? 'rounded' : 'rounded-full',
                    props.isToggleEnabled || checked ? 'border-3' : 'border-1',
                ]"
            >
                <div
                    :class="[
                        'bg-gray w-3 h-3',
                        props.inputShape === 'circle' ? 'rounded-full' : 'rounded-sm',
                        props.isToggleEnabled || checked ? 'visible' : 'hidden',
                    ]"
                ></div>
            </div>
            <div
                :class="[
                    'select-none font-base flex justify-center items-center',
                    props.checkBoxType === 'standard' ? 'order-1' : 'order-0',
                    props.direction === 'vertical' && 'text-center',
                ]"
            >
                <span :class="[checked || isToggleEnabled ? 'font-bold' : 'font-normal', 'text-gray', textSize]">{{
                    props.label
                }}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { defineProps, ref, computed } from "vue"

    const checked = ref(false)
    const textSize = computed(() => {
        return props.textSize === "xs"
            ? "text-xs"
            : props.textSize === "sm"
            ? "text-sm"
            : props.textSize === "base"
            ? "text-base"
            : props.textSize === "lg"
            ? "text-lg"
            : props.textSize === "xl"
            ? "text-xl"
            : props.textSize === "2xl"
            ? "text-2xl"
            : "text-3xl"
    })

    const props = defineProps({
        /**
         * Sets the label for the input element
         */
        label: {
            type: String,
            default: "example",
        },
        /**
         * Changes the layout between text and checkbox button
         */
        checkBoxType: {
            default: "standard",
        },
        /**
         * Sets the shape of the checkbox as squared or circled
         */
        inputShape: {
            default: "square",
        },
        /**
         * Sets the direction of the component as horizontal or vertical
         */
        direction: {
            default: "horizontal",
        },
        /**
         * Sets the text size
         */
        textSize: {
            // type: String as PropType<FontSize>,
            type: String,
            default: "base",
        },
        /**
         * Toggles or untoggles the checkbox
         */
        isToggleEnabled: {
            type: Boolean,
        },
        /**
         * If false, the whole component is greyed out
         */
        isDisabled: {
            type: Boolean,
            default: false,
        },
    })
</script>

Answer 1

As @kissu mentioned in his comment Interpolation of class names is indeed not feasible in Tailwind , so you need to create a clean object with prop value as field and the class name as value :

const textSizes = {
    'xs':'text-xs',
    'sm':'text-sm',
    'base':'text-base',
    'lg':'text-lg',
    'xl':'text-xl',
    '2xl':'text-2xl',
    '3xl':'text-3xl',
}

   const textSize = computed(() => textSizes[props.textSize])