srcdev-nuxt-forms 2.1.6 → 2.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/forms/input-checkbox/InputCheckboxWithLabel.vue +7 -14
  2. package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue +7 -27
  3. package/components/forms/input-checkbox/variants/SingleCheckbox.vue +80 -88
  4. package/components/forms/input-radio/InputRadiobuttonWithLabel.vue +7 -14
  5. package/components/forms/input-radio/variants/MultipleRadiobuttons.vue +7 -26
  6. package/package.json +3 -3
package/components/forms/input-checkbox/InputCheckboxWithLabel.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
3
- <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
3
+ <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
4
4
  <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
5
5
  <slot name="labelContent"></slot>
6
6
  </label>
@@ -11,7 +11,7 @@
11
11
  <script setup lang="ts">
12
12
  import propValidators from '../c12/prop-validators';
13
13
 
14
- const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, optionsLayout, styleClassPassthrough, theme } = defineProps({
14
+ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, optionsLayout, styleClassPassthrough, theme } = defineProps({
15
15
  id: {
16
16
  type: String,
17
17
  required: true,
@@ -47,18 +47,11 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, c
47
47
  return propValidators.size.includes(value);
48
48
  },
49
49
  },
50
- checkboxAppearance: {
51
- type: String as PropType<string>,
52
- default: null,
53
- validator(value: string) {
54
- return propValidators.checkboxAppearance.includes(value);
55
- },
56
- },
57
- checkboxStyle: {
58
- type: String as PropType<string>,
59
- default: 'check',
60
- validator(value: string) {
61
- return propValidators.checkboxStyle.includes(value);
50
+ stateIcon: {
51
+ type: Object as PropType<{ checked: string; unchecked: string }>,
52
+ default: {
53
+ checked: 'carbon:checkbox-checked',
54
+ unchecked: 'carbon:checkbox',
62
55
  },
63
56
  },
64
57
  optionsLayout: {
package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue CHANGED
@@ -6,20 +6,7 @@
6
6
  </template>
7
7
  <div class="multiple-checkboxes-items" :class="[optionsLayout]">
8
8
  <template v-for="item in fieldData.data" :key="item.id">
9
- <InputCheckboxWithLabel
10
- :id="item.value"
11
- :name
12
- :required
13
- :label="item.label"
14
- :fieldHasError
15
- v-model="modelValue"
16
- :true-value="item.value"
17
- :size
18
- :checkboxAppearance
19
- :optionsLayout
20
- :checkboxStyle
21
- :theme
22
- />
9
+ <InputCheckboxWithLabel :id="item.value" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
23
10
  </template>
24
11
  </div>
25
12
  <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -32,7 +19,7 @@ import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
32
19
 
33
20
  import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
34
21
 
35
- const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
22
+ const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
36
23
  id: {
37
24
  type: String,
38
25
  required: true,
@@ -87,18 +74,11 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
87
74
  type: Boolean,
88
75
  default: true,
89
76
  },
90
- checkboxAppearance: {
91
- type: String as PropType<string>,
92
- default: null,
93
- validator(value: string) {
94
- return propValidators.checkboxAppearance.includes(value);
95
- },
96
- },
97
- checkboxStyle: {
98
- type: String as PropType<string>,
99
- default: 'check',
100
- validator(value: string) {
101
- return propValidators.checkboxStyle.includes(value);
77
+ stateIcon: {
78
+ type: Object as PropType<{ checked: string; unchecked: string }>,
79
+ default: {
80
+ checked: 'carbon:checkbox-checked',
81
+ unchecked: 'carbon:checkbox',
102
82
  },
103
83
  },
104
84
  styleClassPassthrough: {
package/components/forms/input-checkbox/variants/SingleCheckbox.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <slot name="description"></slot>
6
6
  </template>
7
7
  <div class="single-checkbox-items" :class="[optionsLayout]">
8
- <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :checkboxAppearance :checkboxStyle :theme>
8
+ <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :stateIcon :theme>
9
9
  <template v-if="hasLabelContent" #labelContent>
10
10
  <slot name="labelContent"></slot>
11
11
  </template>
@@ -19,93 +19,85 @@
19
19
  import propValidators from '../../c12/prop-validators';
20
20
  import type { IFormMultipleOptions } from '@/types/types.forms';
21
21
 
22
- const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } =
23
- defineProps({
24
- id: {
25
- type: String,
26
- required: true,
27
- },
28
- name: {
29
- type: String,
30
- required: true,
31
- },
32
- legend: {
33
- type: String,
34
- required: true,
35
- },
36
- label: {
37
- type: String,
38
- required: false,
39
- default: '',
40
- },
41
- errorMessage: {
42
- type: [Object, String],
43
- required: true,
44
- },
45
- required: {
46
- type: Boolean,
47
- default: false,
48
- },
49
- fieldHasError: {
50
- type: Boolean,
51
- default: false,
52
- },
53
- multipleOptions: {
54
- type: Boolean,
55
- default: false,
56
- },
57
- size: {
58
- type: String as PropType<string>,
59
- default: 'medium',
60
- validator(value: string) {
61
- return propValidators.size.includes(value);
62
- },
63
- },
64
- trueValue: {
65
- type: [String, Number, Boolean],
66
- default: true,
67
- },
68
- falseValue: {
69
- type: [String, Number, Boolean],
70
- default: false,
71
- },
72
- optionsLayout: {
73
- type: String as PropType<string>,
74
- default: 'equal-widths',
75
- validator(value: string) {
76
- return propValidators.optionsLayout.includes(value);
77
- },
78
- },
79
- equalCols: {
80
- type: Boolean,
81
- default: true,
82
- },
83
- checkboxAppearance: {
84
- type: String as PropType<string>,
85
- default: null,
86
- validator(value: string) {
87
- return propValidators.checkboxAppearance.includes(value);
88
- },
89
- },
90
- checkboxStyle: {
91
- type: String as PropType<string>,
92
- default: 'check',
93
- validator(value: string) {
94
- return propValidators.checkboxStyle.includes(value);
95
- },
96
- },
97
- styleClassPassthrough: {
98
- type: Array as PropType<string[]>,
99
- default: () => [],
100
- },
101
- theme: {
102
- type: String as PropType<string>,
103
- default: 'primary',
104
- validator(value: string) {
105
- return propValidators.theme.includes(value);
106
- },
107
- },
108
- });
22
+ const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, stateIcon, styleClassPassthrough, theme } = defineProps({
23
+ id: {
24
+ type: String,
25
+ required: true,
26
+ },
27
+ name: {
28
+ type: String,
29
+ required: true,
30
+ },
31
+ legend: {
32
+ type: String,
33
+ required: true,
34
+ },
35
+ label: {
36
+ type: String,
37
+ required: false,
38
+ default: '',
39
+ },
40
+ errorMessage: {
41
+ type: [Object, String],
42
+ required: true,
43
+ },
44
+ required: {
45
+ type: Boolean,
46
+ default: false,
47
+ },
48
+ fieldHasError: {
49
+ type: Boolean,
50
+ default: false,
51
+ },
52
+ multipleOptions: {
53
+ type: Boolean,
54
+ default: false,
55
+ },
56
+ size: {
57
+ type: String as PropType<string>,
58
+ default: 'medium',
59
+ validator(value: string) {
60
+ return propValidators.size.includes(value);
61
+ },
62
+ },
63
+ trueValue: {
64
+ type: [String, Number, Boolean],
65
+ default: true,
66
+ },
67
+ falseValue: {
68
+ type: [String, Number, Boolean],
69
+ default: false,
70
+ },
71
+ optionsLayout: {
72
+ type: String as PropType<string>,
73
+ default: 'equal-widths',
74
+ validator(value: string) {
75
+ return propValidators.optionsLayout.includes(value);
76
+ },
77
+ },
78
+ equalCols: {
79
+ type: Boolean,
80
+ default: true,
81
+ },
82
+ stateIcon: {
83
+ type: Object as PropType<{ checked: string; unchecked: string }>,
84
+ default: {
85
+ checked: 'carbon:checkbox-checked',
86
+ unchecked: 'carbon:checkbox',
87
+ },
88
+ },
89
+ styleClassPassthrough: {
90
+ type: Array as PropType<string[]>,
91
+ default: () => [],
92
+ },
93
+ theme: {
94
+ type: String as PropType<string>,
95
+ default: 'primary',
96
+ validator(value: string) {
97
+ return propValidators.theme.includes(value);
98
+ },
99
+ },
100
+ });
109
101
 
110
102
  const slots = useSlots();
111
103
  const hasDescription = computed(() => slots.description !== undefined);
package/components/forms/input-radio/InputRadiobuttonWithLabel.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="input-radiobutton-with-label" :class="[elementClasses, { error: fieldHasError }]">
3
- <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
3
+ <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
4
4
  <label v-if="hasLabelContent" class="input-radiobutton-label body-normal" :for="id">
5
5
  <slot name="labelContent"></slot>
6
6
  </label>
@@ -11,7 +11,7 @@
11
11
  <script setup lang="ts">
12
12
  import propValidators from '../c12/prop-validators';
13
13
 
14
- const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
14
+ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, styleClassPassthrough, theme } = defineProps({
15
15
  id: {
16
16
  type: String,
17
17
  required: true,
@@ -47,18 +47,11 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, c
47
47
  return propValidators.size.includes(value);
48
48
  },
49
49
  },
50
- checkboxAppearance: {
51
- type: String as PropType<string>,
52
- default: null,
53
- validator(value: string) {
54
- return propValidators.checkboxAppearance.includes(value);
55
- },
56
- },
57
- checkboxStyle: {
58
- type: String as PropType<string>,
59
- default: 'check',
60
- validator(value: string) {
61
- return propValidators.checkboxStyle.includes(value);
50
+ stateIcon: {
51
+ type: Object as PropType<{ checked: string; unchecked: string }>,
52
+ default: {
53
+ checked: 'carbon:radio-button-checked',
54
+ unchecked: 'carbon:radio-button',
62
55
  },
63
56
  },
64
57
  styleClassPassthrough: {
package/components/forms/input-radio/variants/MultipleRadiobuttons.vue CHANGED
@@ -6,19 +6,7 @@
6
6
  </template>
7
7
  <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
8
8
  <template v-for="item in fieldData.data" :key="item.id">
9
- <InputRadiobuttonWithLabel
10
- :id="item.value"
11
- :name="item.name"
12
- :required
13
- :label="item.label"
14
- :fieldHasError
15
- v-model="modelValue"
16
- :true-value="item.value"
17
- :size
18
- :checkboxAppearance
19
- :checkboxStyle
20
- :theme
21
- />
9
+ <InputRadiobuttonWithLabel :id="item.value" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
22
10
  </template>
23
11
  </div>
24
12
  <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -31,7 +19,7 @@ import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
31
19
 
32
20
  import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
33
21
 
34
- const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
22
+ const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
35
23
  id: {
36
24
  type: String,
37
25
  required: true,
@@ -86,18 +74,11 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
86
74
  type: Boolean,
87
75
  default: true,
88
76
  },
89
- checkboxAppearance: {
90
- type: String as PropType<string>,
91
- default: null,
92
- validator(value: string) {
93
- return propValidators.checkboxAppearance.includes(value);
94
- },
95
- },
96
- checkboxStyle: {
97
- type: String as PropType<string>,
98
- default: 'check',
99
- validator(value: string) {
100
- return propValidators.checkboxStyle.includes(value);
77
+ stateIcon: {
78
+ type: Object as PropType<{ checked: string; unchecked: string }>,
79
+ default: {
80
+ checked: 'carbon:radio-button-checked',
81
+ unchecked: 'carbon:radio-button',
101
82
  },
102
83
  },
103
84
  styleClassPassthrough: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.1.6",
4
+ "version": "2.1.7",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -22,7 +22,8 @@
22
22
  ],
23
23
  "devDependencies": {
24
24
  "@nuxt/eslint-config": "0.6.1",
25
- "eslint": "9.14.0",
25
+ "@nuxt/icon": "1.7.5",
26
+ "eslint": "9.15.0",
26
27
  "release-it": "17.10.0",
27
28
  "typescript": "5.6.3"
28
29
  },
@@ -32,7 +33,6 @@
32
33
  "@iconify-json/material-symbols": "1.2.6",
33
34
  "@iconify-json/radix-icons": "1.2.1",
34
35
  "@iconify-json/ri": "1.2.3",
35
- "@nuxt/icon": "1.7.2",
36
36
  "modern-normalize": "3.0.1",
37
37
  "nuxt": "3.14.159",
38
38
  "zod": "3.23.8"