natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(client): tweak radio component

This commit is contained in:
syuilo 2022-07-20 19:59:50 +09:00
parent 66f1aaf5f7
commit e83dd90e07
1 changed files with 20 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/client/src/components/form/radio.vue
View File

@ -18,34 +18,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
export default defineComponent({ const props = defineProps<{
props: { modelValue: any;
modelValue: { value: any;
required: false, disabled: boolean;
}, }>();
value: {
required: false, const emit = defineEmits<{
}, (ev: 'update:modelValue', value: any): void;
disabled: { }>();
type: Boolean,
default: false, let checked = $computed(() => props.modelValue === props.value);
},
}, function toggle(): void {
computed: { if (props.disabled) return;
checked(): boolean { emit('update:modelValue', props.value);
return this.modelValue === this.value; }
},
},
methods: {
toggle() {
if (this.disabled) return;
this.$emit('update:modelValue', this.value);
},
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -54,13 +45,13 @@ export default defineComponent({
display: inline-block; display: inline-block;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
padding: 9px 12px; padding: 8px 10px;
min-width: 60px; min-width: 60px;
background-color: var(--panel); background-color: var(--panel);
background-clip: padding-box !important; background-clip: padding-box !important;
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: 6px;
transition: all 0.3s; transition: all 0.2s;
> * { > * {
user-select: none; user-select: none;