From e83dd90e07e107521ff7eb3585d759cdd3d8b882 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 20 Jul 2022 19:59:50 +0900 Subject: [PATCH] chore(client): tweak radio component --- packages/client/src/components/form/radio.vue | 49 ++++++++----------- 1 file changed, 20 insertions(+), 29 deletions(-) diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue index b4d39507e3..b36f7e9fdc 100644 --- a/packages/client/src/components/form/radio.vue +++ b/packages/client/src/components/form/radio.vue @@ -18,34 +18,25 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; -export default defineComponent({ - props: { - modelValue: { - required: false, - }, - value: { - required: false, - }, - disabled: { - type: Boolean, - default: false, - }, - }, - computed: { - checked(): boolean { - return this.modelValue === this.value; - }, - }, - methods: { - toggle() { - if (this.disabled) return; - this.$emit('update:modelValue', this.value); - }, - }, -}); +const props = defineProps<{ + modelValue: any; + value: any; + disabled: boolean; +}>(); + +const emit = defineEmits<{ + (ev: 'update:modelValue', value: any): void; +}>(); + +let checked = $computed(() => props.modelValue === props.value); + +function toggle(): void { + if (props.disabled) return; + emit('update:modelValue', props.value); +} </script> <style lang="scss" scoped> @@ -54,13 +45,13 @@ export default defineComponent({ display: inline-block; text-align: left; cursor: pointer; - padding: 9px 12px; + padding: 8px 10px; min-width: 60px; background-color: var(--panel); background-clip: padding-box !important; border: solid 1px var(--panel); border-radius: 6px; - transition: all 0.3s; + transition: all 0.2s; > * { user-select: none;