chore(client): tweak style
This commit is contained in:
parent
ac162f9996
commit
9a4198293a
|
@ -55,6 +55,7 @@ export default defineComponent({
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 9px 12px;
|
padding: 9px 12px;
|
||||||
|
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);
|
||||||
|
|
|
@ -4,11 +4,11 @@ import MkRadio from './radio.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MkRadio
|
MkRadio,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
required: false
|
required: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -19,7 +19,7 @@ export default defineComponent({
|
||||||
watch: {
|
watch: {
|
||||||
value() {
|
value() {
|
||||||
this.$emit('update:modelValue', this.value);
|
this.$emit('update:modelValue', this.value);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
let options = this.$slots.default();
|
let options = this.$slots.default();
|
||||||
|
@ -30,25 +30,25 @@ export default defineComponent({
|
||||||
if (options.length === 1 && options[0].props == null) options = options[0].children;
|
if (options.length === 1 && options[0].props == null) options = options[0].children;
|
||||||
|
|
||||||
return h('div', {
|
return h('div', {
|
||||||
class: 'novjtcto'
|
class: 'novjtcto',
|
||||||
}, [
|
}, [
|
||||||
...(label ? [h('div', {
|
...(label ? [h('div', {
|
||||||
class: 'label'
|
class: 'label',
|
||||||
}, [label])] : []),
|
}, [label])] : []),
|
||||||
h('div', {
|
h('div', {
|
||||||
class: 'body'
|
class: 'body',
|
||||||
}, options.map(option => h(MkRadio, {
|
}, options.map(option => h(MkRadio, {
|
||||||
key: option.key,
|
key: option.key,
|
||||||
value: option.props.value,
|
value: option.props.value,
|
||||||
modelValue: this.value,
|
modelValue: this.value,
|
||||||
'onUpdate:modelValue': value => this.value = value,
|
'onUpdate:modelValue': value => this.value = value,
|
||||||
}, option.children)),
|
}, option.children)),
|
||||||
),
|
),
|
||||||
...(caption ? [h('div', {
|
...(caption ? [h('div', {
|
||||||
class: 'caption'
|
class: 'caption',
|
||||||
}, [caption])] : []),
|
}, [caption])] : []),
|
||||||
]);
|
]);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -65,9 +65,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
gap: 12px;
|
||||||
grid-gap: 12px;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .caption {
|
> .caption {
|
||||||
|
|
Loading…
Reference in New Issue