[WIP] Фикс радио инпута
This commit is contained in:
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
:style="{ columnGap: columnGap + 'px', rowGap: rowGap + 'px' }"
|
||||||
:size="size",
|
:size="size",
|
||||||
:options="items"
|
:options="items",
|
||||||
type="radio",
|
type="radio",
|
||||||
:id="item?.id",
|
|
||||||
: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,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user