srcdev-nuxt-components 0.0.20 → 0.0.21
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,15 +1,49 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</div>
|
|
2
|
+
<ul role="tablist" aria-labelledby="channel-name" ref="navContainerRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
|
|
3
|
+
<li v-for="(item, index) in navItems" class="masonry-grid-ordered-item" ref="gridItemsRefs">
|
|
4
|
+
<button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" :data-tab-index="index" data-nav-item role="tab" aria-selected="false" class="tabs-list-item">
|
|
5
|
+
{{ item.name }}
|
|
6
|
+
</button>
|
|
7
|
+
</li>
|
|
8
|
+
</ul>
|
|
10
9
|
</template>
|
|
11
10
|
|
|
12
11
|
<script setup lang="ts">
|
|
12
|
+
interface INavLink {
|
|
13
|
+
action?: string;
|
|
14
|
+
name: string;
|
|
15
|
+
path?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const props = defineProps({
|
|
19
|
+
tag: {
|
|
20
|
+
type: String as PropType<string>,
|
|
21
|
+
default: 'button',
|
|
22
|
+
},
|
|
23
|
+
navItems: {
|
|
24
|
+
type: Array as PropType<INavLink[]>,
|
|
25
|
+
required: true,
|
|
26
|
+
},
|
|
27
|
+
trackHover: {
|
|
28
|
+
type: Boolean as PropType<boolean>,
|
|
29
|
+
default: true,
|
|
30
|
+
},
|
|
31
|
+
trackActive: {
|
|
32
|
+
type: Boolean as PropType<boolean>,
|
|
33
|
+
default: true,
|
|
34
|
+
},
|
|
35
|
+
trackIndicator: {
|
|
36
|
+
type: Boolean as PropType<boolean>,
|
|
37
|
+
default: true,
|
|
38
|
+
},
|
|
39
|
+
styleClassPassthrough: {
|
|
40
|
+
type: Array as PropType<string[]>,
|
|
41
|
+
default: () => [],
|
|
42
|
+
},
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
46
|
+
|
|
13
47
|
const navContainerRef = ref<HTMLElement | null>(null);
|
|
14
48
|
|
|
15
49
|
const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useNavDecoration(navContainerRef);
|
|
@@ -20,80 +54,118 @@ onMounted(() => {
|
|
|
20
54
|
</script>
|
|
21
55
|
|
|
22
56
|
<style lang="css">
|
|
23
|
-
|
|
57
|
+
.tabs-list {
|
|
58
|
+
--_default-text: light-dark(var(--gray-12), var(--gray-0));
|
|
59
|
+
--_active-bg: light-dark(var(--gray-12), var(--gray-0));
|
|
60
|
+
--_active-text: light-dark(var(--gray-0), var(--gray-12));
|
|
61
|
+
--_active-indicator: light-dark(var(--gray-12), var(--gray-0));
|
|
62
|
+
--_hovered-bg: light-dark(var(--gray-7), var(--gray-3));
|
|
63
|
+
--_hovered-text: light-dark(var(--gray-0), var(--gray-12));
|
|
64
|
+
--_border-bottom: light-dark(var(--gray-12), var(--gray-0));
|
|
65
|
+
|
|
24
66
|
position: relative;
|
|
25
67
|
display: flex;
|
|
26
68
|
width: fit-content;
|
|
27
|
-
border-bottom: 1px solid hsl(0 0% 30%);
|
|
28
|
-
margin-block: 3rem;
|
|
29
69
|
z-index: 1;
|
|
30
|
-
}
|
|
31
70
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
left: 0;
|
|
36
|
-
right: 0;
|
|
37
|
-
bottom: 0;
|
|
38
|
-
top: 0;
|
|
39
|
-
scale: var(--_width-hovered, 0.125) 1;
|
|
40
|
-
translate: var(--_left-hovered, 0) 0;
|
|
41
|
-
transform-origin: left;
|
|
42
|
-
transition: scale var(--_transition-duration), translate var(--_transition-duration);
|
|
43
|
-
background: green;
|
|
44
|
-
z-index: 1;
|
|
45
|
-
}
|
|
71
|
+
list-style-type: none;
|
|
72
|
+
margin: 0;
|
|
73
|
+
padding: 0;
|
|
46
74
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
75
|
+
.nav__hovered {
|
|
76
|
+
content: '';
|
|
77
|
+
position: absolute;
|
|
78
|
+
left: 0;
|
|
79
|
+
right: 0;
|
|
80
|
+
bottom: 0;
|
|
81
|
+
top: 0;
|
|
82
|
+
scale: var(--_width-hovered, 0.125) 1;
|
|
83
|
+
translate: var(--_left-hovered, 0) 0;
|
|
84
|
+
transform-origin: left;
|
|
85
|
+
transition: scale var(--_transition-duration), translate var(--_transition-duration);
|
|
86
|
+
z-index: 1;
|
|
87
|
+
}
|
|
61
88
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
89
|
+
.nav__active {
|
|
90
|
+
content: '';
|
|
91
|
+
position: absolute;
|
|
92
|
+
left: 0;
|
|
93
|
+
right: 0;
|
|
94
|
+
bottom: 0;
|
|
95
|
+
top: 0;
|
|
96
|
+
scale: var(--_width-active, 0.125) 1;
|
|
97
|
+
translate: var(--_left-active, 0) 0;
|
|
98
|
+
transform-origin: left;
|
|
99
|
+
transition: scale var(--_transition-duration), translate var(--_transition-duration);
|
|
100
|
+
z-index: 2;
|
|
101
|
+
}
|
|
76
102
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
z-index: 4;
|
|
90
|
-
}
|
|
103
|
+
.nav__active-indicator {
|
|
104
|
+
content: '';
|
|
105
|
+
position: absolute;
|
|
106
|
+
left: 0;
|
|
107
|
+
right: 0;
|
|
108
|
+
bottom: 0;
|
|
109
|
+
scale: var(--_width-active, 0.125) 1;
|
|
110
|
+
translate: var(--_left-active, 0) 0;
|
|
111
|
+
transform-origin: left;
|
|
112
|
+
transition: scale var(--_transition-duration), translate var(--_transition-duration);
|
|
113
|
+
z-index: 3;
|
|
114
|
+
}
|
|
91
115
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
116
|
+
.tabs-list-item {
|
|
117
|
+
opacity: 0.7;
|
|
118
|
+
position: relative;
|
|
119
|
+
transition: color 0.2s;
|
|
120
|
+
z-index: 4;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
opacity: 1;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&[aria-selected='true'] {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
/*
|
|
131
|
+
* User configurable variables
|
|
132
|
+
*/
|
|
133
|
+
border-bottom: 1px solid var(--_border-bottom);
|
|
134
|
+
margin-block: 3rem;
|
|
135
|
+
|
|
136
|
+
.nav__hovered {
|
|
137
|
+
background: var(--_hovered-bg);
|
|
138
|
+
color: var(--_hovered-text);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.nav__active {
|
|
142
|
+
background: var(--_active-bg);
|
|
143
|
+
color: var(--_active-text);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.nav__active-indicator {
|
|
147
|
+
background: var(--_active-indicator);
|
|
148
|
+
height: 4px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.tabs-list-item {
|
|
152
|
+
background: transparent;
|
|
153
|
+
border: 0;
|
|
154
|
+
color: var(--_default-text);
|
|
155
|
+
cursor: pointer;
|
|
156
|
+
font: inherit;
|
|
157
|
+
text-transform: uppercase;
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
margin: 0;
|
|
160
|
+
padding: 1em 2em;
|
|
161
|
+
|
|
162
|
+
&:hover {
|
|
163
|
+
color: var(--_hovered-text);
|
|
164
|
+
}
|
|
95
165
|
|
|
96
|
-
[
|
|
97
|
-
|
|
166
|
+
&[aria-selected='true'] {
|
|
167
|
+
color: var(--_active-text);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
98
170
|
}
|
|
99
171
|
</style>
|
|
@@ -15,11 +15,17 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
|
|
|
15
15
|
|
|
16
16
|
const activeIndex = ref(0);
|
|
17
17
|
|
|
18
|
+
// Temporarily set the first nav item as active
|
|
19
|
+
navItems.value[0].setAttribute('aria-selected', 'true');
|
|
20
|
+
|
|
18
21
|
// Test if navItems are hyperlinks
|
|
19
22
|
if (navItems.value[0].tagName.toLowerCase() === 'a') {
|
|
20
23
|
// Find index of element with class "router-link-active"
|
|
21
24
|
activeIndex.value = navItems.value.findIndex((el) => el.classList.contains('router-link-active'));
|
|
22
25
|
}
|
|
26
|
+
// else {
|
|
27
|
+
// Set actve tab
|
|
28
|
+
// }
|
|
23
29
|
|
|
24
30
|
currentActiveTab.value = navItems.value[activeIndex.value];
|
|
25
31
|
currentHoveredTab.value = navItems.value[activeIndex.value];
|
package/package.json
CHANGED