[WIP] Фикс радио инпута

This commit is contained in:
megavrilinvv
2023-01-19 12:33:02 +03:00
parent 23bedea7cc
commit e0831f521f
3 changed files with 17 additions and 36 deletions

View File

@@ -3,7 +3,6 @@
q-input( q-input(
v-model="value", v-model="value",
:class="{'circle': circle}", :class="{'circle': circle}",
:input-style="{ color: textColor, width: width + 'px' }", :input-style="{ color: textColor, width: width + 'px' }",
:borderless="borderless", :borderless="borderless",
:placeholder="placeholder", :placeholder="placeholder",

View File

@@ -1,20 +1,17 @@
<template lang="pug"> <template lang="pug">
.container.flex.flex-col.gap-y-2 .container.flex.flex-col.gap-y-2(@click="click")
base-input-container( base-input-container(
v-if="radioButtonsLabel",
:label="radioButtonsLabel" :label="radioButtonsLabel"
) )
q-option-group( q-option-group.flex(
class="q-gutter-md", class="q-gutter-md",
:size="size", :style="{ columnGap: columnGap + 'px', rowGap: rowGap + 'px' }"
:options="items" :size="size",
type="radio", :options="items",
:id="item?.id", type="radio",
:value="item?.value", v-model="value",
v-model="value", :inline="inline"
:inline="inline" )
)
span {{item?.label}}
</template> </template>
<script> <script>
@@ -32,8 +29,8 @@ export default {
default: () => [], default: () => [],
}, },
directionColumn: Boolean, directionColumn: Boolean,
columnGap: String, columnGap: Number,
rowGap: String, rowGap: Number,
size: { size: {
type: String, type: String,
default: "sm", default: "sm",
@@ -52,25 +49,10 @@ export default {
this.$emit("update:modelValue", value); this.$emit("update:modelValue", value);
}, },
}, },
radioGroupClasses() { },
if (this.directionColumn) { methods: {
return this.columnGap click() {
? { console.log(this.modelValue);
"flex-col": true,
[this.columnGap]: true,
}
: {
"flex-col": true,
"gap-y-1": true,
};
}
if (this.rowGap)
return {
[this.rowGap]: true,
};
return {
"gap-x-4": true,
};
}, },
}, },
}; };

View File

@@ -4,7 +4,7 @@
base-radio-buttons-group( base-radio-buttons-group(
:items="policiesList", :items="policiesList",
v-model="policy", v-model="policy",
rowGap="gap-x-[182px]", :columnGap="152",
inline inline
) )
.flex.gap-x-4 .flex.gap-x-4