aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-button/c-button.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-button/c-button.vue')
-rw-r--r--src/ui/c-button/c-button.vue48
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;