diff options
Diffstat (limited to 'src/ui/c-button/c-button.vue')
-rw-r--r-- | src/ui/c-button/c-button.vue | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue index 24b91b8..06a4786 100644 --- a/src/ui/c-button/c-button.vue +++ b/src/ui/c-button/c-button.vue @@ -1,31 +1,18 @@ -<template> - <component - :is="tag" - :href="href ?? to" - class="c-button" - :class="{ disabled, round, circle }" - :to="to" - @click="handleClick" - > - <slot /> - </component> -</template> - <script lang="ts" setup> import type { RouteLocationRaw } from 'vue-router'; -import { useTheme } from './c-button.theme'; import { useAppTheme } from '../theme/themes'; +import { useTheme } from './c-button.theme'; const props = withDefaults( defineProps<{ - type?: 'default' | 'primary' | 'warning' | 'error'; - variant?: 'basic' | 'text'; - disabled?: boolean; - round?: boolean; - circle?: boolean; - href?: string; - to?: RouteLocationRaw; - size?: 'small' | 'medium' | 'large'; + type?: 'default' | 'primary' | 'warning' | 'error' + variant?: 'basic' | 'text' + disabled?: boolean + round?: boolean + circle?: boolean + href?: string + to?: RouteLocationRaw + size?: 'small' | 'medium' | 'large' }>(), { type: 'default', @@ -38,10 +25,10 @@ const props = withDefaults( size: 'medium', }, ); -const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props); - const emits = defineEmits(['click']); +const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props); + function handleClick(event: MouseEvent) { if (!disabled.value) { emits('click', event); @@ -64,6 +51,19 @@ const appTheme = useAppTheme(); const size = computed(() => theme.value.size[sizeName.value]); </script> +<template> + <component + :is="tag" + :href="href ?? to" + class="c-button" + :class="{ disabled, round, circle }" + :to="to" + @click="handleClick" + > + <slot /> + </component> +</template> + <style lang="less" scoped> .c-button { line-height: 1; |