@zap-wunschlachen/wl-shared-components 1.0.65 → 1.0.66
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-divider
|
|
3
|
-
v-if="
|
|
3
|
+
v-if="computedShowTopDivider"
|
|
4
4
|
v-bind="computedDividerProps"
|
|
5
5
|
></v-divider>
|
|
6
6
|
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
</v-expansion-panel>
|
|
41
41
|
|
|
42
42
|
<v-divider
|
|
43
|
-
v-if="
|
|
43
|
+
v-if="computedShowBottomDivider"
|
|
44
44
|
v-bind="computedDividerProps"
|
|
45
45
|
></v-divider>
|
|
46
46
|
</template>
|
|
@@ -117,11 +117,32 @@ const props = defineProps({
|
|
|
117
117
|
* - true: always show dividers
|
|
118
118
|
* - false: never show dividers
|
|
119
119
|
* - undefined: use preset default (only default preset shows dividers)
|
|
120
|
+
* Note: showTopDivider and showBottomDivider take precedence if specified.
|
|
120
121
|
*/
|
|
121
122
|
showDivider: {
|
|
122
123
|
type: Boolean,
|
|
123
124
|
default: undefined,
|
|
124
125
|
},
|
|
126
|
+
/**
|
|
127
|
+
* Show or hide the top divider independently.
|
|
128
|
+
* - true: always show top divider
|
|
129
|
+
* - false: never show top divider
|
|
130
|
+
* - undefined: falls back to showDivider behavior
|
|
131
|
+
*/
|
|
132
|
+
showTopDivider: {
|
|
133
|
+
type: Boolean,
|
|
134
|
+
default: undefined,
|
|
135
|
+
},
|
|
136
|
+
/**
|
|
137
|
+
* Show or hide the bottom divider independently.
|
|
138
|
+
* - true: always show bottom divider
|
|
139
|
+
* - false: never show bottom divider
|
|
140
|
+
* - undefined: falls back to showDivider behavior (respects variant)
|
|
141
|
+
*/
|
|
142
|
+
showBottomDivider: {
|
|
143
|
+
type: Boolean,
|
|
144
|
+
default: undefined,
|
|
145
|
+
},
|
|
125
146
|
/**
|
|
126
147
|
* Props to pass to the v-divider component.
|
|
127
148
|
* Supports all Vuetify v-divider props: color, thickness, opacity, inset, vertical, length, etc.
|
|
@@ -136,14 +157,35 @@ const props = defineProps({
|
|
|
136
157
|
// Computed preset
|
|
137
158
|
const effectivePreset = computed(() => props.preset);
|
|
138
159
|
|
|
139
|
-
//
|
|
140
|
-
const
|
|
160
|
+
// Base divider visibility - prop overrides preset default
|
|
161
|
+
const baseShowDivider = computed(() => {
|
|
141
162
|
if (props.showDivider !== undefined) {
|
|
142
163
|
return props.showDivider;
|
|
143
164
|
}
|
|
165
|
+
// If dividerProps is provided, assume user wants dividers
|
|
166
|
+
if (Object.keys(props.dividerProps).length > 0) {
|
|
167
|
+
return true;
|
|
168
|
+
}
|
|
144
169
|
return effectivePreset.value === "default";
|
|
145
170
|
});
|
|
146
171
|
|
|
172
|
+
// Show top divider - specific prop takes precedence
|
|
173
|
+
const computedShowTopDivider = computed(() => {
|
|
174
|
+
if (props.showTopDivider !== undefined) {
|
|
175
|
+
return props.showTopDivider;
|
|
176
|
+
}
|
|
177
|
+
return baseShowDivider.value;
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
// Show bottom divider - specific prop takes precedence, then respects variant
|
|
181
|
+
const computedShowBottomDivider = computed(() => {
|
|
182
|
+
if (props.showBottomDivider !== undefined) {
|
|
183
|
+
return props.showBottomDivider;
|
|
184
|
+
}
|
|
185
|
+
// Fall back to original behavior: only show if variant is 'end' and base divider is enabled
|
|
186
|
+
return props.variant === "end" && baseShowDivider.value;
|
|
187
|
+
});
|
|
188
|
+
|
|
147
189
|
// Computed divider props with defaults
|
|
148
190
|
const computedDividerProps = computed(() => ({
|
|
149
191
|
color: siteColors["accordion_divider_color"],
|
|
@@ -282,6 +282,119 @@
|
|
|
282
282
|
</div>
|
|
283
283
|
</div>
|
|
284
284
|
|
|
285
|
+
<!-- Divider Control Examples -->
|
|
286
|
+
<div class="treatment-section">
|
|
287
|
+
<h3 class="section-title">Divider Control (showTopDivider / showBottomDivider)</h3>
|
|
288
|
+
<div class="divider-examples">
|
|
289
|
+
<div class="divider-column">
|
|
290
|
+
<h4 class="divider-label">Top divider only</h4>
|
|
291
|
+
<AccordionGroup :multiple="false" v-model="dividerExample1">
|
|
292
|
+
<AccordionItem
|
|
293
|
+
value="1"
|
|
294
|
+
:show-top-divider="true"
|
|
295
|
+
:show-bottom-divider="false"
|
|
296
|
+
preset="plain"
|
|
297
|
+
title="Top Divider Only"
|
|
298
|
+
text="This item shows only the top divider"
|
|
299
|
+
:title-color="dentalColors.accordion_title_color"
|
|
300
|
+
:content-color="dentalColors.accordion_content_color"
|
|
301
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
302
|
+
/>
|
|
303
|
+
<AccordionItem
|
|
304
|
+
value="2"
|
|
305
|
+
:show-top-divider="true"
|
|
306
|
+
:show-bottom-divider="false"
|
|
307
|
+
preset="plain"
|
|
308
|
+
title="Another Item"
|
|
309
|
+
text="Also with only top divider"
|
|
310
|
+
:title-color="dentalColors.accordion_title_color"
|
|
311
|
+
:content-color="dentalColors.accordion_content_color"
|
|
312
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
313
|
+
/>
|
|
314
|
+
</AccordionGroup>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="divider-column">
|
|
317
|
+
<h4 class="divider-label">Bottom divider only</h4>
|
|
318
|
+
<AccordionGroup :multiple="false" v-model="dividerExample2">
|
|
319
|
+
<AccordionItem
|
|
320
|
+
value="1"
|
|
321
|
+
:show-top-divider="false"
|
|
322
|
+
:show-bottom-divider="true"
|
|
323
|
+
title="Bottom Divider Only"
|
|
324
|
+
text="This item shows only the bottom divider"
|
|
325
|
+
:title-color="dentalColors.accordion_title_color"
|
|
326
|
+
:content-color="dentalColors.accordion_content_color"
|
|
327
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
328
|
+
preset="plain"
|
|
329
|
+
/>
|
|
330
|
+
<AccordionItem
|
|
331
|
+
value="2"
|
|
332
|
+
:show-top-divider="false"
|
|
333
|
+
:show-bottom-divider="true"
|
|
334
|
+
title="Another Item"
|
|
335
|
+
text="Also with only bottom divider"
|
|
336
|
+
:title-color="dentalColors.accordion_title_color"
|
|
337
|
+
:content-color="dentalColors.accordion_content_color"
|
|
338
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
339
|
+
preset="plain"
|
|
340
|
+
/>
|
|
341
|
+
</AccordionGroup>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="divider-column">
|
|
344
|
+
<h4 class="divider-label">Both dividers</h4>
|
|
345
|
+
<AccordionGroup :multiple="false" v-model="dividerExample3">
|
|
346
|
+
<AccordionItem
|
|
347
|
+
value="1"
|
|
348
|
+
:show-top-divider="true"
|
|
349
|
+
:show-bottom-divider="true"
|
|
350
|
+
title="Both Dividers"
|
|
351
|
+
text="This item shows both top and bottom dividers"
|
|
352
|
+
:title-color="dentalColors.accordion_title_color"
|
|
353
|
+
:content-color="dentalColors.accordion_content_color"
|
|
354
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
355
|
+
preset="plain"
|
|
356
|
+
/>
|
|
357
|
+
<AccordionItem
|
|
358
|
+
value="2"
|
|
359
|
+
:show-top-divider="true"
|
|
360
|
+
:show-bottom-divider="true"
|
|
361
|
+
title="Another Item"
|
|
362
|
+
text="Also with both dividers"
|
|
363
|
+
:title-color="dentalColors.accordion_title_color"
|
|
364
|
+
:content-color="dentalColors.accordion_content_color"
|
|
365
|
+
:divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
|
|
366
|
+
preset="plain"
|
|
367
|
+
/>
|
|
368
|
+
</AccordionGroup>
|
|
369
|
+
</div>
|
|
370
|
+
<div class="divider-column">
|
|
371
|
+
<h4 class="divider-label">No dividers</h4>
|
|
372
|
+
<AccordionGroup :multiple="false" v-model="dividerExample4">
|
|
373
|
+
<AccordionItem
|
|
374
|
+
value="1"
|
|
375
|
+
:show-top-divider="false"
|
|
376
|
+
:show-bottom-divider="false"
|
|
377
|
+
title="No Dividers"
|
|
378
|
+
text="This item shows no dividers at all"
|
|
379
|
+
:title-color="dentalColors.accordion_title_color"
|
|
380
|
+
:content-color="dentalColors.accordion_content_color"
|
|
381
|
+
preset="plain"
|
|
382
|
+
/>
|
|
383
|
+
<AccordionItem
|
|
384
|
+
value="2"
|
|
385
|
+
:show-top-divider="false"
|
|
386
|
+
:show-bottom-divider="false"
|
|
387
|
+
title="Another Item"
|
|
388
|
+
text="Also with no dividers"
|
|
389
|
+
:title-color="dentalColors.accordion_title_color"
|
|
390
|
+
:content-color="dentalColors.accordion_content_color"
|
|
391
|
+
preset="plain"
|
|
392
|
+
/>
|
|
393
|
+
</AccordionGroup>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
|
|
285
398
|
<!-- Plain Preset Example -->
|
|
286
399
|
<div class="treatment-section">
|
|
287
400
|
<h3 class="section-title">Plain Preset (Minimal Style)</h3>
|
|
@@ -424,6 +537,12 @@ const shadowExample2 = ref(null);
|
|
|
424
537
|
const shadowExample3 = ref(null);
|
|
425
538
|
const shadowExample4 = ref(null);
|
|
426
539
|
|
|
540
|
+
// Divider examples data
|
|
541
|
+
const dividerExample1 = ref(null);
|
|
542
|
+
const dividerExample2 = ref(null);
|
|
543
|
+
const dividerExample3 = ref(null);
|
|
544
|
+
const dividerExample4 = ref(null);
|
|
545
|
+
|
|
427
546
|
// Plain preset data
|
|
428
547
|
const plainPanel = ref(null);
|
|
429
548
|
|
|
@@ -721,6 +840,32 @@ const computedTreatmentPatientCounts = reactive([
|
|
|
721
840
|
}
|
|
722
841
|
}
|
|
723
842
|
|
|
843
|
+
/* Divider Examples Styles */
|
|
844
|
+
.divider-examples {
|
|
845
|
+
display: grid;
|
|
846
|
+
grid-template-columns: repeat(2, 1fr);
|
|
847
|
+
gap: 1.5rem;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.divider-column {
|
|
851
|
+
display: flex;
|
|
852
|
+
flex-direction: column;
|
|
853
|
+
gap: 0.5rem;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.divider-label {
|
|
857
|
+
margin: 0;
|
|
858
|
+
font-size: 0.875rem;
|
|
859
|
+
font-weight: 600;
|
|
860
|
+
color: #555;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
@media (max-width: 768px) {
|
|
864
|
+
.divider-examples {
|
|
865
|
+
grid-template-columns: 1fr;
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
|
|
724
869
|
/* Plain Preset Styles */
|
|
725
870
|
.plain-container {
|
|
726
871
|
max-width: 600px;
|
package/src/pages/AllPage.vue
CHANGED
|
@@ -749,157 +749,6 @@
|
|
|
749
749
|
<td><NotificationBubble count="99+" /></td>
|
|
750
750
|
</tr>
|
|
751
751
|
|
|
752
|
-
<!-- AccordionGroup Variants -->
|
|
753
|
-
<tr>
|
|
754
|
-
<td colspan="3" class="section-header">AccordionGroup Variants</td>
|
|
755
|
-
</tr>
|
|
756
|
-
<tr>
|
|
757
|
-
<td class="variation-label">Accordion - Default Variant</td>
|
|
758
|
-
<td>
|
|
759
|
-
<AccordionGroup v-model="accordionOutlined" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
760
|
-
<AccordionItem title="Terminbuchung" text="Buchen Sie Ihren Wunschtermin ganz einfach online. Wählen Sie aus verfügbaren Zeiten und erhalten Sie eine sofortige Bestätigung per E-Mail. Unsere flexiblen Terminoptionen ermöglichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen." value="1" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
761
|
-
<AccordionItem title="Behandlungsablauf" text="Jede Behandlung beginnt mit einer gründlichen Untersuchung und Beratung. Wir erklären Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle." value="2" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
762
|
-
<AccordionItem title="Versicherung & Kosten" text="Wir akzeptieren alle gängigen Versicherungen und bieten transparente Kostenvoranschläge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan für Sie. Ratenzahlung ist nach Vereinbarung möglich." value="3" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
763
|
-
<AccordionItem title="Notfalltermine" text="Für akute Beschwerden halten wir täglich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstmöglich einen Termin für Sie." value="4" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
764
|
-
<AccordionItem title="Öffnungszeiten" text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen." value="5" variant="end" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
765
|
-
</AccordionGroup>
|
|
766
|
-
</td>
|
|
767
|
-
<td>
|
|
768
|
-
<AccordionGroup v-model="accordionOutlined" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
769
|
-
<AccordionItem title="Terminbuchung" text="Buchen Sie Ihren Wunschtermin ganz einfach online. Wählen Sie aus verfügbaren Zeiten und erhalten Sie eine sofortige Bestätigung per E-Mail. Unsere flexiblen Terminoptionen ermöglichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen." value="1" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
770
|
-
<AccordionItem title="Behandlungsablauf" text="Jede Behandlung beginnt mit einer gründlichen Untersuchung und Beratung. Wir erklären Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle." value="2" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
771
|
-
<AccordionItem title="Versicherung & Kosten" text="Wir akzeptieren alle gängigen Versicherungen und bieten transparente Kostenvoranschläge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan für Sie. Ratenzahlung ist nach Vereinbarung möglich." value="3" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
772
|
-
<AccordionItem title="Notfalltermine" text="Für akute Beschwerden halten wir täglich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstmöglich einen Termin für Sie." value="4" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
773
|
-
<AccordionItem title="Öffnungszeiten" text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen." value="5" variant="end" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
774
|
-
</AccordionGroup>
|
|
775
|
-
</td>
|
|
776
|
-
</tr>
|
|
777
|
-
<tr>
|
|
778
|
-
<td class="variation-label">Accordion - With Headline</td>
|
|
779
|
-
<td>
|
|
780
|
-
<AccordionGroup v-model="accordionPlain" headline="Frequently Asked Questions (FAQs)" :headline-color="dentalColors.accordion_headline_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
781
|
-
<AccordionItem title="Was ist eine professionelle Zahnreinigung?" text="Eine professionelle Zahnreinigung (PZR) ist eine intensive Reinigung Ihrer Zähne durch geschultes Fachpersonal. Dabei werden Zahnbeläge, Verfärbungen und Zahnstein entfernt. Die Behandlung dauert in der Regel 45-60 Minuten." value="1" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
782
|
-
<AccordionItem title="Wie oft sollte ich zur Kontrolle kommen?" text="Wir empfehlen halbjährliche Kontrolltermine. Bei erhöhtem Risiko für Karies oder Parodontitis können auch kürzere Intervalle sinnvoll sein. Ihr Zahnarzt berät Sie individuell." value="2" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
783
|
-
<AccordionItem title="Sind die Behandlungen schmerzhaft?" text="Moderne Zahnmedizin ist in der Regel schmerzfrei. Bei Bedarf setzen wir lokale Betäubung ein. Für besonders ängstliche Patienten bieten wir auch Dämmerschlaf-Behandlungen an." value="3" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
784
|
-
<AccordionItem title="Welche Zahlungsmethoden akzeptieren Sie?" text="Wir akzeptieren Barzahlung, EC-Karte und alle gängigen Kreditkarten. Ratenzahlung ist nach individueller Vereinbarung möglich." value="4" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
785
|
-
<AccordionItem title="Kann ich meinen Termin online absagen?" text="Ja, Sie können Termine bis zu 24 Stunden vorher online absagen oder umbuchen. Nutzen Sie dafür einfach den Link in Ihrer Bestätigungsmail." value="5" variant="end" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
786
|
-
</AccordionGroup>
|
|
787
|
-
</td>
|
|
788
|
-
<td>
|
|
789
|
-
<AccordionGroup v-model="accordionPlain" headline="Frequently Asked Questions (FAQs)" :headline-color="cocoonColors.accordion_headline_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
790
|
-
<AccordionItem title="Was ist eine professionelle Zahnreinigung?" text="Eine professionelle Zahnreinigung (PZR) ist eine intensive Reinigung Ihrer Zähne durch geschultes Fachpersonal. Dabei werden Zahnbeläge, Verfärbungen und Zahnstein entfernt. Die Behandlung dauert in der Regel 45-60 Minuten." value="1" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
791
|
-
<AccordionItem title="Wie oft sollte ich zur Kontrolle kommen?" text="Wir empfehlen halbjährliche Kontrolltermine. Bei erhöhtem Risiko für Karies oder Parodontitis können auch kürzere Intervalle sinnvoll sein. Ihr Zahnarzt berät Sie individuell." value="2" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
792
|
-
<AccordionItem title="Sind die Behandlungen schmerzhaft?" text="Moderne Zahnmedizin ist in der Regel schmerzfrei. Bei Bedarf setzen wir lokale Betäubung ein. Für besonders ängstliche Patienten bieten wir auch Dämmerschlaf-Behandlungen an." value="3" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
793
|
-
<AccordionItem title="Welche Zahlungsmethoden akzeptieren Sie?" text="Wir akzeptieren Barzahlung, EC-Karte und alle gängigen Kreditkarten. Ratenzahlung ist nach individueller Vereinbarung möglich." value="4" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
794
|
-
<AccordionItem title="Kann ich meinen Termin online absagen?" text="Ja, Sie können Termine bis zu 24 Stunden vorher online absagen oder umbuchen. Nutzen Sie dafür einfach den Link in Ihrer Bestätigungsmail." value="5" variant="end" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
795
|
-
</AccordionGroup>
|
|
796
|
-
</td>
|
|
797
|
-
</tr>
|
|
798
|
-
<tr>
|
|
799
|
-
<td class="variation-label">Accordion - Multiple Open</td>
|
|
800
|
-
<td>
|
|
801
|
-
<AccordionGroup :multiple="true" v-model="accordionMultiple" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
802
|
-
<AccordionItem title="Digitale Röntgendiagnostik" text="Unsere moderne digitale Röntgentechnik bietet höchste Bildqualität bei minimaler Strahlenbelastung. Die Aufnahmen stehen sofort zur Verfügung und können detailliert analysiert werden." value="1" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
803
|
-
<AccordionItem title="3D-Implantatplanung" text="Mit innovativer 3D-Technologie planen wir Implantate millimetergenau. Das Ergebnis: Präzise Positionierung, verkürzte OP-Zeit und optimale Langzeitergebnisse." value="2" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
804
|
-
<AccordionItem title="Intraoralscanner" text="Ohne unangenehme Abdruckmasse erfassen wir Ihre Zahnstellung digital. Schnell, präzise und komfortabel für Sie." value="3" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
805
|
-
<AccordionItem title="Lasertechnologie" text="Bei bestimmten Behandlungen setzen wir modernste Lasertechnologie ein. Vorteile: Schmerzarm, präzise und schnelle Heilung." value="4" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
806
|
-
<AccordionItem title="Digitales Praxismanagement" text="Von der Online-Terminbuchung bis zur digitalen Patientenakte – wir arbeiten vollständig digital für Ihre Sicherheit und Ihren Komfort." value="5" variant="end" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color" />
|
|
807
|
-
</AccordionGroup>
|
|
808
|
-
</td>
|
|
809
|
-
<td>
|
|
810
|
-
<AccordionGroup :multiple="true" v-model="accordionMultiple" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
811
|
-
<AccordionItem title="Digitale Röntgendiagnostik" text="Unsere moderne digitale Röntgentechnik bietet höchste Bildqualität bei minimaler Strahlenbelastung. Die Aufnahmen stehen sofort zur Verfügung und können detailliert analysiert werden." value="1" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
812
|
-
<AccordionItem title="3D-Implantatplanung" text="Mit innovativer 3D-Technologie planen wir Implantate millimetergenau. Das Ergebnis: Präzise Positionierung, verkürzte OP-Zeit und optimale Langzeitergebnisse." value="2" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
813
|
-
<AccordionItem title="Intraoralscanner" text="Ohne unangenehme Abdruckmasse erfassen wir Ihre Zahnstellung digital. Schnell, präzise und komfortabel für Sie." value="3" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
814
|
-
<AccordionItem title="Lasertechnologie" text="Bei bestimmten Behandlungen setzen wir modernste Lasertechnologie ein. Vorteile: Schmerzarm, präzise und schnelle Heilung." value="4" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
815
|
-
<AccordionItem title="Digitales Praxismanagement" text="Von der Online-Terminbuchung bis zur digitalen Patientenakte – wir arbeiten vollständig digital für Ihre Sicherheit und Ihren Komfort." value="5" variant="end" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color" />
|
|
816
|
-
</AccordionGroup>
|
|
817
|
-
</td>
|
|
818
|
-
</tr>
|
|
819
|
-
<tr>
|
|
820
|
-
<td class="variation-label">Accordion - Complex Content</td>
|
|
821
|
-
<td>
|
|
822
|
-
<AccordionGroup v-model="accordionComplex" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
823
|
-
<AccordionItem value="1" variant="default" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
824
|
-
<template #title>
|
|
825
|
-
<span class="accordion-item__title">Unsere Leistungen im Überblick</span>
|
|
826
|
-
</template>
|
|
827
|
-
<template #content>
|
|
828
|
-
<p style="margin-bottom: 12px;">Wir bieten Ihnen ein umfassendes Spektrum an zahnmedizinischen Leistungen:</p>
|
|
829
|
-
<ul style="margin: 0 0 16px 20px; list-style-type: disc;">
|
|
830
|
-
<li>Professionelle Zahnreinigung</li>
|
|
831
|
-
<li>Ästhetische Zahnmedizin</li>
|
|
832
|
-
<li>Implantologie</li>
|
|
833
|
-
<li>Kieferorthopädie</li>
|
|
834
|
-
</ul>
|
|
835
|
-
<Button label="Termin vereinbaren" variant="flat" size="small" :color="dentalColors.button_default_bg" :text-color="dentalColors.button_default_text" />
|
|
836
|
-
</template>
|
|
837
|
-
</AccordionItem>
|
|
838
|
-
<AccordionItem value="2" variant="end" :title-color="dentalColors.accordion_title_color" :content-color="dentalColors.accordion_content_color" :divider-color="dentalColors.accordion_divider_color" :icon-color="dentalColors.accordion_icon_color">
|
|
839
|
-
<template #title>
|
|
840
|
-
<span class="accordion-item__title">Kontakt & Öffnungszeiten</span>
|
|
841
|
-
</template>
|
|
842
|
-
<template #content>
|
|
843
|
-
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
|
|
844
|
-
<div>
|
|
845
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Adresse</h4>
|
|
846
|
-
<p style="margin: 0;">Musterstraße 123<br>12345 Berlin</p>
|
|
847
|
-
</div>
|
|
848
|
-
<div>
|
|
849
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Öffnungszeiten</h4>
|
|
850
|
-
<p style="margin: 0;">Mo-Fr: 8:00 - 18:00<br>Sa: Nach Vereinbarung</p>
|
|
851
|
-
</div>
|
|
852
|
-
<div>
|
|
853
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Telefon</h4>
|
|
854
|
-
<p style="margin: 0;">+49 30 123 456 789</p>
|
|
855
|
-
</div>
|
|
856
|
-
</div>
|
|
857
|
-
</template>
|
|
858
|
-
</AccordionItem>
|
|
859
|
-
</AccordionGroup>
|
|
860
|
-
</td>
|
|
861
|
-
<td>
|
|
862
|
-
<AccordionGroup v-model="accordionComplex" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
863
|
-
<AccordionItem value="1" variant="default" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
864
|
-
<template #title>
|
|
865
|
-
<span class="accordion-item__title">Unsere Leistungen im Überblick</span>
|
|
866
|
-
</template>
|
|
867
|
-
<template #content>
|
|
868
|
-
<p style="margin-bottom: 12px;">Wir bieten Ihnen ein umfassendes Spektrum an zahnmedizinischen Leistungen:</p>
|
|
869
|
-
<ul style="margin: 0 0 16px 20px; list-style-type: disc;">
|
|
870
|
-
<li>Professionelle Zahnreinigung</li>
|
|
871
|
-
<li>Ästhetische Zahnmedizin</li>
|
|
872
|
-
<li>Implantologie</li>
|
|
873
|
-
<li>Kieferorthopädie</li>
|
|
874
|
-
</ul>
|
|
875
|
-
<Button label="Termin vereinbaren" variant="flat" size="small" :color="cocoonColors.button_default_bg" :text-color="cocoonColors.button_default_text" />
|
|
876
|
-
</template>
|
|
877
|
-
</AccordionItem>
|
|
878
|
-
<AccordionItem value="2" variant="end" :title-color="cocoonColors.accordion_title_color" :content-color="cocoonColors.accordion_content_color" :divider-color="cocoonColors.accordion_divider_color" :icon-color="cocoonColors.accordion_icon_color">
|
|
879
|
-
<template #title>
|
|
880
|
-
<span class="accordion-item__title">Kontakt & Öffnungszeiten</span>
|
|
881
|
-
</template>
|
|
882
|
-
<template #content>
|
|
883
|
-
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
|
|
884
|
-
<div>
|
|
885
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Adresse</h4>
|
|
886
|
-
<p style="margin: 0;">Musterstraße 123<br>12345 Berlin</p>
|
|
887
|
-
</div>
|
|
888
|
-
<div>
|
|
889
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Öffnungszeiten</h4>
|
|
890
|
-
<p style="margin: 0;">Mo-Fr: 8:00 - 18:00<br>Sa: Nach Vereinbarung</p>
|
|
891
|
-
</div>
|
|
892
|
-
<div>
|
|
893
|
-
<h4 style="margin: 0 0 8px 0; font-weight: 700;">Telefon</h4>
|
|
894
|
-
<p style="margin: 0;">+49 30 123 456 789</p>
|
|
895
|
-
</div>
|
|
896
|
-
</div>
|
|
897
|
-
</template>
|
|
898
|
-
</AccordionItem>
|
|
899
|
-
</AccordionGroup>
|
|
900
|
-
</td>
|
|
901
|
-
</tr>
|
|
902
|
-
|
|
903
752
|
<!-- Appointment Card Variants -->
|
|
904
753
|
<tr>
|
|
905
754
|
<td colspan="3" class="section-header">Appointment Card Variants</td>
|