wondif_vue/design-system/primitives/DsButtonArrow.vue

<template>
  <component
    :is="componentTag"
    v-bind="$attrs"
    :to="isNuxtLink ? to : undefined"
    :href="isAnchor ? href : undefined"
    :type="isButton ? type : undefined"
    :disabled="isButton ? disabled || loading : undefined"
    :aria-disabled="(!isButton && (disabled || loading)) ? 'true' : undefined"
    :class="[
      'ds-button-arrow',
      `ds-button-arrow--${size}`,
      `ds-button-arrow--${variant}`,
      { 'ds-button--disabled': disabled, 'ds-button--loading': loading }
    ]"
    @click="onClick"
  >
    <span class="ds-button-arrow__content">
      
      <img
        class="ds-button-arrow__icon"
        src="/img/icones/arrow_right.svg"
        alt=""
        aria-hidden="true"
      />
      <span class="ds-button-arrow__label">
        <slot />
      </span>
    </span>
  </component>
</template>

<script setup>
    defineOptions({ inheritAttrs: false })
    import { computed, resolveComponent } from 'vue'


    const props = defineProps({
        variant: { type: String, default: 'primary' }, // primary / secondary / ghost / link
        size: { type: String, default: 'md' },         // sm/md/lg

        to: { type: [String, Object], default: '' },   // NuxtLink
        href: { type: String, default: '' },           // <a>
        type: { type: String, default: 'button' },     // button/submit/reset

        disabled: { type: Boolean, default: false },
        loading: { type: Boolean, default: false },

    })



    const isNuxtLink = computed(() => !!props.to)
    const isAnchor = computed(() => !props.to && !!props.href)
    const isButton = computed(() => !props.to && !props.href)

    const componentTag = computed(() => {
        if (isNuxtLink.value) return resolveComponent('NuxtLink')
        if (isAnchor.value) return 'a'
        return 'button'
    })

    const emit = defineEmits(['click'])
    function onClick(e) {
        if (props.disabled || props.loading) {
            e.preventDefault()
            e.stopPropagation()
            return
        }
        emit('click', e)
    }
</script>

<style lang="scss">
    .ds-button-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-roboto);
        font-weight: var(--fw-semibold);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        &:hover {
            transform: translateY(-3px);
        }

        transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;

        &:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--c-focus);
        }

        &--disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        &__content {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-2);
        }
        &__label {
            font-size: var(--fs-17);
        }


        &__icon {
            height: var(--fs-24);
            padding-right: var(--sp-4);
        }

        /* Sizes */
        &--sm { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-3); min-height: 2.25rem; }
        &--md { font-size: var(--text-md); padding: var(--sp-3) var(--sp-4); min-height: 2.75rem; }
        &--lg { font-size: var(--text-lg); padding: var(--sp-4) var(--sp-5); min-height: 3.25rem; }

        /* Variants */
        &--primary {
            background: var(--c-brand_rouge);
            color: var(--c-brand-contrast);
        }
        &--primary:hover { transform: translateY(-1px); }

        &--secondary {
            background: var(--c-surface);
            color: var(--c-text);
            border-color: var(--c-border-strong);
        }
        &--secondary:hover { background: var(--c-hover); }

        &--invert {
            color: var(--c-text-invert);
            border-color: var(--c-border-strong);
            img {
                filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
            }
        }
        &--secondary:hover { background: var(--c-hover); }

        &--ghost {
            background: transparent;
            color: var(--c-text);
        }
        &--ghost:hover { background: var(--c-hover); }

        &--link {
            background: transparent;
            color: var(--c-brand);
            padding: 0;
            min-height: auto;
        }
        &--link:hover { text-decoration: underline; }
    }
    

</style>