srcdev-nuxt-forms 2.1.14 → 2.1.16

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 (4) hide show
  1. package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue +16 -2
  2. package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +87 -18
  3. package/components/forms/input-radio/variants/MultipleRadiobuttons.vue +14 -1
  4. package/package.json +1 -1
package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue CHANGED
@@ -19,10 +19,16 @@
19
19
  :size
20
20
  :optionsLayout
21
21
  :theme
22
+ :direction
22
23
  >
23
24
  <template #checkedIcon>
24
25
  <slot name="checkedIcon"></slot>
25
26
  </template>
27
+ <template #itemIcon>
28
+ <slot name="itemIcon">
29
+ <Icon name="material-symbols:add-2" class="icon" />
30
+ </slot>
31
+ </template>
26
32
  </InputCheckboxRadioButton>
27
33
  <InputCheckboxRadioWithLabel
28
34
  v-else
@@ -52,7 +58,7 @@
52
58
  import propValidators from '../../c12/prop-validators';
53
59
  import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
54
60
 
55
- const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
61
+ const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
56
62
  id: {
57
63
  type: String,
58
64
  required: true,
@@ -122,6 +128,13 @@ const { id, name, legend, label, required, fieldHasError, placeholder, isButton,
122
128
  return propValidators.theme.includes(value);
123
129
  },
124
130
  },
131
+ direction: {
132
+ type: String as PropType<'row' | 'row-reverse'>,
133
+ default: 'row',
134
+ validator(value: string) {
135
+ return ['row', 'row-reverse'].includes(value);
136
+ },
137
+ },
125
138
  });
126
139
 
127
140
  const slots = useSlots();
@@ -156,7 +169,8 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
156
169
  }
157
170
 
158
171
  .multiple-checkboxes-items {
159
- display: flex;
172
+ display: grid;
173
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
160
174
  gap: 12px;
161
175
  margin-top: 12px;
162
176
 
package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
- <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
3
- <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" size="small" :trueValue :falseValue :fieldHasError :theme>
2
+ <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
3
+ <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
4
4
  <template #checkedIcon>
5
5
  <slot name="checkedIcon"></slot>
6
6
  </template>
@@ -9,13 +9,18 @@
9
9
  <slot name="labelContent"></slot>
10
10
  </label>
11
11
  <label v-else class="input-checkbox-radio-button-label body-normal-semibold" :for="id">{{ label }}</label>
12
+ <div class="item-icon">
13
+ <slot name="itemIcon">
14
+ <Icon name="material-symbols:add-2" class="icon" />
15
+ </slot>
16
+ </div>
12
17
  </div>
13
18
  </template>
14
19
 
15
20
  <script setup lang="ts">
16
21
  import propValidators from '../c12/prop-validators';
17
22
 
18
- const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme } = defineProps({
23
+ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, direction } = defineProps({
19
24
  type: {
20
25
  type: String as PropType<'checkbox' | 'radio'>,
21
26
  required: true,
@@ -73,6 +78,13 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
73
78
  return propValidators.theme.includes(value);
74
79
  },
75
80
  },
81
+ direction: {
82
+ type: String as PropType<'row' | 'row-reverse'>,
83
+ default: 'row',
84
+ validator(value: string) {
85
+ return ['row', 'row-reverse'].includes(value);
86
+ },
87
+ },
76
88
  });
77
89
 
78
90
  const slots = useSlots();
@@ -84,6 +96,8 @@ const modelValue = defineModel();
84
96
  const formTheme = computed(() => {
85
97
  return fieldHasError ? 'error' : theme;
86
98
  });
99
+
100
+ const flexDirection = ref(direction);
87
101
  </script>
88
102
 
89
103
  <style lang="css">
@@ -96,35 +110,90 @@ const formTheme = computed(() => {
96
110
  --_label-color: var(--theme-checkbox-radio-button-label-default);
97
111
  --_box-shadow: none;
98
112
  --_white-space: wrap;
113
+ --_gap: 4px;
114
+ --_border-radius: 22px;
115
+ --_padding-block: 4px;
116
+ --_padding-inline: 12px;
99
117
 
100
118
  display: flex;
119
+ flex-direction: v-bind(flexDirection);
101
120
  align-items: center;
102
- gap: 4px;
121
+ justify-content: space-between;
122
+ gap: var(--_gap);
103
123
 
104
124
  background-color: var(--_background-color);
105
- border-radius: 22px;
125
+ border-radius: var(--_border-radius);
106
126
  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
107
127
  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
108
128
  box-shadow: var(--_box-shadow);
109
- padding-inline: 12px;
129
+ padding-block: var(--_padding-block);
130
+ padding-inline: var(--_padding-inline);
110
131
 
111
132
  &.inline {
112
133
  --_white-space: nowrap;
113
134
  }
114
135
 
115
- .input-checkbox-radio-button-label {
116
- display: flex;
117
- color: var(--_label-color);
118
- width: 100%;
119
- height: 100%;
120
- align-items: center;
121
- margin-block: 8px;
122
- padding-inline: 8px;
123
- white-space: var(--_white-space);
136
+ /* Sizes */
137
+ &.x-small {
138
+ --_checkbox-size: 20px;
139
+ --_gap: 10px;
140
+ --_border-radius: 20px;
141
+ --_padding-block: 2px;
142
+ --_padding-inline: 16px;
143
+ }
144
+ &.small {
145
+ --_checkbox-size: 22px;
146
+ --_gap: 12px;
147
+ --_border-radius: 18px;
148
+ --_padding-block: 0px;
149
+ --_padding-inline: 12px;
150
+ }
151
+ &.normal {
152
+ --_checkbox-size: 34px;
153
+ --_gap: 10px;
154
+ --_border-radius: 20px;
155
+ --_padding-block: 4px;
156
+ --_padding-inline: 12px;
157
+ }
158
+ &.medium {
159
+ --_checkbox-size: 34px;
160
+ --_gap: 10px;
161
+ --_border-radius: 20px;
162
+ --_padding-block: 4px;
163
+ --_padding-inline: 12px;
164
+ }
165
+ &.large {
166
+ --_checkbox-size: 34px;
167
+ --_gap: 10px;
168
+ --_border-radius: 20px;
169
+ --_padding-block: 4px;
170
+ --_padding-inline: 12px;
171
+ }
172
+ }
173
+
174
+ .input-checkbox-radio-button-label {
175
+ display: flex;
176
+ flex-grow: 1;
177
+ color: var(--_label-color);
178
+ width: 100%;
179
+ height: 100%;
180
+ align-items: center;
181
+ justify-content: center;
182
+ margin-block: 8px;
183
+ padding-inline: 8px;
184
+ white-space: var(--_white-space);
124
185
 
125
- &:hover {
126
- cursor: pointer;
127
- }
186
+ &:hover {
187
+ cursor: pointer;
128
188
  }
129
189
  }
190
+
191
+ .item-icon {
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ color: var(--_border-color);
196
+ height: var(--_checkbox-size);
197
+ width: var(--_checkbox-size);
198
+ }
130
199
  </style>
package/components/forms/input-radio/variants/MultipleRadiobuttons.vue CHANGED
@@ -19,10 +19,16 @@
19
19
  :size
20
20
  :optionsLayout
21
21
  :theme
22
+ :direction
22
23
  >
23
24
  <template #checkedIcon>
24
25
  <slot name="checkedIcon"></slot>
25
26
  </template>
27
+ <template #itemIcon>
28
+ <slot name="itemIcon">
29
+ <Icon name="material-symbols:add-2" class="icon" />
30
+ </slot>
31
+ </template>
26
32
  </InputCheckboxRadioButton>
27
33
  <InputCheckboxRadioWithLabel
28
34
  v-else
@@ -52,7 +58,7 @@
52
58
  import propValidators from '../../c12/prop-validators';
53
59
  import type { IFormMultipleOptions } from '@/types/types.forms';
54
60
 
55
- const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
61
+ const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
56
62
  id: {
57
63
  type: String,
58
64
  required: true,
@@ -122,6 +128,13 @@ const { id, name, legend, label, required, fieldHasError, placeholder, isButton,
122
128
  return propValidators.theme.includes(value);
123
129
  },
124
130
  },
131
+ direction: {
132
+ type: String as PropType<'row' | 'row-reverse'>,
133
+ default: 'row',
134
+ validator(value: string) {
135
+ return ['row', 'row-reverse'].includes(value);
136
+ },
137
+ },
125
138
  });
126
139
 
127
140
  const slots = useSlots();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.1.14",
4
+ "version": "2.1.16",
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",