srcdev-nuxt-components 9.0.15 → 9.0.17

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 (112) hide show
  1. package/.claude/settings.json +25 -0
  2. package/.claude/skills/component-aria-landmark.md +68 -0
  3. package/.claude/skills/component-dynamic-slots.md +150 -0
  4. package/.claude/skills/component-export-types.md +61 -0
  5. package/.claude/skills/component-local-style-override.md +126 -0
  6. package/.claude/skills/component-prop-driven-container-layout.md +42 -0
  7. package/.claude/skills/components/accordian-core.md +159 -0
  8. package/.claude/skills/components/contact-section.md +101 -0
  9. package/.claude/skills/components/expanding-panel.md +156 -0
  10. package/.claude/skills/components/eyebrow-text.md +25 -0
  11. package/.claude/skills/components/hero-text.md +25 -0
  12. package/.claude/skills/components/layout-grid-by-cols.md +147 -0
  13. package/.claude/skills/components/layout-row.md +35 -0
  14. package/.claude/skills/components/link-text.md +33 -0
  15. package/.claude/skills/components/page-hero-highlights.md +224 -0
  16. package/.claude/skills/components/services-card.md +28 -0
  17. package/.claude/skills/components/services-section.md +25 -0
  18. package/.claude/skills/components/stepper-list.md +227 -0
  19. package/.claude/skills/css-grid-max-width-gutters.md +67 -0
  20. package/.claude/skills/index.md +15 -3
  21. package/.claude/skills/storybook-add-story.md +60 -0
  22. package/.claude/skills/testing-add-unit-test.md +56 -0
  23. package/app/assets/styles/setup/01.config/index.css +0 -1
  24. package/app/assets/styles/setup/03.theming/default/_dark.css +2 -2
  25. package/app/assets/styles/setup/04.elements/forms/02.typography.css +1 -0
  26. package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-link.css +14 -14
  27. package/app/assets/styles/setup/index.css +0 -1
  28. package/app/components/01.atoms/card/CardCore.vue +92 -0
  29. package/app/components/01.atoms/card/stories/CardCore.stories.ts +132 -0
  30. package/app/components/01.atoms/card/tests/CardCore.spec.ts +207 -0
  31. package/app/components/01.atoms/card/tests/__snapshots__/CardCore.spec.ts.snap +43 -0
  32. package/app/components/01.atoms/content-wrappers/content-columns-2/ContentColumns2.vue +51 -0
  33. package/app/components/01.atoms/content-wrappers/content-columns-2/stories/ContentColumns2.stories.ts +110 -0
  34. package/app/components/01.atoms/content-wrappers/content-columns-2/tests/ContentColumns2.spec.ts +105 -0
  35. package/app/components/01.atoms/content-wrappers/content-columns-2/tests/__snapshots__/ContentColumns2.spec.ts.snap +14 -0
  36. package/app/components/01.atoms/content-wrappers/content-width/ContentWidth.vue +88 -0
  37. package/app/components/01.atoms/content-wrappers/content-width/stories/ContentWidth.stories.ts +362 -0
  38. package/app/components/01.atoms/content-wrappers/content-width/tests/ContentWidth.spec.ts +132 -0
  39. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/LayoutGridByCols.vue +71 -0
  40. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/stories/LayoutGridByCols.stories.ts +219 -0
  41. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/tests/LayoutGridByCols.spec.ts +174 -0
  42. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/tests/__snapshots__/LayoutGrid.spec.ts.snap +36 -0
  43. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/tests/__snapshots__/LayoutGridByCols.spec.ts.snap +36 -0
  44. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/LayoutGridByWidth.vue +70 -0
  45. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/stories/LayoutGridByWidth.stories.ts +220 -0
  46. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/LayoutGridByWidth.spec.ts +174 -0
  47. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGrid.spec.ts.snap +36 -0
  48. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByCols.spec.ts.snap +36 -0
  49. package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByWidth.spec.ts.snap +36 -0
  50. package/app/components/01.atoms/text-blocks/eyebrow-text/stories/EyebrowText.stories.ts +1 -1
  51. package/app/components/01.atoms/text-blocks/hero-text/stories/HeroText.stories.ts +1 -1
  52. package/app/components/01.atoms/text-blocks/link-text/stories/LinkText.stories.ts +1 -1
  53. package/app/components/02.molecules/contact-section/stories/ContactSection.stories.ts +5 -0
  54. package/app/components/02.molecules/contact-section/tests/ContactSection.spec.ts +15 -0
  55. package/app/components/02.molecules/contact-section/tests/ContactSection.vue +25 -17
  56. package/app/components/{accordian → 02.molecules/expandable/accordian}/stories/AccordianCore.stories.ts +1 -1
  57. package/app/components/02.molecules/expandable/expanding-panel/stories/ExpandingPanel.stories.ts +245 -0
  58. package/app/components/02.molecules/expandable/expanding-panel/tests/ExpandingPanel.spec.ts +351 -0
  59. package/app/components/02.molecules/expandable/expanding-panel/tests/__snapshots__/ExpandingPanel.spec.ts.snap +38 -0
  60. package/app/components/02.molecules/navigation/navigation-horizontal/NavigationHorizontal.vue +162 -0
  61. package/app/components/02.molecules/navigation/navigation-horizontal/stories/NavigationHorizontal.stories.ts +373 -0
  62. package/app/components/02.molecules/navigation/navigation-horizontal/tests/NavigationHorizontal.spec.ts +152 -0
  63. package/app/components/02.molecules/navigation/navigation-horizontal/tests/__snapshots__/NavigationHorizontal.spec.ts.snap +17 -0
  64. package/app/components/02.molecules/profile-section/ProfileSection.vue +2 -3
  65. package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts +2 -2
  66. package/app/components/02.molecules/stepper-list/StepperList.vue +131 -92
  67. package/app/components/02.molecules/stepper-list/stories/StepperList.stories.ts +31 -0
  68. package/app/components/02.molecules/stepper-list/tests/StepperList.spec.ts +24 -0
  69. package/app/components/02.molecules/stepper-list/tests/__snapshots__/StepperList.spec.ts.snap +22 -9
  70. package/app/components/03.organisms/image-galleries/slider-gallery/SliderGallery.vue +782 -0
  71. package/app/components/03.organisms/image-galleries/slider-gallery/stories/SliderGallery.stories.ts +233 -0
  72. package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts +226 -0
  73. package/app/components/03.organisms/image-galleries/slider-gallery/tests/__snapshots__/SliderGallery.spec.ts.snap +69 -0
  74. package/app/components/03.organisms/services/services-grids/ServicesCardGrid.vue +1 -1
  75. package/app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue +1 -1
  76. package/app/components/03.organisms/services/services-section/ServicesSection.vue +2 -3
  77. package/app/components/04.templates/page-hero-highlights/PageHeroHighlights.vue +239 -0
  78. package/app/components/04.templates/page-hero-highlights/stories/PageHeroHighlights.stories.ts +404 -0
  79. package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlights.spec.ts +198 -0
  80. package/app/components/04.templates/page-hero-highlights/tests/__snapshots__/PageHeroHighlights.spec.ts.snap +19 -0
  81. package/app/components/container-glow/ContainerGlowCore.vue +20 -27
  82. package/app/components/forms/input-button/InputButtonCore.vue +105 -104
  83. package/app/components/glowing-border/stories/GlowingBorder.stories.ts +21 -21
  84. package/app/composables/useAriaLabelledById.ts +13 -0
  85. package/app/layouts/default.vue +8 -3
  86. package/app/pages/forms/examples/buttons/index.vue +6 -6
  87. package/app/pages/forms/examples/material/checkbox-radio-panels.vue +3 -3
  88. package/app/pages/forms/examples/material/text-fields.vue +607 -610
  89. package/app/pages/page-hero-highlights.vue +81 -0
  90. package/app/pages/ui/{display-card.vue → card-core.vue} +15 -15
  91. package/app/pages/ui/contact-section.vue +1 -1
  92. package/app/pages/ui/container-glow.vue +1 -1
  93. package/app/pages/ui/content-width.vue +126 -0
  94. package/app/pages/ui/glowing-border.vue +9 -9
  95. package/app/pages/ui/navigation/navigation-horizontal.vue +484 -0
  96. package/app/pages/ui/services/services-section/[slug].vue +3 -1
  97. package/app/types/components/index.ts +1 -0
  98. package/app/types/components/navigation-horizontal.d.ts +11 -0
  99. package/package.json +2 -2
  100. package/app/assets/styles/setup/01.config/_basic-resets.css +0 -9
  101. package/app/components/content-columns/TwoColumns.vue +0 -59
  102. package/app/components/content-columns/stories/TwoColumns.stories.ts +0 -561
  103. package/app/components/content-containers/ContentContainer.vue +0 -89
  104. package/app/components/content-containers/stories/ContentContainer.stories.ts +0 -465
  105. package/app/components/content-grid/ContentGrid.vue +0 -85
  106. package/app/components/display-card/DisplayCard.vue +0 -122
  107. package/app/components/image-galleries/SliderGallery.vue +0 -786
  108. package/app/pages/ui/content-container.vue +0 -112
  109. /package/app/components/{accordian → 02.molecules/expandable/accordian}/AccordianCore.vue +0 -0
  110. /package/app/components/{accordian → 02.molecules/expandable/accordian}/tests/AccordianCore.spec.ts +0 -0
  111. /package/app/components/{accordian → 02.molecules/expandable/accordian}/tests/__snapshots__/AccordianCore.spec.ts.snap +0 -0
  112. /package/app/components/{expanding-panel → 02.molecules/expandable/expanding-panel}/ExpandingPanel.vue +0 -0
package/app/pages/forms/examples/material/text-fields.vue CHANGED
@@ -2,619 +2,624 @@
2
2
  <div>
3
3
  <NuxtLayout name="default">
4
4
  <template #layout-content>
5
- <ContentGrid>
6
- <template #slot1>
5
+ <LayoutGridByCols>
6
+ <template #item-0>
7
7
  <div>
8
8
  <h1 class="header-1">Example form</h1>
9
9
  <p class="body-normal">Use 'test@test.com' to trigger server errors</p>
10
10
  </div>
11
11
  </template>
12
- </ContentGrid>
13
- <ContentGrid>
14
- <template #slot1>
15
- <p>Themes switcher</p>
16
- <ul class="flex-group">
17
- <li>
18
- <InputButtonCore
19
- type="button"
20
- :is-pending="false"
21
- button-text="Default"
22
- theme="default"
23
- @click.stop.prevent="swapTheme('default')"
24
- />
25
- </li>
26
- <li>
27
- <InputButtonCore
28
- type="button"
29
- :is-pending="false"
30
- button-text="Success"
31
- theme="success"
32
- @click.stop.prevent="swapTheme('success')"
33
- />
34
- </li>
35
- <li>
36
- <InputButtonCore
37
- type="button"
38
- :is-pending="false"
39
- button-text="Error"
40
- theme="error"
41
- @click.stop.prevent="swapTheme('error')"
42
- />
43
- </li>
44
- <li>
45
- <InputButtonCore
46
- type="button"
47
- :is-pending="false"
48
- button-text="Warning"
49
- theme="warning"
50
- @click.stop.prevent="swapTheme('warning')"
51
- />
52
- </li>
53
- </ul>
54
-
55
- <p>Select type of text input to display</p>
56
- <ul class="flex-group">
57
- <li>
58
- <InputButtonCore
59
- type="button"
60
- button-text="Normal"
61
- theme="default"
62
- @click.stop.prevent="inputVariant = 'normal'"
63
- />
64
- </li>
65
- <li>
66
- <InputButtonCore
67
- type="button"
68
- button-text="Underlined"
69
- theme="default"
70
- @click.stop.prevent="inputVariant = 'underlined'"
71
- />
72
- </li>
73
- </ul>
74
-
75
- <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
76
- <h1 class="page-heading-1 mbe-18">Settings</h1>
77
- <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
78
- <p class="page-body-normal mbe-18">As of 23rd Feb '26 - Tweaking dark mode palette)</p>
79
-
80
- <DisplayThemeSwitch />
81
- </LayoutRow>
82
-
83
- <FormWrapper width="medium">
84
- <template #default>
85
- <ClientOnly>
86
- <form ref="formRef" class="form-wrapper" @submit.stop.prevent="submitForm()">
87
- <div id="aria-live-message" aria-live="assertive"></div>
88
-
89
- <FormField v-if="countriesData !== null" width="wide" :has-gutter="false">
90
- <template #default>
91
- <InputSelectWithLabel
92
- id="countrySelect"
93
- v-model="state.countrySelect"
94
- v-model:field-data="countriesData"
95
- name="countrySelect"
96
- :required="true"
97
- label="Where are you from?"
98
- placeholder="Please select a country"
99
- :error-message="formErrors?.countrySelect?._errors[0] ?? ''"
100
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.countrySelect)"
101
- :theme
102
- :input-variant
103
- >
104
- <template #descriptionText>This is a descriptionText for the message input.</template>
105
- </InputSelectWithLabel>
106
- </template>
107
- </FormField>
108
-
109
- <FormField width="wide" :has-gutter="false">
110
- <template #default>
111
- <InputTextWithLabel
112
- id="emailAddress"
113
- v-model="state.emailAddress"
114
- type="email"
115
- inputmode="email"
116
- :maxlength="fieldMaxLength('email')"
117
- name="emailAddress"
118
- placeholder="eg. name@domain.com"
119
- label="Email address"
120
- :error-message="formErrors?.emailAddress?._errors[0] ?? ''"
121
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.emailAddress)"
122
- :required="true"
123
- :style-class-passthrough="['style-1', 'style-2']"
124
- :theme
125
- :input-variant
126
- >
127
- <template #descriptionText>This is a descriptionText for the email input.</template>
128
- <template #left>
129
- <Icon name="radix-icons:envelope-closed" class="icon" />
130
- </template>
131
- <template #right>
132
- <Icon name="radix-icons:envelope-closed" class="icon" />
133
- </template>
134
- </InputTextWithLabel>
135
- </template>
136
- </FormField>
137
-
138
- <FormField width="wide" :has-gutter="false">
139
- <template #default>
140
- <InputTextWithLabel
141
- id="username"
142
- v-model="state.username"
143
- type="text"
144
- :maxlength="fieldMaxLength('username')"
145
- name="username"
146
- placeholder="eg. JoeBloggs1"
147
- label="Username"
148
- :error-message="formErrors?.username?._errors[0] ?? ''"
149
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.username)"
150
- :required="true"
151
- :style-class-passthrough="['style-1', 'style-2']"
152
- :theme
153
- :input-variant
154
- >
155
- <template #descriptionHtml>
156
- <p class="mbs-4 mbe-8" style="font-weight: 900">
157
- This is a descriptionHtml for the email input.
158
- </p>
159
- </template>
160
- <template #left>
161
- <Icon name="radix-icons:person" class="icon" />
162
- </template>
163
- </InputTextWithLabel>
164
- </template>
165
- </FormField>
166
-
167
- <FormField width="wide" :has-gutter="false">
168
- <template #default>
169
- <InputPasswordWithLabel
170
- id="password"
171
- v-model="state.password"
172
- :maxlength="fieldMaxLength('password')"
173
- name="password"
174
- placeholder="eg. a mixure of numbers and letters"
175
- label="Password"
176
- :error-message="formErrors?.password?._errors[0] ?? ''"
177
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.password)"
178
- :required="true"
179
- :style-class-passthrough="['style-1', 'style-2']"
180
- :theme
181
- :input-variant
182
- >
183
- <template #descriptionText>This is a descriptionText for the password input.</template>
184
- <template #right>
185
- <Icon name="radix-icons:eye-open" class="icon" />
186
- </template>
187
- </InputPasswordWithLabel>
188
- </template>
189
- </FormField>
190
-
191
- <FormField width="wide" :has-gutter="false">
192
- <template #default>
193
- <InputTextareaWithLabel
194
- v-model="state.message"
195
- :maxlength="fieldMaxLength('message')"
196
- name="message"
197
- placeholder="Type your message here"
198
- label="Your message"
199
- :error-message="formErrors?.message?._errors[0] ?? ''"
200
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.message)"
201
- :required="true"
202
- :style-class-passthrough="['style-1', 'style-2']"
203
- :theme
204
- :input-variant
205
- >
206
- <template #descriptionText>This is a descriptionText for the message input.</template>
207
- </InputTextareaWithLabel>
208
- </template>
209
- </FormField>
210
-
211
- <FormField v-if="tagsData !== null" width="wide" :has-gutter="false">
212
- <template #default>
213
- <MultipleCheckboxes
214
- v-model="state.tags"
215
- v-model:field-data="tagsData"
216
- name="tags"
217
- legend="Choose tags (MultipleCheckboxes)"
218
- :required="true"
219
- label="Check between 3 and 8 tags"
220
- placeholder="eg. Type something here"
221
- :is-button="true"
222
- :is-pill="false"
223
- :error-message="formErrors?.tags?._errors[0] ?? ''"
224
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tags)"
225
- options-layout="inline"
226
- :theme
227
- :display-as-disc="false"
228
- >
229
- <template #descriptionText>descriptionText slot</template>
230
- <template #itemIcon>
231
- <Icon name="material-symbols:bookmark-add-outline" class="icon" />
232
- </template>
233
- </MultipleCheckboxes>
234
- </template>
235
- </FormField>
236
-
237
- <FormField width="wide" :has-gutter="false">
238
- <template #default>
239
- <ToggleSwitchWithLabel
240
- v-model="state.darkMode"
241
- name="darkMode"
242
- label="Toggle Dark mode"
243
- true-value="dark"
244
- false-value="light"
245
- :theme
246
- >
247
- <template #description>
248
- <p class="label-description">Light or Dark mode?</p>
249
- </template>
250
- <template #iconOn>
251
- <Icon name="radix-icons:sun" class="icon" />
252
- </template>
253
- <template #iconOff>
254
- <Icon name="radix-icons:moon" class="icon" />
255
- </template>
256
- </ToggleSwitchWithLabel>
257
- </template>
258
- </FormField>
259
-
260
- <FormField width="wide" :has-gutter="false">
261
- <template #default>
262
- <ToggleSwitchWithLabelInline
263
- v-model="state.anotherToggle"
264
- name="anotherToggle"
265
- label="Toggle Dark mode (inline)"
266
- :theme
267
- >
268
- <template #iconOn>
269
- <Icon name="radix-icons:moon" class="icon" />
270
- </template>
271
- <template #iconOff>
272
- <Icon name="radix-icons:sun" class="icon" />
273
- </template>
274
- </ToggleSwitchWithLabelInline>
275
- </template>
276
- </FormField>
277
-
278
- <FormField width="wide" :has-gutter="false">
279
- <template #default>
280
- <ToggleSwitchWithLabel
281
- v-model="state.toggleBoolean"
282
- :error-message="formErrors?.toggleBoolean?._errors[0] ?? ''"
283
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.toggleBoolean)"
284
- name="toggleBoolean"
285
- label="Toggle Dark mode"
286
- :theme
287
- >
288
- <template #descriptionHtml>
289
- <p class="label-description">Toggle some value</p>
290
- </template>
291
- </ToggleSwitchWithLabel>
292
- </template>
293
- </FormField>
294
-
295
- <FormField width="wide" :has-gutter="false">
296
- <template #default>
297
- <InputTextAsNumberWithLabel
298
- v-model.number="state.count2"
299
- :maxlength="fieldMaxLength('count2')"
300
- :min="25"
301
- :max="75"
302
- :step="5"
303
- name="count2"
304
- placeholder="eg. 10"
305
- label="How many things? Between 25 & 75"
306
- :error-message="formErrors?.count2?._errors[0] ?? ''"
307
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.count2)"
308
- :required="true"
309
- :style-class-passthrough="['style-1', 'style-2']"
310
- :theme
311
- >
312
- <template #descriptionHtml>
313
- <p class="label-description">Input type="text" inputmode="numeric"</p>
314
- </template>
315
- <template #left>
316
- <Icon name="gridicons:minus-small" class="icon" />
317
- </template>
318
- <template #right>
319
- <Icon name="gridicons:plus-small" class="icon" />
320
- </template>
321
- </InputTextAsNumberWithLabel>
322
- </template>
323
- </FormField>
324
-
325
- <FormField width="wide" :has-gutter="false">
326
- <template #default>
327
- <InputNumberDefault
328
- v-model.number="state.count"
329
- name="count"
330
- label="How many things? Between 25 & 75 , step 5"
331
- :min="25"
332
- :max="75"
333
- :step="5"
334
- placeholder="eg. What\'s your count?"
335
- :error-message="formErrors?.count?._errors[0] ?? ''"
336
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.count)"
337
- :required="true"
338
- :style-class-passthrough="['count-1', 'count-2']"
339
- :theme
340
- >
341
- <template #descriptionHtml>
342
- <p class="label-description">Input type="number" inputmode="numeric"</p>
343
- </template>
344
- <template #left>
345
- <Icon name="gridicons:minus-small" class="icon" />
346
- </template>
347
- <template #right>
348
- <Icon name="gridicons:plus-small" class="icon" />
349
- </template>
350
- </InputNumberDefault>
351
- </template>
352
- </FormField>
353
-
354
- <FormField v-if="tagsData !== null" width="wide" :has-gutter="false">
355
- <template #default>
356
- <MultipleRadiobuttons
357
- v-model="state.tagsRadio"
358
- v-model:field-data="tagsData"
359
- name="tagsRadio"
360
- legend="Choose tags (as radiobuttons)"
361
- :required="true"
362
- label="Check between 3 and 8 tags"
363
- placeholder="eg. Type something here"
364
- :is-button="true"
365
- :is-pill="true"
366
- :error-message="formErrors?.tagsRadio?._errors[0] ?? ''"
367
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tagsRadio)"
368
- options-layout="inline"
369
- :theme
370
- direction="row-reverse"
371
- >
372
- <template #description>
373
- <p class="label-description">This is description: optionsLayout = 'inline'</p>
374
- </template>
375
- </MultipleRadiobuttons>
376
- </template>
377
- </FormField>
378
-
379
- <FormField
380
- width="wide"
381
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.score)"
382
- :has-gutter="false"
383
- >
384
- <template #default>
385
- <InputRangeDefault
386
- v-model.number="state.score"
387
- name="score"
388
- label="Score between 0 & 100"
389
- :min="0"
390
- :max="100"
391
- :step="10"
392
- placeholder="eg. What\'s your score?"
393
- :error-message="formErrors?.score?._errors[0] ?? ''"
394
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.score)"
395
- :required="true"
396
- :style-class-passthrough="['style-1', 'style-2']"
397
- :theme
398
- >
399
- <template #descriptionText>
400
- <p class="label-description">This is a description of what the user is required to do</p>
401
- </template>
402
- <template #datalist>
403
- <datalist id="score-datalist" class="input-range-datalist">
404
- <option value="0" label="Rubbish!"></option>
405
- <option value="25" label="Below par"></option>
406
- <option value="50" label="Average"></option>
407
- <option value="75" label="Quite good"></option>
408
- <option value="100" label="Excellent"></option>
409
- </datalist>
410
- </template>
411
- <template #left>
412
- <Icon name="gridicons:minus-small" class="icon" />
413
- </template>
414
- <template #right>
415
- <Icon name="gridicons:plus-small" class="icon" />
416
- </template>
417
- </InputRangeDefault>
418
- </template>
419
- </FormField>
420
-
421
- <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
422
- <template #default>
423
- <MultipleRadiobuttons
424
- v-model="state.title"
425
- v-model:field-data="titleData"
426
- name="title"
427
- legend="What is your title"
428
- :required="true"
429
- label="Check one"
430
- placeholder="eg. Type something here"
431
- :error-message="formErrors?.title?._errors[0] ?? ''"
432
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.title)"
433
- options-layout="inline"
434
- :theme
435
- >
436
- <template #checkedIcon>
437
- <Icon name="material-symbols:check-small" class="input-checked-icon" />
438
- </template>
439
- <template #descriptionHtml>
440
- <p class="label-description">
441
- NOTE: Custom check icon set via slot
442
- <br />
443
- This is description: optionsLayout = 'inline'
444
- </p>
445
- </template>
446
- </MultipleRadiobuttons>
447
- </template>
448
- </FormField>
449
-
450
- <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
451
- <template #default>
452
- <MultipleRadiobuttons
453
- v-model="state.otherTitle"
454
- v-model:field-data="titleData"
455
- name="otherTitle"
456
- legend="What is your title"
457
- :required="true"
458
- label="Check one"
459
- placeholder="eg. Type something here"
460
- :error-message="formErrors?.otherTitle?._errors[0] ?? ''"
461
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.otherTitle)"
462
- options-layout="equal-widths"
463
- :theme
464
- >
465
- <template #descriptionHtml>
466
- <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
467
- </template>
468
- </MultipleRadiobuttons>
469
- </template>
470
- </FormField>
471
-
472
- <FormField v-if="citiesData !== null" width="wide" :has-gutter="false">
473
- <template #default>
474
- <MultipleCheckboxes
475
- v-model="state.cities"
476
- v-model:field-data="citiesData"
477
- name="cities"
478
- legend="Choose a location"
479
- :required="true"
480
- label="Check all Cities you like"
481
- placeholder="eg. Type something here"
482
- :error-message="formErrors?.cities?._errors[0] ?? ''"
483
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.cities)"
484
- options-layout="inline"
485
- :theme
486
- >
487
- <template #description>
488
- <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
489
- </template>
490
- </MultipleCheckboxes>
491
- </template>
492
- </FormField>
493
-
494
- <FormField v-if="countriesData !== null" width="wide" :has-gutter="false">
495
- <template #default>
496
- <MultipleCheckboxes
497
- v-model="state.countries"
498
- v-model:field-data="countriesData"
499
- name="countries"
500
- legend="Choose a country"
501
- :required="true"
502
- label="Check all Countries you like"
503
- placeholder="eg. Type something here"
504
- :error-message="formErrors?.countries?._errors[0] ?? ''"
505
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.countries)"
506
- options-layout="equal-widths"
507
- :theme
508
- >
509
- <template #checkedIcon>
510
- <Icon name="material-symbols:circle" class="input-checked-icon" />
511
- </template>
512
- <template #descriptionHtml>
513
- <p class="label-description">
514
- NOTE: Custom chefck icon set via slot
515
- <br />
516
- This is description: optionsLayout = 'inline'
517
- </p>
518
- </template>
519
- </MultipleCheckboxes>
520
- </template>
521
- </FormField>
522
-
523
- <FormField width="wide" :has-gutter="false">
524
- <template #default>
525
- <SingleCheckbox
526
- v-model="state.agreed"
527
- name="agreed"
528
- legend="I agree (label with description)"
529
- label="Click to agree to something"
530
- :required="true"
531
- :error-message="formErrors?.agreed?._errors[0] ?? ''"
532
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.agreed)"
533
- :theme
534
- >
535
- <template #description>
536
- <p class="label-description">
537
- You must
538
- <strong>agree</strong>
539
- to continue
540
- </p>
541
- </template>
542
- </SingleCheckbox>
543
- </template>
544
- </FormField>
545
-
546
- <FormField width="wide" :has-gutter="false">
547
- <template #default>
548
- <SingleCheckbox
549
- v-model="state.agree"
550
- name="agree"
551
- legend="I agree (label no description)"
552
- label="Click to agree to something"
553
- :required="true"
554
- :error-message="formErrors?.agree?._errors[0] ?? ''"
555
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.agree)"
556
- :theme
557
- />
558
- </template>
559
- </FormField>
560
-
561
- <FormField width="wide" :has-gutter="false">
562
- <template #default>
563
- <SingleCheckbox
564
- v-model="state.terms"
565
- name="terms"
566
- legend="Terms and conditions"
567
- :required="true"
568
- :error-message="formErrors?.terms?._errors[0] ?? ''"
569
- :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.terms)"
570
- :theme
571
- >
572
- <template #labelContent>
573
- <span class="body-normal">
574
- You must agree to our
575
- <NuxtLink to="/typography" class="link-normal">terms and conditions</NuxtLink>
576
- to continue
577
- </span>
578
- </template>
579
- </SingleCheckbox>
580
- </template>
581
- </FormField>
582
-
583
- <FormField width="wide" :has-gutter="false">
584
- <template #default>
585
- <InputButtonCore
586
- type="button"
587
- :is-pending="false"
588
- :readonly="zodFormControl.submitDisabled"
589
- button-text="Submit"
590
- :theme
591
- @click.stop.prevent="submitForm()"
592
- />
593
- </template>
594
- </FormField>
595
- </form>
596
- </ClientOnly>
597
- </template>
598
- </FormWrapper>
12
+ </LayoutGridByCols>
13
+ <LayoutGridByCols>
14
+ <template #item-0>
15
+ <div>
16
+ <p>Themes switcher</p>
17
+ <ul class="flex-group">
18
+ <li>
19
+ <InputButtonCore
20
+ type="button"
21
+ :is-pending="false"
22
+ button-text="Default"
23
+ theme="default"
24
+ @click.stop.prevent="swapTheme('default')"
25
+ />
26
+ </li>
27
+ <li>
28
+ <InputButtonCore
29
+ type="button"
30
+ :is-pending="false"
31
+ button-text="Success"
32
+ theme="success"
33
+ @click.stop.prevent="swapTheme('success')"
34
+ />
35
+ </li>
36
+ <li>
37
+ <InputButtonCore
38
+ type="button"
39
+ :is-pending="false"
40
+ button-text="Error"
41
+ theme="error"
42
+ @click.stop.prevent="swapTheme('error')"
43
+ />
44
+ </li>
45
+ <li>
46
+ <InputButtonCore
47
+ type="button"
48
+ :is-pending="false"
49
+ button-text="Warning"
50
+ theme="warning"
51
+ @click.stop.prevent="swapTheme('warning')"
52
+ />
53
+ </li>
54
+ </ul>
55
+
56
+ <p>Select type of text input to display</p>
57
+ <ul class="flex-group">
58
+ <li>
59
+ <InputButtonCore
60
+ type="button"
61
+ button-text="Normal"
62
+ theme="default"
63
+ @click.stop.prevent="inputVariant = 'normal'"
64
+ />
65
+ </li>
66
+ <li>
67
+ <InputButtonCore
68
+ type="button"
69
+ button-text="Underlined"
70
+ theme="default"
71
+ @click.stop.prevent="inputVariant = 'underlined'"
72
+ />
73
+ </li>
74
+ </ul>
75
+
76
+ <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
77
+ <h1 class="page-heading-1 mbe-18">Settings</h1>
78
+ <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
79
+ <DisplayThemeSwitch />
80
+ </LayoutRow>
81
+
82
+ <FormWrapper width="medium">
83
+ <template #default>
84
+ <ClientOnly>
85
+ <form ref="formRef" class="form-wrapper" @submit.stop.prevent="submitForm()">
86
+ <div id="aria-live-message" aria-live="assertive"></div>
87
+
88
+ <FormField v-if="countriesData !== null" width="wide" :has-gutter="false">
89
+ <template #default>
90
+ <InputSelectWithLabel
91
+ id="countrySelect"
92
+ v-model="state.countrySelect"
93
+ v-model:field-data="countriesData"
94
+ name="countrySelect"
95
+ :required="true"
96
+ label="Where are you from?"
97
+ placeholder="Please select a country"
98
+ :error-message="formErrors?.countrySelect?._errors[0] ?? ''"
99
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.countrySelect)"
100
+ :theme
101
+ :input-variant
102
+ >
103
+ <template #descriptionText>This is a descriptionText for the message input.</template>
104
+ </InputSelectWithLabel>
105
+ </template>
106
+ </FormField>
107
+
108
+ <FormField width="wide" :has-gutter="false">
109
+ <template #default>
110
+ <InputTextWithLabel
111
+ id="emailAddress"
112
+ v-model="state.emailAddress"
113
+ type="email"
114
+ inputmode="email"
115
+ :maxlength="fieldMaxLength('email')"
116
+ name="emailAddress"
117
+ placeholder="eg. name@domain.com"
118
+ label="Email address"
119
+ :error-message="formErrors?.emailAddress?._errors[0] ?? ''"
120
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.emailAddress)"
121
+ :required="true"
122
+ :style-class-passthrough="['style-1', 'style-2']"
123
+ :theme
124
+ :input-variant
125
+ >
126
+ <template #descriptionText>This is a descriptionText for the email input.</template>
127
+ <template #left>
128
+ <Icon name="radix-icons:envelope-closed" class="icon" />
129
+ </template>
130
+ <template #right>
131
+ <Icon name="radix-icons:envelope-closed" class="icon" />
132
+ </template>
133
+ </InputTextWithLabel>
134
+ </template>
135
+ </FormField>
136
+
137
+ <FormField width="wide" :has-gutter="false">
138
+ <template #default>
139
+ <InputTextWithLabel
140
+ id="username"
141
+ v-model="state.username"
142
+ type="text"
143
+ :maxlength="fieldMaxLength('username')"
144
+ name="username"
145
+ placeholder="eg. JoeBloggs1"
146
+ label="Username"
147
+ :error-message="formErrors?.username?._errors[0] ?? ''"
148
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.username)"
149
+ :required="true"
150
+ :style-class-passthrough="['style-1', 'style-2']"
151
+ :theme
152
+ :input-variant
153
+ >
154
+ <template #descriptionHtml>
155
+ <p class="mbs-4 mbe-8" style="font-weight: 900">
156
+ This is a descriptionHtml for the email input.
157
+ </p>
158
+ </template>
159
+ <template #left>
160
+ <Icon name="radix-icons:person" class="icon" />
161
+ </template>
162
+ </InputTextWithLabel>
163
+ </template>
164
+ </FormField>
165
+
166
+ <FormField width="wide" :has-gutter="false">
167
+ <template #default>
168
+ <InputPasswordWithLabel
169
+ id="password"
170
+ v-model="state.password"
171
+ :maxlength="fieldMaxLength('password')"
172
+ name="password"
173
+ placeholder="eg. a mixure of numbers and letters"
174
+ label="Password"
175
+ :error-message="formErrors?.password?._errors[0] ?? ''"
176
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.password)"
177
+ :required="true"
178
+ :style-class-passthrough="['style-1', 'style-2']"
179
+ :theme
180
+ :input-variant
181
+ >
182
+ <template #descriptionText>This is a descriptionText for the password input.</template>
183
+ <template #right>
184
+ <Icon name="radix-icons:eye-open" class="icon" />
185
+ </template>
186
+ </InputPasswordWithLabel>
187
+ </template>
188
+ </FormField>
189
+
190
+ <FormField width="wide" :has-gutter="false">
191
+ <template #default>
192
+ <InputTextareaWithLabel
193
+ v-model="state.message"
194
+ :maxlength="fieldMaxLength('message')"
195
+ name="message"
196
+ placeholder="Type your message here"
197
+ label="Your message"
198
+ :error-message="formErrors?.message?._errors[0] ?? ''"
199
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.message)"
200
+ :required="true"
201
+ :style-class-passthrough="['style-1', 'style-2']"
202
+ :theme
203
+ :input-variant
204
+ >
205
+ <template #descriptionText>This is a descriptionText for the message input.</template>
206
+ </InputTextareaWithLabel>
207
+ </template>
208
+ </FormField>
209
+
210
+ <FormField v-if="tagsData !== null" width="wide" :has-gutter="false">
211
+ <template #default>
212
+ <MultipleCheckboxes
213
+ v-model="state.tags"
214
+ v-model:field-data="tagsData"
215
+ name="tags"
216
+ legend="Choose tags (MultipleCheckboxes)"
217
+ :required="true"
218
+ label="Check between 3 and 8 tags"
219
+ placeholder="eg. Type something here"
220
+ :is-button="true"
221
+ :is-pill="false"
222
+ :error-message="formErrors?.tags?._errors[0] ?? ''"
223
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tags)"
224
+ options-layout="inline"
225
+ :theme
226
+ :display-as-disc="false"
227
+ >
228
+ <template #descriptionText>descriptionText slot</template>
229
+ <template #itemIcon>
230
+ <Icon name="material-symbols:bookmark-add-outline" class="icon" />
231
+ </template>
232
+ </MultipleCheckboxes>
233
+ </template>
234
+ </FormField>
235
+
236
+ <FormField width="wide" :has-gutter="false">
237
+ <template #default>
238
+ <ToggleSwitchWithLabel
239
+ v-model="state.darkMode"
240
+ name="darkMode"
241
+ label="Toggle Dark mode"
242
+ true-value="dark"
243
+ false-value="light"
244
+ :theme
245
+ >
246
+ <template #description>
247
+ <p class="label-description">Light or Dark mode?</p>
248
+ </template>
249
+ <template #iconOn>
250
+ <Icon name="radix-icons:sun" class="icon" />
251
+ </template>
252
+ <template #iconOff>
253
+ <Icon name="radix-icons:moon" class="icon" />
254
+ </template>
255
+ </ToggleSwitchWithLabel>
256
+ </template>
257
+ </FormField>
258
+
259
+ <FormField width="wide" :has-gutter="false">
260
+ <template #default>
261
+ <ToggleSwitchWithLabelInline
262
+ v-model="state.anotherToggle"
263
+ name="anotherToggle"
264
+ label="Toggle Dark mode (inline)"
265
+ :theme
266
+ >
267
+ <template #iconOn>
268
+ <Icon name="radix-icons:moon" class="icon" />
269
+ </template>
270
+ <template #iconOff>
271
+ <Icon name="radix-icons:sun" class="icon" />
272
+ </template>
273
+ </ToggleSwitchWithLabelInline>
274
+ </template>
275
+ </FormField>
276
+
277
+ <FormField width="wide" :has-gutter="false">
278
+ <template #default>
279
+ <ToggleSwitchWithLabel
280
+ v-model="state.toggleBoolean"
281
+ :error-message="formErrors?.toggleBoolean?._errors[0] ?? ''"
282
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.toggleBoolean)"
283
+ name="toggleBoolean"
284
+ label="Toggle Dark mode"
285
+ :theme
286
+ >
287
+ <template #descriptionHtml>
288
+ <p class="label-description">Toggle some value</p>
289
+ </template>
290
+ </ToggleSwitchWithLabel>
291
+ </template>
292
+ </FormField>
293
+
294
+ <FormField width="wide" :has-gutter="false">
295
+ <template #default>
296
+ <InputTextAsNumberWithLabel
297
+ v-model.number="state.count2"
298
+ :maxlength="fieldMaxLength('count2')"
299
+ :min="25"
300
+ :max="75"
301
+ :step="5"
302
+ name="count2"
303
+ placeholder="eg. 10"
304
+ label="How many things? Between 25 & 75"
305
+ :error-message="formErrors?.count2?._errors[0] ?? ''"
306
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.count2)"
307
+ :required="true"
308
+ :style-class-passthrough="['style-1', 'style-2']"
309
+ :theme
310
+ >
311
+ <template #descriptionHtml>
312
+ <p class="label-description">Input type="text" inputmode="numeric"</p>
313
+ </template>
314
+ <template #left>
315
+ <Icon name="gridicons:minus-small" class="icon" />
316
+ </template>
317
+ <template #right>
318
+ <Icon name="gridicons:plus-small" class="icon" />
319
+ </template>
320
+ </InputTextAsNumberWithLabel>
321
+ </template>
322
+ </FormField>
323
+
324
+ <FormField width="wide" :has-gutter="false">
325
+ <template #default>
326
+ <InputNumberDefault
327
+ v-model.number="state.count"
328
+ name="count"
329
+ label="How many things? Between 25 & 75 , step 5"
330
+ :min="25"
331
+ :max="75"
332
+ :step="5"
333
+ placeholder="eg. What\'s your count?"
334
+ :error-message="formErrors?.count?._errors[0] ?? ''"
335
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.count)"
336
+ :required="true"
337
+ :style-class-passthrough="['count-1', 'count-2']"
338
+ :theme
339
+ >
340
+ <template #descriptionHtml>
341
+ <p class="label-description">Input type="number" inputmode="numeric"</p>
342
+ </template>
343
+ <template #left>
344
+ <Icon name="gridicons:minus-small" class="icon" />
345
+ </template>
346
+ <template #right>
347
+ <Icon name="gridicons:plus-small" class="icon" />
348
+ </template>
349
+ </InputNumberDefault>
350
+ </template>
351
+ </FormField>
352
+
353
+ <FormField v-if="tagsData !== null" width="wide" :has-gutter="false">
354
+ <template #default>
355
+ <MultipleRadiobuttons
356
+ v-model="state.tagsRadio"
357
+ v-model:field-data="tagsData"
358
+ name="tagsRadio"
359
+ legend="Choose tags (as radiobuttons)"
360
+ :required="true"
361
+ label="Check between 3 and 8 tags"
362
+ placeholder="eg. Type something here"
363
+ :is-button="true"
364
+ :is-pill="true"
365
+ :error-message="formErrors?.tagsRadio?._errors[0] ?? ''"
366
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tagsRadio)"
367
+ options-layout="inline"
368
+ :theme
369
+ direction="row-reverse"
370
+ >
371
+ <template #description>
372
+ <p class="label-description">This is description: optionsLayout = 'inline'</p>
373
+ </template>
374
+ </MultipleRadiobuttons>
375
+ </template>
376
+ </FormField>
377
+
378
+ <FormField
379
+ width="wide"
380
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.score)"
381
+ :has-gutter="false"
382
+ >
383
+ <template #default>
384
+ <InputRangeDefault
385
+ v-model.number="state.score"
386
+ name="score"
387
+ label="Score between 0 & 100"
388
+ :min="0"
389
+ :max="100"
390
+ :step="10"
391
+ placeholder="eg. What\'s your score?"
392
+ :error-message="formErrors?.score?._errors[0] ?? ''"
393
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.score)"
394
+ :required="true"
395
+ :style-class-passthrough="['style-1', 'style-2']"
396
+ :theme
397
+ >
398
+ <template #descriptionText>
399
+ <p class="label-description">This is a description of what the user is required to do</p>
400
+ </template>
401
+ <template #datalist>
402
+ <datalist id="score-datalist" class="input-range-datalist">
403
+ <option value="0" label="Rubbish!"></option>
404
+ <option value="25" label="Below par"></option>
405
+ <option value="50" label="Average"></option>
406
+ <option value="75" label="Quite good"></option>
407
+ <option value="100" label="Excellent"></option>
408
+ </datalist>
409
+ </template>
410
+ <template #left>
411
+ <Icon name="gridicons:minus-small" class="icon" />
412
+ </template>
413
+ <template #right>
414
+ <Icon name="gridicons:plus-small" class="icon" />
415
+ </template>
416
+ </InputRangeDefault>
417
+ </template>
418
+ </FormField>
419
+
420
+ <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
421
+ <template #default>
422
+ <MultipleRadiobuttons
423
+ v-model="state.title"
424
+ v-model:field-data="titleData"
425
+ name="title"
426
+ legend="What is your title"
427
+ :required="true"
428
+ label="Check one"
429
+ placeholder="eg. Type something here"
430
+ :error-message="formErrors?.title?._errors[0] ?? ''"
431
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.title)"
432
+ options-layout="inline"
433
+ :theme
434
+ >
435
+ <template #checkedIcon>
436
+ <Icon name="material-symbols:check-small" class="input-checked-icon" />
437
+ </template>
438
+ <template #descriptionHtml>
439
+ <p class="label-description">
440
+ NOTE: Custom check icon set via slot
441
+ <br />
442
+ This is description: optionsLayout = 'inline'
443
+ </p>
444
+ </template>
445
+ </MultipleRadiobuttons>
446
+ </template>
447
+ </FormField>
448
+
449
+ <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
450
+ <template #default>
451
+ <MultipleRadiobuttons
452
+ v-model="state.otherTitle"
453
+ v-model:field-data="titleData"
454
+ name="otherTitle"
455
+ legend="What is your title"
456
+ :required="true"
457
+ label="Check one"
458
+ placeholder="eg. Type something here"
459
+ :error-message="formErrors?.otherTitle?._errors[0] ?? ''"
460
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.otherTitle)"
461
+ options-layout="equal-widths"
462
+ :theme
463
+ >
464
+ <template #descriptionHtml>
465
+ <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
466
+ </template>
467
+ </MultipleRadiobuttons>
468
+ </template>
469
+ </FormField>
470
+
471
+ <FormField v-if="citiesData !== null" width="wide" :has-gutter="false">
472
+ <template #default>
473
+ <MultipleCheckboxes
474
+ v-model="state.cities"
475
+ v-model:field-data="citiesData"
476
+ name="cities"
477
+ legend="Choose a location"
478
+ :required="true"
479
+ label="Check all Cities you like"
480
+ placeholder="eg. Type something here"
481
+ :error-message="formErrors?.cities?._errors[0] ?? ''"
482
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.cities)"
483
+ options-layout="inline"
484
+ :theme
485
+ >
486
+ <template #description>
487
+ <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
488
+ </template>
489
+ </MultipleCheckboxes>
490
+ </template>
491
+ </FormField>
492
+
493
+ <FormField v-if="countriesData !== null" width="wide" :has-gutter="false">
494
+ <template #default>
495
+ <MultipleCheckboxes
496
+ v-model="state.countries"
497
+ v-model:field-data="countriesData"
498
+ name="countries"
499
+ legend="Choose a country"
500
+ :required="true"
501
+ label="Check all Countries you like"
502
+ placeholder="eg. Type something here"
503
+ :error-message="formErrors?.countries?._errors[0] ?? ''"
504
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.countries)"
505
+ options-layout="equal-widths"
506
+ :theme
507
+ >
508
+ <template #checkedIcon>
509
+ <Icon name="material-symbols:circle" class="input-checked-icon" />
510
+ </template>
511
+ <template #descriptionHtml>
512
+ <p class="label-description">
513
+ NOTE: Custom chefck icon set via slot
514
+ <br />
515
+ This is description: optionsLayout = 'inline'
516
+ </p>
517
+ </template>
518
+ </MultipleCheckboxes>
519
+ </template>
520
+ </FormField>
521
+
522
+ <FormField width="wide" :has-gutter="false">
523
+ <template #default>
524
+ <SingleCheckbox
525
+ v-model="state.agreed"
526
+ name="agreed"
527
+ legend="I agree (label with description)"
528
+ label="Click to agree to something"
529
+ :required="true"
530
+ :error-message="formErrors?.agreed?._errors[0] ?? ''"
531
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.agreed)"
532
+ :theme
533
+ >
534
+ <template #description>
535
+ <p class="label-description">
536
+ You must
537
+ <strong>agree</strong>
538
+ to continue
539
+ </p>
540
+ </template>
541
+ </SingleCheckbox>
542
+ </template>
543
+ </FormField>
544
+
545
+ <FormField width="wide" :has-gutter="false">
546
+ <template #default>
547
+ <SingleCheckbox
548
+ v-model="state.agree"
549
+ name="agree"
550
+ legend="I agree (label no description)"
551
+ label="Click to agree to something"
552
+ :required="true"
553
+ :error-message="formErrors?.agree?._errors[0] ?? ''"
554
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.agree)"
555
+ :theme
556
+ />
557
+ </template>
558
+ </FormField>
559
+
560
+ <FormField width="wide" :has-gutter="false">
561
+ <template #default>
562
+ <SingleCheckbox
563
+ v-model="state.terms"
564
+ name="terms"
565
+ legend="Terms and conditions"
566
+ :required="true"
567
+ :error-message="formErrors?.terms?._errors[0] ?? ''"
568
+ :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.terms)"
569
+ :theme
570
+ >
571
+ <template #labelContent>
572
+ <span class="body-normal">
573
+ You must agree to our
574
+ <NuxtLink to="/typography" class="link-normal">terms and conditions</NuxtLink>
575
+ to continue
576
+ </span>
577
+ </template>
578
+ </SingleCheckbox>
579
+ </template>
580
+ </FormField>
581
+
582
+ <FormField width="wide" :has-gutter="false">
583
+ <template #default>
584
+ <InputButtonCore
585
+ type="button"
586
+ :is-pending="false"
587
+ :readonly="zodFormControl.submitDisabled"
588
+ button-text="Submit"
589
+ :theme
590
+ @click.stop.prevent="submitForm()"
591
+ />
592
+ </template>
593
+ </FormField>
594
+ </form>
595
+ </ClientOnly>
596
+ </template>
597
+ </FormWrapper>
598
+ </div>
599
599
  </template>
600
- <template #slot2>
601
- <ClientOnly>
602
- <p>Client only state</p>
603
- <pre>
600
+ <template #item-1>
601
+ <div>
602
+ <ClientOnly>
603
+ <p>Client only state</p>
604
+ <pre>
604
605
  {{ state }}
605
- </pre>
606
- <p>Client only zodFormControl</p>
607
- <pre>
606
+ </pre
607
+ >
608
+ <p>Client only zodFormControl</p>
609
+ <pre>
608
610
  {{ zodFormControl }}
609
- </pre>
610
- <p>Client only formErrors</p>
611
+ </pre
612
+ >
613
+ <p>Client only formErrors</p>
611
614
 
612
- <pre>
615
+ <pre>
613
616
  {{ formErrors }}
614
- </pre>
615
- </ClientOnly>
617
+ </pre
618
+ >
619
+ </ClientOnly>
620
+ </div>
616
621
  </template>
617
- </ContentGrid>
622
+ </LayoutGridByCols>
618
623
  </template>
619
624
  </NuxtLayout>
620
625
  </div>
@@ -885,14 +890,6 @@ watch(
885
890
  </script>
886
891
 
887
892
  <style lang="css">
888
- .text-fields-page {
889
- .layout-row {
890
- .ui-content-grid {
891
- --_margin-inline: 12px;
892
- }
893
- }
894
- }
895
-
896
893
  .flex-group {
897
894
  align-items: flex-start;
898
895
  display: flex;