srcdev-nuxt-components 2.1.2 → 2.1.4
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,13 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<component :is="tag" class="deep-expanding-menu" :class="[elementClasses]">
|
|
2
|
+
<component :is="tag" class="deep-expanding-menu-old" :class="[elementClasses]">
|
|
3
3
|
<div class="inner">
|
|
4
|
-
<template v-for="(link, key) in navLinks" :key="key">
|
|
5
|
-
<NuxtLink v-if="link.path" :to="link.path" class="">{{ link.name }}</NuxtLink>
|
|
6
|
-
<details v-else name="
|
|
7
|
-
<summary
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
</
|
|
4
|
+
<template v-for="(link, key, index) in navLinks" :key="key">
|
|
5
|
+
<NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
|
|
6
|
+
<details v-else class="navigation-group" name="navigation-group" :style="`--_position-anchor: --anchor-nav-1-${key};, --_anchor-name: --anchor-nav-1-${key};`" ref="navigationGroupRef">
|
|
7
|
+
<summary class="navigation-group-toggle">
|
|
8
|
+
<span>{{ link.name }}</span>
|
|
9
|
+
<Icon name="bi:caret-down-fill" class="icon" />
|
|
10
|
+
</summary>
|
|
11
|
+
<ClientOnly>
|
|
12
|
+
<div class="navigation-group-panel" :id="`popovertarget-nav-1-${key}`">
|
|
13
|
+
<h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
|
|
14
|
+
<ul class="navigation-group-list">
|
|
15
|
+
<li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
|
|
16
|
+
<NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
|
|
17
|
+
</li>
|
|
18
|
+
</ul>
|
|
19
|
+
</div>
|
|
20
|
+
</ClientOnly>
|
|
11
21
|
</details>
|
|
12
22
|
</template>
|
|
13
23
|
</div>
|
|
@@ -15,6 +25,8 @@
|
|
|
15
25
|
</template>
|
|
16
26
|
|
|
17
27
|
<script setup lang="ts">
|
|
28
|
+
import { onClickOutside } from '@vueuse/core';
|
|
29
|
+
|
|
18
30
|
const props = defineProps({
|
|
19
31
|
tag: {
|
|
20
32
|
type: String,
|
|
@@ -23,6 +35,10 @@ const props = defineProps({
|
|
|
23
35
|
return TAGS_ALLOWED.includes(value);
|
|
24
36
|
},
|
|
25
37
|
},
|
|
38
|
+
navLinks: {
|
|
39
|
+
type: Array as PropType<INavLink[]>,
|
|
40
|
+
default: () => [],
|
|
41
|
+
},
|
|
26
42
|
styleClassPassthrough: {
|
|
27
43
|
type: Array as PropType<string[]>,
|
|
28
44
|
default: () => [],
|
|
@@ -30,7 +46,8 @@ const props = defineProps({
|
|
|
30
46
|
});
|
|
31
47
|
|
|
32
48
|
const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
33
|
-
|
|
49
|
+
|
|
50
|
+
const navigationGroupRef = useTemplateRef<HTMLElement[]>('navigationGroupRef');
|
|
34
51
|
|
|
35
52
|
watch(
|
|
36
53
|
() => props.styleClassPassthrough,
|
|
@@ -40,7 +57,11 @@ watch(
|
|
|
40
57
|
);
|
|
41
58
|
|
|
42
59
|
onMounted(() => {
|
|
43
|
-
|
|
60
|
+
navigationGroupRef.value?.forEach((element, index) => {
|
|
61
|
+
onClickOutside(element, () => {
|
|
62
|
+
navigationGroupRef.value?.[index]?.removeAttribute('open');
|
|
63
|
+
});
|
|
64
|
+
});
|
|
44
65
|
});
|
|
45
66
|
</script>
|
|
46
67
|
|
|
@@ -53,54 +74,11 @@ interface INavLink {
|
|
|
53
74
|
isExternal?: boolean;
|
|
54
75
|
childLinks?: INavLink[];
|
|
55
76
|
}
|
|
56
|
-
|
|
57
|
-
const navLinks = <INavLink[]>[
|
|
58
|
-
{ name: 'Home', path: '/' },
|
|
59
|
-
{
|
|
60
|
-
name: 'Components',
|
|
61
|
-
childLinks: [
|
|
62
|
-
{ name: 'Container Glow', path: '/ui/container-glow' },
|
|
63
|
-
{ name: 'Accordian', path: '/ui/accordian' },
|
|
64
|
-
{ name: 'Dialogs', path: '/ui/dialog' },
|
|
65
|
-
{ name: 'Tabs X', path: '/ui/tabs' },
|
|
66
|
-
{ name: 'Tabs Y', path: '/ui/tabs-y' },
|
|
67
|
-
{ name: 'Prompts', path: '/ui/display-prompt' },
|
|
68
|
-
{ name: 'Rotating Carousel', path: '/ui/rotating-carousel' },
|
|
69
|
-
{ name: 'Clipped Panels', path: '/ui/clipped-panels' },
|
|
70
|
-
],
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
name: 'Layouts',
|
|
74
|
-
childLinks: [
|
|
75
|
-
{ name: 'Layout Row', path: '/ui/layout-row' },
|
|
76
|
-
{ name: 'Layout Grid A', path: '/ui/layout-grid-a' },
|
|
77
|
-
{ name: 'Layout Grid B', path: '/ui/layout-grid-b' },
|
|
78
|
-
{ name: 'Simple Grid', path: '/ui/simple-grid' },
|
|
79
|
-
{ name: 'Masonry Grid Simple', path: '/ui/masonry-grid' },
|
|
80
|
-
{ name: 'Masonry Grid Sorted', path: '/ui/masonry-grid-sorted' },
|
|
81
|
-
{ name: 'Masonry Grid Ordered', path: '/ui/masonry-grid-ordered' },
|
|
82
|
-
{ name: 'Masonry Columns', path: '/ui/masonry-columns' },
|
|
83
|
-
],
|
|
84
|
-
},
|
|
85
|
-
{ name: 'About', path: '/' },
|
|
86
|
-
];
|
|
87
77
|
</script>
|
|
88
78
|
|
|
89
79
|
<style lang="css">
|
|
90
80
|
@layer popover-setup {
|
|
91
|
-
|
|
92
|
-
inset: auto;
|
|
93
|
-
top: anchor(top);
|
|
94
|
-
right: calc(anchor(left) + 10px);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
@position-try-fallbacks --anchor-right {
|
|
98
|
-
inset: auto;
|
|
99
|
-
top: anchor(top);
|
|
100
|
-
left: calc(anchor(right) + 10px);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.deep-expanding-menu {
|
|
81
|
+
.deep-expanding-menu-old {
|
|
104
82
|
container-type: inline-size;
|
|
105
83
|
display: grid;
|
|
106
84
|
grid-template-areas: 'element-stack';
|
|
@@ -114,64 +92,125 @@ const navLinks = <INavLink[]>[
|
|
|
114
92
|
align-items: center;
|
|
115
93
|
z-index: 1;
|
|
116
94
|
|
|
117
|
-
|
|
118
|
-
|
|
95
|
+
.navigation-link,
|
|
96
|
+
.navigation-group-toggle {
|
|
97
|
+
all: unset;
|
|
98
|
+
border-bottom: 2px solid transparent;
|
|
99
|
+
padding-block: 8px;
|
|
100
|
+
|
|
101
|
+
transition: border-color 200ms;
|
|
102
|
+
|
|
119
103
|
&:hover {
|
|
120
104
|
cursor: pointer;
|
|
105
|
+
border-color: light-dark(var(--blue-12), var(--gray-0));
|
|
121
106
|
}
|
|
122
|
-
}
|
|
123
107
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
padding: 6px 12px;
|
|
108
|
+
&:focus {
|
|
109
|
+
border-color: light-dark(var(--blue-12), var(--gray-0));
|
|
110
|
+
}
|
|
128
111
|
|
|
129
112
|
&:focus-visible {
|
|
130
|
-
|
|
113
|
+
border-color: light-dark(var(--blue-12), var(--gray-0));
|
|
131
114
|
}
|
|
132
115
|
}
|
|
133
116
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
border: 1px solid red;
|
|
137
|
-
padding: 6px 12px;
|
|
138
|
-
}
|
|
117
|
+
.navigation-group {
|
|
118
|
+
--_icon-transform: scaleY(1);
|
|
139
119
|
|
|
140
|
-
details {
|
|
141
120
|
display: grid;
|
|
142
121
|
grid-template-areas: 'details-stack';
|
|
143
122
|
z-index: 1;
|
|
123
|
+
position: relative;
|
|
144
124
|
|
|
145
|
-
summary
|
|
125
|
+
summary::-webkit-details-marker,
|
|
126
|
+
summary::marker {
|
|
127
|
+
display: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&[open] {
|
|
131
|
+
--_icon-transform: scaleY(-1);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.navigation-group-toggle {
|
|
146
135
|
grid-area: details-stack;
|
|
147
|
-
/* position: relative; */
|
|
148
|
-
anchor-name: var(--_anchor-name);
|
|
149
136
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
137
|
+
display: flex !important;
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: 12px;
|
|
140
|
+
list-style: none;
|
|
153
141
|
|
|
154
|
-
|
|
155
|
-
|
|
142
|
+
.icon {
|
|
143
|
+
display: block;
|
|
144
|
+
font-size: 1.2rem;
|
|
145
|
+
|
|
146
|
+
transform: var(--_icon-transform);
|
|
147
|
+
transition: transform 200ms;
|
|
156
148
|
}
|
|
157
149
|
}
|
|
158
150
|
|
|
159
|
-
|
|
160
|
-
position-anchor: var(--_position-anchor);
|
|
151
|
+
.navigation-group-panel {
|
|
161
152
|
background-color: black;
|
|
162
153
|
display: grid;
|
|
163
154
|
grid-area: details-stack;
|
|
164
155
|
z-index: 2;
|
|
165
156
|
position: absolute;
|
|
166
157
|
inset: auto;
|
|
167
|
-
top:
|
|
168
|
-
left:
|
|
169
|
-
/* translate: 0 20px; */
|
|
170
|
-
padding: 12px;
|
|
158
|
+
top: 40px;
|
|
159
|
+
left: 0px;
|
|
171
160
|
gap: 12px;
|
|
172
161
|
|
|
173
|
-
|
|
174
|
-
|
|
162
|
+
width: 200px;
|
|
163
|
+
|
|
164
|
+
@media screen and (min-width: 768px) {
|
|
165
|
+
width: 400px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
@media screen and (min-width: 1024px) {
|
|
169
|
+
width: 600px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
background-color: white;
|
|
173
|
+
border: 1px solid black;
|
|
174
|
+
border-radius: 12px;
|
|
175
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
176
|
+
padding: 12px;
|
|
177
|
+
overflow: clip;
|
|
178
|
+
|
|
179
|
+
h4 {
|
|
180
|
+
color: var(--gray-12);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.navigation-group-list {
|
|
184
|
+
display: grid;
|
|
185
|
+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
186
|
+
gap: 12px;
|
|
187
|
+
padding-inline-start: 0;
|
|
188
|
+
margin-block-end: 8px;
|
|
189
|
+
|
|
190
|
+
.navigation-group-item {
|
|
191
|
+
display: block;
|
|
192
|
+
|
|
193
|
+
a.navigation-group-link {
|
|
194
|
+
display: inline-block;
|
|
195
|
+
color: var(--gray-12);
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
padding-block: 8px;
|
|
198
|
+
|
|
199
|
+
border-bottom: 2px solid transparent;
|
|
200
|
+
|
|
201
|
+
transition: border-color 200ms;
|
|
202
|
+
|
|
203
|
+
&:hover {
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
border-color: var(--gray-12);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&:focus-visible {
|
|
209
|
+
border-color: var(--gray-12);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
175
214
|
}
|
|
176
215
|
}
|
|
177
216
|
}
|
package/package.json
CHANGED