srcdev-nuxt-forms 2.1.15 → 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 +14 -1
  2. package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +81 -28
  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();
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>
@@ -11,7 +11,7 @@
11
11
  <label v-else class="input-checkbox-radio-button-label body-normal-semibold" :for="id">{{ label }}</label>
12
12
  <div class="item-icon">
13
13
  <slot name="itemIcon">
14
- <Icon name="material-symbols:check-circle-outline" class="icon" />
14
+ <Icon name="material-symbols:add-2" class="icon" />
15
15
  </slot>
16
16
  </div>
17
17
  </div>
@@ -20,7 +20,7 @@
20
20
  <script setup lang="ts">
21
21
  import propValidators from '../c12/prop-validators';
22
22
 
23
- 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({
24
24
  type: {
25
25
  type: String as PropType<'checkbox' | 'radio'>,
26
26
  required: true,
@@ -78,6 +78,13 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
78
78
  return propValidators.theme.includes(value);
79
79
  },
80
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
+ },
81
88
  });
82
89
 
83
90
  const slots = useSlots();
@@ -89,6 +96,8 @@ const modelValue = defineModel();
89
96
  const formTheme = computed(() => {
90
97
  return fieldHasError ? 'error' : theme;
91
98
  });
99
+
100
+ const flexDirection = ref(direction);
92
101
  </script>
93
102
 
94
103
  <style lang="css">
@@ -101,46 +110,90 @@ const formTheme = computed(() => {
101
110
  --_label-color: var(--theme-checkbox-radio-button-label-default);
102
111
  --_box-shadow: none;
103
112
  --_white-space: wrap;
113
+ --_gap: 4px;
114
+ --_border-radius: 22px;
115
+ --_padding-block: 4px;
116
+ --_padding-inline: 12px;
104
117
 
105
118
  display: flex;
119
+ flex-direction: v-bind(flexDirection);
106
120
  align-items: center;
107
121
  justify-content: space-between;
108
- gap: 4px;
122
+ gap: var(--_gap);
109
123
 
110
124
  background-color: var(--_background-color);
111
- border-radius: 22px;
125
+ border-radius: var(--_border-radius);
112
126
  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
113
127
  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
114
128
  box-shadow: var(--_box-shadow);
115
- padding-inline: 12px;
129
+ padding-block: var(--_padding-block);
130
+ padding-inline: var(--_padding-inline);
116
131
 
117
132
  &.inline {
118
133
  --_white-space: nowrap;
119
134
  }
120
135
 
121
- .input-checkbox-radio-button-label {
122
- display: flex;
123
- flex-grow: 1;
124
- color: var(--_label-color);
125
- width: 100%;
126
- height: 100%;
127
- align-items: center;
128
- justify-content: center;
129
- margin-block: 8px;
130
- padding-inline: 8px;
131
- white-space: var(--_white-space);
132
-
133
- &:hover {
134
- cursor: pointer;
135
- }
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;
136
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);
137
185
 
138
- .item-icon {
139
- display: flex;
140
- place-content: center;
141
- color: var(--_border-color);
142
- height: var(--_checkbox-size);
143
- width: var(--_checkbox-size);
186
+ &:hover {
187
+ cursor: pointer;
144
188
  }
145
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
+ }
146
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.15",
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",