Skip to content

Commit ba27979

Browse files
srcdevsrcdev
committed
Form inputs - remove size variants
1 parent 20fabae commit ba27979

34 files changed

Lines changed: 47 additions & 380 deletions

‎app/components/forms/input-checkbox/MultipleCheckboxes.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
:label="item.label"
3131
:field-has-error
3232
:true-value="item.value"
33-
:size
3433
:options-layout
3534
:theme
3635
:direction
@@ -57,7 +56,6 @@
5756
:label="item.label"
5857
:field-has-error
5958
:true-value="item.value"
60-
:size
6159
:options-layout
6260
:theme
6361
:aria-describedby
@@ -75,7 +73,7 @@
7573
</template>
7674

7775
<script setup lang="ts">
78-
import type { FormUiTheme, FormSize, OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
76+
import type { FormUiTheme, OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
7977
8078
interface Props {
8179
dataTestid?: string;
@@ -88,7 +86,6 @@ interface Props {
8886
required?: boolean;
8987
fieldHasError?: boolean;
9088
multipleOptions?: boolean;
91-
size?: FormSize;
9289
optionsLayout?: OptionsLayout;
9390
equalCols?: boolean;
9491
styleClassPassthrough?: string | string[];
@@ -105,7 +102,6 @@ const props = withDefaults(defineProps<Props>(), {
105102
required: false,
106103
fieldHasError: false,
107104
multipleOptions: false,
108-
size: "medium",
109105
optionsLayout: "equal-widths",
110106
equalCols: true,
111107
styleClassPassthrough: () => [],

‎app/components/forms/input-checkbox/SingleCheckbox.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
:field-has-error
2424
:true-value
2525
:false-value
26-
:size
2726
:theme
2827
:aria-describedby
2928
>
@@ -47,7 +46,7 @@
4746
</template>
4847

4948
<script setup lang="ts">
50-
import type { FormUiTheme, FormSize, OptionsLayout } from "~/types/forms/types.forms";
49+
import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
5150
5251
interface Props {
5352
dataTestid?: string;
@@ -58,7 +57,6 @@ interface Props {
5857
required?: boolean;
5958
fieldHasError?: boolean;
6059
multipleOptions?: boolean;
61-
size?: FormSize;
6260
trueValue?: string | number | boolean;
6361
falseValue?: string | number | boolean;
6462
optionsLayout?: OptionsLayout;
@@ -73,7 +71,6 @@ const props = withDefaults(defineProps<Props>(), {
7371
required: false,
7472
fieldHasError: false,
7573
multipleOptions: false,
76-
size: "medium",
7774
trueValue: true,
7875
falseValue: false,
7976
optionsLayout: "equal-widths",

‎app/components/forms/input-checkbox/tests/MultipleCheckboxes.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { VueWrapper } from "@vue/test-utils";
33
import { mountSuspended } from "@nuxt/test-utils/runtime";
44
import { ref } from "vue";
5-
import type { FormSize, FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
5+
import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
66
import ComponentUnderTest from "../MultipleCheckboxes.vue";
77
import tagsData from "./data/tags.json";
88

@@ -18,7 +18,6 @@ const initialPropsData = {
1818
errorMessage: "Please select between 3 and 8 tags",
1919
fieldHasError: false,
2020
fieldData: tagsData,
21-
size: "small" as FormSize,
2221
optionsLayout: "inline" as OptionsLayout,
2322
styleClassPassthrough: ["testClass"],
2423
theme: "default" as FormUiTheme,

‎app/components/forms/input-number/variants/InputNumberDefault.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
class="input-number-with-label"
44
:data-theme="theme"
55
:data-invalid="fieldHasError ? '' : null"
6-
:data-size="size"
76
:class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
87
>
98
<InputLabel
@@ -31,7 +30,6 @@
3130
:step
3231
:theme
3332
:required
34-
:size
3533
:weight
3634
:field-has-error
3735
:style-class-passthrough
@@ -72,7 +70,7 @@
7270
</template>
7371

7472
<script setup lang="ts">
75-
import type { FormSize, FormWeight } from "~/types/forms/types.forms";
73+
import type { FormWeight } from "~/types/forms/types.forms";
7674
7775
interface Props {
7876
name: string;
@@ -85,7 +83,6 @@ interface Props {
8583
fieldHasError?: boolean;
8684
required?: boolean;
8785
theme?: "default" | "success" | "error" | "warning";
88-
size?: FormSize;
8986
weight?: FormWeight;
9087
styleClassPassthrough?: string | string[];
9188
}
@@ -96,7 +93,6 @@ const props = withDefaults(defineProps<Props>(), {
9693
fieldHasError: false,
9794
required: false,
9895
theme: "default",
99-
size: "default",
10096
weight: "normal",
10197
styleClassPassthrough: () => [],
10298
});

‎app/components/forms/input-radio/MultipleRadiobuttons.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
:label="item.label"
2626
:field-has-error
2727
:true-value="item.value"
28-
:size
2928
:options-layout
3029
:theme
3130
:direction
@@ -51,7 +50,6 @@
5150
:label="item.label"
5251
:field-has-error
5352
:true-value="item.value"
54-
:size
5553
:options-layout
5654
:theme
5755
:aria-describedby
@@ -68,7 +66,7 @@
6866
</template>
6967

7068
<script setup lang="ts">
71-
import type { FormUiTheme, FormSize, OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
69+
import type { FormUiTheme, OptionsLayout, IFormMultipleOptions } from "~/types/forms/types.forms";
7270
7371
interface Props {
7472
dataTestid?: string;
@@ -81,7 +79,6 @@ interface Props {
8179
required?: boolean;
8280
fieldHasError?: boolean;
8381
multipleOptions?: boolean;
84-
size?: FormSize;
8582
optionsLayout?: OptionsLayout;
8683
equalCols?: boolean;
8784
styleClassPassthrough?: string | string[];
@@ -97,7 +94,6 @@ const props = withDefaults(defineProps<Props>(), {
9794
required: false,
9895
fieldHasError: false,
9996
multipleOptions: false,
100-
size: "medium",
10197
optionsLayout: "equal-widths",
10298
equalCols: true,
10399
styleClassPassthrough: () => [],

‎app/components/forms/input-radio/tests/MultipleRadioButtons.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { VueWrapper } from "@vue/test-utils";
33
import { mountSuspended } from "@nuxt/test-utils/runtime";
44
import { ref } from "vue";
5-
import type { FormSize, FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
5+
import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
66
import ComponentUnderTest from "../MultipleRadiobuttons.vue";
77
import tagsData from "./data/tags.json";
88

@@ -18,7 +18,6 @@ const initialPropsData = {
1818
errorMessage: "Please select between 3 and 8 tags",
1919
fieldHasError: false,
2020
fieldData: tagsData,
21-
size: "small" as FormSize,
2221
optionsLayout: "inline" as OptionsLayout,
2322
styleClassPassthrough: ["testClass"],
2423
theme: "default" as FormUiTheme,

‎app/components/forms/input-range-fancy/InputRangeFancyCore.vue‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</template>
3535

3636
<script setup lang="ts">
37-
import type { FormUiTheme, FormSize, FormWeight } from "~/types/forms/types.forms";
37+
import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
3838
3939
interface Props {
4040
id: string;
@@ -47,7 +47,6 @@ interface Props {
4747
placeholder?: string;
4848
required?: boolean;
4949
theme?: FormUiTheme;
50-
size?: FormSize;
5150
weight?: FormWeight;
5251
fieldHasError?: boolean;
5352
styleClassPassthrough?: string | string[];
@@ -58,7 +57,6 @@ const props = withDefaults(defineProps<Props>(), {
5857
placeholder: "",
5958
required: false,
6059
theme: "default",
61-
size: "medium",
6260
weight: "wght-400",
6361
fieldHasError: false,
6462
styleClassPassthrough: () => [],
@@ -77,15 +75,15 @@ const inputRef = ref<HTMLInputElement | null>(null);
7775
const toolTipWidth = ref(0);
7876
const toolTipLowWidth = ref(0);
7977
const toolTipHighWidth = ref(0);
80-
const toolTipMargin = 20;
78+
// const toolTipMargin = 20;
8179
82-
const toolTipLowContainerEnd = computed(() => {
83-
return Math.floor(((toolTipHighWidth.value + toolTipMargin) / toolTipWidth.value) * 100) + "%";
84-
});
80+
// const toolTipLowContainerEnd = computed(() => {
81+
// return Math.floor(((toolTipHighWidth.value + toolTipMargin) / toolTipWidth.value) * 100) + "%";
82+
// });
8583
86-
const toolTipHighContainerStart = computed(() => {
87-
return Math.floor(((toolTipWidth.value - (toolTipHighWidth.value + toolTipMargin)) / toolTipWidth.value) * 100) + "%";
88-
});
84+
// const toolTipHighContainerStart = computed(() => {
85+
// return Math.floor(((toolTipWidth.value - (toolTipHighWidth.value + toolTipMargin)) / toolTipWidth.value) * 100) + "%";
86+
// });
8987
9088
const lowValue = computed(() => {
9189
return Math.floor(Number(props.max) - Number(highValue.value));
@@ -105,9 +103,6 @@ const updateBoxSizes = () => {
105103
toolTipWidth.value = toolTip.value?.offsetWidth || 0;
106104
toolTipLowWidth.value = toolTipLow.value?.offsetWidth || 0;
107105
toolTipHighWidth.value = toolTipHigh.value?.offsetWidth || 0;
108-
console.log("toolTipWidth", toolTipWidth.value);
109-
console.log("toolTipLowContainerEnd", toolTipLowContainerEnd.value);
110-
console.log("toolTipHighContainerStart", toolTipHighContainerStart.value);
111106
};
112107
113108
onMounted(() => {

‎app/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
:step
1717
:theme
1818
:required
19-
:size
2019
:weight
2120
:field-has-error
2221
/>
@@ -31,7 +30,7 @@
3130
</template>
3231

3332
<script setup lang="ts">
34-
import type { FormUiTheme, FormSize, FormWeight } from "~/types/forms/types.forms";
33+
import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
3534
3635
interface Props {
3736
id: string;
@@ -47,7 +46,6 @@ interface Props {
4746
fieldHasError?: boolean;
4847
required?: boolean;
4948
theme?: FormUiTheme;
50-
size?: FormSize;
5149
weight?: FormWeight;
5250
styleClassPassthrough?: string | string[];
5351
deepCssClassPassthrough?: string;
@@ -59,7 +57,6 @@ const props = withDefaults(defineProps<Props>(), {
5957
fieldHasError: false,
6058
required: false,
6159
theme: "default",
62-
size: "medium",
6360
weight: "wght-400",
6461
styleClassPassthrough: () => [],
6562
deepCssClassPassthrough: "",

‎app/components/forms/input-range/InputRangeCore.vue‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,7 @@
1818
:max
1919
:step
2020
:list="slots.datalist ? name + '-datalist' : ''"
21-
:class="[
22-
'input-range-core',
23-
`input-range--${size}`,
24-
`input-range--${weight}`,
25-
styleClassPassthrough,
26-
{ 'has-markers': slots.markers },
27-
]"
21+
:class="['input-range-core', `input-range--${weight}`, styleClassPassthrough, { 'has-markers': slots.markers }]"
2822
/>
2923

3024
<slot v-if="slots.datalist" name="datalist"></slot>
@@ -36,7 +30,7 @@
3630
</template>
3731

3832
<script setup lang="ts">
39-
import type { FormUiTheme, FormSize, FormWeight } from "~/types/forms/types.forms";
33+
import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
4034
4135
interface Props {
4236
id: string;
@@ -47,7 +41,6 @@ interface Props {
4741
placeholder?: string;
4842
required?: boolean;
4943
theme?: FormUiTheme;
50-
size?: FormSize;
5144
weight?: FormWeight;
5245
fieldHasError?: boolean;
5346
styleClassPassthrough?: string | string[];
@@ -58,7 +51,6 @@ const props = withDefaults(defineProps<Props>(), {
5851
placeholder: "",
5952
required: false,
6053
theme: "default",
61-
size: "default",
6254
weight: "normal",
6355
fieldHasError: false,
6456
styleClassPassthrough: () => [],

‎app/components/forms/input-range/variants/InputRangeDefault.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<slot name="description"></slot>
2222
</template>
2323

24-
<InputRangeCore :id v-model="modelValue" :name :min :max :step :theme :required :size :weight :field-has-error>
24+
<InputRangeCore :id v-model="modelValue" :name :min :max :step :theme :required :weight :field-has-error>
2525
<template v-if="slots.datalist" #datalist>
2626
<slot name="datalist"></slot>
2727
</template>
@@ -67,7 +67,7 @@
6767
</template>
6868

6969
<script setup lang="ts">
70-
import type { FormUiTheme, FormSize, FormWeight } from "~/types/forms/types.forms";
70+
import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
7171
7272
interface Props {
7373
name: string;
@@ -80,7 +80,6 @@ interface Props {
8080
fieldHasError?: boolean;
8181
required?: boolean;
8282
theme?: FormUiTheme;
83-
size?: FormSize;
8483
weight?: FormWeight;
8584
styleClassPassthrough?: string | string[];
8685
deepCssClassPassthrough?: string;
@@ -92,7 +91,6 @@ const props = withDefaults(defineProps<Props>(), {
9291
fieldHasError: false,
9392
required: false,
9493
theme: "default",
95-
size: "medium",
9694
weight: "wght-400",
9795
styleClassPassthrough: () => [],
9896
deepCssClassPassthrough: "",

0 commit comments

Comments
 (0)