srcdev-nuxt-components 9.1.19 → 9.1.20
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.
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<component
|
|
3
|
-
:is="tag"
|
|
4
|
-
class="profile-section"
|
|
5
|
-
:class="[elementClasses]"
|
|
6
|
-
:aria-labelledby="ariaLabelledby"
|
|
7
|
-
>
|
|
2
|
+
<component :is="tag" class="profile-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
|
|
8
3
|
<header class="profile-section-header">
|
|
9
4
|
<slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
|
|
10
5
|
<slot v-if="hasHeroTextSlot" name="heroText" :heading-id="headingId"></slot>
|
|
@@ -16,9 +11,9 @@
|
|
|
16
11
|
</div>
|
|
17
12
|
<div class="profile-info">
|
|
18
13
|
<div class="profile-info-content">
|
|
19
|
-
<div v-for="
|
|
20
|
-
<slot :name="
|
|
21
|
-
<p>Profile info content {{
|
|
14
|
+
<div v-for="slotName in profileInfoSlots" :key="slotName" class="profile-info-block">
|
|
15
|
+
<slot :name="slotName">
|
|
16
|
+
<p>Profile info content {{ slotName }}</p>
|
|
22
17
|
</slot>
|
|
23
18
|
</div>
|
|
24
19
|
</div>
|
|
@@ -58,6 +53,15 @@ const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));
|
|
|
58
53
|
const hasHeroTextSlot = computed(() => Boolean(slots.heroText));
|
|
59
54
|
const hasProfileLinksSlot = computed(() => Boolean(slots.profileLinks));
|
|
60
55
|
|
|
56
|
+
const profileInfoSlots = computed(() => {
|
|
57
|
+
const provided = Object.keys(slots)
|
|
58
|
+
.filter((key) => /^profile-info-\d+$/.test(key))
|
|
59
|
+
.sort((a, b) => parseInt(a.split("-")[2] ?? "0") - parseInt(b.split("-")[2] ?? "0"));
|
|
60
|
+
return provided.length > 0
|
|
61
|
+
? provided
|
|
62
|
+
: Array.from({ length: props.profileInfoCount }, (_, i) => `profile-info-${i + 1}`);
|
|
63
|
+
});
|
|
64
|
+
|
|
61
65
|
const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
62
66
|
|
|
63
67
|
watch(
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
src: '/images/services/service-balayage.jpg',
|
|
13
13
|
alt: 'Profile picture of Natasha, the mobile hairdresser in Bath',
|
|
14
14
|
}"
|
|
15
|
-
:profile-info-count="3"
|
|
16
15
|
>
|
|
17
16
|
<template #eyebrowText>
|
|
18
17
|
<EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
|
|
@@ -66,6 +65,35 @@
|
|
|
66
65
|
</p>
|
|
67
66
|
</template>
|
|
68
67
|
|
|
68
|
+
<template #profile-info-4>
|
|
69
|
+
<HeroText
|
|
70
|
+
tag="h3"
|
|
71
|
+
axis="horizontal"
|
|
72
|
+
font-size="heading"
|
|
73
|
+
:text-content="[
|
|
74
|
+
{ text: 'Follow me on', styleClass: 'normal' },
|
|
75
|
+
{ text: 'social media', styleClass: 'accent' },
|
|
76
|
+
]"
|
|
77
|
+
:style-class-passthrough="['mb-20']"
|
|
78
|
+
/>
|
|
79
|
+
<SocialIconsList
|
|
80
|
+
:items="[
|
|
81
|
+
{
|
|
82
|
+
networkName: 'Facebook',
|
|
83
|
+
iconName: 'logos:facebook',
|
|
84
|
+
baseHref: 'https://www.facebook.com/',
|
|
85
|
+
profileId: 'luxurylocsbynatasha',
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
networkName: 'Instagram',
|
|
89
|
+
iconName: 'skill-icons:instagram',
|
|
90
|
+
baseHref: 'https://www.instagram.com/',
|
|
91
|
+
profileId: 'luxurylocsbynatasha',
|
|
92
|
+
},
|
|
93
|
+
]"
|
|
94
|
+
/>
|
|
95
|
+
</template>
|
|
96
|
+
|
|
69
97
|
<template #profileLinks>
|
|
70
98
|
<InputButtonCore
|
|
71
99
|
variant="secondary"
|