@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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 (227) hide show
  1. package/.github/workflows/playwright.yml +229 -229
  2. package/.github/workflows/static.yml +61 -61
  3. package/.github/workflows/update-snapshots.yml +37 -37
  4. package/.prettierrc.json +8 -8
  5. package/.storybook/main.ts +18 -18
  6. package/.storybook/preview.ts +37 -37
  7. package/.storybook/storyWrapper.vue +18 -18
  8. package/.storybook/withVuetifyTheme.decorator.ts +21 -21
  9. package/App.vue +139 -139
  10. package/README.md +56 -56
  11. package/docs/assets.md +62 -62
  12. package/heroicons.ts +75 -75
  13. package/index.html +19 -19
  14. package/package.json +71 -71
  15. package/playwright.config.ts +48 -48
  16. package/public/background.svg +60 -60
  17. package/public/style.css +187 -187
  18. package/public/technologies.svg +22 -22
  19. package/scripts/check-translations.ts +352 -352
  20. package/src/assets/css/base.css +242 -242
  21. package/src/assets/css/variables.css +176 -176
  22. package/src/components/Accordion/Accordion.css +65 -65
  23. package/src/components/Accordion/AccordionGroup.vue +88 -88
  24. package/src/components/Accordion/AccordionItem.vue +272 -272
  25. package/src/components/Accordion/presets/default.css +4 -4
  26. package/src/components/Accordion/presets/elevated.css +25 -25
  27. package/src/components/Accordion/presets/filled.css +26 -26
  28. package/src/components/Accordion/presets/index.css +5 -5
  29. package/src/components/Accordion/presets/plain.css +34 -34
  30. package/src/components/Appointment/Card/Actions.css +54 -54
  31. package/src/components/Appointment/Card/Actions.vue +99 -99
  32. package/src/components/Appointment/Card/AnamneseNotification.css +20 -20
  33. package/src/components/Appointment/Card/AnamneseNotification.vue +23 -23
  34. package/src/components/Appointment/Card/Card.css +99 -99
  35. package/src/components/Appointment/Card/Card.vue +97 -97
  36. package/src/components/Appointment/Card/Details.css +62 -62
  37. package/src/components/Appointment/Card/Details.vue +44 -44
  38. package/src/components/Audio/Audio.vue +187 -187
  39. package/src/components/Audio/Waveform.vue +118 -118
  40. package/src/components/Banner/Banner.css +29 -29
  41. package/src/components/Banner/Banner.vue +89 -89
  42. package/src/components/Button/Button.vue +257 -257
  43. package/src/components/CheckBox/CheckBox.css +234 -234
  44. package/src/components/CheckBox/Checkbox.vue +184 -184
  45. package/src/components/DateInput/DateInput.css +2 -2
  46. package/src/components/DateInput/DateInput.vue +376 -370
  47. package/src/components/Dialog/Dialog.css +6 -6
  48. package/src/components/Dialog/Dialog.vue +46 -46
  49. package/src/components/EditField/EditField.css +19 -19
  50. package/src/components/EditField/EditField.vue +211 -211
  51. package/src/components/ErrorPage/ErrorPage.css +172 -172
  52. package/src/components/IconBullet/IconBullet.vue +104 -104
  53. package/src/components/IconBullet/IconBulletList.vue +55 -55
  54. package/src/components/Icons/AdvanceAppointments.vue +161 -161
  55. package/src/components/Icons/Audio/CloudFailed.vue +27 -27
  56. package/src/components/Icons/Audio/CloudSaved.vue +28 -28
  57. package/src/components/Icons/Audio/Delete.vue +22 -22
  58. package/src/components/Icons/Audio/Pause.vue +25 -25
  59. package/src/components/Icons/Audio/Play.vue +22 -22
  60. package/src/components/Icons/Calendar.vue +28 -28
  61. package/src/components/Icons/CalendarNotification.vue +137 -137
  62. package/src/components/Icons/Chair.vue +43 -43
  63. package/src/components/Icons/ChairNotification.vue +46 -46
  64. package/src/components/Icons/Circle.vue +66 -66
  65. package/src/components/Icons/FavIcon.vue +69 -69
  66. package/src/components/Icons/FilledCircle.vue +11 -11
  67. package/src/components/Icons/Group3.vue +57 -57
  68. package/src/components/Icons/Play.vue +16 -16
  69. package/src/components/Icons/RingNotification.vue +65 -65
  70. package/src/components/Icons/SolidArrowRight.vue +14 -14
  71. package/src/components/Icons/checkbox.vue +19 -19
  72. package/src/components/Icons/outlineChecked.vue +38 -38
  73. package/src/components/Input/Input.css +234 -234
  74. package/src/components/Input/Input.vue +281 -281
  75. package/src/components/Laboratory/AppointmentCard/AppointmentCard.css +7 -7
  76. package/src/components/Laboratory/AppointmentCard/AppointmentCard.vue +116 -116
  77. package/src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue +81 -81
  78. package/src/components/Laboratory/ChatMessage/ChatMessage.vue +113 -113
  79. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.css +4 -4
  80. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.vue +99 -99
  81. package/src/components/Laboratory/ChatNotification/ChatNotification.vue +130 -130
  82. package/src/components/Laboratory/DocumentCard/DocumentCard.css +3 -3
  83. package/src/components/Laboratory/DocumentCard/DocumentCard.vue +50 -50
  84. package/src/components/Laboratory/DocumentCard/DocumentCardItem.vue +53 -53
  85. package/src/components/Laboratory/InfoCard/InfoCard.vue +162 -162
  86. package/src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue +102 -102
  87. package/src/components/Laboratory/ProgressCircle/ProgressCircle.vue +152 -152
  88. package/src/components/Laboratory/ProgressLinear/ProgressLinear.css +33 -33
  89. package/src/components/Laboratory/ProgressLinear/ProgressLinear.vue +75 -75
  90. package/src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue +92 -92
  91. package/src/components/Laboratory/StatusNotification/StatusNotification.vue +49 -49
  92. package/src/components/Laboratory/TagLabel/TagLabel.vue +126 -126
  93. package/src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue +97 -97
  94. package/src/components/Laboratory/TicketCard/TicketCard.css +3 -3
  95. package/src/components/Laboratory/TicketCard/TicketCard.vue +143 -143
  96. package/src/components/Laboratory/TimeLine/TimeLineEvent.css +18 -18
  97. package/src/components/Laboratory/TimeLine/TimeLineEvent.vue +119 -119
  98. package/src/components/Laboratory/TimeLine/Timeline.css +4 -4
  99. package/src/components/Laboratory/TimeLine/Timeline.vue +30 -30
  100. package/src/components/Loader/Loader.css +78 -78
  101. package/src/components/MaintenanceBanner/MaintenanceBanner.css +353 -353
  102. package/src/components/MaintenanceBanner/MaintenanceBanner.vue +140 -140
  103. package/src/components/MaintenanceBanner/MaintenanceIllustration.vue +54 -54
  104. package/src/components/Modal/Modal.css +5 -5
  105. package/src/components/Modal/Modal.vue +29 -29
  106. package/src/components/NotificationBubble/NotificationBubble.css +4 -4
  107. package/src/components/NotificationBubble/NotificationBubble.vue +90 -90
  108. package/src/components/OtpInput/OtpInput.css +43 -43
  109. package/src/components/OtpInput/OtpInput.vue +181 -181
  110. package/src/components/PhoneInput/PhoneInput.css +151 -126
  111. package/src/components/PhoneInput/PhoneInput.vue +230 -139
  112. package/src/components/RadioGroup/RadioGroup.css +65 -0
  113. package/src/components/RadioGroup/RadioGroup.vue +134 -0
  114. package/src/components/Select/Select.css +172 -172
  115. package/src/components/Select/Select.vue +377 -377
  116. package/src/components/SelectAutocomplete/SelectAutocomplete.css +172 -172
  117. package/src/components/SelectAutocomplete/SelectAutocomplete.vue +414 -414
  118. package/src/components/TextArea/TextArea.css +269 -269
  119. package/src/components/TextArea/TextArea.vue +207 -207
  120. package/src/components/TickBox/TickBox.css +116 -116
  121. package/src/components/TickBox/TickBox.vue +172 -172
  122. package/src/components/Tile/Tile.css +106 -106
  123. package/src/components/Tile/Tile.vue +173 -173
  124. package/src/components/accessibility.css +218 -218
  125. package/src/components/index.ts +110 -109
  126. package/src/constants/iconEnums.ts +3 -3
  127. package/src/i18n/i18n.ts +15 -15
  128. package/src/i18n/locales/de.json +30 -30
  129. package/src/i18n/locales/en.json +30 -30
  130. package/src/index.ts +43 -43
  131. package/src/main.ts +11 -11
  132. package/src/pages/AccordionGroupPage.vue +873 -873
  133. package/src/pages/AllPage.vue +2483 -2365
  134. package/src/pages/SelectPage.vue +1302 -1302
  135. package/src/pages/TilePage.vue +902 -902
  136. package/src/plugins/vuetify.ts +54 -54
  137. package/src/shims-vue.d.ts +30 -30
  138. package/src/utils/index.ts +733 -733
  139. package/src/vite-env.d.ts +1 -1
  140. package/tests/unit/accessibility/component-a11y.spec.ts +657 -657
  141. package/tests/unit/components/Accordion/AccordionGroup.spec.ts +228 -228
  142. package/tests/unit/components/Accordion/AccordionItem.spec.ts +257 -257
  143. package/tests/unit/components/Appointment/AnamneseNotification.spec.ts +176 -176
  144. package/tests/unit/components/Appointment/Card/Actions.spec.ts +436 -436
  145. package/tests/unit/components/Appointment/Card/Card.spec.ts +531 -531
  146. package/tests/unit/components/Appointment/Card/Details.spec.ts +395 -395
  147. package/tests/unit/components/Audio/Audio.spec.ts +403 -403
  148. package/tests/unit/components/Audio/Waveform.spec.ts +483 -483
  149. package/tests/unit/components/Background/Background.spec.ts +177 -177
  150. package/tests/unit/components/Core/AnamneseAnswerDialog.spec.ts +344 -0
  151. package/tests/unit/components/Core/Banner.spec.ts +187 -0
  152. package/tests/unit/components/Core/Button.spec.ts +346 -346
  153. package/tests/unit/components/Core/Checkbox.spec.ts +544 -544
  154. package/tests/unit/components/Core/DateInput.spec.ts +702 -702
  155. package/tests/unit/components/Core/Dialog.spec.ts +448 -448
  156. package/tests/unit/components/Core/EditField.spec.ts +541 -541
  157. package/tests/unit/components/Core/Input.spec.ts +512 -512
  158. package/tests/unit/components/Core/List.spec.ts +163 -0
  159. package/tests/unit/components/Core/ListItem.spec.ts +205 -0
  160. package/tests/unit/components/Core/Modal.spec.ts +518 -518
  161. package/tests/unit/components/Core/NotificationBubble.spec.ts +606 -606
  162. package/tests/unit/components/Core/OtpInput.spec.ts +708 -708
  163. package/tests/unit/components/Core/PhoneInput.spec.ts +757 -619
  164. package/tests/unit/components/Core/RadioGroup.spec.ts +318 -0
  165. package/tests/unit/components/Core/Select.spec.ts +712 -712
  166. package/tests/unit/components/Core/SelectAutocomplete.spec.ts +361 -0
  167. package/tests/unit/components/Core/TextArea.spec.ts +565 -565
  168. package/tests/unit/components/Core/TickBox.spec.ts +836 -836
  169. package/tests/unit/components/Core/Tile.spec.ts +286 -0
  170. package/tests/unit/components/DateInput/DateInput.spec.ts +128 -0
  171. package/tests/unit/components/ErrorPage/ErrorPage.spec.ts +313 -313
  172. package/tests/unit/components/ErrorPage/ErrorPageLogo.spec.ts +153 -153
  173. package/tests/unit/components/IconBullet/IconBullet.spec.ts +356 -356
  174. package/tests/unit/components/IconBullet/IconBulletList.spec.ts +371 -371
  175. package/tests/unit/components/Icons/AdvanceAppointments.spec.ts +186 -186
  176. package/tests/unit/components/Icons/Audio/CloudFailed.spec.ts +108 -108
  177. package/tests/unit/components/Icons/Audio/CloudSaved.spec.ts +149 -149
  178. package/tests/unit/components/Icons/Audio/Delete.spec.ts +158 -158
  179. package/tests/unit/components/Icons/Audio/Pause.spec.ts +208 -208
  180. package/tests/unit/components/Icons/Audio/Play.spec.ts +217 -217
  181. package/tests/unit/components/Icons/CalendarNotification.spec.ts +193 -193
  182. package/tests/unit/components/Icons/Chair.spec.ts +241 -241
  183. package/tests/unit/components/Icons/ChairNotification.spec.ts +318 -318
  184. package/tests/unit/components/Icons/Circle.spec.ts +255 -255
  185. package/tests/unit/components/Icons/FavIcon.spec.ts +259 -259
  186. package/tests/unit/components/Icons/FilledCircle.spec.ts +274 -274
  187. package/tests/unit/components/Icons/Group3.spec.ts +362 -362
  188. package/tests/unit/components/Icons/Logo.spec.ts +229 -229
  189. package/tests/unit/components/Icons/MiniLogo.spec.ts +38 -38
  190. package/tests/unit/components/Icons/RingNotification.spec.ts +400 -400
  191. package/tests/unit/components/Icons/SolidArrowRight.spec.ts +49 -49
  192. package/tests/unit/components/Icons/calendar.spec.ts +293 -293
  193. package/tests/unit/components/Icons/checkbox.spec.ts +315 -315
  194. package/tests/unit/components/Icons/outlineChecked.spec.ts +441 -441
  195. package/tests/unit/components/Icons/play.spec.ts +315 -315
  196. package/tests/unit/components/Laboratory/AppointmentCard.spec.ts +167 -167
  197. package/tests/unit/components/Laboratory/ChatBoxImage.spec.ts +179 -179
  198. package/tests/unit/components/Laboratory/ChatMessage.spec.ts +263 -263
  199. package/tests/unit/components/Laboratory/ChatMessageBadge.spec.ts +282 -282
  200. package/tests/unit/components/Laboratory/ChatNotification.spec.ts +256 -256
  201. package/tests/unit/components/Laboratory/DocumentCard.spec.ts +228 -228
  202. package/tests/unit/components/Laboratory/DocumentCardItem.spec.ts +236 -236
  203. package/tests/unit/components/Laboratory/InfoCard.spec.ts +308 -308
  204. package/tests/unit/components/Laboratory/MainColumnsBar.spec.ts +251 -251
  205. package/tests/unit/components/Laboratory/ProgressCircle.spec.ts +290 -290
  206. package/tests/unit/components/Laboratory/ProgressLinear.spec.ts +275 -275
  207. package/tests/unit/components/Laboratory/SelectionColumnBar.spec.ts +288 -288
  208. package/tests/unit/components/Laboratory/StatusNotification.spec.ts +296 -296
  209. package/tests/unit/components/Laboratory/TagLabel.spec.ts +353 -353
  210. package/tests/unit/components/Laboratory/TagLabelGroup.spec.ts +377 -377
  211. package/tests/unit/components/Laboratory/TicketCard.spec.ts +351 -351
  212. package/tests/unit/components/Laboratory/TimeLineEvent.spec.ts +381 -381
  213. package/tests/unit/components/Laboratory/Timeline.spec.ts +419 -419
  214. package/tests/unit/components/Loader/Loader.spec.ts +197 -197
  215. package/tests/unit/components/MaintenanceBanner/MaintenanceBanner.spec.ts +302 -302
  216. package/tests/unit/constants/iconEnums.spec.ts +39 -39
  217. package/tests/unit/i18n/i18n.spec.ts +88 -88
  218. package/tests/unit/plugins/vuetify.spec.ts +182 -182
  219. package/tests/unit/setup.ts +237 -237
  220. package/tests/unit/src/components/index.spec.ts.skip +192 -192
  221. package/tests/unit/src/index.spec.ts.skip +182 -182
  222. package/tests/unit/src/main.spec.ts +111 -111
  223. package/tests/unit/utils/accessibility.spec.ts +318 -318
  224. package/tests/unit/utils/anamnese.spec.ts +531 -0
  225. package/tsconfig.json +26 -26
  226. package/vite.config.ts +29 -29
  227. package/vitest.config.ts +91 -91
package/src/pages/AllPage.vue CHANGED
@@ -1,2365 +1,2483 @@
1
- <template>
2
- <div class="app">
3
- <div class="element-container">
4
- <!-- Domain Switcher Controls -->
5
- <div class="controls">
6
- <h2>Testing Domain: {{ currentDomain }}</h2>
7
- <div class="button-group">
8
- <button @click="switchToDental" class="control-btn">Switch to Wunschlachen (Dental)</button>
9
- <button @click="switchToCocoon" class="control-btn">Switch to White Cocoon</button>
10
- <button @click="resetDomain" class="control-btn reset">Reset to Auto-Detect</button>
11
- </div>
12
- </div>
13
-
14
- <!-- Button Variations Matrix -->
15
- <div class="matrix-container">
16
- <Background :inline="true">
17
- <table class="variations-table">
18
- <thead>
19
- <tr>
20
- <th>Variation</th>
21
- <th>Wunschlachen (domain-dental)</th>
22
- <th>White Cocoon (domain-cocoon)</th>
23
- </tr>
24
- </thead>
25
- <tbody>
26
- <!-- Flat Variants -->
27
- <tr>
28
- <td class="variation-label">Flat - Default</td>
29
- <td><Button label="Button" variant="flat" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
30
- <td><Button label="Button" variant="flat" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
31
- </tr>
32
- <tr>
33
- <td class="variation-label">Flat - Disabled</td>
34
- <td><Button label="Disabled" variant="flat" :disabled="true" :color="dentalColors.button_disabled_bg" :text-color="dentalColors.button_default_text" /></td>
35
- <td><Button label="Disabled" variant="flat" :disabled="true" :color="cocoonColors.button_disabled_bg" :text-color="cocoonColors.button_default_text" /></td>
36
- </tr>
37
- <tr>
38
- <td class="variation-label">Flat - Loading</td>
39
- <td><Button label="Loading..." variant="flat" :loading="true" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
40
- <td><Button label="Loading..." variant="flat" :loading="true" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
41
- </tr>
42
- <tr>
43
- <td class="variation-label">Flat - With Prepend Icon</td>
44
- <td><Button label="With Icon" variant="flat" prepend-icon="mdi-check" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
45
- <td><Button label="With Icon" variant="flat" prepend-icon="mdi-check" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
46
- </tr>
47
- <tr>
48
- <td class="variation-label">Flat - With Append Icon</td>
49
- <td><Button label="Next" variant="flat" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
50
- <td><Button label="Next" variant="flat" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
51
- </tr>
52
- <tr>
53
- <td class="variation-label">Flat - Both Icons</td>
54
- <td><Button label="Action" variant="flat" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
55
- <td><Button label="Action" variant="flat" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
56
- </tr>
57
-
58
- <!-- Outlined Variants -->
59
- <tr>
60
- <td class="variation-label">Outlined - Default</td>
61
- <td><Button label="Button" variant="outlined" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
62
- <td><Button label="Button" variant="outlined" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
63
- </tr>
64
- <tr>
65
- <td class="variation-label">Outlined - Disabled</td>
66
- <td><Button label="Disabled" variant="outlined" :disabled="true" :color="dentalColors.button_outline_disabled_border" :text-color="dentalColors.button_outline_disabled_text" /></td>
67
- <td><Button label="Disabled" variant="outlined" :disabled="true" :color="cocoonColors.button_outline_disabled_border" :text-color="cocoonColors.button_outline_disabled_text" /></td>
68
- </tr>
69
- <tr>
70
- <td class="variation-label">Outlined - Loading</td>
71
- <td><Button label="Loading..." variant="outlined" :loading="true" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
72
- <td><Button label="Loading..." variant="outlined" :loading="true" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
73
- </tr>
74
- <tr>
75
- <td class="variation-label">Outlined - With Prepend Icon</td>
76
- <td><Button label="With Icon" variant="outlined" prepend-icon="mdi-check" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
77
- <td><Button label="With Icon" variant="outlined" prepend-icon="mdi-check" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
78
- </tr>
79
- <tr>
80
- <td class="variation-label">Outlined - With Append Icon</td>
81
- <td><Button label="Next" variant="outlined" append-icon="mdi-arrow-right" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
82
- <td><Button label="Next" variant="outlined" append-icon="mdi-arrow-right" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
83
- </tr>
84
- <tr>
85
- <td class="variation-label">Outlined - Both Icons</td>
86
- <td><Button label="Action" variant="outlined" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
87
- <td><Button label="Action" variant="outlined" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
88
- </tr>
89
-
90
- <!-- Size Variants (Flat) -->
91
- <tr>
92
- <td class="variation-label">Size - Small</td>
93
- <td><Button label="Small" variant="flat" size="small" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
94
- <td><Button label="Small" variant="flat" size="small" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
95
- </tr>
96
- <tr>
97
- <td class="variation-label">Size - Default</td>
98
- <td><Button label="Default" variant="flat" size="default" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
99
- <td><Button label="Default" variant="flat" size="default" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
100
- </tr>
101
- <tr>
102
- <td class="variation-label">Size - Large</td>
103
- <td><Button label="Large" variant="flat" size="large" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
104
- <td><Button label="Large" variant="flat" size="large" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
105
- </tr>
106
- <tr>
107
- <td class="variation-label">Size - X-Large</td>
108
- <td><Button label="X-Large" variant="flat" size="x-large" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
109
- <td><Button label="X-Large" variant="flat" size="x-large" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
110
- </tr>
111
-
112
- <!-- Size Variants (Outlined) -->
113
- <tr>
114
- <td class="variation-label">Outlined Size - Small</td>
115
- <td><Button label="Small" variant="outlined" size="small" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
116
- <td><Button label="Small" variant="outlined" size="small" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
117
- </tr>
118
- <tr>
119
- <td class="variation-label">Outlined Size - Large</td>
120
- <td><Button label="Large" variant="outlined" size="large" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
121
- <td><Button label="Large" variant="outlined" size="large" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
122
- </tr>
123
-
124
- <!-- Density Variants -->
125
- <tr>
126
- <td class="variation-label">Density - Default</td>
127
- <td><Button label="Default Density" variant="flat" density="default" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
128
- <td><Button label="Default Density" variant="flat" density="default" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
129
- </tr>
130
- <tr>
131
- <td class="variation-label">Density - Comfortable</td>
132
- <td><Button label="Comfortable" variant="flat" density="comfortable" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
133
- <td><Button label="Comfortable" variant="flat" density="comfortable" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
134
- </tr>
135
- <tr>
136
- <td class="variation-label">Density - Compact</td>
137
- <td><Button label="Compact" variant="flat" density="compact" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
138
- <td><Button label="Compact" variant="flat" density="compact" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
139
- </tr>
140
-
141
- <!-- Text Variants -->
142
- <tr>
143
- <td class="variation-label">Text Variant</td>
144
- <td><Button label="Text Button" variant="text" :color="dentalColors.button_default_bg" /></td>
145
- <td><Button label="Text Button" variant="text" :color="cocoonColors.button_default_bg" /></td>
146
- </tr>
147
-
148
- <!-- Tonal Variants -->
149
- <tr>
150
- <td class="variation-label">Tonal Variant</td>
151
- <td><Button label="Tonal Button" variant="tonal" :color="dentalColors.button_default_bg" /></td>
152
- <td><Button label="Tonal Button" variant="tonal" :color="cocoonColors.button_default_bg" /></td>
153
- </tr>
154
-
155
- <!-- Elevated Variants -->
156
- <tr>
157
- <td class="variation-label">Elevated Variant</td>
158
- <td><Button label="Elevated Button" variant="elevated" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
159
- <td><Button label="Elevated Button" variant="elevated" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
160
- </tr>
161
-
162
- <!-- Icon Only Buttons -->
163
- <tr>
164
- <td class="variation-label">Icon Only - Flat</td>
165
- <td><Button label="" variant="flat" prepend-icon="mdi-heart" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
166
- <td><Button label="" variant="flat" prepend-icon="mdi-heart" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
167
- </tr>
168
- <tr>
169
- <td class="variation-label">Icon Only - Outlined</td>
170
- <td><Button label="" variant="outlined" prepend-icon="mdi-heart" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
171
- <td><Button label="" variant="outlined" prepend-icon="mdi-heart" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
172
- </tr>
173
-
174
- <!-- Combined States -->
175
- <tr>
176
- <td class="variation-label">Small + Outlined + Icon</td>
177
- <td><Button label="Action" variant="outlined" size="small" prepend-icon="mdi-cog" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
178
- <td><Button label="Action" variant="outlined" size="small" prepend-icon="mdi-cog" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
179
- </tr>
180
- <tr>
181
- <td class="variation-label">Large + Flat + Both Icons</td>
182
- <td><Button label="Complete" variant="flat" size="large" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
183
- <td><Button label="Complete" variant="flat" size="large" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
184
- </tr>
185
- <tr>
186
- <td class="variation-label">Readonly State</td>
187
- <td><Button label="Readonly" variant="flat" :readonly="true" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
188
- <td><Button label="Readonly" variant="flat" :readonly="true" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
189
- </tr>
190
-
191
- <!-- OTP Input Variants -->
192
- <tr>
193
- <td colspan="3" class="section-header">OTP Input Variants</td>
194
- </tr>
195
- <tr>
196
- <td class="variation-label">OTP - Default</td>
197
- <td>
198
- <ThemeProvider domain="domain-dental">
199
- <OtpInput phone-number="+49 123 456789" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
200
- </ThemeProvider>
201
- </td>
202
- <td>
203
- <ThemeProvider domain="domain-cocoon">
204
- <OtpInput phone-number="+49 123 456789" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
205
- </ThemeProvider>
206
- </td>
207
- </tr>
208
- <tr>
209
- <td class="variation-label">OTP - Loading</td>
210
- <td>
211
- <ThemeProvider domain="domain-dental">
212
- <OtpInput phone-number="+49 123 456789" :loading="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
213
- </ThemeProvider>
214
- </td>
215
- <td>
216
- <ThemeProvider domain="domain-cocoon">
217
- <OtpInput phone-number="+49 123 456789" :loading="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
218
- </ThemeProvider>
219
- </td>
220
- </tr>
221
- <tr>
222
- <td class="variation-label">OTP - Error</td>
223
- <td>
224
- <ThemeProvider domain="domain-dental">
225
- <OtpInput phone-number="+49 123 456789" otp-state="error" message="Invalid code. Please try again." :submit-fn="dummySubmit" :resend-fn="dummyResend" />
226
- </ThemeProvider>
227
- </td>
228
- <td>
229
- <ThemeProvider domain="domain-cocoon">
230
- <OtpInput phone-number="+49 123 456789" otp-state="error" message="Invalid code. Please try again." :submit-fn="dummySubmit" :resend-fn="dummyResend" />
231
- </ThemeProvider>
232
- </td>
233
- </tr>
234
- <tr>
235
- <td class="variation-label">OTP - Success</td>
236
- <td>
237
- <ThemeProvider domain="domain-dental">
238
- <OtpInput phone-number="+49 123 456789" otp-state="success" message="Code verified successfully!" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
239
- </ThemeProvider>
240
- </td>
241
- <td>
242
- <ThemeProvider domain="domain-cocoon">
243
- <OtpInput phone-number="+49 123 456789" otp-state="success" message="Code verified successfully!" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
244
- </ThemeProvider>
245
- </td>
246
- </tr>
247
- <tr>
248
- <td class="variation-label">OTP - Disabled Buttons</td>
249
- <td>
250
- <ThemeProvider domain="domain-dental">
251
- <OtpInput phone-number="+49 123 456789" :disable-submit-btn="true" :disable-resend-btn="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
252
- </ThemeProvider>
253
- </td>
254
- <td>
255
- <ThemeProvider domain="domain-cocoon">
256
- <OtpInput phone-number="+49 123 456789" :disable-submit-btn="true" :disable-resend-btn="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
257
- </ThemeProvider>
258
- </td>
259
- </tr>
260
-
261
- <!-- Checkbox Variants -->
262
- <tr>
263
- <td colspan="3" class="section-header">Checkbox Variants</td>
264
- </tr>
265
- <tr>
266
- <td class="variation-label">Checkbox - Default</td>
267
- <td>
268
- <ThemeProvider domain="domain-dental">
269
- <Checkbox label="Unchecked" value="default" />
270
- </ThemeProvider>
271
- </td>
272
- <td>
273
- <ThemeProvider domain="domain-cocoon">
274
- <Checkbox label="Unchecked" value="default" />
275
- </ThemeProvider>
276
- </td>
277
- </tr>
278
- <tr>
279
- <td class="variation-label">Checkbox - Checked</td>
280
- <td>
281
- <ThemeProvider domain="domain-dental">
282
- <Checkbox label="Checked" value="checked" :model-value="['checked']" />
283
- </ThemeProvider>
284
- </td>
285
- <td>
286
- <ThemeProvider domain="domain-cocoon">
287
- <Checkbox label="Checked" value="checked" :model-value="['checked']" />
288
- </ThemeProvider>
289
- </td>
290
- </tr>
291
- <tr>
292
- <td class="variation-label">Checkbox - Disabled</td>
293
- <td>
294
- <ThemeProvider domain="domain-dental">
295
- <Checkbox label="Disabled" value="disabled" :disabled="true" />
296
- </ThemeProvider>
297
- </td>
298
- <td>
299
- <ThemeProvider domain="domain-cocoon">
300
- <Checkbox label="Disabled" value="disabled" :disabled="true" />
301
- </ThemeProvider>
302
- </td>
303
- </tr>
304
- <tr>
305
- <td class="variation-label">Checkbox - Disabled Checked</td>
306
- <td>
307
- <ThemeProvider domain="domain-dental">
308
- <Checkbox label="Disabled Checked" value="disabled-checked" :disabled="true" :model-value="['disabled-checked']" />
309
- </ThemeProvider>
310
- </td>
311
- <td>
312
- <ThemeProvider domain="domain-cocoon">
313
- <Checkbox label="Disabled Checked" value="disabled-checked" :disabled="true" :model-value="['disabled-checked']" />
314
- </ThemeProvider>
315
- </td>
316
- </tr>
317
- <tr>
318
- <td class="variation-label">Checkbox - Error</td>
319
- <td>
320
- <ThemeProvider domain="domain-dental">
321
- <Checkbox label="Error State" value="error" :error="true" />
322
- </ThemeProvider>
323
- </td>
324
- <td>
325
- <ThemeProvider domain="domain-cocoon">
326
- <Checkbox label="Error State" value="error" :error="true" />
327
- </ThemeProvider>
328
- </td>
329
- </tr>
330
- <tr>
331
- <td class="variation-label">Checkbox - Success</td>
332
- <td>
333
- <ThemeProvider domain="domain-dental">
334
- <Checkbox label="Success State" value="success" :success="true" :model-value="['success']" />
335
- </ThemeProvider>
336
- </td>
337
- <td>
338
- <ThemeProvider domain="domain-cocoon">
339
- <Checkbox label="Success State" value="success" :success="true" :model-value="['success']" />
340
- </ThemeProvider>
341
- </td>
342
- </tr>
343
-
344
- <!-- Input Variants -->
345
- <tr>
346
- <td colspan="3" class="section-header">Input Variants</td>
347
- </tr>
348
- <tr>
349
- <td class="variation-label">Input - Default</td>
350
- <td>
351
- <ThemeProvider domain="domain-dental">
352
- <Input placeholder="Enter text..." label="Name" />
353
- </ThemeProvider>
354
- </td>
355
- <td>
356
- <ThemeProvider domain="domain-cocoon">
357
- <Input placeholder="Enter text..." label="Name" />
358
- </ThemeProvider>
359
- </td>
360
- </tr>
361
- <tr>
362
- <td class="variation-label">Input - Disabled</td>
363
- <td>
364
- <ThemeProvider domain="domain-dental">
365
- <Input placeholder="Disabled input" :disabled="true" />
366
- </ThemeProvider>
367
- </td>
368
- <td>
369
- <ThemeProvider domain="domain-cocoon">
370
- <Input placeholder="Disabled input" :disabled="true" />
371
- </ThemeProvider>
372
- </td>
373
- </tr>
374
- <tr>
375
- <td class="variation-label">Input - Error</td>
376
- <td>
377
- <ThemeProvider domain="domain-dental">
378
- <Input placeholder="Error state" :error="true" hint="This field has an error" :hide-details="false" />
379
- </ThemeProvider>
380
- </td>
381
- <td>
382
- <ThemeProvider domain="domain-cocoon">
383
- <Input placeholder="Error state" :error="true" hint="This field has an error" :hide-details="false" />
384
- </ThemeProvider>
385
- </td>
386
- </tr>
387
- <tr>
388
- <td class="variation-label">Input - Success</td>
389
- <td>
390
- <ThemeProvider domain="domain-dental">
391
- <Input placeholder="Success state" :success="true" />
392
- </ThemeProvider>
393
- </td>
394
- <td>
395
- <ThemeProvider domain="domain-cocoon">
396
- <Input placeholder="Success state" :success="true" />
397
- </ThemeProvider>
398
- </td>
399
- </tr>
400
- <tr>
401
- <td class="variation-label">Input - Warning</td>
402
- <td>
403
- <ThemeProvider domain="domain-dental">
404
- <Input placeholder="Warning state" :warning="true" />
405
- </ThemeProvider>
406
- </td>
407
- <td>
408
- <ThemeProvider domain="domain-cocoon">
409
- <Input placeholder="Warning state" :warning="true" />
410
- </ThemeProvider>
411
- </td>
412
- </tr>
413
- <tr>
414
- <td class="variation-label">Input - With Icons</td>
415
- <td>
416
- <ThemeProvider domain="domain-dental">
417
- <Input placeholder="With icons" prepend-inner-icon="mdi-magnify" append-inner-icon="mdi-check" />
418
- </ThemeProvider>
419
- </td>
420
- <td>
421
- <ThemeProvider domain="domain-cocoon">
422
- <Input placeholder="With icons" prepend-inner-icon="mdi-magnify" append-inner-icon="mdi-check" />
423
- </ThemeProvider>
424
- </td>
425
- </tr>
426
-
427
- <!-- Select Variants -->
428
- <tr>
429
- <td colspan="3" class="section-header">Select Variants</td>
430
- </tr>
431
- <tr>
432
- <td class="variation-label">Select - Default</td>
433
- <td>
434
- <ThemeProvider domain="domain-dental">
435
- <Select placeholder="Select option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}]" />
436
- </ThemeProvider>
437
- </td>
438
- <td>
439
- <ThemeProvider domain="domain-cocoon">
440
- <Select placeholder="Select option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}]" />
441
- </ThemeProvider>
442
- </td>
443
- </tr>
444
- <tr>
445
- <td class="variation-label">Select - Disabled</td>
446
- <td>
447
- <ThemeProvider domain="domain-dental">
448
- <Select placeholder="Disabled select" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
449
- </ThemeProvider>
450
- </td>
451
- <td>
452
- <ThemeProvider domain="domain-cocoon">
453
- <Select placeholder="Disabled select" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
454
- </ThemeProvider>
455
- </td>
456
- </tr>
457
- <tr>
458
- <td class="variation-label">Select - Error</td>
459
- <td>
460
- <ThemeProvider domain="domain-dental">
461
- <Select placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
462
- </ThemeProvider>
463
- </td>
464
- <td>
465
- <ThemeProvider domain="domain-cocoon">
466
- <Select placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
467
- </ThemeProvider>
468
- </td>
469
- </tr>
470
-
471
- <!-- SelectAutocomplete Variants -->
472
- <tr>
473
- <td colspan="3" class="section-header">SelectAutocomplete Variants</td>
474
- </tr>
475
- <tr>
476
- <td class="variation-label">SelectAutocomplete - Default</td>
477
- <td>
478
- <ThemeProvider domain="domain-dental">
479
- <SelectAutocomplete placeholder="Search option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}, {title: 'Option 3', value: '3'}]" />
480
- </ThemeProvider>
481
- </td>
482
- <td>
483
- <ThemeProvider domain="domain-cocoon">
484
- <SelectAutocomplete placeholder="Search option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}, {title: 'Option 3', value: '3'}]" />
485
- </ThemeProvider>
486
- </td>
487
- </tr>
488
- <tr>
489
- <td class="variation-label">SelectAutocomplete - Disabled</td>
490
- <td>
491
- <ThemeProvider domain="domain-dental">
492
- <SelectAutocomplete placeholder="Disabled autocomplete" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
493
- </ThemeProvider>
494
- </td>
495
- <td>
496
- <ThemeProvider domain="domain-cocoon">
497
- <SelectAutocomplete placeholder="Disabled autocomplete" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
498
- </ThemeProvider>
499
- </td>
500
- </tr>
501
- <tr>
502
- <td class="variation-label">SelectAutocomplete - Error</td>
503
- <td>
504
- <ThemeProvider domain="domain-dental">
505
- <SelectAutocomplete placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
506
- </ThemeProvider>
507
- </td>
508
- <td>
509
- <ThemeProvider domain="domain-cocoon">
510
- <SelectAutocomplete placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
511
- </ThemeProvider>
512
- </td>
513
- </tr>
514
-
515
- <!-- List + ListItem Variants -->
516
- <tr>
517
- <td colspan="3" class="section-header">List + ListItem Variants</td>
518
- </tr>
519
- <tr>
520
- <td class="variation-label">List + ListItem - Basic</td>
521
- <td>
522
- <ThemeProvider domain="domain-dental">
523
- <List>
524
- <ListItem title="First Item" subtitle="Subtitle text" />
525
- <ListItem title="Second Item" subtitle="Another subtitle" />
526
- <ListItem title="Third Item" subtitle="One more" />
527
- </List>
528
- </ThemeProvider>
529
- </td>
530
- <td>
531
- <ThemeProvider domain="domain-cocoon">
532
- <List>
533
- <ListItem title="First Item" subtitle="Subtitle text" />
534
- <ListItem title="Second Item" subtitle="Another subtitle" />
535
- <ListItem title="Third Item" subtitle="One more" />
536
- </List>
537
- </ThemeProvider>
538
- </td>
539
- </tr>
540
- <tr>
541
- <td class="variation-label">List + ListItem - With Icons</td>
542
- <td>
543
- <ThemeProvider domain="domain-dental">
544
- <List density="compact">
545
- <ListItem title="Kalender" prepend-icon="mdi-calendar" append-icon="mdi-chevron-right" />
546
- <ListItem title="Patienten" prepend-icon="mdi-account-group" append-icon="mdi-chevron-right" />
547
- <ListItem title="Einstellungen" prepend-icon="mdi-cog" append-icon="mdi-chevron-right" />
548
- </List>
549
- </ThemeProvider>
550
- </td>
551
- <td>
552
- <ThemeProvider domain="domain-cocoon">
553
- <List density="compact">
554
- <ListItem title="Kalender" prepend-icon="mdi-calendar" append-icon="mdi-chevron-right" />
555
- <ListItem title="Patienten" prepend-icon="mdi-account-group" append-icon="mdi-chevron-right" />
556
- <ListItem title="Einstellungen" prepend-icon="mdi-cog" append-icon="mdi-chevron-right" />
557
- </List>
558
- </ThemeProvider>
559
- </td>
560
- </tr>
561
- <tr>
562
- <td class="variation-label">List + ListItem - Nav</td>
563
- <td>
564
- <ThemeProvider domain="domain-dental">
565
- <List density="compact" :nav="true">
566
- <ListItem title="Dashboard" prepend-icon="mdi-view-dashboard" :active="true" color="primary" rounded="lg" />
567
- <ListItem title="Termine" prepend-icon="mdi-calendar-check" rounded="lg" />
568
- <ListItem title="Nachrichten" prepend-icon="mdi-message-text" rounded="lg" />
569
- </List>
570
- </ThemeProvider>
571
- </td>
572
- <td>
573
- <ThemeProvider domain="domain-cocoon">
574
- <List density="compact" :nav="true">
575
- <ListItem title="Dashboard" prepend-icon="mdi-view-dashboard" :active="true" color="primary" rounded="lg" />
576
- <ListItem title="Termine" prepend-icon="mdi-calendar-check" rounded="lg" />
577
- <ListItem title="Nachrichten" prepend-icon="mdi-message-text" rounded="lg" />
578
- </List>
579
- </ThemeProvider>
580
- </td>
581
- </tr>
582
- <tr>
583
- <td class="variation-label">List + ListItem - Disabled</td>
584
- <td>
585
- <ThemeProvider domain="domain-dental">
586
- <List :disabled="true">
587
- <ListItem title="All items disabled" subtitle="Via List prop" prepend-icon="mdi-cancel" />
588
- <ListItem title="Second disabled" subtitle="Inherited from parent" prepend-icon="mdi-cancel" />
589
- </List>
590
- </ThemeProvider>
591
- </td>
592
- <td>
593
- <ThemeProvider domain="domain-cocoon">
594
- <List :disabled="true">
595
- <ListItem title="All items disabled" subtitle="Via List prop" prepend-icon="mdi-cancel" />
596
- <ListItem title="Second disabled" subtitle="Inherited from parent" prepend-icon="mdi-cancel" />
597
- </List>
598
- </ThemeProvider>
599
- </td>
600
- </tr>
601
- <tr>
602
- <td class="variation-label">List + ListItem - Custom Slot</td>
603
- <td>
604
- <ThemeProvider domain="domain-dental">
605
- <List>
606
- <ListItem :title="undefined">
607
- <template #default>
608
- <div style="display: flex; justify-content: space-between; width: 100%;">
609
- <div>
610
- <div style="font-weight: 500;">Weber, Wolfgang</div>
611
- <div style="font-size: 0.75rem; color: #9e9e9e;">#06432</div>
612
- </div>
613
- <span>12.09.2001</span>
614
- </div>
615
- </template>
616
- </ListItem>
617
- </List>
618
- </ThemeProvider>
619
- </td>
620
- <td>
621
- <ThemeProvider domain="domain-cocoon">
622
- <List>
623
- <ListItem :title="undefined">
624
- <template #default>
625
- <div style="display: flex; justify-content: space-between; width: 100%;">
626
- <div>
627
- <div style="font-weight: 500;">Weber, Wolfgang</div>
628
- <div style="font-size: 0.75rem; color: #9e9e9e;">#06432</div>
629
- </div>
630
- <span>12.09.2001</span>
631
- </div>
632
- </template>
633
- </ListItem>
634
- </List>
635
- </ThemeProvider>
636
- </td>
637
- </tr>
638
-
639
- <!-- TextArea Variants -->
640
- <tr>
641
- <td colspan="3" class="section-header">TextArea Variants</td>
642
- </tr>
643
- <tr>
644
- <td class="variation-label">TextArea - Default</td>
645
- <td>
646
- <ThemeProvider domain="domain-dental">
647
- <TextArea placeholder="Enter multi-line text..." />
648
- </ThemeProvider>
649
- </td>
650
- <td>
651
- <ThemeProvider domain="domain-cocoon">
652
- <TextArea placeholder="Enter multi-line text..." />
653
- </ThemeProvider>
654
- </td>
655
- </tr>
656
- <tr>
657
- <td class="variation-label">TextArea - Disabled</td>
658
- <td>
659
- <ThemeProvider domain="domain-dental">
660
- <TextArea placeholder="Disabled textarea" :disabled="true" />
661
- </ThemeProvider>
662
- </td>
663
- <td>
664
- <ThemeProvider domain="domain-cocoon">
665
- <TextArea placeholder="Disabled textarea" :disabled="true" />
666
- </ThemeProvider>
667
- </td>
668
- </tr>
669
- <tr>
670
- <td class="variation-label">TextArea - Error</td>
671
- <td>
672
- <ThemeProvider domain="domain-dental">
673
- <TextArea placeholder="Error state" :error="true" />
674
- </ThemeProvider>
675
- </td>
676
- <td>
677
- <ThemeProvider domain="domain-cocoon">
678
- <TextArea placeholder="Error state" :error="true" />
679
- </ThemeProvider>
680
- </td>
681
- </tr>
682
- <tr>
683
- <td class="variation-label">TextArea - Success</td>
684
- <td>
685
- <ThemeProvider domain="domain-dental">
686
- <TextArea placeholder="Success state" :success="true" />
687
- </ThemeProvider>
688
- </td>
689
- <td>
690
- <ThemeProvider domain="domain-cocoon">
691
- <TextArea placeholder="Success state" :success="true" />
692
- </ThemeProvider>
693
- </td>
694
- </tr>
695
- <tr>
696
- <td class="variation-label">TextArea - Warning</td>
697
- <td>
698
- <ThemeProvider domain="domain-dental">
699
- <TextArea placeholder="Warning state" :warning="true" />
700
- </ThemeProvider>
701
- </td>
702
- <td>
703
- <ThemeProvider domain="domain-cocoon">
704
- <TextArea placeholder="Warning state" :warning="true" />
705
- </ThemeProvider>
706
- </td>
707
- </tr>
708
-
709
- <!-- Loader Variants -->
710
- <tr>
711
- <td colspan="3" class="section-header">Loader Variants</td>
712
- </tr>
713
- <tr>
714
- <td class="variation-label">Loader - Small (24px)</td>
715
- <td><Loader :size="24" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
716
- <td><Loader :size="24" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
717
- </tr>
718
- <tr>
719
- <td class="variation-label">Loader - Medium (40px)</td>
720
- <td><Loader :size="40" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
721
- <td><Loader :size="40" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
722
- </tr>
723
- <tr>
724
- <td class="variation-label">Loader - Large (96px)</td>
725
- <td><Loader :size="96" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
726
- <td><Loader :size="96" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
727
- </tr>
728
-
729
- <!-- DateInput Variants -->
730
- <tr>
731
- <td colspan="3" class="section-header">DateInput Variants</td>
732
- </tr>
733
- <tr>
734
- <td class="variation-label">DateInput - Default</td>
735
- <td>
736
- <ThemeProvider domain="domain-dental">
737
- <DateInput />
738
- </ThemeProvider>
739
- </td>
740
- <td>
741
- <ThemeProvider domain="domain-cocoon">
742
- <DateInput />
743
- </ThemeProvider>
744
- </td>
745
- </tr>
746
- <tr>
747
- <td class="variation-label">DateInput - Disabled</td>
748
- <td>
749
- <ThemeProvider domain="domain-dental">
750
- <DateInput :disabled="true" />
751
- </ThemeProvider>
752
- </td>
753
- <td>
754
- <ThemeProvider domain="domain-cocoon">
755
- <DateInput :disabled="true" />
756
- </ThemeProvider>
757
- </td>
758
- </tr>
759
-
760
- <!-- EditField Variants -->
761
- <tr>
762
- <td colspan="3" class="section-header">EditField Variants</td>
763
- </tr>
764
- <tr>
765
- <td class="variation-label">EditField - Default</td>
766
- <td>
767
- <ThemeProvider domain="domain-dental">
768
- <EditField title="Edit Field" value="Editable text" />
769
- </ThemeProvider>
770
- </td>
771
- <td>
772
- <ThemeProvider domain="domain-cocoon">
773
- <EditField title="Edit Field" value="Editable text" />
774
- </ThemeProvider>
775
- </td>
776
- </tr>
777
- <tr>
778
- <td class="variation-label">EditField - Disabled</td>
779
- <td>
780
- <ThemeProvider domain="domain-dental">
781
- <EditField title="Disabled" value="Not editable" :disabled="true" />
782
- </ThemeProvider>
783
- </td>
784
- <td>
785
- <ThemeProvider domain="domain-cocoon">
786
- <EditField title="Disabled" value="Not editable" :disabled="true" />
787
- </ThemeProvider>
788
- </td>
789
- </tr>
790
-
791
- <!-- PhoneInput Variants -->
792
- <tr>
793
- <td colspan="3" class="section-header">PhoneInput Variants</td>
794
- </tr>
795
- <tr>
796
- <td class="variation-label">PhoneInput - Default</td>
797
- <td>
798
- <ThemeProvider domain="domain-dental">
799
- <PhoneInput placeholder="Telefonnummer" />
800
- </ThemeProvider>
801
- </td>
802
- <td>
803
- <ThemeProvider domain="domain-cocoon">
804
- <PhoneInput placeholder="Telefonnummer" />
805
- </ThemeProvider>
806
- </td>
807
- </tr>
808
- <tr>
809
- <td class="variation-label">PhoneInput - With Custom Countries</td>
810
- <td>
811
- <ThemeProvider domain="domain-dental">
812
- <PhoneInput placeholder="Telefonnummer" :countries-codes="['DE', 'AT', 'CH']" />
813
- </ThemeProvider>
814
- </td>
815
- <td>
816
- <ThemeProvider domain="domain-cocoon">
817
- <PhoneInput placeholder="Telefonnummer" :countries-codes="['DE', 'AT', 'CH']" />
818
- </ThemeProvider>
819
- </td>
820
- </tr>
821
-
822
- <!-- TickBox Variants -->
823
- <tr>
824
- <td colspan="3" class="section-header">TickBox Variants</td>
825
- </tr>
826
- <tr>
827
- <td class="variation-label">TickBox - Unchecked</td>
828
- <td>
829
- <ThemeProvider domain="domain-dental">
830
- <TickBox label="Unchecked" :model-value="false" />
831
- </ThemeProvider>
832
- </td>
833
- <td>
834
- <ThemeProvider domain="domain-cocoon">
835
- <TickBox label="Unchecked" :model-value="false" />
836
- </ThemeProvider>
837
- </td>
838
- </tr>
839
- <tr>
840
- <td class="variation-label">TickBox - Checked</td>
841
- <td>
842
- <ThemeProvider domain="domain-dental">
843
- <TickBox label="Checked" :model-value="true" />
844
- </ThemeProvider>
845
- </td>
846
- <td>
847
- <ThemeProvider domain="domain-cocoon">
848
- <TickBox label="Checked" :model-value="true" />
849
- </ThemeProvider>
850
- </td>
851
- </tr>
852
- <tr>
853
- <td class="variation-label">TickBox - Disabled</td>
854
- <td>
855
- <ThemeProvider domain="domain-dental">
856
- <TickBox label="Disabled" :disabled="true" :model-value="false" />
857
- </ThemeProvider>
858
- </td>
859
- <td>
860
- <ThemeProvider domain="domain-cocoon">
861
- <TickBox label="Disabled" :disabled="true" :model-value="false" />
862
- </ThemeProvider>
863
- </td>
864
- </tr>
865
- <tr>
866
- <td class="variation-label">TickBox - Disabled Checked</td>
867
- <td>
868
- <ThemeProvider domain="domain-dental">
869
- <TickBox label="Disabled Checked" :disabled="true" :model-value="true" />
870
- </ThemeProvider>
871
- </td>
872
- <td>
873
- <ThemeProvider domain="domain-cocoon">
874
- <TickBox label="Disabled Checked" :disabled="true" :model-value="true" />
875
- </ThemeProvider>
876
- </td>
877
- </tr>
878
- <tr>
879
- <td class="variation-label">TickBox - Error</td>
880
- <td>
881
- <ThemeProvider domain="domain-dental">
882
- <TickBox label="Error State" :error="true" :model-value="false" />
883
- </ThemeProvider>
884
- </td>
885
- <td>
886
- <ThemeProvider domain="domain-cocoon">
887
- <TickBox label="Error State" :error="true" :model-value="false" />
888
- </ThemeProvider>
889
- </td>
890
- </tr>
891
- <tr>
892
- <td class="variation-label">TickBox - Success</td>
893
- <td>
894
- <ThemeProvider domain="domain-dental">
895
- <TickBox label="Success State" :success="true" :model-value="true" />
896
- </ThemeProvider>
897
- </td>
898
- <td>
899
- <ThemeProvider domain="domain-cocoon">
900
- <TickBox label="Success State" :success="true" :model-value="true" />
901
- </ThemeProvider>
902
- </td>
903
- </tr>
904
-
905
- <!-- NotificationBubble Variants -->
906
- <tr>
907
- <td colspan="3" class="section-header">NotificationBubble Variants</td>
908
- </tr>
909
- <tr>
910
- <td class="variation-label">NotificationBubble - Info</td>
911
- <td><NotificationBubble count="5" /></td>
912
- <td><NotificationBubble count="5" /></td>
913
- </tr>
914
- <tr>
915
- <td class="variation-label">NotificationBubble - High Count</td>
916
- <td><NotificationBubble count="99+" /></td>
917
- <td><NotificationBubble count="99+" /></td>
918
- </tr>
919
-
920
- <!-- Appointment Card Variants -->
921
- <tr>
922
- <td colspan="3" class="section-header">Appointment Card Variants</td>
923
- </tr>
924
- <tr>
925
- <td class="variation-label">Card - Pending</td>
926
- <td>
927
- <ThemeProvider domain="domain-dental">
928
- <Card :appointment="appointmentPending" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
929
- </ThemeProvider>
930
- </td>
931
- <td>
932
- <ThemeProvider domain="domain-cocoon">
933
- <Card :appointment="appointmentPending" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
934
- </ThemeProvider>
935
- </td>
936
- </tr>
937
- <tr>
938
- <td class="variation-label">Card - Confirmed</td>
939
- <td>
940
- <ThemeProvider domain="domain-dental">
941
- <Card :appointment="appointmentConfirmed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
942
- </ThemeProvider>
943
- </td>
944
- <td>
945
- <ThemeProvider domain="domain-cocoon">
946
- <Card :appointment="appointmentConfirmed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
947
- </ThemeProvider>
948
- </td>
949
- </tr>
950
- <tr>
951
- <td class="variation-label">Card - Completed</td>
952
- <td>
953
- <ThemeProvider domain="domain-dental">
954
- <Card :appointment="appointmentCompleted" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
955
- </ThemeProvider>
956
- </td>
957
- <td>
958
- <ThemeProvider domain="domain-cocoon">
959
- <Card :appointment="appointmentCompleted" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
960
- </ThemeProvider>
961
- </td>
962
- </tr>
963
- <tr>
964
- <td class="variation-label">Card - With Anamnese Notification</td>
965
- <td>
966
- <ThemeProvider domain="domain-dental">
967
- <Card :appointment="appointmentPending" show-actions :show-anamnese-notification="true" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" @fill-anamnese="handleFillAnamnese" />
968
- </ThemeProvider>
969
- </td>
970
- <td>
971
- <ThemeProvider domain="domain-cocoon">
972
- <Card :appointment="appointmentPending" show-actions :show-anamnese-notification="true" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" @fill-anamnese="handleFillAnamnese" />
973
- </ThemeProvider>
974
- </td>
975
- </tr>
976
- <tr>
977
- <td class="variation-label">Card - Cancelled</td>
978
- <td>
979
- <ThemeProvider domain="domain-dental">
980
- <Card :appointment="appointmentCancelled" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
981
- </ThemeProvider>
982
- </td>
983
- <td>
984
- <ThemeProvider domain="domain-cocoon">
985
- <Card :appointment="appointmentCancelled" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
986
- </ThemeProvider>
987
- </td>
988
- </tr>
989
- <tr>
990
- <td class="variation-label">Card - Missed</td>
991
- <td>
992
- <ThemeProvider domain="domain-dental">
993
- <Card :appointment="appointmentMissed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
994
- </ThemeProvider>
995
- </td>
996
- <td>
997
- <ThemeProvider domain="domain-cocoon">
998
- <Card :appointment="appointmentMissed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
999
- </ThemeProvider>
1000
- </td>
1001
- </tr>
1002
-
1003
- <!-- StagingBanner Variants -->
1004
- <tr>
1005
- <td colspan="3" class="section-header">StagingBanner Variants</td>
1006
- </tr>
1007
- <tr>
1008
- <td class="variation-label">StagingBanner - Default</td>
1009
- <td>
1010
- <div class="banner-preview">
1011
- <StagingBanner :show="true" :add-body-padding="false" />
1012
- </div>
1013
- </td>
1014
- <td>
1015
- <div class="banner-preview">
1016
- <StagingBanner :show="true" :add-body-padding="false" />
1017
- </div>
1018
- </td>
1019
- </tr>
1020
- <tr>
1021
- <td class="variation-label">StagingBanner - Custom Text</td>
1022
- <td>
1023
- <div class="banner-preview">
1024
- <StagingBanner :show="true" text="🔧 Development Environment" :add-body-padding="false" />
1025
- </div>
1026
- </td>
1027
- <td>
1028
- <div class="banner-preview">
1029
- <StagingBanner :show="true" text="🔧 Development Environment" :add-body-padding="false" />
1030
- </div>
1031
- </td>
1032
- </tr>
1033
-
1034
- <!-- Dialog Variants -->
1035
- <tr>
1036
- <td colspan="3" class="section-header">Dialog Variants</td>
1037
- </tr>
1038
- <tr>
1039
- <td class="variation-label">Dialog - Default</td>
1040
- <td>
1041
- <Dialog>
1042
- <template #activator="{ openDialog }">
1043
- <Button label="Open Dialog" @click="openDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1044
- </template>
1045
- <template #content="{ closeDialog, titleId }">
1046
- <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1047
- <h2 :id="titleId" style="margin-bottom: 1rem;">Dialog Title</h2>
1048
- <p style="margin-bottom: 1rem;">This is the dialog content.</p>
1049
- <Button label="Close" @click="closeDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1050
- </div>
1051
- </template>
1052
- </Dialog>
1053
- </td>
1054
- <td>
1055
- <Dialog>
1056
- <template #activator="{ openDialog }">
1057
- <Button label="Open Dialog" @click="openDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1058
- </template>
1059
- <template #content="{ closeDialog, titleId }">
1060
- <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1061
- <h2 :id="titleId" style="margin-bottom: 1rem;">Dialog Title</h2>
1062
- <p style="margin-bottom: 1rem;">This is the dialog content.</p>
1063
- <Button label="Close" @click="closeDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1064
- </div>
1065
- </template>
1066
- </Dialog>
1067
- </td>
1068
- </tr>
1069
-
1070
- <!-- Anamnese Answer Dialog Variants -->
1071
- <tr>
1072
- <td colspan="3" class="section-header">Anamnese Answer Dialog</td>
1073
- </tr>
1074
- <tr>
1075
- <td class="variation-label">AnamneseAnswerDialog - With Data</td>
1076
- <td>
1077
- <AnamneseAnswerDialog :pageAnswerGroups="samplePageAnswerGroups" />
1078
- </td>
1079
- <td>
1080
- <AnamneseAnswerDialog :pageAnswerGroups="samplePageAnswerGroups" />
1081
- </td>
1082
- </tr>
1083
- <tr>
1084
- <td class="variation-label">AnamneseAnswerDialog - Empty</td>
1085
- <td>
1086
- <AnamneseAnswerDialog :pageAnswerGroups="[]" />
1087
- </td>
1088
- <td>
1089
- <AnamneseAnswerDialog :pageAnswerGroups="[]" />
1090
- </td>
1091
- </tr>
1092
-
1093
- <!-- Modal Variants -->
1094
- <tr>
1095
- <td colspan="3" class="section-header">Modal Variants</td>
1096
- </tr>
1097
- <tr>
1098
- <td class="variation-label">Modal - Default</td>
1099
- <td>
1100
- <Button label="Open Modal" @click="openDentalModal" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1101
- <Modal ref="dentalModal">
1102
- <template #content="{ closeDialog }">
1103
- <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1104
- <h2 style="margin-bottom: 1rem;">Modal Title</h2>
1105
- <p style="margin-bottom: 1rem;">This is the modal content.</p>
1106
- <Button label="Close" @click="closeDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1107
- </div>
1108
- </template>
1109
- </Modal>
1110
- </td>
1111
- <td>
1112
- <Button label="Open Modal" @click="openCocoonModal" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1113
- <Modal ref="cocoonModal">
1114
- <template #content="{ closeDialog }">
1115
- <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1116
- <h2 style="margin-bottom: 1rem;">Modal Title</h2>
1117
- <p style="margin-bottom: 1rem;">This is the modal content.</p>
1118
- <Button label="Close" @click="closeDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1119
- </div>
1120
- </template>
1121
- </Modal>
1122
- </td>
1123
- </tr>
1124
-
1125
- <!-- ErrorPage Variants (Preview in scaled container) -->
1126
- <tr>
1127
- <td colspan="3" class="section-header">ErrorPage Variants (Scaled Preview)</td>
1128
- </tr>
1129
- <tr>
1130
- <td class="variation-label">ErrorPage - 404</td>
1131
- <td>
1132
- <div class="preview-container">
1133
- <ThemeProvider domain="domain-dental">
1134
- <ErrorPage :status-code="404" redirect-to="/" inline />
1135
- </ThemeProvider>
1136
- </div>
1137
- </td>
1138
- <td>
1139
- <div class="preview-container">
1140
- <ThemeProvider domain="domain-cocoon">
1141
- <ErrorPage :status-code="404" redirect-to="/" inline />
1142
- </ThemeProvider>
1143
- </div>
1144
- </td>
1145
- </tr>
1146
- <tr>
1147
- <td class="variation-label">ErrorPage - 500</td>
1148
- <td>
1149
- <div class="preview-container">
1150
- <ThemeProvider domain="domain-dental">
1151
- <ErrorPage :status-code="500" redirect-to="/" inline />
1152
- </ThemeProvider>
1153
- </div>
1154
- </td>
1155
- <td>
1156
- <div class="preview-container">
1157
- <ThemeProvider domain="domain-cocoon">
1158
- <ErrorPage :status-code="500" redirect-to="/" inline />
1159
- </ThemeProvider>
1160
- </div>
1161
- </td>
1162
- </tr>
1163
-
1164
- <!-- MaintenanceBanner Variants (Preview in scaled container) -->
1165
- <tr>
1166
- <td colspan="3" class="section-header">MaintenanceBanner Variants (Scaled Preview)</td>
1167
- </tr>
1168
- <tr>
1169
- <td class="variation-label">MaintenanceBanner - Default</td>
1170
- <td>
1171
- <div class="preview-container">
1172
- <ThemeProvider domain="domain-dental">
1173
- <MaintenanceBanner inline />
1174
- </ThemeProvider>
1175
- </div>
1176
- </td>
1177
- <td>
1178
- <div class="preview-container">
1179
- <ThemeProvider domain="domain-cocoon">
1180
- <MaintenanceBanner inline />
1181
- </ThemeProvider>
1182
- </div>
1183
- </td>
1184
- </tr>
1185
- <tr>
1186
- <td class="variation-label">MaintenanceBanner - Custom</td>
1187
- <td>
1188
- <div class="preview-container">
1189
- <ThemeProvider domain="domain-dental">
1190
- <MaintenanceBanner
1191
- title="Wartungsarbeiten"
1192
- description="Wir sind bald zurück!"
1193
- phone="+49 30 1234567"
1194
- email="info@example.de"
1195
- button-text="Kontakt aufnehmen"
1196
- inline
1197
- />
1198
- </ThemeProvider>
1199
- </div>
1200
- </td>
1201
- <td>
1202
- <div class="preview-container">
1203
- <ThemeProvider domain="domain-cocoon">
1204
- <MaintenanceBanner
1205
- title="Wartungsarbeiten"
1206
- description="Wir sind bald zurück!"
1207
- phone="+49 30 1234567"
1208
- email="info@example.de"
1209
- button-text="Kontakt aufnehmen"
1210
- inline
1211
- />
1212
- </ThemeProvider>
1213
- </div>
1214
- </td>
1215
- </tr>
1216
-
1217
- <!-- Icon Variants -->
1218
- <tr>
1219
- <td colspan="3" class="section-header">Logo Variants</td>
1220
- </tr>
1221
- <tr>
1222
- <td class="variation-label">Logo - Default Size</td>
1223
- <td>
1224
- <ThemeProvider domain="domain-dental">
1225
- <Logo />
1226
- </ThemeProvider>
1227
- </td>
1228
- <td>
1229
- <ThemeProvider domain="domain-cocoon">
1230
- <Logo />
1231
- </ThemeProvider>
1232
- </td>
1233
- </tr>
1234
- <tr>
1235
- <td class="variation-label">Logo - Large Size</td>
1236
- <td>
1237
- <ThemeProvider domain="domain-dental">
1238
- <Logo width="180" height="45" />
1239
- </ThemeProvider>
1240
- </td>
1241
- <td>
1242
- <ThemeProvider domain="domain-cocoon">
1243
- <Logo width="180" height="45" />
1244
- </ThemeProvider>
1245
- </td>
1246
- </tr>
1247
- <tr>
1248
- <td class="variation-label">Logo - Small Size</td>
1249
- <td>
1250
- <ThemeProvider domain="domain-dental">
1251
- <Logo width="80" height="20" />
1252
- </ThemeProvider>
1253
- </td>
1254
- <td>
1255
- <ThemeProvider domain="domain-cocoon">
1256
- <Logo width="80" height="20" />
1257
- </ThemeProvider>
1258
- </td>
1259
- </tr>
1260
- <tr>
1261
- <td class="variation-label">MiniLogo</td>
1262
- <td>
1263
- <ThemeProvider domain="domain-dental">
1264
- <MiniLogo />
1265
- </ThemeProvider>
1266
- </td>
1267
- <td>
1268
- <ThemeProvider domain="domain-cocoon">
1269
- <MiniLogo />
1270
- </ThemeProvider>
1271
- </td>
1272
- </tr>
1273
- <tr>
1274
- <td class="variation-label">FavIcon</td>
1275
- <td>
1276
- <ThemeProvider domain="domain-dental">
1277
- <FavIcon />
1278
- </ThemeProvider>
1279
- </td>
1280
- <td>
1281
- <ThemeProvider domain="domain-cocoon">
1282
- <FavIcon />
1283
- </ThemeProvider>
1284
- </td>
1285
- </tr>
1286
-
1287
- <!-- Typography Variants -->
1288
- <tr>
1289
- <td colspan="3" class="section-header">Typography Variants</td>
1290
- </tr>
1291
- <tr>
1292
- <td class="variation-label">Heading 1 (h1)</td>
1293
- <td>
1294
- <ThemeProvider domain="domain-dental">
1295
- <h1 style="font-size: 32px;">Heading 1</h1>
1296
- </ThemeProvider>
1297
- </td>
1298
- <td>
1299
- <ThemeProvider domain="domain-cocoon">
1300
- <h1 style="font-size: 32px;">Heading 1</h1>
1301
- </ThemeProvider>
1302
- </td>
1303
- </tr>
1304
- <tr>
1305
- <td class="variation-label">Heading 2 (h2)</td>
1306
- <td>
1307
- <ThemeProvider domain="domain-dental">
1308
- <h2>Heading 2</h2>
1309
- </ThemeProvider>
1310
- </td>
1311
- <td>
1312
- <ThemeProvider domain="domain-cocoon">
1313
- <h2>Heading 2</h2>
1314
- </ThemeProvider>
1315
- </td>
1316
- </tr>
1317
- <tr>
1318
- <td class="variation-label">Heading 3 (h3)</td>
1319
- <td>
1320
- <ThemeProvider domain="domain-dental">
1321
- <h3>Heading 3</h3>
1322
- </ThemeProvider>
1323
- </td>
1324
- <td>
1325
- <ThemeProvider domain="domain-cocoon">
1326
- <h3>Heading 3</h3>
1327
- </ThemeProvider>
1328
- </td>
1329
- </tr>
1330
- <tr>
1331
- <td class="variation-label">Heading 4 (h4)</td>
1332
- <td>
1333
- <ThemeProvider domain="domain-dental">
1334
- <h4>Heading 4</h4>
1335
- </ThemeProvider>
1336
- </td>
1337
- <td>
1338
- <ThemeProvider domain="domain-cocoon">
1339
- <h4>Heading 4</h4>
1340
- </ThemeProvider>
1341
- </td>
1342
- </tr>
1343
- <tr>
1344
- <td class="variation-label">Heading 5 (h5)</td>
1345
- <td>
1346
- <ThemeProvider domain="domain-dental">
1347
- <h5>Heading 5</h5>
1348
- </ThemeProvider>
1349
- </td>
1350
- <td>
1351
- <ThemeProvider domain="domain-cocoon">
1352
- <h5>Heading 5</h5>
1353
- </ThemeProvider>
1354
- </td>
1355
- </tr>
1356
- <tr>
1357
- <td class="variation-label">Heading 6 (h6)</td>
1358
- <td>
1359
- <ThemeProvider domain="domain-dental">
1360
- <h6>Heading 6</h6>
1361
- </ThemeProvider>
1362
- </td>
1363
- <td>
1364
- <ThemeProvider domain="domain-cocoon">
1365
- <h6>Heading 6</h6>
1366
- </ThemeProvider>
1367
- </td>
1368
- </tr>
1369
- <tr>
1370
- <td class="variation-label">Paragraph (p)</td>
1371
- <td>
1372
- <ThemeProvider domain="domain-dental">
1373
- <p>This is a paragraph with sample text to demonstrate the default styling.</p>
1374
- </ThemeProvider>
1375
- </td>
1376
- <td>
1377
- <ThemeProvider domain="domain-cocoon">
1378
- <p>This is a paragraph with sample text to demonstrate the default styling.</p>
1379
- </ThemeProvider>
1380
- </td>
1381
- </tr>
1382
- <tr>
1383
- <td class="variation-label">Paragraph - Large (.p-large)</td>
1384
- <td>
1385
- <ThemeProvider domain="domain-dental">
1386
- <p class="p-large">Large paragraph text for emphasis.</p>
1387
- </ThemeProvider>
1388
- </td>
1389
- <td>
1390
- <ThemeProvider domain="domain-cocoon">
1391
- <p class="p-large">Large paragraph text for emphasis.</p>
1392
- </ThemeProvider>
1393
- </td>
1394
- </tr>
1395
- <tr>
1396
- <td class="variation-label">Paragraph - Medium (.p-medium)</td>
1397
- <td>
1398
- <ThemeProvider domain="domain-dental">
1399
- <p class="p-medium">Medium paragraph text for standard content.</p>
1400
- </ThemeProvider>
1401
- </td>
1402
- <td>
1403
- <ThemeProvider domain="domain-cocoon">
1404
- <p class="p-medium">Medium paragraph text for standard content.</p>
1405
- </ThemeProvider>
1406
- </td>
1407
- </tr>
1408
- <tr>
1409
- <td class="variation-label">Paragraph - Regular (.p-regular)</td>
1410
- <td>
1411
- <ThemeProvider domain="domain-dental">
1412
- <p class="p-regular">Regular paragraph text for body content.</p>
1413
- </ThemeProvider>
1414
- </td>
1415
- <td>
1416
- <ThemeProvider domain="domain-cocoon">
1417
- <p class="p-regular">Regular paragraph text for body content.</p>
1418
- </ThemeProvider>
1419
- </td>
1420
- </tr>
1421
- <tr>
1422
- <td class="variation-label">Paragraph - Small (.p-small)</td>
1423
- <td>
1424
- <ThemeProvider domain="domain-dental">
1425
- <p class="p-small">Small paragraph text for captions and fine print.</p>
1426
- </ThemeProvider>
1427
- </td>
1428
- <td>
1429
- <ThemeProvider domain="domain-cocoon">
1430
- <p class="p-small">Small paragraph text for captions and fine print.</p>
1431
- </ThemeProvider>
1432
- </td>
1433
- </tr>
1434
-
1435
- <!-- Icon Components -->
1436
- <tr>
1437
- <td colspan="3" class="section-header">Icon Components</td>
1438
- </tr>
1439
- <tr>
1440
- <td class="variation-label">Calendar Icon</td>
1441
- <td><ThemeProvider domain="domain-dental"><Calendar /></ThemeProvider></td>
1442
- <td><ThemeProvider domain="domain-cocoon"><Calendar /></ThemeProvider></td>
1443
- </tr>
1444
- <tr>
1445
- <td class="variation-label">Calendar Notification Icon</td>
1446
- <td><ThemeProvider domain="domain-dental"><CalendarNotification /></ThemeProvider></td>
1447
- <td><ThemeProvider domain="domain-cocoon"><CalendarNotification /></ThemeProvider></td>
1448
- </tr>
1449
- <tr>
1450
- <td class="variation-label">Chair Icon</td>
1451
- <td><ThemeProvider domain="domain-dental"><Chair /></ThemeProvider></td>
1452
- <td><ThemeProvider domain="domain-cocoon"><Chair /></ThemeProvider></td>
1453
- </tr>
1454
- <tr>
1455
- <td class="variation-label">Chair Notification Icon</td>
1456
- <td><ThemeProvider domain="domain-dental"><ChairNotification /></ThemeProvider></td>
1457
- <td><ThemeProvider domain="domain-cocoon"><ChairNotification /></ThemeProvider></td>
1458
- </tr>
1459
- <tr>
1460
- <td class="variation-label">Checkbox Icon</td>
1461
- <td><ThemeProvider domain="domain-dental"><checkbox /></ThemeProvider></td>
1462
- <td><ThemeProvider domain="domain-cocoon"><checkbox /></ThemeProvider></td>
1463
- </tr>
1464
- <tr>
1465
- <td class="variation-label">Circle Icon</td>
1466
- <td><ThemeProvider domain="domain-dental"><Circle /></ThemeProvider></td>
1467
- <td><ThemeProvider domain="domain-cocoon"><Circle /></ThemeProvider></td>
1468
- </tr>
1469
- <tr>
1470
- <td class="variation-label">Filled Circle Icon</td>
1471
- <td><ThemeProvider domain="domain-dental"><FilledCircle /></ThemeProvider></td>
1472
- <td><ThemeProvider domain="domain-cocoon"><FilledCircle /></ThemeProvider></td>
1473
- </tr>
1474
- <tr>
1475
- <td class="variation-label">Outline Checked Icon</td>
1476
- <td><ThemeProvider domain="domain-dental"><outlineChecked /></ThemeProvider></td>
1477
- <td><ThemeProvider domain="domain-cocoon"><outlineChecked /></ThemeProvider></td>
1478
- </tr>
1479
- <tr>
1480
- <td class="variation-label">Play Icon</td>
1481
- <td><ThemeProvider domain="domain-dental"><Play /></ThemeProvider></td>
1482
- <td><ThemeProvider domain="domain-cocoon"><Play /></ThemeProvider></td>
1483
- </tr>
1484
- <tr>
1485
- <td class="variation-label">Ring Notification Icon</td>
1486
- <td><ThemeProvider domain="domain-dental"><RingNotification /></ThemeProvider></td>
1487
- <td><ThemeProvider domain="domain-cocoon"><RingNotification /></ThemeProvider></td>
1488
- </tr>
1489
- <tr>
1490
- <td class="variation-label">Solid Arrow Right Icon</td>
1491
- <td><ThemeProvider domain="domain-dental"><SolidArrowRight /></ThemeProvider></td>
1492
- <td><ThemeProvider domain="domain-cocoon"><SolidArrowRight /></ThemeProvider></td>
1493
- </tr>
1494
- <tr>
1495
- <td class="variation-label">Advance Appointments Icon</td>
1496
- <td><ThemeProvider domain="domain-dental"><AdvanceAppointments /></ThemeProvider></td>
1497
- <td><ThemeProvider domain="domain-cocoon"><AdvanceAppointments /></ThemeProvider></td>
1498
- </tr>
1499
- <tr>
1500
- <td class="variation-label">Group3 Icon</td>
1501
- <td><ThemeProvider domain="domain-dental"><Group3 /></ThemeProvider></td>
1502
- <td><ThemeProvider domain="domain-cocoon"><Group3 /></ThemeProvider></td>
1503
- </tr>
1504
-
1505
- <!-- IconBullet Components -->
1506
- <tr>
1507
- <td colspan="3" class="section-header">IconBullet Variants</td>
1508
- </tr>
1509
- <tr>
1510
- <td class="variation-label">IconBullet - With v-icon</td>
1511
- <td>
1512
- <ThemeProvider domain="domain-dental">
1513
- <IconBullet
1514
- icon="mdi-check-circle"
1515
- header="Professionelle Behandlung"
1516
- sub-header="Unser erfahrenes Team sorgt für Ihre Gesundheit"
1517
- />
1518
- </ThemeProvider>
1519
- </td>
1520
- <td>
1521
- <ThemeProvider domain="domain-cocoon">
1522
- <IconBullet
1523
- icon="mdi-check-circle"
1524
- header="Professionelle Behandlung"
1525
- sub-header="Unser erfahrenes Team sorgt für Ihre Gesundheit"
1526
- />
1527
- </ThemeProvider>
1528
- </td>
1529
- </tr>
1530
- <tr>
1531
- <td class="variation-label">IconBullet - With custom icon (Calendar)</td>
1532
- <td>
1533
- <ThemeProvider domain="domain-dental">
1534
- <IconBullet
1535
- header="Flexible Terminplanung"
1536
- sub-header="Buchen Sie online Ihren Wunschtermin"
1537
- >
1538
- <template #icon>
1539
- <Calendar />
1540
- </template>
1541
- </IconBullet>
1542
- </ThemeProvider>
1543
- </td>
1544
- <td>
1545
- <ThemeProvider domain="domain-cocoon">
1546
- <IconBullet
1547
- header="Flexible Terminplanung"
1548
- sub-header="Buchen Sie online Ihren Wunschtermin"
1549
- >
1550
- <template #icon>
1551
- <Calendar />
1552
- </template>
1553
- </IconBullet>
1554
- </ThemeProvider>
1555
- </td>
1556
- </tr>
1557
- <tr>
1558
- <td class="variation-label">IconBullet - With custom icon (Chair)</td>
1559
- <td>
1560
- <ThemeProvider domain="domain-dental">
1561
- <IconBullet
1562
- header="Moderne Ausstattung"
1563
- sub-header="Neueste Technologie für Ihren Komfort"
1564
- >
1565
- <template #icon>
1566
- <Chair />
1567
- </template>
1568
- </IconBullet>
1569
- </ThemeProvider>
1570
- </td>
1571
- <td>
1572
- <ThemeProvider domain="domain-cocoon">
1573
- <IconBullet
1574
- header="Moderne Ausstattung"
1575
- sub-header="Neueste Technologie für Ihren Komfort"
1576
- >
1577
- <template #icon>
1578
- <Chair />
1579
- </template>
1580
- </IconBullet>
1581
- </ThemeProvider>
1582
- </td>
1583
- </tr>
1584
- <tr>
1585
- <td class="variation-label">IconBullet - With HTML content</td>
1586
- <td>
1587
- <ThemeProvider domain="domain-dental">
1588
- <IconBullet
1589
- icon="mdi-shield-check"
1590
- content="<strong>Höchste Sicherheitsstandards</strong><br>Strenge Hygiene- und Qualitätskontrollen"
1591
- />
1592
- </ThemeProvider>
1593
- </td>
1594
- <td>
1595
- <ThemeProvider domain="domain-cocoon">
1596
- <IconBullet
1597
- icon="mdi-shield-check"
1598
- content="<strong>Höchste Sicherheitsstandards</strong><br>Strenge Hygiene- und Qualitätskontrollen"
1599
- />
1600
- </ThemeProvider>
1601
- </td>
1602
- </tr>
1603
-
1604
- <!-- IconBulletList Components -->
1605
- <tr>
1606
- <td colspan="3" class="section-header">IconBulletList Variants</td>
1607
- </tr>
1608
- <tr>
1609
- <td class="variation-label">IconBulletList - With header prop</td>
1610
- <td>
1611
- <ThemeProvider domain="domain-dental">
1612
- <IconBulletList header="Unsere Vorteile">
1613
- <IconBullet
1614
- icon="mdi-clock-outline"
1615
- header="Kurze Wartezeiten"
1616
- sub-header="Pünktliche Termine garantiert"
1617
- />
1618
- <IconBullet
1619
- icon="mdi-account-group"
1620
- header="Erfahrenes Team"
1621
- sub-header="Über 20 Jahre Expertise"
1622
- />
1623
- <IconBullet
1624
- icon="mdi-hospital-building"
1625
- header="Zentrale Lage"
1626
- sub-header="Gut erreichbar mit ÖPNV"
1627
- />
1628
- </IconBulletList>
1629
- </ThemeProvider>
1630
- </td>
1631
- <td>
1632
- <ThemeProvider domain="domain-cocoon">
1633
- <IconBulletList header="Unsere Vorteile">
1634
- <IconBullet
1635
- icon="mdi-clock-outline"
1636
- header="Kurze Wartezeiten"
1637
- sub-header="Pünktliche Termine garantiert"
1638
- />
1639
- <IconBullet
1640
- icon="mdi-account-group"
1641
- header="Erfahrenes Team"
1642
- sub-header="Über 20 Jahre Expertise"
1643
- />
1644
- <IconBullet
1645
- icon="mdi-hospital-building"
1646
- header="Zentrale Lage"
1647
- sub-header="Gut erreichbar mit ÖPNV"
1648
- />
1649
- </IconBulletList>
1650
- </ThemeProvider>
1651
- </td>
1652
- </tr>
1653
- <tr>
1654
- <td class="variation-label">IconBulletList - With custom icons</td>
1655
- <td>
1656
- <ThemeProvider domain="domain-dental">
1657
- <IconBulletList header="Behandlungsmöglichkeiten">
1658
- <IconBullet
1659
- header="Prophylaxe"
1660
- sub-header="Professionelle Zahnreinigung"
1661
- >
1662
- <template #icon>
1663
- <Calendar />
1664
- </template>
1665
- </IconBullet>
1666
- <IconBullet
1667
- header="Implantologie"
1668
- sub-header="Fester Zahnersatz"
1669
- >
1670
- <template #icon>
1671
- <Chair />
1672
- </template>
1673
- </IconBullet>
1674
- <IconBullet
1675
- header="Ästhetik"
1676
- sub-header="Bleaching & Veneers"
1677
- >
1678
- <template #icon>
1679
- <FilledCircle />
1680
- </template>
1681
- </IconBullet>
1682
- </IconBulletList>
1683
- </ThemeProvider>
1684
- </td>
1685
- <td>
1686
- <ThemeProvider domain="domain-cocoon">
1687
- <IconBulletList header="Behandlungsmöglichkeiten">
1688
- <IconBullet
1689
- header="Prophylaxe"
1690
- sub-header="Professionelle Zahnreinigung"
1691
- >
1692
- <template #icon>
1693
- <Calendar />
1694
- </template>
1695
- </IconBullet>
1696
- <IconBullet
1697
- header="Implantologie"
1698
- sub-header="Fester Zahnersatz"
1699
- >
1700
- <template #icon>
1701
- <Chair />
1702
- </template>
1703
- </IconBullet>
1704
- <IconBullet
1705
- header="Ästhetik"
1706
- sub-header="Bleaching & Veneers"
1707
- >
1708
- <template #icon>
1709
- <FilledCircle />
1710
- </template>
1711
- </IconBullet>
1712
- </IconBulletList>
1713
- </ThemeProvider>
1714
- </td>
1715
- </tr>
1716
- <tr>
1717
- <td class="variation-label">IconBulletList - No header</td>
1718
- <td>
1719
- <ThemeProvider domain="domain-dental">
1720
- <IconBulletList>
1721
- <IconBullet
1722
- icon="mdi-phone"
1723
- header="Telefon"
1724
- sub-header="+49 30 1234567"
1725
- />
1726
- <IconBullet
1727
- icon="mdi-email"
1728
- header="E-Mail"
1729
- sub-header="info@praxis.de"
1730
- />
1731
- <IconBullet
1732
- icon="mdi-map-marker"
1733
- header="Adresse"
1734
- sub-header="Musterstraße 123, 10115 Berlin"
1735
- />
1736
- </IconBulletList>
1737
- </ThemeProvider>
1738
- </td>
1739
- <td>
1740
- <ThemeProvider domain="domain-cocoon">
1741
- <IconBulletList>
1742
- <IconBullet
1743
- icon="mdi-phone"
1744
- header="Telefon"
1745
- sub-header="+49 30 1234567"
1746
- />
1747
- <IconBullet
1748
- icon="mdi-email"
1749
- header="E-Mail"
1750
- sub-header="info@praxis.de"
1751
- />
1752
- <IconBullet
1753
- icon="mdi-map-marker"
1754
- header="Adresse"
1755
- sub-header="Musterstraße 123, 10115 Berlin"
1756
- />
1757
- </IconBulletList>
1758
- </ThemeProvider>
1759
- </td>
1760
- </tr>
1761
-
1762
- <!-- EditField Components -->
1763
- <tr>
1764
- <td colspan="3" class="section-header">EditField Variants</td>
1765
- </tr>
1766
- <tr>
1767
- <td class="variation-label">EditField - Text Input</td>
1768
- <td>
1769
- <ThemeProvider domain="domain-dental">
1770
- <EditField
1771
- title="Name"
1772
- icon="mdi-account"
1773
- type="text"
1774
- :value="editFieldTextValue"
1775
- @update:value="(val) => editFieldTextValue = val"
1776
- />
1777
- </ThemeProvider>
1778
- </td>
1779
- <td>
1780
- <ThemeProvider domain="domain-cocoon">
1781
- <EditField
1782
- title="Name"
1783
- icon="mdi-account"
1784
- type="text"
1785
- :value="editFieldTextValue"
1786
- @update:value="(val) => editFieldTextValue = val"
1787
- />
1788
- </ThemeProvider>
1789
- </td>
1790
- </tr>
1791
- <tr>
1792
- <td class="variation-label">EditField - Select Dropdown</td>
1793
- <td>
1794
- <ThemeProvider domain="domain-dental">
1795
- <EditField
1796
- title="Bevorzugte Zeit"
1797
- icon="mdi-clock-outline"
1798
- type="select"
1799
- :value="editFieldSelectValue"
1800
- :items="timeSlotItems"
1801
- @update:value="(val) => editFieldSelectValue = val"
1802
- />
1803
- </ThemeProvider>
1804
- </td>
1805
- <td>
1806
- <ThemeProvider domain="domain-cocoon">
1807
- <EditField
1808
- title="Bevorzugte Zeit"
1809
- icon="mdi-clock-outline"
1810
- type="select"
1811
- :value="editFieldSelectValue"
1812
- :items="timeSlotItems"
1813
- @update:value="(val) => editFieldSelectValue = val"
1814
- />
1815
- </ThemeProvider>
1816
- </td>
1817
- </tr>
1818
- <tr>
1819
- <td class="variation-label">EditField - Date Input</td>
1820
- <td>
1821
- <ThemeProvider domain="domain-dental">
1822
- <EditField
1823
- title="Geburtsdatum"
1824
- icon="mdi-calendar"
1825
- type="date"
1826
- :value="editFieldDateValue"
1827
- @update:value="(val) => editFieldDateValue = val"
1828
- />
1829
- </ThemeProvider>
1830
- </td>
1831
- <td>
1832
- <ThemeProvider domain="domain-cocoon">
1833
- <EditField
1834
- title="Geburtsdatum"
1835
- icon="mdi-calendar"
1836
- type="date"
1837
- :value="editFieldDateValue"
1838
- @update:value="(val) => editFieldDateValue = val"
1839
- />
1840
- </ThemeProvider>
1841
- </td>
1842
- </tr>
1843
- <tr>
1844
- <td class="variation-label">EditField - Phone Input</td>
1845
- <td>
1846
- <ThemeProvider domain="domain-dental">
1847
- <EditField
1848
- title="Telefonnummer"
1849
- icon="mdi-phone"
1850
- type="phone"
1851
- :value="editFieldPhoneValue"
1852
- @update:value="(val) => editFieldPhoneValue = val"
1853
- />
1854
- </ThemeProvider>
1855
- </td>
1856
- <td>
1857
- <ThemeProvider domain="domain-cocoon">
1858
- <EditField
1859
- title="Telefonnummer"
1860
- icon="mdi-phone"
1861
- type="phone"
1862
- :value="editFieldPhoneValue"
1863
- @update:value="(val) => editFieldPhoneValue = val"
1864
- />
1865
- </ThemeProvider>
1866
- </td>
1867
- </tr>
1868
- </tbody>
1869
- </table>
1870
- </Background>
1871
- </div>
1872
- </div>
1873
- </div>
1874
- </template>
1875
-
1876
- <script setup lang="ts">
1877
- import { computed, ref } from 'vue';
1878
- import { domain, setTestingDomain, clearTestingDomain, getColorsForDomain } from '@/utils/index';
1879
-
1880
- import Button from '@/components/Button/Button.vue';
1881
- import Background from '@/components/Background/Background.vue';
1882
- import OtpInput from '@/components/OtpInput/OtpInput.vue';
1883
- import Checkbox from '@/components/CheckBox/Checkbox.vue';
1884
- import DateInput from '@/components/DateInput/DateInput.vue';
1885
- import EditField from '@/components/EditField/EditField.vue';
1886
- import Input from '@/components/Input/Input.vue';
1887
- import Loader from '@/components/Loader/Loader.vue';
1888
- import NotificationBubble from '@/components/NotificationBubble/NotificationBubble.vue';
1889
- import PhoneInput from '@/components/PhoneInput/PhoneInput.vue';
1890
- import Select from '@/components/Select/Select.vue';
1891
- import SelectAutocomplete from '@/components/SelectAutocomplete/SelectAutocomplete.vue';
1892
- import List from '@/components/List/List.vue';
1893
- import ListItem from '@/components/ListItem/ListItem.vue';
1894
- import TextArea from '@/components/TextArea/TextArea.vue';
1895
- import TickBox from '@/components/TickBox/TickBox.vue';
1896
- import AccordionGroup from '@/components/Accordion/AccordionGroup.vue';
1897
- import AccordionItem from '@/components/Accordion/AccordionItem.vue';
1898
- import Card from '@/components/Appointment/Card/Card.vue';
1899
- import Dialog from '@/components/Dialog/Dialog.vue';
1900
- import AnamneseAnswerDialog from '@/components/AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
1901
- import Modal from '@/components/Modal/Modal.vue';
1902
- import ErrorPage from '@/components/ErrorPage/ErrorPage.vue';
1903
- import MaintenanceBanner from '@/components/MaintenanceBanner/MaintenanceBanner.vue';
1904
- import StagingBanner from '@/components/StagingBanner/StagingBanner.vue';
1905
- import IconBulletList from '@/components/IconBullet/IconBulletList.vue';
1906
- import IconBullet from '@/components/IconBullet/IconBullet.vue';
1907
- import AdvanceAppointments from '@/components/Icons/AdvanceAppointments.vue';
1908
- import Calendar from '@/components/Icons/Calendar.vue';
1909
- import CalendarNotification from '@/components/Icons/CalendarNotification.vue';
1910
- import Chair from '@/components/Icons/Chair.vue';
1911
- import ChairNotification from '@/components/Icons/ChairNotification.vue';
1912
- import checkbox from '@/components/Icons/checkbox.vue';
1913
- import Circle from '@/components/Icons/Circle.vue';
1914
- import FavIcon from '@/components/Icons/FavIcon.vue';
1915
- import FilledCircle from '@/components/Icons/FilledCircle.vue';
1916
- import Group3 from '@/components/Icons/Group3.vue';
1917
- import Logo from '@/components/Icons/Logo.vue';
1918
- import MiniLogo from '@/components/Icons/MiniLogo.vue';
1919
- import outlineChecked from '@/components/Icons/outlineChecked.vue';
1920
- import Play from '@/components/Icons/Audio/Play.vue';
1921
- import RingNotification from '@/components/Icons/RingNotification.vue';
1922
- import SolidArrowRight from '@/components/Icons/SolidArrowRight.vue';
1923
- import ThemeProvider from '@/components/ThemeProvider/ThemeProvider.vue';
1924
- import { de } from 'date-fns/locale';
1925
-
1926
-
1927
- const currentDomain = computed(() => domain.value);
1928
-
1929
- const switchToDental = () => {
1930
- setTestingDomain('domain-dental');
1931
- };
1932
-
1933
- const switchToCocoon = () => {
1934
- setTestingDomain('domain-cocoon');
1935
- };
1936
-
1937
- const resetDomain = () => {
1938
- clearTestingDomain();
1939
- };
1940
-
1941
- // Get colors for both domains
1942
- const dentalColors = getColorsForDomain('domain-dental');
1943
- const cocoonColors = getColorsForDomain('domain-cocoon');
1944
-
1945
- // Dummy functions for OtpInput
1946
- const dummySubmit = () => console.log('Submit OTP');
1947
- const dummyResend = () => console.log('Resend OTP');
1948
-
1949
- // Modal refs and methods
1950
- const dentalModal = ref(null);
1951
- const cocoonModal = ref(null);
1952
-
1953
- const openDentalModal = () => {
1954
- if (dentalModal.value) {
1955
- dentalModal.value.openDialog();
1956
- }
1957
- };
1958
-
1959
- const openCocoonModal = () => {
1960
- if (cocoonModal.value) {
1961
- cocoonModal.value.openDialog();
1962
- }
1963
- };
1964
-
1965
- // Appointment data for Card component
1966
- const appointmentPending = {
1967
- id: '1',
1968
- patientName: 'Max Mustermann',
1969
- description: 'Regelmäßige Zahnreinigung',
1970
- start: '2024-01-15T10:00:00',
1971
- template_name: 'Zahnreinigung',
1972
- status: 'upcoming' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
1973
- is_confirmed: false,
1974
- type: 1,
1975
- dentist: {
1976
- name: 'Dr. med. dent. Maria Schneider',
1977
- gender: 'Zahnärztin',
1978
- imageSrc: 'https://via.placeholder.com/50'
1979
- },
1980
- address: 'Musterstraße 123',
1981
- district: 'Mitte, Berlin'
1982
- };
1983
-
1984
- const appointmentConfirmed = {
1985
- id: '2',
1986
- patientName: 'Anna Schmidt',
1987
- description: 'Routinekontrolle',
1988
- start: '2024-01-20T14:30:00',
1989
- template_name: 'Kontrolle',
1990
- status: 'upcoming' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
1991
- is_confirmed: true,
1992
- type: 2,
1993
- dentist: {
1994
- name: 'Dr. Thomas Müller',
1995
- gender: 'Zahnarzt',
1996
- imageSrc: 'https://via.placeholder.com/50'
1997
- },
1998
- address: 'Berliner Straße 45',
1999
- district: 'Charlottenburg, Berlin'
2000
- };
2001
-
2002
- const appointmentCompleted = {
2003
- id: '3',
2004
- patientName: 'Peter Weber',
2005
- description: 'Wurzelbehandlung am linken Backenzahn',
2006
- start: '2024-01-10T09:00:00',
2007
- template_name: 'Wurzelbehandlung',
2008
- status: 'done' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2009
- type: 3,
2010
- dentist: {
2011
- name: 'Dr. Sarah Klein',
2012
- gender: 'Zahnärztin',
2013
- imageSrc: 'https://via.placeholder.com/50'
2014
- },
2015
- address: 'Hauptstraße 78',
2016
- district: 'Prenzlauer Berg, Berlin',
2017
- for_patient: true
2018
- };
2019
-
2020
- const appointmentCancelled = {
2021
- id: '4',
2022
- patientName: 'Julia Becker',
2023
- description: 'Zahnreinigungstermin',
2024
- start: '2024-01-18T11:00:00',
2025
- template_name: 'Zahnreinigung',
2026
- status: 'cancelled' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2027
- type: 1,
2028
- dentist: {
2029
- name: 'Dr. Michael Wagner',
2030
- gender: 'Zahnarzt',
2031
- imageSrc: 'https://via.placeholder.com/50'
2032
- },
2033
- address: 'Friedrichstraße 201',
2034
- district: 'Kreuzberg, Berlin'
2035
- };
2036
-
2037
- const appointmentMissed = {
2038
- id: '5',
2039
- patientName: 'Stefan Fischer',
2040
- description: 'Jährliche Kontrolluntersuchung',
2041
- start: '2024-01-05T09:30:00',
2042
- template_name: 'Kontrolle',
2043
- status: 'missed' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2044
- type: 2,
2045
- dentist: {
2046
- name: 'Dr. Lisa Hoffmann',
2047
- gender: 'Zahnärztin',
2048
- imageSrc: 'https://via.placeholder.com/50'
2049
- },
2050
- address: 'Kantstraße 89',
2051
- district: 'Wilmersdorf, Berlin'
2052
- };
2053
-
2054
- // Event handlers for Card component
2055
- const handleConfirm = (id: string) => console.log('Confirm appointment:', id);
2056
- const handleCancel = (id: string) => console.log('Cancel appointment:', id);
2057
- const handleReschedule = (id: string) => console.log('Reschedule appointment:', id);
2058
- const handleFillAnamnese = () => console.log('Fill anamnese');
2059
-
2060
- // Accordion component data
2061
- const accordionOutlined = ref(null);
2062
- const accordionPlain = ref(null);
2063
- const accordionMultiple = ref([1, 2]);
2064
- const accordionComplex = ref(null);
2065
-
2066
- // EditField component data
2067
- const editFieldTextValue = ref('Max Mustermann');
2068
- const editFieldSelectValue = ref('morning');
2069
- const editFieldDateValue = ref('2024-03-15');
2070
- const editFieldPhoneValue = ref('+49 30 12345678');
2071
-
2072
- const timeSlotItems = [
2073
- { value: 'morning', title: 'Vormittag (8:00 - 12:00)' },
2074
- { value: 'afternoon', title: 'Nachmittag (12:00 - 17:00)' },
2075
- { value: 'evening', title: 'Abend (17:00 - 20:00)' }
2076
- ];
2077
-
2078
- // AnamneseAnswerDialog sample data
2079
- const samplePageAnswerGroups = [
2080
- {
2081
- pageKey: 'page1',
2082
- title: 'Allgemeine Gesundheit',
2083
- answers: [
2084
- {
2085
- key: 'q1',
2086
- label: 'Leiden Sie an Herz-Kreislauf-Erkrankungen?',
2087
- value: 'Nein',
2088
- valueListSelected: [],
2089
- valueListAll: [],
2090
- hasColor: false,
2091
- isSignature: false
2092
- },
2093
- {
2094
- key: 'q2',
2095
- label: 'Nehmen Sie regelmäßig Medikamente ein?',
2096
- value: '',
2097
- valueListSelected: [
2098
- { text: 'Blutdrucksenker', selected: true, color: 'yellow' },
2099
- { text: 'Blutverdünner', selected: true, color: 'red' }
2100
- ],
2101
- valueListAll: [],
2102
- valueListAllDisplay: [
2103
- { text: 'Blutdrucksenker', selected: true, color: 'yellow' },
2104
- { text: 'Blutverdünner', selected: true, color: 'red' },
2105
- { text: 'Schmerzmittel', selected: false, color: 'green' }
2106
- ],
2107
- hasColor: true,
2108
- isSignature: false
2109
- },
2110
- {
2111
- key: 'q3',
2112
- label: 'Haben Sie Allergien?',
2113
- value: '',
2114
- valueListSelected: [
2115
- { text: 'Penicillin', selected: true },
2116
- { text: 'Latex', selected: true }
2117
- ],
2118
- valueListAll: [],
2119
- hasColor: false,
2120
- isSignature: false
2121
- }
2122
- ]
2123
- },
2124
- {
2125
- pageKey: 'page2',
2126
- title: 'Zahnärztliche Anamnese',
2127
- answers: [
2128
- {
2129
- key: 'q4',
2130
- label: 'Wann war Ihr letzter Zahnarztbesuch?',
2131
- value: 'Vor 6 Monaten',
2132
- valueListSelected: [],
2133
- valueListAll: [],
2134
- hasColor: false,
2135
- isSignature: false
2136
- },
2137
- {
2138
- key: 'q5',
2139
- label: 'Haben Sie Zahnfleischbluten?',
2140
- value: '',
2141
- valueListSelected: [
2142
- { text: 'Gelegentlich beim Zähneputzen', selected: true, isOther: true }
2143
- ],
2144
- valueListAll: [],
2145
- hasColor: false,
2146
- isSignature: false
2147
- }
2148
- ]
2149
- },
2150
- {
2151
- pageKey: 'page3',
2152
- title: 'Unterschrift',
2153
- answers: [
2154
- {
2155
- key: 'signature',
2156
- label: 'Patientenunterschrift',
2157
- isSignature: true,
2158
- signatureUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iNTAiPjxwYXRoIGQ9Ik0xMCAzMCBRIDMwIDEwLCA1MCAzMCBUIDkwIDMwIFQgMTMwIDMwIFQgMTcwIDMwIiBzdHJva2U9IiMzMzMiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg=='
2159
- }
2160
- ]
2161
- }
2162
- ];
2163
- </script>
2164
-
2165
- <style scoped>
2166
- .app {
2167
- display: flex;
2168
- flex-direction: column;
2169
- justify-content: flex-start;
2170
- align-items: center;
2171
- width: 100vw;
2172
- min-height: 100vh;
2173
- background-color: #f5f5f5;
2174
- padding: 2rem 0;
2175
- overflow-y: auto;
2176
- }
2177
-
2178
- .element-container {
2179
- display: flex;
2180
- flex-direction: column;
2181
- justify-content: flex-start;
2182
- align-items: center;
2183
- width: 95%;
2184
- gap: 2rem;
2185
- }
2186
-
2187
- /* Control Section */
2188
- .controls {
2189
- width: 100%;
2190
- background: white;
2191
- padding: 1.5rem;
2192
- border-radius: 8px;
2193
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2194
- text-align: center;
2195
- }
2196
-
2197
- .controls h2 {
2198
- margin: 0 0 1rem 0;
2199
- color: #333;
2200
- font-size: 1.5rem;
2201
- }
2202
-
2203
- .button-group {
2204
- display: flex;
2205
- gap: 1rem;
2206
- justify-content: center;
2207
- flex-wrap: wrap;
2208
- }
2209
-
2210
- .control-btn {
2211
- padding: 0.75rem 1.5rem;
2212
- font-size: 1rem;
2213
- border: none;
2214
- border-radius: 6px;
2215
- cursor: pointer;
2216
- background-color: #4CAF50;
2217
- color: white;
2218
- transition: background-color 0.3s ease;
2219
- font-weight: 500;
2220
- }
2221
-
2222
- .control-btn:hover {
2223
- background-color: #45a049;
2224
- }
2225
-
2226
- .control-btn.reset {
2227
- background-color: #f44336;
2228
- }
2229
-
2230
- .control-btn.reset:hover {
2231
- background-color: #da190b;
2232
- }
2233
-
2234
- /* Matrix Container */
2235
- .matrix-container {
2236
- width: 100%;
2237
- background: white;
2238
- padding: 1.5rem;
2239
- border-radius: 8px;
2240
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2241
- overflow-x: auto;
2242
- }
2243
-
2244
- /* Table Styling */
2245
- .variations-table {
2246
- width: 100%;
2247
- border-collapse: collapse;
2248
- font-family: Arial, sans-serif;
2249
- }
2250
-
2251
- .variations-table thead {
2252
- background-color: #333;
2253
- color: white;
2254
- }
2255
-
2256
- .variations-table th {
2257
- padding: 1rem;
2258
- text-align: left;
2259
- font-weight: 600;
2260
- border-bottom: 2px solid #ddd;
2261
- position: sticky;
2262
- top: 0;
2263
- z-index: 10;
2264
- }
2265
-
2266
- .variations-table tbody tr {
2267
- border-bottom: 1px solid #e0e0e0;
2268
- transition: background-color 0.2s ease;
2269
- }
2270
-
2271
- .variations-table tbody tr:hover {
2272
- background-color: #f9f9f9;
2273
- }
2274
-
2275
- .variations-table td {
2276
- padding: 1.25rem 1rem;
2277
- text-align: center;
2278
- }
2279
-
2280
- .variation-label {
2281
- font-weight: 600;
2282
- color: #555;
2283
- text-align: left !important;
2284
- min-width: 200px;
2285
- }
2286
-
2287
- .section-header {
2288
- font-weight: 700;
2289
- font-size: 1.2rem;
2290
- color: #333;
2291
- text-align: left !important;
2292
- background-color: #f0f0f0;
2293
- padding: 1.5rem 1rem !important;
2294
- border-top: 2px solid #ccc;
2295
- border-bottom: 2px solid #ccc;
2296
- }
2297
-
2298
- /* Preview container for full-page components - Desktop */
2299
- .preview-container {
2300
- width: 100%;
2301
- height: 400px;
2302
- overflow: hidden;
2303
- position: relative;
2304
- border: 1px solid #ddd;
2305
- border-radius: 4px;
2306
- transform-origin: top left;
2307
- transform: scale(0.5);
2308
- width: 200%;
2309
- height: 800px;
2310
- }
2311
-
2312
- /* Preview container for full-page components - Mobile (375px viewport) */
2313
- .preview-container-mobile {
2314
- width: 100%;
2315
- max-width: 375px;
2316
- height: 600px;
2317
- overflow: hidden;
2318
- position: relative;
2319
- border: 1px solid #ddd;
2320
- border-radius: 4px;
2321
- transform-origin: top left;
2322
- transform: scale(0.4);
2323
- width: 250%;
2324
- height: 1500px;
2325
- }
2326
-
2327
- /* Banner preview container - contains fixed positioned banner */
2328
- .banner-preview {
2329
- position: relative;
2330
- width: 100%;
2331
- height: 50px;
2332
- overflow: hidden;
2333
- border: 1px solid #ddd;
2334
- border-radius: 4px;
2335
- }
2336
-
2337
- /* Override fixed positioning for banner inside preview */
2338
- .banner-preview :deep(.staging-banner) {
2339
- position: relative !important;
2340
- top: auto !important;
2341
- left: auto !important;
2342
- right: auto !important;
2343
- }
2344
-
2345
- /* Responsive Design */
2346
- @media (max-width: 768px) {
2347
- .element-container {
2348
- width: 98%;
2349
- }
2350
-
2351
- .variations-table {
2352
- font-size: 0.875rem;
2353
- }
2354
-
2355
- .variations-table th,
2356
- .variations-table td {
2357
- padding: 0.75rem 0.5rem;
2358
- }
2359
-
2360
- .variation-label {
2361
- min-width: 150px;
2362
- }
2363
- }
2364
-
2365
- </style>
1
+ <template>
2
+ <div class="app">
3
+ <div class="element-container">
4
+ <!-- Domain Switcher Controls -->
5
+ <div class="controls">
6
+ <h2>Testing Domain: {{ currentDomain }}</h2>
7
+ <div class="button-group">
8
+ <button @click="switchToDental" class="control-btn">Switch to Wunschlachen (Dental)</button>
9
+ <button @click="switchToCocoon" class="control-btn">Switch to White Cocoon</button>
10
+ <button @click="resetDomain" class="control-btn reset">Reset to Auto-Detect</button>
11
+ </div>
12
+ </div>
13
+
14
+ <!-- Button Variations Matrix -->
15
+ <div class="matrix-container">
16
+ <Background :inline="true">
17
+ <table class="variations-table">
18
+ <thead>
19
+ <tr>
20
+ <th>Variation</th>
21
+ <th>Wunschlachen (domain-dental)</th>
22
+ <th>White Cocoon (domain-cocoon)</th>
23
+ </tr>
24
+ </thead>
25
+ <tbody>
26
+ <!-- Flat Variants -->
27
+ <tr>
28
+ <td class="variation-label">Flat - Default</td>
29
+ <td><Button label="Button" variant="flat" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
30
+ <td><Button label="Button" variant="flat" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
31
+ </tr>
32
+ <tr>
33
+ <td class="variation-label">Flat - Disabled</td>
34
+ <td><Button label="Disabled" variant="flat" :disabled="true" :color="dentalColors.button_disabled_bg" :text-color="dentalColors.button_default_text" /></td>
35
+ <td><Button label="Disabled" variant="flat" :disabled="true" :color="cocoonColors.button_disabled_bg" :text-color="cocoonColors.button_default_text" /></td>
36
+ </tr>
37
+ <tr>
38
+ <td class="variation-label">Flat - Loading</td>
39
+ <td><Button label="Loading..." variant="flat" :loading="true" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
40
+ <td><Button label="Loading..." variant="flat" :loading="true" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
41
+ </tr>
42
+ <tr>
43
+ <td class="variation-label">Flat - With Prepend Icon</td>
44
+ <td><Button label="With Icon" variant="flat" prepend-icon="mdi-check" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
45
+ <td><Button label="With Icon" variant="flat" prepend-icon="mdi-check" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
46
+ </tr>
47
+ <tr>
48
+ <td class="variation-label">Flat - With Append Icon</td>
49
+ <td><Button label="Next" variant="flat" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
50
+ <td><Button label="Next" variant="flat" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
51
+ </tr>
52
+ <tr>
53
+ <td class="variation-label">Flat - Both Icons</td>
54
+ <td><Button label="Action" variant="flat" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
55
+ <td><Button label="Action" variant="flat" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
56
+ </tr>
57
+
58
+ <!-- Outlined Variants -->
59
+ <tr>
60
+ <td class="variation-label">Outlined - Default</td>
61
+ <td><Button label="Button" variant="outlined" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
62
+ <td><Button label="Button" variant="outlined" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
63
+ </tr>
64
+ <tr>
65
+ <td class="variation-label">Outlined - Disabled</td>
66
+ <td><Button label="Disabled" variant="outlined" :disabled="true" :color="dentalColors.button_outline_disabled_border" :text-color="dentalColors.button_outline_disabled_text" /></td>
67
+ <td><Button label="Disabled" variant="outlined" :disabled="true" :color="cocoonColors.button_outline_disabled_border" :text-color="cocoonColors.button_outline_disabled_text" /></td>
68
+ </tr>
69
+ <tr>
70
+ <td class="variation-label">Outlined - Loading</td>
71
+ <td><Button label="Loading..." variant="outlined" :loading="true" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
72
+ <td><Button label="Loading..." variant="outlined" :loading="true" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
73
+ </tr>
74
+ <tr>
75
+ <td class="variation-label">Outlined - With Prepend Icon</td>
76
+ <td><Button label="With Icon" variant="outlined" prepend-icon="mdi-check" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
77
+ <td><Button label="With Icon" variant="outlined" prepend-icon="mdi-check" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
78
+ </tr>
79
+ <tr>
80
+ <td class="variation-label">Outlined - With Append Icon</td>
81
+ <td><Button label="Next" variant="outlined" append-icon="mdi-arrow-right" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
82
+ <td><Button label="Next" variant="outlined" append-icon="mdi-arrow-right" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
83
+ </tr>
84
+ <tr>
85
+ <td class="variation-label">Outlined - Both Icons</td>
86
+ <td><Button label="Action" variant="outlined" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
87
+ <td><Button label="Action" variant="outlined" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
88
+ </tr>
89
+
90
+ <!-- Size Variants (Flat) -->
91
+ <tr>
92
+ <td class="variation-label">Size - Small</td>
93
+ <td><Button label="Small" variant="flat" size="small" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
94
+ <td><Button label="Small" variant="flat" size="small" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
95
+ </tr>
96
+ <tr>
97
+ <td class="variation-label">Size - Default</td>
98
+ <td><Button label="Default" variant="flat" size="default" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
99
+ <td><Button label="Default" variant="flat" size="default" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
100
+ </tr>
101
+ <tr>
102
+ <td class="variation-label">Size - Large</td>
103
+ <td><Button label="Large" variant="flat" size="large" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
104
+ <td><Button label="Large" variant="flat" size="large" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
105
+ </tr>
106
+ <tr>
107
+ <td class="variation-label">Size - X-Large</td>
108
+ <td><Button label="X-Large" variant="flat" size="x-large" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
109
+ <td><Button label="X-Large" variant="flat" size="x-large" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
110
+ </tr>
111
+
112
+ <!-- Size Variants (Outlined) -->
113
+ <tr>
114
+ <td class="variation-label">Outlined Size - Small</td>
115
+ <td><Button label="Small" variant="outlined" size="small" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
116
+ <td><Button label="Small" variant="outlined" size="small" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
117
+ </tr>
118
+ <tr>
119
+ <td class="variation-label">Outlined Size - Large</td>
120
+ <td><Button label="Large" variant="outlined" size="large" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
121
+ <td><Button label="Large" variant="outlined" size="large" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
122
+ </tr>
123
+
124
+ <!-- Density Variants -->
125
+ <tr>
126
+ <td class="variation-label">Density - Default</td>
127
+ <td><Button label="Default Density" variant="flat" density="default" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
128
+ <td><Button label="Default Density" variant="flat" density="default" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
129
+ </tr>
130
+ <tr>
131
+ <td class="variation-label">Density - Comfortable</td>
132
+ <td><Button label="Comfortable" variant="flat" density="comfortable" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
133
+ <td><Button label="Comfortable" variant="flat" density="comfortable" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
134
+ </tr>
135
+ <tr>
136
+ <td class="variation-label">Density - Compact</td>
137
+ <td><Button label="Compact" variant="flat" density="compact" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
138
+ <td><Button label="Compact" variant="flat" density="compact" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
139
+ </tr>
140
+
141
+ <!-- Text Variants -->
142
+ <tr>
143
+ <td class="variation-label">Text Variant</td>
144
+ <td><Button label="Text Button" variant="text" :color="dentalColors.button_default_bg" /></td>
145
+ <td><Button label="Text Button" variant="text" :color="cocoonColors.button_default_bg" /></td>
146
+ </tr>
147
+
148
+ <!-- Tonal Variants -->
149
+ <tr>
150
+ <td class="variation-label">Tonal Variant</td>
151
+ <td><Button label="Tonal Button" variant="tonal" :color="dentalColors.button_default_bg" /></td>
152
+ <td><Button label="Tonal Button" variant="tonal" :color="cocoonColors.button_default_bg" /></td>
153
+ </tr>
154
+
155
+ <!-- Elevated Variants -->
156
+ <tr>
157
+ <td class="variation-label">Elevated Variant</td>
158
+ <td><Button label="Elevated Button" variant="elevated" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
159
+ <td><Button label="Elevated Button" variant="elevated" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
160
+ </tr>
161
+
162
+ <!-- Icon Only Buttons -->
163
+ <tr>
164
+ <td class="variation-label">Icon Only - Flat</td>
165
+ <td><Button label="" variant="flat" prepend-icon="mdi-heart" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
166
+ <td><Button label="" variant="flat" prepend-icon="mdi-heart" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
167
+ </tr>
168
+ <tr>
169
+ <td class="variation-label">Icon Only - Outlined</td>
170
+ <td><Button label="" variant="outlined" prepend-icon="mdi-heart" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
171
+ <td><Button label="" variant="outlined" prepend-icon="mdi-heart" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
172
+ </tr>
173
+
174
+ <!-- Combined States -->
175
+ <tr>
176
+ <td class="variation-label">Small + Outlined + Icon</td>
177
+ <td><Button label="Action" variant="outlined" size="small" prepend-icon="mdi-cog" :color="dentalColors.button_outline_border" :text-color="dentalColors.button_outline_default_text" /></td>
178
+ <td><Button label="Action" variant="outlined" size="small" prepend-icon="mdi-cog" :color="cocoonColors.button_outline_border" :text-color="cocoonColors.button_outline_default_text" /></td>
179
+ </tr>
180
+ <tr>
181
+ <td class="variation-label">Large + Flat + Both Icons</td>
182
+ <td><Button label="Complete" variant="flat" size="large" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
183
+ <td><Button label="Complete" variant="flat" size="large" prepend-icon="mdi-check" append-icon="mdi-arrow-right" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
184
+ </tr>
185
+ <tr>
186
+ <td class="variation-label">Readonly State</td>
187
+ <td><Button label="Readonly" variant="flat" :readonly="true" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" /></td>
188
+ <td><Button label="Readonly" variant="flat" :readonly="true" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" /></td>
189
+ </tr>
190
+
191
+ <!-- OTP Input Variants -->
192
+ <tr>
193
+ <td colspan="3" class="section-header">OTP Input Variants</td>
194
+ </tr>
195
+ <tr>
196
+ <td class="variation-label">OTP - Default</td>
197
+ <td>
198
+ <ThemeProvider domain="domain-dental">
199
+ <OtpInput phone-number="+49 123 456789" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
200
+ </ThemeProvider>
201
+ </td>
202
+ <td>
203
+ <ThemeProvider domain="domain-cocoon">
204
+ <OtpInput phone-number="+49 123 456789" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
205
+ </ThemeProvider>
206
+ </td>
207
+ </tr>
208
+ <tr>
209
+ <td class="variation-label">OTP - Loading</td>
210
+ <td>
211
+ <ThemeProvider domain="domain-dental">
212
+ <OtpInput phone-number="+49 123 456789" :loading="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
213
+ </ThemeProvider>
214
+ </td>
215
+ <td>
216
+ <ThemeProvider domain="domain-cocoon">
217
+ <OtpInput phone-number="+49 123 456789" :loading="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
218
+ </ThemeProvider>
219
+ </td>
220
+ </tr>
221
+ <tr>
222
+ <td class="variation-label">OTP - Error</td>
223
+ <td>
224
+ <ThemeProvider domain="domain-dental">
225
+ <OtpInput phone-number="+49 123 456789" otp-state="error" message="Invalid code. Please try again." :submit-fn="dummySubmit" :resend-fn="dummyResend" />
226
+ </ThemeProvider>
227
+ </td>
228
+ <td>
229
+ <ThemeProvider domain="domain-cocoon">
230
+ <OtpInput phone-number="+49 123 456789" otp-state="error" message="Invalid code. Please try again." :submit-fn="dummySubmit" :resend-fn="dummyResend" />
231
+ </ThemeProvider>
232
+ </td>
233
+ </tr>
234
+ <tr>
235
+ <td class="variation-label">OTP - Success</td>
236
+ <td>
237
+ <ThemeProvider domain="domain-dental">
238
+ <OtpInput phone-number="+49 123 456789" otp-state="success" message="Code verified successfully!" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
239
+ </ThemeProvider>
240
+ </td>
241
+ <td>
242
+ <ThemeProvider domain="domain-cocoon">
243
+ <OtpInput phone-number="+49 123 456789" otp-state="success" message="Code verified successfully!" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
244
+ </ThemeProvider>
245
+ </td>
246
+ </tr>
247
+ <tr>
248
+ <td class="variation-label">OTP - Disabled Buttons</td>
249
+ <td>
250
+ <ThemeProvider domain="domain-dental">
251
+ <OtpInput phone-number="+49 123 456789" :disable-submit-btn="true" :disable-resend-btn="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
252
+ </ThemeProvider>
253
+ </td>
254
+ <td>
255
+ <ThemeProvider domain="domain-cocoon">
256
+ <OtpInput phone-number="+49 123 456789" :disable-submit-btn="true" :disable-resend-btn="true" :submit-fn="dummySubmit" :resend-fn="dummyResend" />
257
+ </ThemeProvider>
258
+ </td>
259
+ </tr>
260
+
261
+ <!-- Checkbox Variants -->
262
+ <tr>
263
+ <td colspan="3" class="section-header">Checkbox Variants</td>
264
+ </tr>
265
+ <tr>
266
+ <td class="variation-label">Checkbox - Default</td>
267
+ <td>
268
+ <ThemeProvider domain="domain-dental">
269
+ <Checkbox label="Unchecked" value="default" />
270
+ </ThemeProvider>
271
+ </td>
272
+ <td>
273
+ <ThemeProvider domain="domain-cocoon">
274
+ <Checkbox label="Unchecked" value="default" />
275
+ </ThemeProvider>
276
+ </td>
277
+ </tr>
278
+ <tr>
279
+ <td class="variation-label">Checkbox - Checked</td>
280
+ <td>
281
+ <ThemeProvider domain="domain-dental">
282
+ <Checkbox label="Checked" value="checked" :model-value="['checked']" />
283
+ </ThemeProvider>
284
+ </td>
285
+ <td>
286
+ <ThemeProvider domain="domain-cocoon">
287
+ <Checkbox label="Checked" value="checked" :model-value="['checked']" />
288
+ </ThemeProvider>
289
+ </td>
290
+ </tr>
291
+ <tr>
292
+ <td class="variation-label">Checkbox - Disabled</td>
293
+ <td>
294
+ <ThemeProvider domain="domain-dental">
295
+ <Checkbox label="Disabled" value="disabled" :disabled="true" />
296
+ </ThemeProvider>
297
+ </td>
298
+ <td>
299
+ <ThemeProvider domain="domain-cocoon">
300
+ <Checkbox label="Disabled" value="disabled" :disabled="true" />
301
+ </ThemeProvider>
302
+ </td>
303
+ </tr>
304
+ <tr>
305
+ <td class="variation-label">Checkbox - Disabled Checked</td>
306
+ <td>
307
+ <ThemeProvider domain="domain-dental">
308
+ <Checkbox label="Disabled Checked" value="disabled-checked" :disabled="true" :model-value="['disabled-checked']" />
309
+ </ThemeProvider>
310
+ </td>
311
+ <td>
312
+ <ThemeProvider domain="domain-cocoon">
313
+ <Checkbox label="Disabled Checked" value="disabled-checked" :disabled="true" :model-value="['disabled-checked']" />
314
+ </ThemeProvider>
315
+ </td>
316
+ </tr>
317
+ <tr>
318
+ <td class="variation-label">Checkbox - Error</td>
319
+ <td>
320
+ <ThemeProvider domain="domain-dental">
321
+ <Checkbox label="Error State" value="error" :error="true" />
322
+ </ThemeProvider>
323
+ </td>
324
+ <td>
325
+ <ThemeProvider domain="domain-cocoon">
326
+ <Checkbox label="Error State" value="error" :error="true" />
327
+ </ThemeProvider>
328
+ </td>
329
+ </tr>
330
+ <tr>
331
+ <td class="variation-label">Checkbox - Success</td>
332
+ <td>
333
+ <ThemeProvider domain="domain-dental">
334
+ <Checkbox label="Success State" value="success" :success="true" :model-value="['success']" />
335
+ </ThemeProvider>
336
+ </td>
337
+ <td>
338
+ <ThemeProvider domain="domain-cocoon">
339
+ <Checkbox label="Success State" value="success" :success="true" :model-value="['success']" />
340
+ </ThemeProvider>
341
+ </td>
342
+ </tr>
343
+
344
+ <!-- RadioGroup Variants -->
345
+ <tr>
346
+ <td colspan="3" class="section-header">RadioGroup Variants</td>
347
+ </tr>
348
+ <tr>
349
+ <td class="variation-label">RadioGroup - Default (inline)</td>
350
+ <td>
351
+ <ThemeProvider domain="domain-dental">
352
+ <RadioGroup v-model="radioValue" :items="radioItems" />
353
+ </ThemeProvider>
354
+ </td>
355
+ <td>
356
+ <ThemeProvider domain="domain-cocoon">
357
+ <RadioGroup v-model="radioValue" :items="radioItems" />
358
+ </ThemeProvider>
359
+ </td>
360
+ </tr>
361
+ <tr>
362
+ <td class="variation-label">RadioGroup - Vertical</td>
363
+ <td>
364
+ <ThemeProvider domain="domain-dental">
365
+ <RadioGroup v-model="radioValue" :items="radioItems" :inline="false" />
366
+ </ThemeProvider>
367
+ </td>
368
+ <td>
369
+ <ThemeProvider domain="domain-cocoon">
370
+ <RadioGroup v-model="radioValue" :items="radioItems" :inline="false" />
371
+ </ThemeProvider>
372
+ </td>
373
+ </tr>
374
+ <tr>
375
+ <td class="variation-label">RadioGroup - Disabled</td>
376
+ <td>
377
+ <ThemeProvider domain="domain-dental">
378
+ <RadioGroup model-value="option1" :items="radioItems" :disabled="true" />
379
+ </ThemeProvider>
380
+ </td>
381
+ <td>
382
+ <ThemeProvider domain="domain-cocoon">
383
+ <RadioGroup model-value="option1" :items="radioItems" :disabled="true" />
384
+ </ThemeProvider>
385
+ </td>
386
+ </tr>
387
+ <tr>
388
+ <td class="variation-label">RadioGroup - Error</td>
389
+ <td>
390
+ <ThemeProvider domain="domain-dental">
391
+ <RadioGroup model-value="option2" :items="radioItems" :error="true" />
392
+ </ThemeProvider>
393
+ </td>
394
+ <td>
395
+ <ThemeProvider domain="domain-cocoon">
396
+ <RadioGroup model-value="option2" :items="radioItems" :error="true" />
397
+ </ThemeProvider>
398
+ </td>
399
+ </tr>
400
+
401
+ <!-- Input Variants -->
402
+ <tr>
403
+ <td colspan="3" class="section-header">Input Variants</td>
404
+ </tr>
405
+ <tr>
406
+ <td class="variation-label">Input - Default</td>
407
+ <td>
408
+ <ThemeProvider domain="domain-dental">
409
+ <Input placeholder="Enter text..." label="Name" />
410
+ </ThemeProvider>
411
+ </td>
412
+ <td>
413
+ <ThemeProvider domain="domain-cocoon">
414
+ <Input placeholder="Enter text..." label="Name" />
415
+ </ThemeProvider>
416
+ </td>
417
+ </tr>
418
+ <tr>
419
+ <td class="variation-label">Input - Disabled</td>
420
+ <td>
421
+ <ThemeProvider domain="domain-dental">
422
+ <Input placeholder="Disabled input" :disabled="true" />
423
+ </ThemeProvider>
424
+ </td>
425
+ <td>
426
+ <ThemeProvider domain="domain-cocoon">
427
+ <Input placeholder="Disabled input" :disabled="true" />
428
+ </ThemeProvider>
429
+ </td>
430
+ </tr>
431
+ <tr>
432
+ <td class="variation-label">Input - Error</td>
433
+ <td>
434
+ <ThemeProvider domain="domain-dental">
435
+ <Input placeholder="Error state" :error="true" hint="This field has an error" :hide-details="false" />
436
+ </ThemeProvider>
437
+ </td>
438
+ <td>
439
+ <ThemeProvider domain="domain-cocoon">
440
+ <Input placeholder="Error state" :error="true" hint="This field has an error" :hide-details="false" />
441
+ </ThemeProvider>
442
+ </td>
443
+ </tr>
444
+ <tr>
445
+ <td class="variation-label">Input - Success</td>
446
+ <td>
447
+ <ThemeProvider domain="domain-dental">
448
+ <Input placeholder="Success state" :success="true" />
449
+ </ThemeProvider>
450
+ </td>
451
+ <td>
452
+ <ThemeProvider domain="domain-cocoon">
453
+ <Input placeholder="Success state" :success="true" />
454
+ </ThemeProvider>
455
+ </td>
456
+ </tr>
457
+ <tr>
458
+ <td class="variation-label">Input - Warning</td>
459
+ <td>
460
+ <ThemeProvider domain="domain-dental">
461
+ <Input placeholder="Warning state" :warning="true" />
462
+ </ThemeProvider>
463
+ </td>
464
+ <td>
465
+ <ThemeProvider domain="domain-cocoon">
466
+ <Input placeholder="Warning state" :warning="true" />
467
+ </ThemeProvider>
468
+ </td>
469
+ </tr>
470
+ <tr>
471
+ <td class="variation-label">Input - With Icons</td>
472
+ <td>
473
+ <ThemeProvider domain="domain-dental">
474
+ <Input placeholder="With icons" prepend-inner-icon="mdi-magnify" append-inner-icon="mdi-check" />
475
+ </ThemeProvider>
476
+ </td>
477
+ <td>
478
+ <ThemeProvider domain="domain-cocoon">
479
+ <Input placeholder="With icons" prepend-inner-icon="mdi-magnify" append-inner-icon="mdi-check" />
480
+ </ThemeProvider>
481
+ </td>
482
+ </tr>
483
+
484
+ <!-- Select Variants -->
485
+ <tr>
486
+ <td colspan="3" class="section-header">Select Variants</td>
487
+ </tr>
488
+ <tr>
489
+ <td class="variation-label">Select - Default</td>
490
+ <td>
491
+ <ThemeProvider domain="domain-dental">
492
+ <Select placeholder="Select option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}]" />
493
+ </ThemeProvider>
494
+ </td>
495
+ <td>
496
+ <ThemeProvider domain="domain-cocoon">
497
+ <Select placeholder="Select option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}]" />
498
+ </ThemeProvider>
499
+ </td>
500
+ </tr>
501
+ <tr>
502
+ <td class="variation-label">Select - Disabled</td>
503
+ <td>
504
+ <ThemeProvider domain="domain-dental">
505
+ <Select placeholder="Disabled select" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
506
+ </ThemeProvider>
507
+ </td>
508
+ <td>
509
+ <ThemeProvider domain="domain-cocoon">
510
+ <Select placeholder="Disabled select" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
511
+ </ThemeProvider>
512
+ </td>
513
+ </tr>
514
+ <tr>
515
+ <td class="variation-label">Select - Error</td>
516
+ <td>
517
+ <ThemeProvider domain="domain-dental">
518
+ <Select placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
519
+ </ThemeProvider>
520
+ </td>
521
+ <td>
522
+ <ThemeProvider domain="domain-cocoon">
523
+ <Select placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
524
+ </ThemeProvider>
525
+ </td>
526
+ </tr>
527
+
528
+ <!-- SelectAutocomplete Variants -->
529
+ <tr>
530
+ <td colspan="3" class="section-header">SelectAutocomplete Variants</td>
531
+ </tr>
532
+ <tr>
533
+ <td class="variation-label">SelectAutocomplete - Default</td>
534
+ <td>
535
+ <ThemeProvider domain="domain-dental">
536
+ <SelectAutocomplete placeholder="Search option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}, {title: 'Option 3', value: '3'}]" />
537
+ </ThemeProvider>
538
+ </td>
539
+ <td>
540
+ <ThemeProvider domain="domain-cocoon">
541
+ <SelectAutocomplete placeholder="Search option..." :items="[{title: 'Option 1', value: '1'}, {title: 'Option 2', value: '2'}, {title: 'Option 3', value: '3'}]" />
542
+ </ThemeProvider>
543
+ </td>
544
+ </tr>
545
+ <tr>
546
+ <td class="variation-label">SelectAutocomplete - Disabled</td>
547
+ <td>
548
+ <ThemeProvider domain="domain-dental">
549
+ <SelectAutocomplete placeholder="Disabled autocomplete" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
550
+ </ThemeProvider>
551
+ </td>
552
+ <td>
553
+ <ThemeProvider domain="domain-cocoon">
554
+ <SelectAutocomplete placeholder="Disabled autocomplete" :items="[{title: 'Option 1', value: '1'}]" :disabled="true" />
555
+ </ThemeProvider>
556
+ </td>
557
+ </tr>
558
+ <tr>
559
+ <td class="variation-label">SelectAutocomplete - Error</td>
560
+ <td>
561
+ <ThemeProvider domain="domain-dental">
562
+ <SelectAutocomplete placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
563
+ </ThemeProvider>
564
+ </td>
565
+ <td>
566
+ <ThemeProvider domain="domain-cocoon">
567
+ <SelectAutocomplete placeholder="Error state" :items="[{title: 'Option 1', value: '1'}]" :error="true" />
568
+ </ThemeProvider>
569
+ </td>
570
+ </tr>
571
+
572
+ <!-- List + ListItem Variants -->
573
+ <tr>
574
+ <td colspan="3" class="section-header">List + ListItem Variants</td>
575
+ </tr>
576
+ <tr>
577
+ <td class="variation-label">List + ListItem - Basic</td>
578
+ <td>
579
+ <ThemeProvider domain="domain-dental">
580
+ <List>
581
+ <ListItem title="First Item" subtitle="Subtitle text" />
582
+ <ListItem title="Second Item" subtitle="Another subtitle" />
583
+ <ListItem title="Third Item" subtitle="One more" />
584
+ </List>
585
+ </ThemeProvider>
586
+ </td>
587
+ <td>
588
+ <ThemeProvider domain="domain-cocoon">
589
+ <List>
590
+ <ListItem title="First Item" subtitle="Subtitle text" />
591
+ <ListItem title="Second Item" subtitle="Another subtitle" />
592
+ <ListItem title="Third Item" subtitle="One more" />
593
+ </List>
594
+ </ThemeProvider>
595
+ </td>
596
+ </tr>
597
+ <tr>
598
+ <td class="variation-label">List + ListItem - With Icons</td>
599
+ <td>
600
+ <ThemeProvider domain="domain-dental">
601
+ <List density="compact">
602
+ <ListItem title="Kalender" prepend-icon="mdi-calendar" append-icon="mdi-chevron-right" />
603
+ <ListItem title="Patienten" prepend-icon="mdi-account-group" append-icon="mdi-chevron-right" />
604
+ <ListItem title="Einstellungen" prepend-icon="mdi-cog" append-icon="mdi-chevron-right" />
605
+ </List>
606
+ </ThemeProvider>
607
+ </td>
608
+ <td>
609
+ <ThemeProvider domain="domain-cocoon">
610
+ <List density="compact">
611
+ <ListItem title="Kalender" prepend-icon="mdi-calendar" append-icon="mdi-chevron-right" />
612
+ <ListItem title="Patienten" prepend-icon="mdi-account-group" append-icon="mdi-chevron-right" />
613
+ <ListItem title="Einstellungen" prepend-icon="mdi-cog" append-icon="mdi-chevron-right" />
614
+ </List>
615
+ </ThemeProvider>
616
+ </td>
617
+ </tr>
618
+ <tr>
619
+ <td class="variation-label">List + ListItem - Nav</td>
620
+ <td>
621
+ <ThemeProvider domain="domain-dental">
622
+ <List density="compact" :nav="true">
623
+ <ListItem title="Dashboard" prepend-icon="mdi-view-dashboard" :active="true" color="primary" rounded="lg" />
624
+ <ListItem title="Termine" prepend-icon="mdi-calendar-check" rounded="lg" />
625
+ <ListItem title="Nachrichten" prepend-icon="mdi-message-text" rounded="lg" />
626
+ </List>
627
+ </ThemeProvider>
628
+ </td>
629
+ <td>
630
+ <ThemeProvider domain="domain-cocoon">
631
+ <List density="compact" :nav="true">
632
+ <ListItem title="Dashboard" prepend-icon="mdi-view-dashboard" :active="true" color="primary" rounded="lg" />
633
+ <ListItem title="Termine" prepend-icon="mdi-calendar-check" rounded="lg" />
634
+ <ListItem title="Nachrichten" prepend-icon="mdi-message-text" rounded="lg" />
635
+ </List>
636
+ </ThemeProvider>
637
+ </td>
638
+ </tr>
639
+ <tr>
640
+ <td class="variation-label">List + ListItem - Disabled</td>
641
+ <td>
642
+ <ThemeProvider domain="domain-dental">
643
+ <List :disabled="true">
644
+ <ListItem title="All items disabled" subtitle="Via List prop" prepend-icon="mdi-cancel" />
645
+ <ListItem title="Second disabled" subtitle="Inherited from parent" prepend-icon="mdi-cancel" />
646
+ </List>
647
+ </ThemeProvider>
648
+ </td>
649
+ <td>
650
+ <ThemeProvider domain="domain-cocoon">
651
+ <List :disabled="true">
652
+ <ListItem title="All items disabled" subtitle="Via List prop" prepend-icon="mdi-cancel" />
653
+ <ListItem title="Second disabled" subtitle="Inherited from parent" prepend-icon="mdi-cancel" />
654
+ </List>
655
+ </ThemeProvider>
656
+ </td>
657
+ </tr>
658
+ <tr>
659
+ <td class="variation-label">List + ListItem - Custom Slot</td>
660
+ <td>
661
+ <ThemeProvider domain="domain-dental">
662
+ <List>
663
+ <ListItem :title="undefined">
664
+ <template #default>
665
+ <div style="display: flex; justify-content: space-between; width: 100%;">
666
+ <div>
667
+ <div style="font-weight: 500;">Weber, Wolfgang</div>
668
+ <div style="font-size: 0.75rem; color: #9e9e9e;">#06432</div>
669
+ </div>
670
+ <span>12.09.2001</span>
671
+ </div>
672
+ </template>
673
+ </ListItem>
674
+ </List>
675
+ </ThemeProvider>
676
+ </td>
677
+ <td>
678
+ <ThemeProvider domain="domain-cocoon">
679
+ <List>
680
+ <ListItem :title="undefined">
681
+ <template #default>
682
+ <div style="display: flex; justify-content: space-between; width: 100%;">
683
+ <div>
684
+ <div style="font-weight: 500;">Weber, Wolfgang</div>
685
+ <div style="font-size: 0.75rem; color: #9e9e9e;">#06432</div>
686
+ </div>
687
+ <span>12.09.2001</span>
688
+ </div>
689
+ </template>
690
+ </ListItem>
691
+ </List>
692
+ </ThemeProvider>
693
+ </td>
694
+ </tr>
695
+
696
+ <!-- TextArea Variants -->
697
+ <tr>
698
+ <td colspan="3" class="section-header">TextArea Variants</td>
699
+ </tr>
700
+ <tr>
701
+ <td class="variation-label">TextArea - Default</td>
702
+ <td>
703
+ <ThemeProvider domain="domain-dental">
704
+ <TextArea placeholder="Enter multi-line text..." />
705
+ </ThemeProvider>
706
+ </td>
707
+ <td>
708
+ <ThemeProvider domain="domain-cocoon">
709
+ <TextArea placeholder="Enter multi-line text..." />
710
+ </ThemeProvider>
711
+ </td>
712
+ </tr>
713
+ <tr>
714
+ <td class="variation-label">TextArea - Disabled</td>
715
+ <td>
716
+ <ThemeProvider domain="domain-dental">
717
+ <TextArea placeholder="Disabled textarea" :disabled="true" />
718
+ </ThemeProvider>
719
+ </td>
720
+ <td>
721
+ <ThemeProvider domain="domain-cocoon">
722
+ <TextArea placeholder="Disabled textarea" :disabled="true" />
723
+ </ThemeProvider>
724
+ </td>
725
+ </tr>
726
+ <tr>
727
+ <td class="variation-label">TextArea - Error</td>
728
+ <td>
729
+ <ThemeProvider domain="domain-dental">
730
+ <TextArea placeholder="Error state" :error="true" />
731
+ </ThemeProvider>
732
+ </td>
733
+ <td>
734
+ <ThemeProvider domain="domain-cocoon">
735
+ <TextArea placeholder="Error state" :error="true" />
736
+ </ThemeProvider>
737
+ </td>
738
+ </tr>
739
+ <tr>
740
+ <td class="variation-label">TextArea - Success</td>
741
+ <td>
742
+ <ThemeProvider domain="domain-dental">
743
+ <TextArea placeholder="Success state" :success="true" />
744
+ </ThemeProvider>
745
+ </td>
746
+ <td>
747
+ <ThemeProvider domain="domain-cocoon">
748
+ <TextArea placeholder="Success state" :success="true" />
749
+ </ThemeProvider>
750
+ </td>
751
+ </tr>
752
+ <tr>
753
+ <td class="variation-label">TextArea - Warning</td>
754
+ <td>
755
+ <ThemeProvider domain="domain-dental">
756
+ <TextArea placeholder="Warning state" :warning="true" />
757
+ </ThemeProvider>
758
+ </td>
759
+ <td>
760
+ <ThemeProvider domain="domain-cocoon">
761
+ <TextArea placeholder="Warning state" :warning="true" />
762
+ </ThemeProvider>
763
+ </td>
764
+ </tr>
765
+
766
+ <!-- Loader Variants -->
767
+ <tr>
768
+ <td colspan="3" class="section-header">Loader Variants</td>
769
+ </tr>
770
+ <tr>
771
+ <td class="variation-label">Loader - Small (24px)</td>
772
+ <td><Loader :size="24" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
773
+ <td><Loader :size="24" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
774
+ </tr>
775
+ <tr>
776
+ <td class="variation-label">Loader - Medium (40px)</td>
777
+ <td><Loader :size="40" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
778
+ <td><Loader :size="40" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
779
+ </tr>
780
+ <tr>
781
+ <td class="variation-label">Loader - Large (96px)</td>
782
+ <td><Loader :size="96" :inline="true" :bg-color="dentalColors.button_default_text" :text-color="dentalColors.button_default_bg" /></td>
783
+ <td><Loader :size="96" :inline="true" :bg-color="cocoonColors.button_default_text" :text-color="cocoonColors.button_default_bg" /></td>
784
+ </tr>
785
+
786
+ <!-- DateInput Variants -->
787
+ <tr>
788
+ <td colspan="3" class="section-header">DateInput Variants</td>
789
+ </tr>
790
+ <tr>
791
+ <td class="variation-label">DateInput - Default</td>
792
+ <td>
793
+ <ThemeProvider domain="domain-dental">
794
+ <DateInput />
795
+ </ThemeProvider>
796
+ </td>
797
+ <td>
798
+ <ThemeProvider domain="domain-cocoon">
799
+ <DateInput />
800
+ </ThemeProvider>
801
+ </td>
802
+ </tr>
803
+ <tr>
804
+ <td class="variation-label">DateInput - Disabled</td>
805
+ <td>
806
+ <ThemeProvider domain="domain-dental">
807
+ <DateInput :disabled="true" />
808
+ </ThemeProvider>
809
+ </td>
810
+ <td>
811
+ <ThemeProvider domain="domain-cocoon">
812
+ <DateInput :disabled="true" />
813
+ </ThemeProvider>
814
+ </td>
815
+ </tr>
816
+ <tr>
817
+ <td class="variation-label">DateInput - Error</td>
818
+ <td>
819
+ <ThemeProvider domain="domain-dental">
820
+ <DateInput :error="true" errorMessage="Die Eingabe des Geburtsdatums ist erforderlich." />
821
+ </ThemeProvider>
822
+ </td>
823
+ <td>
824
+ <ThemeProvider domain="domain-cocoon">
825
+ <DateInput :error="true" errorMessage="Die Eingabe des Geburtsdatums ist erforderlich." />
826
+ </ThemeProvider>
827
+ </td>
828
+ </tr>
829
+ <tr>
830
+ <td class="variation-label">DateInput - With Max Date</td>
831
+ <td>
832
+ <ThemeProvider domain="domain-dental">
833
+ <DateInput :maxDate="new Date()" placeholder="TT.MM.JJJJ" />
834
+ </ThemeProvider>
835
+ </td>
836
+ <td>
837
+ <ThemeProvider domain="domain-cocoon">
838
+ <DateInput :maxDate="new Date()" placeholder="TT.MM.JJJJ" />
839
+ </ThemeProvider>
840
+ </td>
841
+ </tr>
842
+
843
+ <!-- EditField Variants -->
844
+ <tr>
845
+ <td colspan="3" class="section-header">EditField Variants</td>
846
+ </tr>
847
+ <tr>
848
+ <td class="variation-label">EditField - Default</td>
849
+ <td>
850
+ <ThemeProvider domain="domain-dental">
851
+ <EditField title="Edit Field" value="Editable text" />
852
+ </ThemeProvider>
853
+ </td>
854
+ <td>
855
+ <ThemeProvider domain="domain-cocoon">
856
+ <EditField title="Edit Field" value="Editable text" />
857
+ </ThemeProvider>
858
+ </td>
859
+ </tr>
860
+ <tr>
861
+ <td class="variation-label">EditField - Disabled</td>
862
+ <td>
863
+ <ThemeProvider domain="domain-dental">
864
+ <EditField title="Disabled" value="Not editable" :disabled="true" />
865
+ </ThemeProvider>
866
+ </td>
867
+ <td>
868
+ <ThemeProvider domain="domain-cocoon">
869
+ <EditField title="Disabled" value="Not editable" :disabled="true" />
870
+ </ThemeProvider>
871
+ </td>
872
+ </tr>
873
+
874
+ <!-- PhoneInput Variants -->
875
+ <tr>
876
+ <td colspan="3" class="section-header">PhoneInput Variants</td>
877
+ </tr>
878
+ <tr>
879
+ <td class="variation-label">PhoneInput - Default</td>
880
+ <td>
881
+ <ThemeProvider domain="domain-dental">
882
+ <PhoneInput placeholder="Telefonnummer" />
883
+ </ThemeProvider>
884
+ </td>
885
+ <td>
886
+ <ThemeProvider domain="domain-cocoon">
887
+ <PhoneInput placeholder="Telefonnummer" />
888
+ </ThemeProvider>
889
+ </td>
890
+ </tr>
891
+ <tr>
892
+ <td class="variation-label">PhoneInput - With Custom Countries</td>
893
+ <td>
894
+ <ThemeProvider domain="domain-dental">
895
+ <PhoneInput placeholder="Telefonnummer" :countries-codes="['DE', 'AT', 'CH']" />
896
+ </ThemeProvider>
897
+ </td>
898
+ <td>
899
+ <ThemeProvider domain="domain-cocoon">
900
+ <PhoneInput placeholder="Telefonnummer" :countries-codes="['DE', 'AT', 'CH']" />
901
+ </ThemeProvider>
902
+ </td>
903
+ </tr>
904
+ <tr>
905
+ <td class="variation-label">PhoneInput - Error</td>
906
+ <td>
907
+ <ThemeProvider domain="domain-dental">
908
+ <PhoneInput placeholder="Telefonnummer" :error="true" hint="Telefonnummer darf nicht leer sein." />
909
+ </ThemeProvider>
910
+ </td>
911
+ <td>
912
+ <ThemeProvider domain="domain-cocoon">
913
+ <PhoneInput placeholder="Telefonnummer" :error="true" hint="Telefonnummer darf nicht leer sein." />
914
+ </ThemeProvider>
915
+ </td>
916
+ </tr>
917
+ <tr>
918
+ <td class="variation-label">PhoneInput - Error (invalid)</td>
919
+ <td>
920
+ <ThemeProvider domain="domain-dental">
921
+ <PhoneInput placeholder="Telefonnummer" :error="true" hint="Bitte geben Sie eine gültige Telefonnummer ein." />
922
+ </ThemeProvider>
923
+ </td>
924
+ <td>
925
+ <ThemeProvider domain="domain-cocoon">
926
+ <PhoneInput placeholder="Telefonnummer" :error="true" hint="Bitte geben Sie eine gültige Telefonnummer ein." />
927
+ </ThemeProvider>
928
+ </td>
929
+ </tr>
930
+
931
+ <!-- TickBox Variants -->
932
+ <tr>
933
+ <td colspan="3" class="section-header">TickBox Variants</td>
934
+ </tr>
935
+ <tr>
936
+ <td class="variation-label">TickBox - Unchecked</td>
937
+ <td>
938
+ <ThemeProvider domain="domain-dental">
939
+ <TickBox label="Unchecked" :model-value="false" />
940
+ </ThemeProvider>
941
+ </td>
942
+ <td>
943
+ <ThemeProvider domain="domain-cocoon">
944
+ <TickBox label="Unchecked" :model-value="false" />
945
+ </ThemeProvider>
946
+ </td>
947
+ </tr>
948
+ <tr>
949
+ <td class="variation-label">TickBox - Checked</td>
950
+ <td>
951
+ <ThemeProvider domain="domain-dental">
952
+ <TickBox label="Checked" :model-value="true" />
953
+ </ThemeProvider>
954
+ </td>
955
+ <td>
956
+ <ThemeProvider domain="domain-cocoon">
957
+ <TickBox label="Checked" :model-value="true" />
958
+ </ThemeProvider>
959
+ </td>
960
+ </tr>
961
+ <tr>
962
+ <td class="variation-label">TickBox - Disabled</td>
963
+ <td>
964
+ <ThemeProvider domain="domain-dental">
965
+ <TickBox label="Disabled" :disabled="true" :model-value="false" />
966
+ </ThemeProvider>
967
+ </td>
968
+ <td>
969
+ <ThemeProvider domain="domain-cocoon">
970
+ <TickBox label="Disabled" :disabled="true" :model-value="false" />
971
+ </ThemeProvider>
972
+ </td>
973
+ </tr>
974
+ <tr>
975
+ <td class="variation-label">TickBox - Disabled Checked</td>
976
+ <td>
977
+ <ThemeProvider domain="domain-dental">
978
+ <TickBox label="Disabled Checked" :disabled="true" :model-value="true" />
979
+ </ThemeProvider>
980
+ </td>
981
+ <td>
982
+ <ThemeProvider domain="domain-cocoon">
983
+ <TickBox label="Disabled Checked" :disabled="true" :model-value="true" />
984
+ </ThemeProvider>
985
+ </td>
986
+ </tr>
987
+ <tr>
988
+ <td class="variation-label">TickBox - Error</td>
989
+ <td>
990
+ <ThemeProvider domain="domain-dental">
991
+ <TickBox label="Error State" :error="true" :model-value="false" />
992
+ </ThemeProvider>
993
+ </td>
994
+ <td>
995
+ <ThemeProvider domain="domain-cocoon">
996
+ <TickBox label="Error State" :error="true" :model-value="false" />
997
+ </ThemeProvider>
998
+ </td>
999
+ </tr>
1000
+ <tr>
1001
+ <td class="variation-label">TickBox - Success</td>
1002
+ <td>
1003
+ <ThemeProvider domain="domain-dental">
1004
+ <TickBox label="Success State" :success="true" :model-value="true" />
1005
+ </ThemeProvider>
1006
+ </td>
1007
+ <td>
1008
+ <ThemeProvider domain="domain-cocoon">
1009
+ <TickBox label="Success State" :success="true" :model-value="true" />
1010
+ </ThemeProvider>
1011
+ </td>
1012
+ </tr>
1013
+
1014
+ <!-- NotificationBubble Variants -->
1015
+ <tr>
1016
+ <td colspan="3" class="section-header">NotificationBubble Variants</td>
1017
+ </tr>
1018
+ <tr>
1019
+ <td class="variation-label">NotificationBubble - Info</td>
1020
+ <td><NotificationBubble count="5" /></td>
1021
+ <td><NotificationBubble count="5" /></td>
1022
+ </tr>
1023
+ <tr>
1024
+ <td class="variation-label">NotificationBubble - High Count</td>
1025
+ <td><NotificationBubble count="99+" /></td>
1026
+ <td><NotificationBubble count="99+" /></td>
1027
+ </tr>
1028
+
1029
+ <!-- Appointment Card Variants -->
1030
+ <tr>
1031
+ <td colspan="3" class="section-header">Appointment Card Variants</td>
1032
+ </tr>
1033
+ <tr>
1034
+ <td class="variation-label">Card - Pending</td>
1035
+ <td>
1036
+ <ThemeProvider domain="domain-dental">
1037
+ <Card :appointment="appointmentPending" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
1038
+ </ThemeProvider>
1039
+ </td>
1040
+ <td>
1041
+ <ThemeProvider domain="domain-cocoon">
1042
+ <Card :appointment="appointmentPending" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
1043
+ </ThemeProvider>
1044
+ </td>
1045
+ </tr>
1046
+ <tr>
1047
+ <td class="variation-label">Card - Confirmed</td>
1048
+ <td>
1049
+ <ThemeProvider domain="domain-dental">
1050
+ <Card :appointment="appointmentConfirmed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
1051
+ </ThemeProvider>
1052
+ </td>
1053
+ <td>
1054
+ <ThemeProvider domain="domain-cocoon">
1055
+ <Card :appointment="appointmentConfirmed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" showActions/>
1056
+ </ThemeProvider>
1057
+ </td>
1058
+ </tr>
1059
+ <tr>
1060
+ <td class="variation-label">Card - Completed</td>
1061
+ <td>
1062
+ <ThemeProvider domain="domain-dental">
1063
+ <Card :appointment="appointmentCompleted" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1064
+ </ThemeProvider>
1065
+ </td>
1066
+ <td>
1067
+ <ThemeProvider domain="domain-cocoon">
1068
+ <Card :appointment="appointmentCompleted" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1069
+ </ThemeProvider>
1070
+ </td>
1071
+ </tr>
1072
+ <tr>
1073
+ <td class="variation-label">Card - With Anamnese Notification</td>
1074
+ <td>
1075
+ <ThemeProvider domain="domain-dental">
1076
+ <Card :appointment="appointmentPending" show-actions :show-anamnese-notification="true" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" @fill-anamnese="handleFillAnamnese" />
1077
+ </ThemeProvider>
1078
+ </td>
1079
+ <td>
1080
+ <ThemeProvider domain="domain-cocoon">
1081
+ <Card :appointment="appointmentPending" show-actions :show-anamnese-notification="true" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" @fill-anamnese="handleFillAnamnese" />
1082
+ </ThemeProvider>
1083
+ </td>
1084
+ </tr>
1085
+ <tr>
1086
+ <td class="variation-label">Card - Cancelled</td>
1087
+ <td>
1088
+ <ThemeProvider domain="domain-dental">
1089
+ <Card :appointment="appointmentCancelled" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1090
+ </ThemeProvider>
1091
+ </td>
1092
+ <td>
1093
+ <ThemeProvider domain="domain-cocoon">
1094
+ <Card :appointment="appointmentCancelled" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1095
+ </ThemeProvider>
1096
+ </td>
1097
+ </tr>
1098
+ <tr>
1099
+ <td class="variation-label">Card - Missed</td>
1100
+ <td>
1101
+ <ThemeProvider domain="domain-dental">
1102
+ <Card :appointment="appointmentMissed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1103
+ </ThemeProvider>
1104
+ </td>
1105
+ <td>
1106
+ <ThemeProvider domain="domain-cocoon">
1107
+ <Card :appointment="appointmentMissed" @confirm="handleConfirm" @cancel="handleCancel" @reschedule="handleReschedule" />
1108
+ </ThemeProvider>
1109
+ </td>
1110
+ </tr>
1111
+
1112
+ <!-- StagingBanner Variants -->
1113
+ <tr>
1114
+ <td colspan="3" class="section-header">StagingBanner Variants</td>
1115
+ </tr>
1116
+ <tr>
1117
+ <td class="variation-label">StagingBanner - Default</td>
1118
+ <td>
1119
+ <div class="banner-preview">
1120
+ <StagingBanner :show="true" :add-body-padding="false" />
1121
+ </div>
1122
+ </td>
1123
+ <td>
1124
+ <div class="banner-preview">
1125
+ <StagingBanner :show="true" :add-body-padding="false" />
1126
+ </div>
1127
+ </td>
1128
+ </tr>
1129
+ <tr>
1130
+ <td class="variation-label">StagingBanner - Custom Text</td>
1131
+ <td>
1132
+ <div class="banner-preview">
1133
+ <StagingBanner :show="true" text="🔧 Development Environment" :add-body-padding="false" />
1134
+ </div>
1135
+ </td>
1136
+ <td>
1137
+ <div class="banner-preview">
1138
+ <StagingBanner :show="true" text="🔧 Development Environment" :add-body-padding="false" />
1139
+ </div>
1140
+ </td>
1141
+ </tr>
1142
+
1143
+ <!-- Dialog Variants -->
1144
+ <tr>
1145
+ <td colspan="3" class="section-header">Dialog Variants</td>
1146
+ </tr>
1147
+ <tr>
1148
+ <td class="variation-label">Dialog - Default</td>
1149
+ <td>
1150
+ <Dialog>
1151
+ <template #activator="{ openDialog }">
1152
+ <Button label="Open Dialog" @click="openDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1153
+ </template>
1154
+ <template #content="{ closeDialog, titleId }">
1155
+ <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1156
+ <h2 :id="titleId" style="margin-bottom: 1rem;">Dialog Title</h2>
1157
+ <p style="margin-bottom: 1rem;">This is the dialog content.</p>
1158
+ <Button label="Close" @click="closeDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1159
+ </div>
1160
+ </template>
1161
+ </Dialog>
1162
+ </td>
1163
+ <td>
1164
+ <Dialog>
1165
+ <template #activator="{ openDialog }">
1166
+ <Button label="Open Dialog" @click="openDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1167
+ </template>
1168
+ <template #content="{ closeDialog, titleId }">
1169
+ <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1170
+ <h2 :id="titleId" style="margin-bottom: 1rem;">Dialog Title</h2>
1171
+ <p style="margin-bottom: 1rem;">This is the dialog content.</p>
1172
+ <Button label="Close" @click="closeDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1173
+ </div>
1174
+ </template>
1175
+ </Dialog>
1176
+ </td>
1177
+ </tr>
1178
+
1179
+ <!-- Anamnese Answer Dialog Variants -->
1180
+ <tr>
1181
+ <td colspan="3" class="section-header">Anamnese Answer Dialog</td>
1182
+ </tr>
1183
+ <tr>
1184
+ <td class="variation-label">AnamneseAnswerDialog - With Data</td>
1185
+ <td>
1186
+ <AnamneseAnswerDialog :pageAnswerGroups="samplePageAnswerGroups" />
1187
+ </td>
1188
+ <td>
1189
+ <AnamneseAnswerDialog :pageAnswerGroups="samplePageAnswerGroups" />
1190
+ </td>
1191
+ </tr>
1192
+ <tr>
1193
+ <td class="variation-label">AnamneseAnswerDialog - Empty</td>
1194
+ <td>
1195
+ <AnamneseAnswerDialog :pageAnswerGroups="[]" />
1196
+ </td>
1197
+ <td>
1198
+ <AnamneseAnswerDialog :pageAnswerGroups="[]" />
1199
+ </td>
1200
+ </tr>
1201
+
1202
+ <!-- Modal Variants -->
1203
+ <tr>
1204
+ <td colspan="3" class="section-header">Modal Variants</td>
1205
+ </tr>
1206
+ <tr>
1207
+ <td class="variation-label">Modal - Default</td>
1208
+ <td>
1209
+ <Button label="Open Modal" @click="openDentalModal" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1210
+ <Modal ref="dentalModal">
1211
+ <template #content="{ closeDialog }">
1212
+ <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1213
+ <h2 style="margin-bottom: 1rem;">Modal Title</h2>
1214
+ <p style="margin-bottom: 1rem;">This is the modal content.</p>
1215
+ <Button label="Close" @click="closeDialog" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
1216
+ </div>
1217
+ </template>
1218
+ </Modal>
1219
+ </td>
1220
+ <td>
1221
+ <Button label="Open Modal" @click="openCocoonModal" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1222
+ <Modal ref="cocoonModal">
1223
+ <template #content="{ closeDialog }">
1224
+ <div style="background: white; padding: 2rem; border-radius: 8px; min-width: 300px;">
1225
+ <h2 style="margin-bottom: 1rem;">Modal Title</h2>
1226
+ <p style="margin-bottom: 1rem;">This is the modal content.</p>
1227
+ <Button label="Close" @click="closeDialog" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
1228
+ </div>
1229
+ </template>
1230
+ </Modal>
1231
+ </td>
1232
+ </tr>
1233
+
1234
+ <!-- ErrorPage Variants (Preview in scaled container) -->
1235
+ <tr>
1236
+ <td colspan="3" class="section-header">ErrorPage Variants (Scaled Preview)</td>
1237
+ </tr>
1238
+ <tr>
1239
+ <td class="variation-label">ErrorPage - 404</td>
1240
+ <td>
1241
+ <div class="preview-container">
1242
+ <ThemeProvider domain="domain-dental">
1243
+ <ErrorPage :status-code="404" redirect-to="/" inline />
1244
+ </ThemeProvider>
1245
+ </div>
1246
+ </td>
1247
+ <td>
1248
+ <div class="preview-container">
1249
+ <ThemeProvider domain="domain-cocoon">
1250
+ <ErrorPage :status-code="404" redirect-to="/" inline />
1251
+ </ThemeProvider>
1252
+ </div>
1253
+ </td>
1254
+ </tr>
1255
+ <tr>
1256
+ <td class="variation-label">ErrorPage - 500</td>
1257
+ <td>
1258
+ <div class="preview-container">
1259
+ <ThemeProvider domain="domain-dental">
1260
+ <ErrorPage :status-code="500" redirect-to="/" inline />
1261
+ </ThemeProvider>
1262
+ </div>
1263
+ </td>
1264
+ <td>
1265
+ <div class="preview-container">
1266
+ <ThemeProvider domain="domain-cocoon">
1267
+ <ErrorPage :status-code="500" redirect-to="/" inline />
1268
+ </ThemeProvider>
1269
+ </div>
1270
+ </td>
1271
+ </tr>
1272
+
1273
+ <!-- MaintenanceBanner Variants (Preview in scaled container) -->
1274
+ <tr>
1275
+ <td colspan="3" class="section-header">MaintenanceBanner Variants (Scaled Preview)</td>
1276
+ </tr>
1277
+ <tr>
1278
+ <td class="variation-label">MaintenanceBanner - Default</td>
1279
+ <td>
1280
+ <div class="preview-container">
1281
+ <ThemeProvider domain="domain-dental">
1282
+ <MaintenanceBanner inline />
1283
+ </ThemeProvider>
1284
+ </div>
1285
+ </td>
1286
+ <td>
1287
+ <div class="preview-container">
1288
+ <ThemeProvider domain="domain-cocoon">
1289
+ <MaintenanceBanner inline />
1290
+ </ThemeProvider>
1291
+ </div>
1292
+ </td>
1293
+ </tr>
1294
+ <tr>
1295
+ <td class="variation-label">MaintenanceBanner - Custom</td>
1296
+ <td>
1297
+ <div class="preview-container">
1298
+ <ThemeProvider domain="domain-dental">
1299
+ <MaintenanceBanner
1300
+ title="Wartungsarbeiten"
1301
+ description="Wir sind bald zurück!"
1302
+ phone="+49 30 1234567"
1303
+ email="info@example.de"
1304
+ button-text="Kontakt aufnehmen"
1305
+ inline
1306
+ />
1307
+ </ThemeProvider>
1308
+ </div>
1309
+ </td>
1310
+ <td>
1311
+ <div class="preview-container">
1312
+ <ThemeProvider domain="domain-cocoon">
1313
+ <MaintenanceBanner
1314
+ title="Wartungsarbeiten"
1315
+ description="Wir sind bald zurück!"
1316
+ phone="+49 30 1234567"
1317
+ email="info@example.de"
1318
+ button-text="Kontakt aufnehmen"
1319
+ inline
1320
+ />
1321
+ </ThemeProvider>
1322
+ </div>
1323
+ </td>
1324
+ </tr>
1325
+
1326
+ <!-- Icon Variants -->
1327
+ <tr>
1328
+ <td colspan="3" class="section-header">Logo Variants</td>
1329
+ </tr>
1330
+ <tr>
1331
+ <td class="variation-label">Logo - Default Size</td>
1332
+ <td>
1333
+ <ThemeProvider domain="domain-dental">
1334
+ <Logo />
1335
+ </ThemeProvider>
1336
+ </td>
1337
+ <td>
1338
+ <ThemeProvider domain="domain-cocoon">
1339
+ <Logo />
1340
+ </ThemeProvider>
1341
+ </td>
1342
+ </tr>
1343
+ <tr>
1344
+ <td class="variation-label">Logo - Large Size</td>
1345
+ <td>
1346
+ <ThemeProvider domain="domain-dental">
1347
+ <Logo width="180" height="45" />
1348
+ </ThemeProvider>
1349
+ </td>
1350
+ <td>
1351
+ <ThemeProvider domain="domain-cocoon">
1352
+ <Logo width="180" height="45" />
1353
+ </ThemeProvider>
1354
+ </td>
1355
+ </tr>
1356
+ <tr>
1357
+ <td class="variation-label">Logo - Small Size</td>
1358
+ <td>
1359
+ <ThemeProvider domain="domain-dental">
1360
+ <Logo width="80" height="20" />
1361
+ </ThemeProvider>
1362
+ </td>
1363
+ <td>
1364
+ <ThemeProvider domain="domain-cocoon">
1365
+ <Logo width="80" height="20" />
1366
+ </ThemeProvider>
1367
+ </td>
1368
+ </tr>
1369
+ <tr>
1370
+ <td class="variation-label">MiniLogo</td>
1371
+ <td>
1372
+ <ThemeProvider domain="domain-dental">
1373
+ <MiniLogo />
1374
+ </ThemeProvider>
1375
+ </td>
1376
+ <td>
1377
+ <ThemeProvider domain="domain-cocoon">
1378
+ <MiniLogo />
1379
+ </ThemeProvider>
1380
+ </td>
1381
+ </tr>
1382
+ <tr>
1383
+ <td class="variation-label">FavIcon</td>
1384
+ <td>
1385
+ <ThemeProvider domain="domain-dental">
1386
+ <FavIcon />
1387
+ </ThemeProvider>
1388
+ </td>
1389
+ <td>
1390
+ <ThemeProvider domain="domain-cocoon">
1391
+ <FavIcon />
1392
+ </ThemeProvider>
1393
+ </td>
1394
+ </tr>
1395
+
1396
+ <!-- Typography Variants -->
1397
+ <tr>
1398
+ <td colspan="3" class="section-header">Typography Variants</td>
1399
+ </tr>
1400
+ <tr>
1401
+ <td class="variation-label">Heading 1 (h1)</td>
1402
+ <td>
1403
+ <ThemeProvider domain="domain-dental">
1404
+ <h1 style="font-size: 32px;">Heading 1</h1>
1405
+ </ThemeProvider>
1406
+ </td>
1407
+ <td>
1408
+ <ThemeProvider domain="domain-cocoon">
1409
+ <h1 style="font-size: 32px;">Heading 1</h1>
1410
+ </ThemeProvider>
1411
+ </td>
1412
+ </tr>
1413
+ <tr>
1414
+ <td class="variation-label">Heading 2 (h2)</td>
1415
+ <td>
1416
+ <ThemeProvider domain="domain-dental">
1417
+ <h2>Heading 2</h2>
1418
+ </ThemeProvider>
1419
+ </td>
1420
+ <td>
1421
+ <ThemeProvider domain="domain-cocoon">
1422
+ <h2>Heading 2</h2>
1423
+ </ThemeProvider>
1424
+ </td>
1425
+ </tr>
1426
+ <tr>
1427
+ <td class="variation-label">Heading 3 (h3)</td>
1428
+ <td>
1429
+ <ThemeProvider domain="domain-dental">
1430
+ <h3>Heading 3</h3>
1431
+ </ThemeProvider>
1432
+ </td>
1433
+ <td>
1434
+ <ThemeProvider domain="domain-cocoon">
1435
+ <h3>Heading 3</h3>
1436
+ </ThemeProvider>
1437
+ </td>
1438
+ </tr>
1439
+ <tr>
1440
+ <td class="variation-label">Heading 4 (h4)</td>
1441
+ <td>
1442
+ <ThemeProvider domain="domain-dental">
1443
+ <h4>Heading 4</h4>
1444
+ </ThemeProvider>
1445
+ </td>
1446
+ <td>
1447
+ <ThemeProvider domain="domain-cocoon">
1448
+ <h4>Heading 4</h4>
1449
+ </ThemeProvider>
1450
+ </td>
1451
+ </tr>
1452
+ <tr>
1453
+ <td class="variation-label">Heading 5 (h5)</td>
1454
+ <td>
1455
+ <ThemeProvider domain="domain-dental">
1456
+ <h5>Heading 5</h5>
1457
+ </ThemeProvider>
1458
+ </td>
1459
+ <td>
1460
+ <ThemeProvider domain="domain-cocoon">
1461
+ <h5>Heading 5</h5>
1462
+ </ThemeProvider>
1463
+ </td>
1464
+ </tr>
1465
+ <tr>
1466
+ <td class="variation-label">Heading 6 (h6)</td>
1467
+ <td>
1468
+ <ThemeProvider domain="domain-dental">
1469
+ <h6>Heading 6</h6>
1470
+ </ThemeProvider>
1471
+ </td>
1472
+ <td>
1473
+ <ThemeProvider domain="domain-cocoon">
1474
+ <h6>Heading 6</h6>
1475
+ </ThemeProvider>
1476
+ </td>
1477
+ </tr>
1478
+ <tr>
1479
+ <td class="variation-label">Paragraph (p)</td>
1480
+ <td>
1481
+ <ThemeProvider domain="domain-dental">
1482
+ <p>This is a paragraph with sample text to demonstrate the default styling.</p>
1483
+ </ThemeProvider>
1484
+ </td>
1485
+ <td>
1486
+ <ThemeProvider domain="domain-cocoon">
1487
+ <p>This is a paragraph with sample text to demonstrate the default styling.</p>
1488
+ </ThemeProvider>
1489
+ </td>
1490
+ </tr>
1491
+ <tr>
1492
+ <td class="variation-label">Paragraph - Large (.p-large)</td>
1493
+ <td>
1494
+ <ThemeProvider domain="domain-dental">
1495
+ <p class="p-large">Large paragraph text for emphasis.</p>
1496
+ </ThemeProvider>
1497
+ </td>
1498
+ <td>
1499
+ <ThemeProvider domain="domain-cocoon">
1500
+ <p class="p-large">Large paragraph text for emphasis.</p>
1501
+ </ThemeProvider>
1502
+ </td>
1503
+ </tr>
1504
+ <tr>
1505
+ <td class="variation-label">Paragraph - Medium (.p-medium)</td>
1506
+ <td>
1507
+ <ThemeProvider domain="domain-dental">
1508
+ <p class="p-medium">Medium paragraph text for standard content.</p>
1509
+ </ThemeProvider>
1510
+ </td>
1511
+ <td>
1512
+ <ThemeProvider domain="domain-cocoon">
1513
+ <p class="p-medium">Medium paragraph text for standard content.</p>
1514
+ </ThemeProvider>
1515
+ </td>
1516
+ </tr>
1517
+ <tr>
1518
+ <td class="variation-label">Paragraph - Regular (.p-regular)</td>
1519
+ <td>
1520
+ <ThemeProvider domain="domain-dental">
1521
+ <p class="p-regular">Regular paragraph text for body content.</p>
1522
+ </ThemeProvider>
1523
+ </td>
1524
+ <td>
1525
+ <ThemeProvider domain="domain-cocoon">
1526
+ <p class="p-regular">Regular paragraph text for body content.</p>
1527
+ </ThemeProvider>
1528
+ </td>
1529
+ </tr>
1530
+ <tr>
1531
+ <td class="variation-label">Paragraph - Small (.p-small)</td>
1532
+ <td>
1533
+ <ThemeProvider domain="domain-dental">
1534
+ <p class="p-small">Small paragraph text for captions and fine print.</p>
1535
+ </ThemeProvider>
1536
+ </td>
1537
+ <td>
1538
+ <ThemeProvider domain="domain-cocoon">
1539
+ <p class="p-small">Small paragraph text for captions and fine print.</p>
1540
+ </ThemeProvider>
1541
+ </td>
1542
+ </tr>
1543
+
1544
+ <!-- Icon Components -->
1545
+ <tr>
1546
+ <td colspan="3" class="section-header">Icon Components</td>
1547
+ </tr>
1548
+ <tr>
1549
+ <td class="variation-label">Calendar Icon</td>
1550
+ <td><ThemeProvider domain="domain-dental"><Calendar /></ThemeProvider></td>
1551
+ <td><ThemeProvider domain="domain-cocoon"><Calendar /></ThemeProvider></td>
1552
+ </tr>
1553
+ <tr>
1554
+ <td class="variation-label">Calendar Notification Icon</td>
1555
+ <td><ThemeProvider domain="domain-dental"><CalendarNotification /></ThemeProvider></td>
1556
+ <td><ThemeProvider domain="domain-cocoon"><CalendarNotification /></ThemeProvider></td>
1557
+ </tr>
1558
+ <tr>
1559
+ <td class="variation-label">Chair Icon</td>
1560
+ <td><ThemeProvider domain="domain-dental"><Chair /></ThemeProvider></td>
1561
+ <td><ThemeProvider domain="domain-cocoon"><Chair /></ThemeProvider></td>
1562
+ </tr>
1563
+ <tr>
1564
+ <td class="variation-label">Chair Notification Icon</td>
1565
+ <td><ThemeProvider domain="domain-dental"><ChairNotification /></ThemeProvider></td>
1566
+ <td><ThemeProvider domain="domain-cocoon"><ChairNotification /></ThemeProvider></td>
1567
+ </tr>
1568
+ <tr>
1569
+ <td class="variation-label">Checkbox Icon</td>
1570
+ <td><ThemeProvider domain="domain-dental"><checkbox /></ThemeProvider></td>
1571
+ <td><ThemeProvider domain="domain-cocoon"><checkbox /></ThemeProvider></td>
1572
+ </tr>
1573
+ <tr>
1574
+ <td class="variation-label">Circle Icon</td>
1575
+ <td><ThemeProvider domain="domain-dental"><Circle /></ThemeProvider></td>
1576
+ <td><ThemeProvider domain="domain-cocoon"><Circle /></ThemeProvider></td>
1577
+ </tr>
1578
+ <tr>
1579
+ <td class="variation-label">Filled Circle Icon</td>
1580
+ <td><ThemeProvider domain="domain-dental"><FilledCircle /></ThemeProvider></td>
1581
+ <td><ThemeProvider domain="domain-cocoon"><FilledCircle /></ThemeProvider></td>
1582
+ </tr>
1583
+ <tr>
1584
+ <td class="variation-label">Outline Checked Icon</td>
1585
+ <td><ThemeProvider domain="domain-dental"><outlineChecked /></ThemeProvider></td>
1586
+ <td><ThemeProvider domain="domain-cocoon"><outlineChecked /></ThemeProvider></td>
1587
+ </tr>
1588
+ <tr>
1589
+ <td class="variation-label">Play Icon</td>
1590
+ <td><ThemeProvider domain="domain-dental"><Play /></ThemeProvider></td>
1591
+ <td><ThemeProvider domain="domain-cocoon"><Play /></ThemeProvider></td>
1592
+ </tr>
1593
+ <tr>
1594
+ <td class="variation-label">Ring Notification Icon</td>
1595
+ <td><ThemeProvider domain="domain-dental"><RingNotification /></ThemeProvider></td>
1596
+ <td><ThemeProvider domain="domain-cocoon"><RingNotification /></ThemeProvider></td>
1597
+ </tr>
1598
+ <tr>
1599
+ <td class="variation-label">Solid Arrow Right Icon</td>
1600
+ <td><ThemeProvider domain="domain-dental"><SolidArrowRight /></ThemeProvider></td>
1601
+ <td><ThemeProvider domain="domain-cocoon"><SolidArrowRight /></ThemeProvider></td>
1602
+ </tr>
1603
+ <tr>
1604
+ <td class="variation-label">Advance Appointments Icon</td>
1605
+ <td><ThemeProvider domain="domain-dental"><AdvanceAppointments /></ThemeProvider></td>
1606
+ <td><ThemeProvider domain="domain-cocoon"><AdvanceAppointments /></ThemeProvider></td>
1607
+ </tr>
1608
+ <tr>
1609
+ <td class="variation-label">Group3 Icon</td>
1610
+ <td><ThemeProvider domain="domain-dental"><Group3 /></ThemeProvider></td>
1611
+ <td><ThemeProvider domain="domain-cocoon"><Group3 /></ThemeProvider></td>
1612
+ </tr>
1613
+
1614
+ <!-- IconBullet Components -->
1615
+ <tr>
1616
+ <td colspan="3" class="section-header">IconBullet Variants</td>
1617
+ </tr>
1618
+ <tr>
1619
+ <td class="variation-label">IconBullet - With v-icon</td>
1620
+ <td>
1621
+ <ThemeProvider domain="domain-dental">
1622
+ <IconBullet
1623
+ icon="mdi-check-circle"
1624
+ header="Professionelle Behandlung"
1625
+ sub-header="Unser erfahrenes Team sorgt für Ihre Gesundheit"
1626
+ />
1627
+ </ThemeProvider>
1628
+ </td>
1629
+ <td>
1630
+ <ThemeProvider domain="domain-cocoon">
1631
+ <IconBullet
1632
+ icon="mdi-check-circle"
1633
+ header="Professionelle Behandlung"
1634
+ sub-header="Unser erfahrenes Team sorgt für Ihre Gesundheit"
1635
+ />
1636
+ </ThemeProvider>
1637
+ </td>
1638
+ </tr>
1639
+ <tr>
1640
+ <td class="variation-label">IconBullet - With custom icon (Calendar)</td>
1641
+ <td>
1642
+ <ThemeProvider domain="domain-dental">
1643
+ <IconBullet
1644
+ header="Flexible Terminplanung"
1645
+ sub-header="Buchen Sie online Ihren Wunschtermin"
1646
+ >
1647
+ <template #icon>
1648
+ <Calendar />
1649
+ </template>
1650
+ </IconBullet>
1651
+ </ThemeProvider>
1652
+ </td>
1653
+ <td>
1654
+ <ThemeProvider domain="domain-cocoon">
1655
+ <IconBullet
1656
+ header="Flexible Terminplanung"
1657
+ sub-header="Buchen Sie online Ihren Wunschtermin"
1658
+ >
1659
+ <template #icon>
1660
+ <Calendar />
1661
+ </template>
1662
+ </IconBullet>
1663
+ </ThemeProvider>
1664
+ </td>
1665
+ </tr>
1666
+ <tr>
1667
+ <td class="variation-label">IconBullet - With custom icon (Chair)</td>
1668
+ <td>
1669
+ <ThemeProvider domain="domain-dental">
1670
+ <IconBullet
1671
+ header="Moderne Ausstattung"
1672
+ sub-header="Neueste Technologie für Ihren Komfort"
1673
+ >
1674
+ <template #icon>
1675
+ <Chair />
1676
+ </template>
1677
+ </IconBullet>
1678
+ </ThemeProvider>
1679
+ </td>
1680
+ <td>
1681
+ <ThemeProvider domain="domain-cocoon">
1682
+ <IconBullet
1683
+ header="Moderne Ausstattung"
1684
+ sub-header="Neueste Technologie für Ihren Komfort"
1685
+ >
1686
+ <template #icon>
1687
+ <Chair />
1688
+ </template>
1689
+ </IconBullet>
1690
+ </ThemeProvider>
1691
+ </td>
1692
+ </tr>
1693
+ <tr>
1694
+ <td class="variation-label">IconBullet - With HTML content</td>
1695
+ <td>
1696
+ <ThemeProvider domain="domain-dental">
1697
+ <IconBullet
1698
+ icon="mdi-shield-check"
1699
+ content="<strong>Höchste Sicherheitsstandards</strong><br>Strenge Hygiene- und Qualitätskontrollen"
1700
+ />
1701
+ </ThemeProvider>
1702
+ </td>
1703
+ <td>
1704
+ <ThemeProvider domain="domain-cocoon">
1705
+ <IconBullet
1706
+ icon="mdi-shield-check"
1707
+ content="<strong>Höchste Sicherheitsstandards</strong><br>Strenge Hygiene- und Qualitätskontrollen"
1708
+ />
1709
+ </ThemeProvider>
1710
+ </td>
1711
+ </tr>
1712
+
1713
+ <!-- IconBulletList Components -->
1714
+ <tr>
1715
+ <td colspan="3" class="section-header">IconBulletList Variants</td>
1716
+ </tr>
1717
+ <tr>
1718
+ <td class="variation-label">IconBulletList - With header prop</td>
1719
+ <td>
1720
+ <ThemeProvider domain="domain-dental">
1721
+ <IconBulletList header="Unsere Vorteile">
1722
+ <IconBullet
1723
+ icon="mdi-clock-outline"
1724
+ header="Kurze Wartezeiten"
1725
+ sub-header="Pünktliche Termine garantiert"
1726
+ />
1727
+ <IconBullet
1728
+ icon="mdi-account-group"
1729
+ header="Erfahrenes Team"
1730
+ sub-header="Über 20 Jahre Expertise"
1731
+ />
1732
+ <IconBullet
1733
+ icon="mdi-hospital-building"
1734
+ header="Zentrale Lage"
1735
+ sub-header="Gut erreichbar mit ÖPNV"
1736
+ />
1737
+ </IconBulletList>
1738
+ </ThemeProvider>
1739
+ </td>
1740
+ <td>
1741
+ <ThemeProvider domain="domain-cocoon">
1742
+ <IconBulletList header="Unsere Vorteile">
1743
+ <IconBullet
1744
+ icon="mdi-clock-outline"
1745
+ header="Kurze Wartezeiten"
1746
+ sub-header="Pünktliche Termine garantiert"
1747
+ />
1748
+ <IconBullet
1749
+ icon="mdi-account-group"
1750
+ header="Erfahrenes Team"
1751
+ sub-header="Über 20 Jahre Expertise"
1752
+ />
1753
+ <IconBullet
1754
+ icon="mdi-hospital-building"
1755
+ header="Zentrale Lage"
1756
+ sub-header="Gut erreichbar mit ÖPNV"
1757
+ />
1758
+ </IconBulletList>
1759
+ </ThemeProvider>
1760
+ </td>
1761
+ </tr>
1762
+ <tr>
1763
+ <td class="variation-label">IconBulletList - With custom icons</td>
1764
+ <td>
1765
+ <ThemeProvider domain="domain-dental">
1766
+ <IconBulletList header="Behandlungsmöglichkeiten">
1767
+ <IconBullet
1768
+ header="Prophylaxe"
1769
+ sub-header="Professionelle Zahnreinigung"
1770
+ >
1771
+ <template #icon>
1772
+ <Calendar />
1773
+ </template>
1774
+ </IconBullet>
1775
+ <IconBullet
1776
+ header="Implantologie"
1777
+ sub-header="Fester Zahnersatz"
1778
+ >
1779
+ <template #icon>
1780
+ <Chair />
1781
+ </template>
1782
+ </IconBullet>
1783
+ <IconBullet
1784
+ header="Ästhetik"
1785
+ sub-header="Bleaching & Veneers"
1786
+ >
1787
+ <template #icon>
1788
+ <FilledCircle />
1789
+ </template>
1790
+ </IconBullet>
1791
+ </IconBulletList>
1792
+ </ThemeProvider>
1793
+ </td>
1794
+ <td>
1795
+ <ThemeProvider domain="domain-cocoon">
1796
+ <IconBulletList header="Behandlungsmöglichkeiten">
1797
+ <IconBullet
1798
+ header="Prophylaxe"
1799
+ sub-header="Professionelle Zahnreinigung"
1800
+ >
1801
+ <template #icon>
1802
+ <Calendar />
1803
+ </template>
1804
+ </IconBullet>
1805
+ <IconBullet
1806
+ header="Implantologie"
1807
+ sub-header="Fester Zahnersatz"
1808
+ >
1809
+ <template #icon>
1810
+ <Chair />
1811
+ </template>
1812
+ </IconBullet>
1813
+ <IconBullet
1814
+ header="Ästhetik"
1815
+ sub-header="Bleaching & Veneers"
1816
+ >
1817
+ <template #icon>
1818
+ <FilledCircle />
1819
+ </template>
1820
+ </IconBullet>
1821
+ </IconBulletList>
1822
+ </ThemeProvider>
1823
+ </td>
1824
+ </tr>
1825
+ <tr>
1826
+ <td class="variation-label">IconBulletList - No header</td>
1827
+ <td>
1828
+ <ThemeProvider domain="domain-dental">
1829
+ <IconBulletList>
1830
+ <IconBullet
1831
+ icon="mdi-phone"
1832
+ header="Telefon"
1833
+ sub-header="+49 30 1234567"
1834
+ />
1835
+ <IconBullet
1836
+ icon="mdi-email"
1837
+ header="E-Mail"
1838
+ sub-header="info@praxis.de"
1839
+ />
1840
+ <IconBullet
1841
+ icon="mdi-map-marker"
1842
+ header="Adresse"
1843
+ sub-header="Musterstraße 123, 10115 Berlin"
1844
+ />
1845
+ </IconBulletList>
1846
+ </ThemeProvider>
1847
+ </td>
1848
+ <td>
1849
+ <ThemeProvider domain="domain-cocoon">
1850
+ <IconBulletList>
1851
+ <IconBullet
1852
+ icon="mdi-phone"
1853
+ header="Telefon"
1854
+ sub-header="+49 30 1234567"
1855
+ />
1856
+ <IconBullet
1857
+ icon="mdi-email"
1858
+ header="E-Mail"
1859
+ sub-header="info@praxis.de"
1860
+ />
1861
+ <IconBullet
1862
+ icon="mdi-map-marker"
1863
+ header="Adresse"
1864
+ sub-header="Musterstraße 123, 10115 Berlin"
1865
+ />
1866
+ </IconBulletList>
1867
+ </ThemeProvider>
1868
+ </td>
1869
+ </tr>
1870
+
1871
+ <!-- EditField Components -->
1872
+ <tr>
1873
+ <td colspan="3" class="section-header">EditField Variants</td>
1874
+ </tr>
1875
+ <tr>
1876
+ <td class="variation-label">EditField - Text Input</td>
1877
+ <td>
1878
+ <ThemeProvider domain="domain-dental">
1879
+ <EditField
1880
+ title="Name"
1881
+ icon="mdi-account"
1882
+ type="text"
1883
+ :value="editFieldTextValue"
1884
+ @update:value="(val) => editFieldTextValue = val"
1885
+ />
1886
+ </ThemeProvider>
1887
+ </td>
1888
+ <td>
1889
+ <ThemeProvider domain="domain-cocoon">
1890
+ <EditField
1891
+ title="Name"
1892
+ icon="mdi-account"
1893
+ type="text"
1894
+ :value="editFieldTextValue"
1895
+ @update:value="(val) => editFieldTextValue = val"
1896
+ />
1897
+ </ThemeProvider>
1898
+ </td>
1899
+ </tr>
1900
+ <tr>
1901
+ <td class="variation-label">EditField - Select Dropdown</td>
1902
+ <td>
1903
+ <ThemeProvider domain="domain-dental">
1904
+ <EditField
1905
+ title="Bevorzugte Zeit"
1906
+ icon="mdi-clock-outline"
1907
+ type="select"
1908
+ :value="editFieldSelectValue"
1909
+ :items="timeSlotItems"
1910
+ @update:value="(val) => editFieldSelectValue = val"
1911
+ />
1912
+ </ThemeProvider>
1913
+ </td>
1914
+ <td>
1915
+ <ThemeProvider domain="domain-cocoon">
1916
+ <EditField
1917
+ title="Bevorzugte Zeit"
1918
+ icon="mdi-clock-outline"
1919
+ type="select"
1920
+ :value="editFieldSelectValue"
1921
+ :items="timeSlotItems"
1922
+ @update:value="(val) => editFieldSelectValue = val"
1923
+ />
1924
+ </ThemeProvider>
1925
+ </td>
1926
+ </tr>
1927
+ <tr>
1928
+ <td class="variation-label">EditField - Date Input</td>
1929
+ <td>
1930
+ <ThemeProvider domain="domain-dental">
1931
+ <EditField
1932
+ title="Geburtsdatum"
1933
+ icon="mdi-calendar"
1934
+ type="date"
1935
+ :value="editFieldDateValue"
1936
+ @update:value="(val) => editFieldDateValue = val"
1937
+ />
1938
+ </ThemeProvider>
1939
+ </td>
1940
+ <td>
1941
+ <ThemeProvider domain="domain-cocoon">
1942
+ <EditField
1943
+ title="Geburtsdatum"
1944
+ icon="mdi-calendar"
1945
+ type="date"
1946
+ :value="editFieldDateValue"
1947
+ @update:value="(val) => editFieldDateValue = val"
1948
+ />
1949
+ </ThemeProvider>
1950
+ </td>
1951
+ </tr>
1952
+ <tr>
1953
+ <td class="variation-label">EditField - Phone Input</td>
1954
+ <td>
1955
+ <ThemeProvider domain="domain-dental">
1956
+ <EditField
1957
+ title="Telefonnummer"
1958
+ icon="mdi-phone"
1959
+ type="phone"
1960
+ :value="editFieldPhoneValue"
1961
+ @update:value="(val) => editFieldPhoneValue = val"
1962
+ />
1963
+ </ThemeProvider>
1964
+ </td>
1965
+ <td>
1966
+ <ThemeProvider domain="domain-cocoon">
1967
+ <EditField
1968
+ title="Telefonnummer"
1969
+ icon="mdi-phone"
1970
+ type="phone"
1971
+ :value="editFieldPhoneValue"
1972
+ @update:value="(val) => editFieldPhoneValue = val"
1973
+ />
1974
+ </ThemeProvider>
1975
+ </td>
1976
+ </tr>
1977
+ </tbody>
1978
+ </table>
1979
+ </Background>
1980
+ </div>
1981
+ </div>
1982
+ </div>
1983
+ </template>
1984
+
1985
+ <script setup lang="ts">
1986
+ import { computed, ref } from 'vue';
1987
+ import { domain, setTestingDomain, clearTestingDomain, getColorsForDomain } from '@/utils/index';
1988
+
1989
+ import Button from '@/components/Button/Button.vue';
1990
+ import Background from '@/components/Background/Background.vue';
1991
+ import OtpInput from '@/components/OtpInput/OtpInput.vue';
1992
+ import Checkbox from '@/components/CheckBox/Checkbox.vue';
1993
+ import DateInput from '@/components/DateInput/DateInput.vue';
1994
+ import EditField from '@/components/EditField/EditField.vue';
1995
+ import Input from '@/components/Input/Input.vue';
1996
+ import Loader from '@/components/Loader/Loader.vue';
1997
+ import NotificationBubble from '@/components/NotificationBubble/NotificationBubble.vue';
1998
+ import PhoneInput from '@/components/PhoneInput/PhoneInput.vue';
1999
+ import RadioGroup from '@/components/RadioGroup/RadioGroup.vue';
2000
+ import Select from '@/components/Select/Select.vue';
2001
+ import SelectAutocomplete from '@/components/SelectAutocomplete/SelectAutocomplete.vue';
2002
+ import List from '@/components/List/List.vue';
2003
+ import ListItem from '@/components/ListItem/ListItem.vue';
2004
+ import TextArea from '@/components/TextArea/TextArea.vue';
2005
+ import TickBox from '@/components/TickBox/TickBox.vue';
2006
+ import AccordionGroup from '@/components/Accordion/AccordionGroup.vue';
2007
+ import AccordionItem from '@/components/Accordion/AccordionItem.vue';
2008
+ import Card from '@/components/Appointment/Card/Card.vue';
2009
+ import Dialog from '@/components/Dialog/Dialog.vue';
2010
+ import AnamneseAnswerDialog from '@/components/AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
2011
+ import Modal from '@/components/Modal/Modal.vue';
2012
+ import ErrorPage from '@/components/ErrorPage/ErrorPage.vue';
2013
+ import MaintenanceBanner from '@/components/MaintenanceBanner/MaintenanceBanner.vue';
2014
+ import StagingBanner from '@/components/StagingBanner/StagingBanner.vue';
2015
+ import IconBulletList from '@/components/IconBullet/IconBulletList.vue';
2016
+ import IconBullet from '@/components/IconBullet/IconBullet.vue';
2017
+ import AdvanceAppointments from '@/components/Icons/AdvanceAppointments.vue';
2018
+ import Calendar from '@/components/Icons/Calendar.vue';
2019
+ import CalendarNotification from '@/components/Icons/CalendarNotification.vue';
2020
+ import Chair from '@/components/Icons/Chair.vue';
2021
+ import ChairNotification from '@/components/Icons/ChairNotification.vue';
2022
+ import checkbox from '@/components/Icons/checkbox.vue';
2023
+ import Circle from '@/components/Icons/Circle.vue';
2024
+ import FavIcon from '@/components/Icons/FavIcon.vue';
2025
+ import FilledCircle from '@/components/Icons/FilledCircle.vue';
2026
+ import Group3 from '@/components/Icons/Group3.vue';
2027
+ import Logo from '@/components/Icons/Logo.vue';
2028
+ import MiniLogo from '@/components/Icons/MiniLogo.vue';
2029
+ import outlineChecked from '@/components/Icons/outlineChecked.vue';
2030
+ import Play from '@/components/Icons/Audio/Play.vue';
2031
+ import RingNotification from '@/components/Icons/RingNotification.vue';
2032
+ import SolidArrowRight from '@/components/Icons/SolidArrowRight.vue';
2033
+ import ThemeProvider from '@/components/ThemeProvider/ThemeProvider.vue';
2034
+ import { de } from 'date-fns/locale';
2035
+
2036
+
2037
+ const currentDomain = computed(() => domain.value);
2038
+
2039
+ const switchToDental = () => {
2040
+ setTestingDomain('domain-dental');
2041
+ };
2042
+
2043
+ const switchToCocoon = () => {
2044
+ setTestingDomain('domain-cocoon');
2045
+ };
2046
+
2047
+ const resetDomain = () => {
2048
+ clearTestingDomain();
2049
+ };
2050
+
2051
+ // Get colors for both domains
2052
+ const dentalColors = getColorsForDomain('domain-dental');
2053
+ const cocoonColors = getColorsForDomain('domain-cocoon');
2054
+
2055
+ // RadioGroup demo state
2056
+ const radioValue = ref('option1');
2057
+ const radioItems = [
2058
+ { value: 'option1', label: 'Option A' },
2059
+ { value: 'option2', label: 'Option B' },
2060
+ { value: 'option3', label: 'Option C' },
2061
+ ];
2062
+
2063
+ // Dummy functions for OtpInput
2064
+ const dummySubmit = () => console.log('Submit OTP');
2065
+ const dummyResend = () => console.log('Resend OTP');
2066
+
2067
+ // Modal refs and methods
2068
+ const dentalModal = ref(null);
2069
+ const cocoonModal = ref(null);
2070
+
2071
+ const openDentalModal = () => {
2072
+ if (dentalModal.value) {
2073
+ dentalModal.value.openDialog();
2074
+ }
2075
+ };
2076
+
2077
+ const openCocoonModal = () => {
2078
+ if (cocoonModal.value) {
2079
+ cocoonModal.value.openDialog();
2080
+ }
2081
+ };
2082
+
2083
+ // Appointment data for Card component
2084
+ const appointmentPending = {
2085
+ id: '1',
2086
+ patientName: 'Max Mustermann',
2087
+ description: 'Regelmäßige Zahnreinigung',
2088
+ start: '2024-01-15T10:00:00',
2089
+ template_name: 'Zahnreinigung',
2090
+ status: 'upcoming' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2091
+ is_confirmed: false,
2092
+ type: 1,
2093
+ dentist: {
2094
+ name: 'Dr. med. dent. Maria Schneider',
2095
+ gender: 'Zahnärztin',
2096
+ imageSrc: 'https://via.placeholder.com/50'
2097
+ },
2098
+ address: 'Musterstraße 123',
2099
+ district: 'Mitte, Berlin'
2100
+ };
2101
+
2102
+ const appointmentConfirmed = {
2103
+ id: '2',
2104
+ patientName: 'Anna Schmidt',
2105
+ description: 'Routinekontrolle',
2106
+ start: '2024-01-20T14:30:00',
2107
+ template_name: 'Kontrolle',
2108
+ status: 'upcoming' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2109
+ is_confirmed: true,
2110
+ type: 2,
2111
+ dentist: {
2112
+ name: 'Dr. Thomas Müller',
2113
+ gender: 'Zahnarzt',
2114
+ imageSrc: 'https://via.placeholder.com/50'
2115
+ },
2116
+ address: 'Berliner Straße 45',
2117
+ district: 'Charlottenburg, Berlin'
2118
+ };
2119
+
2120
+ const appointmentCompleted = {
2121
+ id: '3',
2122
+ patientName: 'Peter Weber',
2123
+ description: 'Wurzelbehandlung am linken Backenzahn',
2124
+ start: '2024-01-10T09:00:00',
2125
+ template_name: 'Wurzelbehandlung',
2126
+ status: 'done' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2127
+ type: 3,
2128
+ dentist: {
2129
+ name: 'Dr. Sarah Klein',
2130
+ gender: 'Zahnärztin',
2131
+ imageSrc: 'https://via.placeholder.com/50'
2132
+ },
2133
+ address: 'Hauptstraße 78',
2134
+ district: 'Prenzlauer Berg, Berlin',
2135
+ for_patient: true
2136
+ };
2137
+
2138
+ const appointmentCancelled = {
2139
+ id: '4',
2140
+ patientName: 'Julia Becker',
2141
+ description: 'Zahnreinigungstermin',
2142
+ start: '2024-01-18T11:00:00',
2143
+ template_name: 'Zahnreinigung',
2144
+ status: 'cancelled' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2145
+ type: 1,
2146
+ dentist: {
2147
+ name: 'Dr. Michael Wagner',
2148
+ gender: 'Zahnarzt',
2149
+ imageSrc: 'https://via.placeholder.com/50'
2150
+ },
2151
+ address: 'Friedrichstraße 201',
2152
+ district: 'Kreuzberg, Berlin'
2153
+ };
2154
+
2155
+ const appointmentMissed = {
2156
+ id: '5',
2157
+ patientName: 'Stefan Fischer',
2158
+ description: 'Jährliche Kontrolluntersuchung',
2159
+ start: '2024-01-05T09:30:00',
2160
+ template_name: 'Kontrolle',
2161
+ status: 'missed' as 'upcoming' | 'past' | 'cancelled' | 'missed' | 'done',
2162
+ type: 2,
2163
+ dentist: {
2164
+ name: 'Dr. Lisa Hoffmann',
2165
+ gender: 'Zahnärztin',
2166
+ imageSrc: 'https://via.placeholder.com/50'
2167
+ },
2168
+ address: 'Kantstraße 89',
2169
+ district: 'Wilmersdorf, Berlin'
2170
+ };
2171
+
2172
+ // Event handlers for Card component
2173
+ const handleConfirm = (id: string) => console.log('Confirm appointment:', id);
2174
+ const handleCancel = (id: string) => console.log('Cancel appointment:', id);
2175
+ const handleReschedule = (id: string) => console.log('Reschedule appointment:', id);
2176
+ const handleFillAnamnese = () => console.log('Fill anamnese');
2177
+
2178
+ // Accordion component data
2179
+ const accordionOutlined = ref(null);
2180
+ const accordionPlain = ref(null);
2181
+ const accordionMultiple = ref([1, 2]);
2182
+ const accordionComplex = ref(null);
2183
+
2184
+ // EditField component data
2185
+ const editFieldTextValue = ref('Max Mustermann');
2186
+ const editFieldSelectValue = ref('morning');
2187
+ const editFieldDateValue = ref('2024-03-15');
2188
+ const editFieldPhoneValue = ref('+49 30 12345678');
2189
+
2190
+ const timeSlotItems = [
2191
+ { value: 'morning', title: 'Vormittag (8:00 - 12:00)' },
2192
+ { value: 'afternoon', title: 'Nachmittag (12:00 - 17:00)' },
2193
+ { value: 'evening', title: 'Abend (17:00 - 20:00)' }
2194
+ ];
2195
+
2196
+ // AnamneseAnswerDialog sample data
2197
+ const samplePageAnswerGroups = [
2198
+ {
2199
+ pageKey: 'page1',
2200
+ title: 'Allgemeine Gesundheit',
2201
+ answers: [
2202
+ {
2203
+ key: 'q1',
2204
+ label: 'Leiden Sie an Herz-Kreislauf-Erkrankungen?',
2205
+ value: 'Nein',
2206
+ valueListSelected: [],
2207
+ valueListAll: [],
2208
+ hasColor: false,
2209
+ isSignature: false
2210
+ },
2211
+ {
2212
+ key: 'q2',
2213
+ label: 'Nehmen Sie regelmäßig Medikamente ein?',
2214
+ value: '',
2215
+ valueListSelected: [
2216
+ { text: 'Blutdrucksenker', selected: true, color: 'yellow' },
2217
+ { text: 'Blutverdünner', selected: true, color: 'red' }
2218
+ ],
2219
+ valueListAll: [],
2220
+ valueListAllDisplay: [
2221
+ { text: 'Blutdrucksenker', selected: true, color: 'yellow' },
2222
+ { text: 'Blutverdünner', selected: true, color: 'red' },
2223
+ { text: 'Schmerzmittel', selected: false, color: 'green' }
2224
+ ],
2225
+ hasColor: true,
2226
+ isSignature: false
2227
+ },
2228
+ {
2229
+ key: 'q3',
2230
+ label: 'Haben Sie Allergien?',
2231
+ value: '',
2232
+ valueListSelected: [
2233
+ { text: 'Penicillin', selected: true },
2234
+ { text: 'Latex', selected: true }
2235
+ ],
2236
+ valueListAll: [],
2237
+ hasColor: false,
2238
+ isSignature: false
2239
+ }
2240
+ ]
2241
+ },
2242
+ {
2243
+ pageKey: 'page2',
2244
+ title: 'Zahnärztliche Anamnese',
2245
+ answers: [
2246
+ {
2247
+ key: 'q4',
2248
+ label: 'Wann war Ihr letzter Zahnarztbesuch?',
2249
+ value: 'Vor 6 Monaten',
2250
+ valueListSelected: [],
2251
+ valueListAll: [],
2252
+ hasColor: false,
2253
+ isSignature: false
2254
+ },
2255
+ {
2256
+ key: 'q5',
2257
+ label: 'Haben Sie Zahnfleischbluten?',
2258
+ value: '',
2259
+ valueListSelected: [
2260
+ { text: 'Gelegentlich beim Zähneputzen', selected: true, isOther: true }
2261
+ ],
2262
+ valueListAll: [],
2263
+ hasColor: false,
2264
+ isSignature: false
2265
+ }
2266
+ ]
2267
+ },
2268
+ {
2269
+ pageKey: 'page3',
2270
+ title: 'Unterschrift',
2271
+ answers: [
2272
+ {
2273
+ key: 'signature',
2274
+ label: 'Patientenunterschrift',
2275
+ isSignature: true,
2276
+ signatureUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iNTAiPjxwYXRoIGQ9Ik0xMCAzMCBRIDMwIDEwLCA1MCAzMCBUIDkwIDMwIFQgMTMwIDMwIFQgMTcwIDMwIiBzdHJva2U9IiMzMzMiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg=='
2277
+ }
2278
+ ]
2279
+ }
2280
+ ];
2281
+ </script>
2282
+
2283
+ <style scoped>
2284
+ .app {
2285
+ display: flex;
2286
+ flex-direction: column;
2287
+ justify-content: flex-start;
2288
+ align-items: center;
2289
+ width: 100vw;
2290
+ min-height: 100vh;
2291
+ background-color: #f5f5f5;
2292
+ padding: 2rem 0;
2293
+ overflow-y: auto;
2294
+ }
2295
+
2296
+ .element-container {
2297
+ display: flex;
2298
+ flex-direction: column;
2299
+ justify-content: flex-start;
2300
+ align-items: center;
2301
+ width: 95%;
2302
+ gap: 2rem;
2303
+ }
2304
+
2305
+ /* Control Section */
2306
+ .controls {
2307
+ width: 100%;
2308
+ background: white;
2309
+ padding: 1.5rem;
2310
+ border-radius: 8px;
2311
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2312
+ text-align: center;
2313
+ }
2314
+
2315
+ .controls h2 {
2316
+ margin: 0 0 1rem 0;
2317
+ color: #333;
2318
+ font-size: 1.5rem;
2319
+ }
2320
+
2321
+ .button-group {
2322
+ display: flex;
2323
+ gap: 1rem;
2324
+ justify-content: center;
2325
+ flex-wrap: wrap;
2326
+ }
2327
+
2328
+ .control-btn {
2329
+ padding: 0.75rem 1.5rem;
2330
+ font-size: 1rem;
2331
+ border: none;
2332
+ border-radius: 6px;
2333
+ cursor: pointer;
2334
+ background-color: #4CAF50;
2335
+ color: white;
2336
+ transition: background-color 0.3s ease;
2337
+ font-weight: 500;
2338
+ }
2339
+
2340
+ .control-btn:hover {
2341
+ background-color: #45a049;
2342
+ }
2343
+
2344
+ .control-btn.reset {
2345
+ background-color: #f44336;
2346
+ }
2347
+
2348
+ .control-btn.reset:hover {
2349
+ background-color: #da190b;
2350
+ }
2351
+
2352
+ /* Matrix Container */
2353
+ .matrix-container {
2354
+ width: 100%;
2355
+ background: white;
2356
+ padding: 1.5rem;
2357
+ border-radius: 8px;
2358
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2359
+ overflow-x: auto;
2360
+ }
2361
+
2362
+ /* Table Styling */
2363
+ .variations-table {
2364
+ width: 100%;
2365
+ border-collapse: collapse;
2366
+ font-family: Arial, sans-serif;
2367
+ }
2368
+
2369
+ .variations-table thead {
2370
+ background-color: #333;
2371
+ color: white;
2372
+ }
2373
+
2374
+ .variations-table th {
2375
+ padding: 1rem;
2376
+ text-align: left;
2377
+ font-weight: 600;
2378
+ border-bottom: 2px solid #ddd;
2379
+ position: sticky;
2380
+ top: 0;
2381
+ z-index: 10;
2382
+ }
2383
+
2384
+ .variations-table tbody tr {
2385
+ border-bottom: 1px solid #e0e0e0;
2386
+ transition: background-color 0.2s ease;
2387
+ }
2388
+
2389
+ .variations-table tbody tr:hover {
2390
+ background-color: #f9f9f9;
2391
+ }
2392
+
2393
+ .variations-table td {
2394
+ padding: 1.25rem 1rem;
2395
+ text-align: center;
2396
+ }
2397
+
2398
+ .variation-label {
2399
+ font-weight: 600;
2400
+ color: #555;
2401
+ text-align: left !important;
2402
+ min-width: 200px;
2403
+ }
2404
+
2405
+ .section-header {
2406
+ font-weight: 700;
2407
+ font-size: 1.2rem;
2408
+ color: #333;
2409
+ text-align: left !important;
2410
+ background-color: #f0f0f0;
2411
+ padding: 1.5rem 1rem !important;
2412
+ border-top: 2px solid #ccc;
2413
+ border-bottom: 2px solid #ccc;
2414
+ }
2415
+
2416
+ /* Preview container for full-page components - Desktop */
2417
+ .preview-container {
2418
+ width: 100%;
2419
+ height: 400px;
2420
+ overflow: hidden;
2421
+ position: relative;
2422
+ border: 1px solid #ddd;
2423
+ border-radius: 4px;
2424
+ transform-origin: top left;
2425
+ transform: scale(0.5);
2426
+ width: 200%;
2427
+ height: 800px;
2428
+ }
2429
+
2430
+ /* Preview container for full-page components - Mobile (375px viewport) */
2431
+ .preview-container-mobile {
2432
+ width: 100%;
2433
+ max-width: 375px;
2434
+ height: 600px;
2435
+ overflow: hidden;
2436
+ position: relative;
2437
+ border: 1px solid #ddd;
2438
+ border-radius: 4px;
2439
+ transform-origin: top left;
2440
+ transform: scale(0.4);
2441
+ width: 250%;
2442
+ height: 1500px;
2443
+ }
2444
+
2445
+ /* Banner preview container - contains fixed positioned banner */
2446
+ .banner-preview {
2447
+ position: relative;
2448
+ width: 100%;
2449
+ height: 50px;
2450
+ overflow: hidden;
2451
+ border: 1px solid #ddd;
2452
+ border-radius: 4px;
2453
+ }
2454
+
2455
+ /* Override fixed positioning for banner inside preview */
2456
+ .banner-preview :deep(.staging-banner) {
2457
+ position: relative !important;
2458
+ top: auto !important;
2459
+ left: auto !important;
2460
+ right: auto !important;
2461
+ }
2462
+
2463
+ /* Responsive Design */
2464
+ @media (max-width: 768px) {
2465
+ .element-container {
2466
+ width: 98%;
2467
+ }
2468
+
2469
+ .variations-table {
2470
+ font-size: 0.875rem;
2471
+ }
2472
+
2473
+ .variations-table th,
2474
+ .variations-table td {
2475
+ padding: 0.75rem 0.5rem;
2476
+ }
2477
+
2478
+ .variation-label {
2479
+ min-width: 150px;
2480
+ }
2481
+ }
2482
+
2483
+ </style>