srcdev-nuxt-forms 2.1.14 → 2.1.15
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.
|
@@ -156,7 +156,8 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
|
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
.multiple-checkboxes-items {
|
|
159
|
-
display:
|
|
159
|
+
display: grid;
|
|
160
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
160
161
|
gap: 12px;
|
|
161
162
|
margin-top: 12px;
|
|
162
163
|
|
|
@@ -9,6 +9,11 @@
|
|
|
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:check-circle-outline" class="icon" />
|
|
15
|
+
</slot>
|
|
16
|
+
</div>
|
|
12
17
|
</div>
|
|
13
18
|
</template>
|
|
14
19
|
|
|
@@ -99,6 +104,7 @@ const formTheme = computed(() => {
|
|
|
99
104
|
|
|
100
105
|
display: flex;
|
|
101
106
|
align-items: center;
|
|
107
|
+
justify-content: space-between;
|
|
102
108
|
gap: 4px;
|
|
103
109
|
|
|
104
110
|
background-color: var(--_background-color);
|
|
@@ -114,10 +120,12 @@ const formTheme = computed(() => {
|
|
|
114
120
|
|
|
115
121
|
.input-checkbox-radio-button-label {
|
|
116
122
|
display: flex;
|
|
123
|
+
flex-grow: 1;
|
|
117
124
|
color: var(--_label-color);
|
|
118
125
|
width: 100%;
|
|
119
126
|
height: 100%;
|
|
120
127
|
align-items: center;
|
|
128
|
+
justify-content: center;
|
|
121
129
|
margin-block: 8px;
|
|
122
130
|
padding-inline: 8px;
|
|
123
131
|
white-space: var(--_white-space);
|
|
@@ -126,5 +134,13 @@ const formTheme = computed(() => {
|
|
|
126
134
|
cursor: pointer;
|
|
127
135
|
}
|
|
128
136
|
}
|
|
137
|
+
|
|
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);
|
|
144
|
+
}
|
|
129
145
|
}
|
|
130
146
|
</style>
|
package/package.json
CHANGED