mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-29 23:38:13 +09:00
Code

chore(client): tweak style

Browse Source
This commit is contained in:
syuilo 2022-06-28 22:32:01 +09:00
parent ac162f9996
commit 9a4198293a
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);

32
packages/client/src/components/form/radios.vue
View File

@ -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 {