chore(client): tweak radio component
This commit is contained in:
parent
66f1aaf5f7
commit
e83dd90e07
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue