33 lines
808 B
Vue
33 lines
808 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import LaurelSpinner from './LaurelSpinner.vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
severity?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
|
|
size?: 'small' | 'normal' | 'large'
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
}>(),
|
|
{
|
|
severity: 'primary',
|
|
size: 'normal',
|
|
loading: false,
|
|
disabled: false,
|
|
},
|
|
)
|
|
|
|
const dataP = computed(() => [props.size, props.loading ? 'loading' : null].filter(Boolean).join(' '))
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="`nych-button nych-button-${severity}`"
|
|
:data-p="dataP"
|
|
:disabled="disabled || loading"
|
|
>
|
|
<LaurelSpinner v-if="loading" :size="20" />
|
|
<slot v-if="!loading" name="icon" />
|
|
<span><slot /></span>
|
|
</button>
|
|
</template>
|