@cypress-design/vue-docmenu 0.5.2 → 0.6.0
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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +12 -0
- package/DocMenuVue.cy.tsx +98 -3
- package/_DocGroup.vue +9 -0
- package/_DocLink.vue +24 -0
- package/dist/_DocGroup.vue.d.ts.map +1 -1
- package/dist/_DocLink.vue.d.ts.map +1 -1
- package/dist/index.es.mjs +105 -87
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -2,13 +2,13 @@ $ yarn build:module && yarn build:types
|
|
|
2
2
|
$ yarn vite build
|
|
3
3
|
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
|
|
4
4
|
[33mThe CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
5
|
-
[36mvite v5.0.
|
|
5
|
+
[36mvite v5.0.12 [32mbuilding for production...[36m[39m
|
|
6
6
|
transforming...
|
|
7
7
|
[32m✓[39m 10 modules transformed.
|
|
8
8
|
rendering chunks...
|
|
9
9
|
computing gzip size...
|
|
10
|
-
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m11.
|
|
11
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[
|
|
12
|
-
[32m✓ built in
|
|
10
|
+
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m11.81 kB[22m[1m[22m[2m │ gzip: 3.45 kB[22m[2m │ map: 17.02 kB[22m
|
|
11
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m9.17 kB[22m[1m[22m[2m │ gzip: 2.96 kB[22m[2m │ map: 16.55 kB[22m
|
|
12
|
+
[32m✓ built in 3.21s[39m
|
|
13
13
|
$ yarn vue-tsc --project ./tsconfig.build.json
|
|
14
14
|
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @cypress-design/vue-docmenu
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#388](https://github.com/cypress-io/cypress-design/pull/388) [`7839c67`](https://github.com/cypress-io/cypress-design/commit/7839c670d8a83f8339db1a5d4395bd0dd5eaf987) Thanks [@elevatebart](https://github.com/elevatebart)! - make docmenu scroll to active path if necessary
|
|
8
|
+
|
|
9
|
+
## 0.5.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#387](https://github.com/cypress-io/cypress-design/pull/387) [`05b67c5`](https://github.com/cypress-io/cypress-design/commit/05b67c5389df1c0619d2f01e2b36fb5bd6bb30b9) Thanks [@elevatebart](https://github.com/elevatebart)! - when activePath changes, expand sections that contain the newly activated element
|
|
14
|
+
|
|
3
15
|
## 0.5.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/DocMenuVue.cy.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="cypress" />
|
|
2
2
|
import { type DefineComponent, defineComponent, ref } from 'vue'
|
|
3
3
|
import { mount } from 'cypress/vue'
|
|
4
|
-
import assertions from '../assertions'
|
|
4
|
+
import assertions, { BIG_ITEMS_SET } from '../assertions'
|
|
5
5
|
import type { NavGroup, NavItemLink } from '../constants'
|
|
6
6
|
import DocMenu from './DocMenu.vue'
|
|
7
7
|
|
|
@@ -18,7 +18,7 @@ describe('<DocMenu/>', () => {
|
|
|
18
18
|
props: {
|
|
19
19
|
href: String,
|
|
20
20
|
},
|
|
21
|
-
setup(props, { slots
|
|
21
|
+
setup(props, { slots }) {
|
|
22
22
|
return () => (
|
|
23
23
|
<span onClick={() => (selectedHref.value = props.href)}>
|
|
24
24
|
{slots.default?.()} + href: {props.href}
|
|
@@ -60,5 +60,100 @@ describe('<DocMenu/>', () => {
|
|
|
60
60
|
)
|
|
61
61
|
})
|
|
62
62
|
}
|
|
63
|
-
|
|
63
|
+
|
|
64
|
+
assertions(mountStory, () => {
|
|
65
|
+
const selectedHref = ref<string | undefined>('/foo')
|
|
66
|
+
|
|
67
|
+
const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
|
|
68
|
+
defineComponent({
|
|
69
|
+
props: {
|
|
70
|
+
href: String,
|
|
71
|
+
},
|
|
72
|
+
setup(props, { slots }) {
|
|
73
|
+
return () => (
|
|
74
|
+
<button
|
|
75
|
+
style="text-align:left"
|
|
76
|
+
onClick={() => (selectedHref.value = props.href)}
|
|
77
|
+
>
|
|
78
|
+
{slots.default?.()}
|
|
79
|
+
</button>
|
|
80
|
+
)
|
|
81
|
+
},
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
mount(() => (
|
|
85
|
+
<>
|
|
86
|
+
<button onClick={() => (selectedHref.value = '/kephren')}>
|
|
87
|
+
Set path to /kephren
|
|
88
|
+
</button>
|
|
89
|
+
<DocMenu
|
|
90
|
+
activePath={selectedHref.value}
|
|
91
|
+
items={[
|
|
92
|
+
{
|
|
93
|
+
label: 'Section 1',
|
|
94
|
+
items: [
|
|
95
|
+
{ href: '/foo', label: 'Foo' },
|
|
96
|
+
{
|
|
97
|
+
label: 'Subsection',
|
|
98
|
+
items: [{ href: '/sub', label: 'Sub' }],
|
|
99
|
+
},
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: 'Pyramid',
|
|
104
|
+
items: [{ href: '/kephren', label: 'Kephren' }],
|
|
105
|
+
collapsed: true,
|
|
106
|
+
},
|
|
107
|
+
]}
|
|
108
|
+
linkComponent={CustomLinkVue}
|
|
109
|
+
/>
|
|
110
|
+
</>
|
|
111
|
+
))
|
|
112
|
+
})
|
|
113
|
+
|
|
114
|
+
it.only('scrolls the active item into view', { viewportHeight: 200 }, () => {
|
|
115
|
+
const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
|
|
116
|
+
defineComponent({
|
|
117
|
+
props: {
|
|
118
|
+
href: String,
|
|
119
|
+
},
|
|
120
|
+
setup(props, { slots }) {
|
|
121
|
+
return () => (
|
|
122
|
+
<button style="text-align:left">{slots.default?.()}</button>
|
|
123
|
+
)
|
|
124
|
+
},
|
|
125
|
+
})
|
|
126
|
+
|
|
127
|
+
const pathState = ref('/fooTop')
|
|
128
|
+
const SUT = () => {
|
|
129
|
+
return (
|
|
130
|
+
<>
|
|
131
|
+
<button
|
|
132
|
+
onClick={() => (pathState.value = '/faa6')}
|
|
133
|
+
class="p-2 m-2 rounded bg-gray-100 border border-gray-300"
|
|
134
|
+
>
|
|
135
|
+
Set path to <code>/faa6</code>
|
|
136
|
+
</button>
|
|
137
|
+
<DocMenu
|
|
138
|
+
items={BIG_ITEMS_SET}
|
|
139
|
+
activePath={pathState.value}
|
|
140
|
+
linkComponent={CustomLinkVue}
|
|
141
|
+
collapsible
|
|
142
|
+
/>
|
|
143
|
+
</>
|
|
144
|
+
)
|
|
145
|
+
}
|
|
146
|
+
mount(() => <SUT />)
|
|
147
|
+
|
|
148
|
+
cy.findByText('Code').click()
|
|
149
|
+
|
|
150
|
+
cy.contains('Set path to').click()
|
|
151
|
+
cy.contains('Quisquam, quos').then(($el) => {
|
|
152
|
+
const windowInnerHeight = Cypress.config(`viewportHeight`)
|
|
153
|
+
|
|
154
|
+
const rect = ($el?.[0] as any).getBoundingClientRect()
|
|
155
|
+
|
|
156
|
+
expect(windowInnerHeight).to.be.greaterThan(rect.top)
|
|
157
|
+
})
|
|
158
|
+
})
|
|
64
159
|
})
|
package/_DocGroup.vue
CHANGED
package/_DocLink.vue
CHANGED
|
@@ -67,6 +67,30 @@ defineExpose({
|
|
|
67
67
|
setActiveMarkerPosition,
|
|
68
68
|
})
|
|
69
69
|
|
|
70
|
+
watch(
|
|
71
|
+
() => props.active,
|
|
72
|
+
(active) => {
|
|
73
|
+
if (active && $container.value) {
|
|
74
|
+
// if active check if the item is visible in the
|
|
75
|
+
// viewport and scrollIntoView if not
|
|
76
|
+
const rect = $container.value.getBoundingClientRect()
|
|
77
|
+
|
|
78
|
+
if (rect.top > 0 && rect.bottom < window.innerHeight) {
|
|
79
|
+
return
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
if (rect.left > 0 && rect.right < window.innerWidth) {
|
|
83
|
+
return
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
$container.value.scrollIntoView({
|
|
87
|
+
block: 'nearest',
|
|
88
|
+
inline: 'nearest',
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
)
|
|
93
|
+
|
|
70
94
|
const itemWithoutLabel = computed(() => {
|
|
71
95
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
72
96
|
const { label, ...rest } = props.item
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,eAAe,EAAsB,MAAM,KAAK,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAwCrE,iBAAS,uBAAuB,SAE/B;;
|
|
1
|
+
{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,eAAe,EAAsB,MAAM,KAAK,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAwCrE,iBAAS,uBAAuB,SAE/B;;WA0QU,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;;;WAH7B,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;WAC5B,MAAM;;AAXlB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AA6BpE,iBAAS,uBAAuB,SAY/B;;
|
|
1
|
+
{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AA6BpE,iBAAS,uBAAuB,SAY/B;;UA2JS,WAAW;YACT,OAAO;iBACF,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;;;;;;;;UAJ9B,WAAW;YACT,OAAO;iBACF,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;;;;;;WAD5B,MAAM;;AAVlB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as C, ref as d, computed as y, inject as T, watch as P, openBlock as p, createElementBlock as f, Fragment as w, createBlock as $, resolveDynamicComponent as D, normalizeClass as b, unref as h, normalizeStyle as B, withCtx as E, createCommentVNode as A, createTextVNode as G, toDisplayString as S, createElementVNode as z, createVNode as x, onMounted as H, mergeProps as V, nextTick as N, renderList as R, provide as W } from "vue";
|
|
2
2
|
import { IconChevronDownSmall as j } from "@cypress-design/vue-icon";
|
|
3
|
-
const
|
|
3
|
+
const k = {
|
|
4
4
|
expandedIcon: "absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700",
|
|
5
5
|
button: "flex leading-[24px] py-[10px] items-center relative w-full text-start",
|
|
6
6
|
topButton: "leading-[24px] text-[16px] pl-[24px] font-medium",
|
|
7
7
|
leafButton: "leading-[20px] text-[14px] pl-[48px]",
|
|
8
8
|
openListBorderLeft: "absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"
|
|
9
|
-
}, F = /* @__PURE__ */
|
|
9
|
+
}, F = /* @__PURE__ */ C({
|
|
10
10
|
__name: "_DocGroup",
|
|
11
11
|
props: {
|
|
12
12
|
group: {},
|
|
@@ -16,98 +16,103 @@ const h = {
|
|
|
16
16
|
depth: { default: 0 }
|
|
17
17
|
},
|
|
18
18
|
emits: ["updateActivePosition", "updateMarkerPosition", "hideMarker"],
|
|
19
|
-
setup(g, { expose:
|
|
20
|
-
const
|
|
21
|
-
() =>
|
|
22
|
-
), l =
|
|
23
|
-
() =>
|
|
19
|
+
setup(g, { expose: c, emit: v }) {
|
|
20
|
+
const o = g, i = d(o.group.collapsed !== !0), u = d(), m = d(), s = y(
|
|
21
|
+
() => o.collapsible ? "button" : o.group.href ? "a" : "div"
|
|
22
|
+
), l = v, e = y(
|
|
23
|
+
() => o.group.items.some((t) => "items" in t ? I(t.items, o.activePath) : t.href === o.activePath)
|
|
24
24
|
);
|
|
25
25
|
function n() {
|
|
26
26
|
var t;
|
|
27
|
-
(t =
|
|
27
|
+
(t = u.value) == null || t.reTriggerSetActiveGroup();
|
|
28
28
|
}
|
|
29
|
-
const a = y(() =>
|
|
30
|
-
return
|
|
29
|
+
const a = y(() => o.group.href === o.activePath), M = T("transition-is-moving", d(!1));
|
|
30
|
+
return P(a, (t) => {
|
|
31
31
|
t && l("hideMarker");
|
|
32
|
-
}),
|
|
32
|
+
}), P(i, (t) => {
|
|
33
33
|
e.value ? t ? n() : l("hideMarker") : l("updateMarkerPosition");
|
|
34
|
-
}),
|
|
34
|
+
}), P(
|
|
35
|
+
() => o.activePath,
|
|
36
|
+
() => {
|
|
37
|
+
e.value && !i.value && (i.value = !0);
|
|
38
|
+
}
|
|
39
|
+
), c({
|
|
35
40
|
reTriggerSetActiveGroup: n
|
|
36
|
-
}), (t, r) => (p(), f(
|
|
37
|
-
(p(),
|
|
41
|
+
}), (t, r) => (p(), f(w, null, [
|
|
42
|
+
(p(), $(D(s.value), {
|
|
38
43
|
class: b([
|
|
39
|
-
k
|
|
44
|
+
h(k).button,
|
|
40
45
|
{
|
|
41
|
-
[k
|
|
42
|
-
[k
|
|
46
|
+
[h(k).topButton]: t.depth === 0,
|
|
47
|
+
[h(k).leafButton]: t.depth,
|
|
43
48
|
"text-indigo-500 dark:text-indigo-400": a.value,
|
|
44
49
|
"text-gray-900 dark:text-gray-100": e.value && !a.value,
|
|
45
50
|
"text-gray-800 dark:text-gray-200": !e.value && !a.value
|
|
46
51
|
}
|
|
47
52
|
]),
|
|
48
|
-
style:
|
|
53
|
+
style: B({
|
|
49
54
|
paddingLeft: t.depth >= 1 ? `${(t.depth - 1) * 12 + 48}px` : void 0
|
|
50
55
|
}),
|
|
51
56
|
href: t.group.href,
|
|
52
57
|
onClick: r[0] || (r[0] = () => {
|
|
53
|
-
t.collapsible ?
|
|
58
|
+
t.collapsible ? i.value = !i.value : l("updateActivePosition");
|
|
54
59
|
})
|
|
55
60
|
}, {
|
|
56
61
|
default: E(() => [
|
|
57
|
-
|
|
62
|
+
o.collapsible ? (p(), $(h(j), {
|
|
58
63
|
key: 0,
|
|
59
64
|
"stroke-color": "current",
|
|
60
65
|
size: t.depth ? "8" : "16",
|
|
61
66
|
class: b([
|
|
62
|
-
k
|
|
67
|
+
h(k).expandedIcon,
|
|
63
68
|
{
|
|
64
|
-
"rotate-0":
|
|
65
|
-
"-rotate-90": !
|
|
69
|
+
"rotate-0": i.value,
|
|
70
|
+
"-rotate-90": !i.value
|
|
66
71
|
}
|
|
67
72
|
]),
|
|
68
|
-
style:
|
|
73
|
+
style: B({
|
|
69
74
|
marginLeft: t.depth >= 1 ? `${(t.depth - 1) * 12 + 28}px` : void 0
|
|
70
75
|
})
|
|
71
|
-
}, null, 8, ["size", "class", "style"])) :
|
|
76
|
+
}, null, 8, ["size", "class", "style"])) : A("", !0),
|
|
72
77
|
G(" " + S(t.group.label), 1)
|
|
73
78
|
]),
|
|
74
79
|
_: 1
|
|
75
80
|
}, 8, ["class", "style", "href"])),
|
|
76
81
|
z("div", {
|
|
77
82
|
class: b(["grid transition-all relative", {
|
|
78
|
-
"grid-rows-[0fr]": !
|
|
79
|
-
"grid-rows-[1fr]":
|
|
83
|
+
"grid-rows-[0fr]": !i.value && t.collapsible,
|
|
84
|
+
"grid-rows-[1fr]": i.value || !t.collapsible
|
|
80
85
|
}]),
|
|
81
86
|
ref_key: "$listWrapper",
|
|
82
87
|
ref: m,
|
|
83
88
|
onTransitionstart: r[4] || (r[4] = () => {
|
|
84
|
-
|
|
89
|
+
M.value = !0;
|
|
85
90
|
}),
|
|
86
91
|
onTransitionend: r[5] || (r[5] = () => {
|
|
87
|
-
|
|
92
|
+
M.value = !1, (i.value || !e.value) && l("updateMarkerPosition");
|
|
88
93
|
})
|
|
89
94
|
}, [
|
|
90
|
-
|
|
95
|
+
i.value && t.collapsible && t.depth === 0 ? (p(), f("div", {
|
|
91
96
|
key: 0,
|
|
92
|
-
class: b(k
|
|
93
|
-
}, null, 2)) :
|
|
94
|
-
|
|
97
|
+
class: b(h(k).openListBorderLeft)
|
|
98
|
+
}, null, 2)) : A("", !0),
|
|
99
|
+
x(U, {
|
|
95
100
|
ref_key: "$groupElements",
|
|
96
|
-
ref:
|
|
101
|
+
ref: u,
|
|
97
102
|
class: "overflow-hidden",
|
|
98
103
|
depth: t.depth,
|
|
99
104
|
items: t.group.items,
|
|
100
105
|
"active-path": t.activePath,
|
|
101
106
|
collapsible: t.collapsible,
|
|
102
107
|
"link-component": t.linkComponent,
|
|
103
|
-
onHideMarker: r[1] || (r[1] = (
|
|
108
|
+
onHideMarker: r[1] || (r[1] = (L) => l("hideMarker")),
|
|
104
109
|
onUpdateMarkerPosition: r[2] || (r[2] = () => l("updateMarkerPosition")),
|
|
105
|
-
onUpdateActivePosition: r[3] || (r[3] = (
|
|
110
|
+
onUpdateActivePosition: r[3] || (r[3] = (L) => i.value ? l("updateActivePosition", L) : null)
|
|
106
111
|
}, null, 8, ["depth", "items", "active-path", "collapsible", "link-component"])
|
|
107
112
|
], 34)
|
|
108
113
|
], 64));
|
|
109
114
|
}
|
|
110
|
-
}), q = /* @__PURE__ */
|
|
115
|
+
}), q = /* @__PURE__ */ C({
|
|
111
116
|
__name: "_DocLink",
|
|
112
117
|
props: {
|
|
113
118
|
item: {},
|
|
@@ -117,39 +122,52 @@ const h = {
|
|
|
117
122
|
linkComponent: {}
|
|
118
123
|
},
|
|
119
124
|
emits: ["update:active"],
|
|
120
|
-
setup(g, { expose:
|
|
121
|
-
const
|
|
125
|
+
setup(g, { expose: c, emit: v }) {
|
|
126
|
+
const o = g, i = v, u = d(), m = T("transition-is-moving", d(!1));
|
|
122
127
|
function s() {
|
|
123
|
-
|
|
128
|
+
o.active && N(() => {
|
|
124
129
|
var a;
|
|
125
|
-
const { top: e = 0, height: n = 36 } = ((a =
|
|
126
|
-
|
|
130
|
+
const { top: e = 0, height: n = 36 } = ((a = u.value) == null ? void 0 : a.getBoundingClientRect()) ?? {};
|
|
131
|
+
i("update:active", o.active, {
|
|
127
132
|
top: e,
|
|
128
133
|
height: n
|
|
129
134
|
});
|
|
130
135
|
});
|
|
131
136
|
}
|
|
132
137
|
H(() => {
|
|
133
|
-
|
|
134
|
-
() =>
|
|
138
|
+
P(
|
|
139
|
+
() => o.active,
|
|
135
140
|
(e) => {
|
|
136
|
-
e ? s() :
|
|
141
|
+
e ? s() : i("update:active", e);
|
|
137
142
|
},
|
|
138
143
|
{ immediate: !0 }
|
|
139
144
|
);
|
|
140
|
-
}),
|
|
145
|
+
}), c({
|
|
141
146
|
setActiveMarkerPosition: s
|
|
142
|
-
})
|
|
147
|
+
}), P(
|
|
148
|
+
() => o.active,
|
|
149
|
+
(e) => {
|
|
150
|
+
if (e && u.value) {
|
|
151
|
+
const n = u.value.getBoundingClientRect();
|
|
152
|
+
if (n.top > 0 && n.bottom < window.innerHeight || n.left > 0 && n.right < window.innerWidth)
|
|
153
|
+
return;
|
|
154
|
+
u.value.scrollIntoView({
|
|
155
|
+
block: "nearest",
|
|
156
|
+
inline: "nearest"
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
);
|
|
143
161
|
const l = y(() => {
|
|
144
|
-
const { label: e, ...n } =
|
|
162
|
+
const { label: e, ...n } = o.item;
|
|
145
163
|
return n;
|
|
146
164
|
});
|
|
147
165
|
return (e, n) => (p(), f("li", {
|
|
148
166
|
ref_key: "$container",
|
|
149
|
-
ref:
|
|
167
|
+
ref: u,
|
|
150
168
|
class: "list-none p-0"
|
|
151
169
|
}, [
|
|
152
|
-
(p(),
|
|
170
|
+
(p(), $(D(e.linkComponent), V(l.value, {
|
|
153
171
|
class: ["group relative block w-full pl-[24px]", {
|
|
154
172
|
"text-indigo-500 dark:text-indigo-400": e.active,
|
|
155
173
|
"text-gray-700 dark:text-gray-500": !e.active,
|
|
@@ -164,11 +182,11 @@ const h = {
|
|
|
164
182
|
e.depth >= 0 ? (p(), f("div", {
|
|
165
183
|
key: 0,
|
|
166
184
|
class: b(["left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full", {
|
|
167
|
-
hidden: !
|
|
185
|
+
hidden: !h(m) || !e.active,
|
|
168
186
|
"group-hover:block bg-gray-300": !e.active && e.collapsible,
|
|
169
|
-
"bg-indigo-500": e.active &&
|
|
187
|
+
"bg-indigo-500": e.active && h(m)
|
|
170
188
|
}])
|
|
171
|
-
}, null, 2)) :
|
|
189
|
+
}, null, 2)) : A("", !0),
|
|
172
190
|
G(" " + S(e.item.label), 1)
|
|
173
191
|
]),
|
|
174
192
|
_: 1
|
|
@@ -179,10 +197,10 @@ const h = {
|
|
|
179
197
|
key: 0,
|
|
180
198
|
class: "relative list-none p-0"
|
|
181
199
|
};
|
|
182
|
-
function
|
|
183
|
-
return g.some((
|
|
200
|
+
function I(g, c) {
|
|
201
|
+
return g.some((v) => "items" in v ? I(v.items, c) : v.href === c);
|
|
184
202
|
}
|
|
185
|
-
const U = /* @__PURE__ */
|
|
203
|
+
const U = /* @__PURE__ */ C({
|
|
186
204
|
__name: "_DocGroupElements",
|
|
187
205
|
props: {
|
|
188
206
|
items: {},
|
|
@@ -192,26 +210,26 @@ const U = /* @__PURE__ */ A({
|
|
|
192
210
|
depth: {}
|
|
193
211
|
},
|
|
194
212
|
emits: ["updateActivePosition", "updateMarkerPosition", "hideMarker"],
|
|
195
|
-
setup(g, { expose:
|
|
196
|
-
const
|
|
197
|
-
() =>
|
|
213
|
+
setup(g, { expose: c, emit: v }) {
|
|
214
|
+
const o = g, i = v, u = d([]), m = d([]), s = y(
|
|
215
|
+
() => o.items.some((e) => "items" in e ? I(e.items, o.activePath) : e.href === o.activePath)
|
|
198
216
|
);
|
|
199
217
|
function l(e = -1) {
|
|
200
|
-
|
|
218
|
+
u.value.forEach((a) => {
|
|
201
219
|
a.setActiveMarkerPosition();
|
|
202
220
|
});
|
|
203
221
|
const n = e - // remove all the items that are not groups from the array and count them
|
|
204
|
-
|
|
222
|
+
o.items.slice(0, e).filter((a) => !("items" in a)).length;
|
|
205
223
|
m.value.slice(n + 1).forEach((a) => {
|
|
206
224
|
a.reTriggerSetActiveGroup();
|
|
207
225
|
});
|
|
208
226
|
}
|
|
209
|
-
return
|
|
227
|
+
return c({
|
|
210
228
|
reTriggerSetActiveGroup: l
|
|
211
229
|
}), (e, n) => (p(), f("ul", J, [
|
|
212
|
-
(p(!0), f(
|
|
230
|
+
(p(!0), f(w, null, R(e.items, (a, M) => (p(), f(w, null, [
|
|
213
231
|
a && "items" in a ? (p(), f("li", K, [
|
|
214
|
-
|
|
232
|
+
x(F, {
|
|
215
233
|
ref_for: !0,
|
|
216
234
|
ref_key: "$groups",
|
|
217
235
|
ref: m,
|
|
@@ -221,18 +239,18 @@ const U = /* @__PURE__ */ A({
|
|
|
221
239
|
collapsible: e.collapsible,
|
|
222
240
|
"link-component": e.linkComponent,
|
|
223
241
|
onUpdateActivePosition: n[0] || (n[0] = (t) => {
|
|
224
|
-
|
|
242
|
+
i("updateActivePosition", t);
|
|
225
243
|
}),
|
|
226
244
|
onUpdateMarkerPosition: () => {
|
|
227
|
-
s.value ? l(
|
|
245
|
+
s.value ? l(M) : i("updateMarkerPosition");
|
|
228
246
|
},
|
|
229
|
-
onHideMarker: n[1] || (n[1] = (t) =>
|
|
247
|
+
onHideMarker: n[1] || (n[1] = (t) => i("hideMarker"))
|
|
230
248
|
}, null, 8, ["active-path", "group", "depth", "collapsible", "link-component", "onUpdateMarkerPosition"])
|
|
231
|
-
])) : (p(),
|
|
249
|
+
])) : (p(), $(q, {
|
|
232
250
|
key: 1,
|
|
233
251
|
ref_for: !0,
|
|
234
252
|
ref_key: "$items",
|
|
235
|
-
ref:
|
|
253
|
+
ref: u,
|
|
236
254
|
item: a,
|
|
237
255
|
active: a.href === e.activePath,
|
|
238
256
|
depth: e.depth,
|
|
@@ -240,7 +258,7 @@ const U = /* @__PURE__ */ A({
|
|
|
240
258
|
"link-component": e.linkComponent,
|
|
241
259
|
"onUpdate:active": n[2] || (n[2] = (t, r) => {
|
|
242
260
|
if (r)
|
|
243
|
-
e.depth < 0 ?
|
|
261
|
+
e.depth < 0 ? i("hideMarker") : i("updateActivePosition", r);
|
|
244
262
|
else
|
|
245
263
|
return;
|
|
246
264
|
})
|
|
@@ -248,7 +266,7 @@ const U = /* @__PURE__ */ A({
|
|
|
248
266
|
], 64))), 256))
|
|
249
267
|
]));
|
|
250
268
|
}
|
|
251
|
-
}), X = /* @__PURE__ */
|
|
269
|
+
}), X = /* @__PURE__ */ C({
|
|
252
270
|
__name: "DocMenu",
|
|
253
271
|
props: {
|
|
254
272
|
items: {},
|
|
@@ -257,35 +275,35 @@ const U = /* @__PURE__ */ A({
|
|
|
257
275
|
linkComponent: { default: "a" }
|
|
258
276
|
},
|
|
259
277
|
setup(g) {
|
|
260
|
-
const
|
|
261
|
-
function
|
|
278
|
+
const c = d(), v = d(0), o = d(36), i = d(!1);
|
|
279
|
+
function u({ top: s, height: l } = { height: 0, top: 0 }) {
|
|
262
280
|
var n;
|
|
263
|
-
const e = ((n =
|
|
264
|
-
|
|
281
|
+
const e = ((n = c.value) == null ? void 0 : n.getBoundingClientRect().top) || 0;
|
|
282
|
+
v.value = s - e, o.value = l, i.value = !0;
|
|
265
283
|
}
|
|
266
|
-
const m =
|
|
284
|
+
const m = d(!1);
|
|
267
285
|
return W("transition-is-moving", m), (s, l) => (p(), f("div", {
|
|
268
286
|
ref_key: "$container",
|
|
269
|
-
ref:
|
|
287
|
+
ref: c,
|
|
270
288
|
class: "relative"
|
|
271
289
|
}, [
|
|
272
|
-
|
|
290
|
+
i.value && s.collapsible && !m.value ? (p(), f("div", {
|
|
273
291
|
key: 0,
|
|
274
292
|
"data-cy": "doc-menu-active-marker",
|
|
275
293
|
class: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]",
|
|
276
|
-
style:
|
|
277
|
-
top: `${
|
|
278
|
-
height: `${
|
|
294
|
+
style: B({
|
|
295
|
+
top: `${v.value}px`,
|
|
296
|
+
height: `${o.value - 8}px`
|
|
279
297
|
})
|
|
280
|
-
}, null, 4)) :
|
|
281
|
-
|
|
298
|
+
}, null, 4)) : A("", !0),
|
|
299
|
+
x(U, {
|
|
282
300
|
items: s.items,
|
|
283
301
|
"active-path": s.activePath,
|
|
284
302
|
collapsible: s.collapsible,
|
|
285
303
|
"link-component": s.linkComponent,
|
|
286
304
|
depth: -1,
|
|
287
|
-
onUpdateActivePosition:
|
|
288
|
-
onHideMarker: l[0] || (l[0] = (e) =>
|
|
305
|
+
onUpdateActivePosition: u,
|
|
306
|
+
onHideMarker: l[0] || (l[0] = (e) => i.value = !1)
|
|
289
307
|
}, null, 8, ["items", "active-path", "collapsible", "link-component"])
|
|
290
308
|
], 512));
|
|
291
309
|
}
|
|
@@ -295,4 +313,4 @@ export {
|
|
|
295
313
|
};
|
|
296
314
|
//# sourceMappingURL=index.es.mjs.map
|
|
297
315
|
|
|
298
|
-
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] filter list-none p-0 text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden text-indigo-400 text-gray-100 text-gray-200 icon-dark-current block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
|
|
316
|
+
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] filter list-none p-0 text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden text-indigo-400 text-gray-100 text-gray-200 icon-dark-current visible block inline w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',\n button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[48px]',\n openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, inject } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements, {\n hasActiveItemRecursively,\n type DocGroupEventsEmitted,\n} from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\nconst $listWrapper = ref<HTMLDivElement>()\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst hasActiveItem = computed(() =>\n props.group.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\nfunction reTriggerSetActiveGroup() {\n $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, (open) => {\n if (hasActiveItem.value) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-900 dark:text-gray-100': hasActiveItem && !active,\n 'text-gray-800 dark:text-gray-200': !hasActiveItem && !active,\n },\n ]\"\n :style=\"{\n paddingLeft: depth >= 1 ? `${(depth - 1) * 12 + 48}px` : undefined,\n }\"\n :href=\"group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n } else {\n emit('updateActivePosition')\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"current\"\n :size=\"depth ? '8' : '16'\"\n :class=\"[\n classes.expandedIcon,\n {\n 'rotate-0': open,\n '-rotate-90': !open,\n },\n ]\"\n :style=\"{\n marginLeft: depth >= 1 ? `${(depth - 1) * 12 + 28}px` : undefined,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n class=\"grid transition-all relative\"\n ref=\"$listWrapper\"\n :class=\"{\n 'grid-rows-[0fr]': !open && collapsible,\n 'grid-rows-[1fr]': open || !collapsible,\n }\"\n @transitionstart=\"\n () => {\n markerIsMoving = true\n }\n \"\n @transitionend=\"\n () => {\n markerIsMoving = false\n if (open || !hasActiveItem) {\n emit('updateMarkerPosition')\n }\n }\n \"\n >\n <div\n v-if=\"open && collapsible && depth === 0\"\n :class=\"classes.openListBorderLeft\"\n />\n <DocGroupElements\n ref=\"$groupElements\"\n class=\"overflow-hidden\"\n :depth=\"depth\"\n :items=\"group.items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @hide-marker=\"emit('hideMarker')\"\n @update-marker-position=\"() => emit('updateMarkerPosition')\"\n @update-active-position=\"\n (opts) => (open ? emit('updateActivePosition', opts) : null)\n \"\n />\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport {\n watch,\n type DefineComponent,\n ref,\n onMounted,\n inject,\n nextTick,\n computed,\n} from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n defineProps<{\n item: NavItemLink\n active: boolean\n collapsible: boolean\n depth?: number\n linkComponent: DefineComponent | 'a'\n }>(),\n {\n depth: -1,\n },\n)\n\nconst emit = defineEmits<{\n (\n event: 'update:active',\n active: boolean,\n opts?: { top: number; height: number },\n ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nfunction setActiveMarkerPosition() {\n if (props.active) {\n nextTick(() => {\n const { top = 0, height = 36 } =\n $container.value?.getBoundingClientRect() ?? {}\n\n emit('update:active', props.active, {\n top,\n height,\n })\n })\n }\n}\n\nonMounted(() => {\n watch(\n () => props.active,\n (active) => {\n if (active) {\n setActiveMarkerPosition()\n } else {\n emit('update:active', active)\n }\n },\n { immediate: true },\n )\n})\n\ndefineExpose({\n setActiveMarkerPosition,\n})\n\nconst itemWithoutLabel = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { label, ...rest } = props.item\n return rest\n})\n</script>\n\n<template>\n <li ref=\"$container\" class=\"list-none p-0\">\n <component\n :is=\"linkComponent\"\n v-bind=\"itemWithoutLabel\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-700 dark:text-gray-500': !active,\n 'py-[8px] text-[16px] leading-[24px]': depth < 0,\n 'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n }\"\n :style=\"{\n paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,\n }\"\n >\n <div\n v-if=\"depth >= 0\"\n class=\"left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full\"\n :class=\"{\n hidden: !markerIsMoving || !active,\n 'group-hover:block bg-gray-300': !active && collapsible,\n 'bg-indigo-500': active && markerIsMoving,\n }\"\n />\n {{ item.label }}\n </component>\n </li>\n</template>\n","<script lang=\"ts\">\nexport function hasActiveItemRecursively(\n items: (NavGroup | NavItemLink)[],\n activePath?: string,\n): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, activePath)\n }\n return item.href === activePath\n })\n}\n\nexport interface DocGroupEventsEmitted {\n /**\n * If the group is not collapsed, this event will emit the\n * active marker position all the way to the menu component\n */\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n /**\n * This event will trigger a re-render of the active marker\n * to update its position if not in the current subtree\n */\n (event: 'updateMarkerPosition'): void\n /**\n * This event will bubble-up and hide the active marker\n */\n (event: 'hideMarker'): void\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { DefineComponent, computed, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n items: (NavGroup | NavItemLink)[]\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth: number\n}>()\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nconst hasActiveItem = computed(() =>\n props.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\n/**\n * update the position of the marker when opening a group\n * @param index\n */\nfunction reTriggerSetActiveGroup(index = -1) {\n $items.value.forEach((item) => {\n item.setActiveMarkerPosition()\n })\n\n // calculate the index of the calling group in the list of groups\n const indexGroup =\n index -\n // remove all the items that are not groups from the array and count them\n props.items.slice(0, index).filter((item) => !('items' in item)).length\n\n // only update groups that come after the toggled one\n // others will not need to update the marker\n // since they are \"before\" in the rendering tree\n $groups.value.slice(indexGroup + 1).forEach((group) => {\n group.reTriggerSetActiveGroup()\n })\n}\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <ul class=\"list-none p-0\">\n <template v-for=\"(item, index) in items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :active-path=\"activePath\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update-active-position=\"\n (opts) => {\n emit('updateActivePosition', opts)\n }\n \"\n @update-marker-position=\"\n () => {\n if (hasActiveItem) {\n reTriggerSetActiveGroup(index)\n } else {\n emit('updateMarkerPosition')\n }\n }\n \"\n @hide-marker=\"emit('hideMarker')\"\n />\n </li>\n <DocLink\n v-else\n ref=\"$items\"\n :item=\"item\"\n :active=\"item.href === activePath\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update:active=\"\n (_, opts) => {\n if (!opts) {\n return\n } else if (depth < 0) {\n emit('hideMarker')\n } else {\n emit('updateActivePosition', opts)\n }\n }\n \"\n />\n </template>\n </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent, provide } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n defineProps<{\n items: (NavItemLink | NavGroup)[]\n activePath?: string\n collapsible?: boolean\n linkComponent?: DefineComponent | 'a'\n }>(),\n {\n linkComponent: 'a',\n collapsible: true,\n activePath: undefined,\n },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n const containerTop = $container.value?.getBoundingClientRect().top || 0\n activeTop.value = top - containerTop\n activeHeight.value = height\n showMarker.value = true\n}\n\nconst markerIsMoving = ref(false)\n\nprovide('transition-is-moving', markerIsMoving)\n</script>\n\n<template>\n <div ref=\"$container\" class=\"relative\">\n <div\n v-if=\"showMarker && collapsible && !markerIsMoving\"\n data-cy=\"doc-menu-active-marker\"\n class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n :style=\"{\n top: `${activeTop}px`,\n height: `${activeHeight - 8}px`,\n }\"\n />\n <DocGroupElements\n :items=\"items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n :depth=\"-1\"\n @update-active-position=\"updateActiveMarkerPosition\"\n @hide-marker=\"showMarker = false\"\n />\n </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","$listWrapper","Head","computed","emit","__emit","hasActiveItem","item","hasActiveItemRecursively","reTriggerSetActiveGroup","_a","active","markerIsMoving","inject","watch","__expose","$container","setActiveMarkerPosition","nextTick","top","height","onMounted","itemWithoutLabel","label","rest","items","activePath","$items","$groups","index","indexGroup","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop","provide"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',\n button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[48px]',\n openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, inject } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements, {\n hasActiveItemRecursively,\n type DocGroupEventsEmitted,\n} from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\nconst $listWrapper = ref<HTMLDivElement>()\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst hasActiveItem = computed(() =>\n props.group.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\nfunction reTriggerSetActiveGroup() {\n $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, (open) => {\n if (hasActiveItem.value) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\nwatch(\n () => props.activePath,\n () => {\n if (hasActiveItem.value && !open.value) {\n open.value = true\n }\n },\n)\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-900 dark:text-gray-100': hasActiveItem && !active,\n 'text-gray-800 dark:text-gray-200': !hasActiveItem && !active,\n },\n ]\"\n :style=\"{\n paddingLeft: depth >= 1 ? `${(depth - 1) * 12 + 48}px` : undefined,\n }\"\n :href=\"group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n } else {\n emit('updateActivePosition')\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"current\"\n :size=\"depth ? '8' : '16'\"\n :class=\"[\n classes.expandedIcon,\n {\n 'rotate-0': open,\n '-rotate-90': !open,\n },\n ]\"\n :style=\"{\n marginLeft: depth >= 1 ? `${(depth - 1) * 12 + 28}px` : undefined,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n class=\"grid transition-all relative\"\n ref=\"$listWrapper\"\n :class=\"{\n 'grid-rows-[0fr]': !open && collapsible,\n 'grid-rows-[1fr]': open || !collapsible,\n }\"\n @transitionstart=\"\n () => {\n markerIsMoving = true\n }\n \"\n @transitionend=\"\n () => {\n markerIsMoving = false\n if (open || !hasActiveItem) {\n emit('updateMarkerPosition')\n }\n }\n \"\n >\n <div\n v-if=\"open && collapsible && depth === 0\"\n :class=\"classes.openListBorderLeft\"\n />\n <DocGroupElements\n ref=\"$groupElements\"\n class=\"overflow-hidden\"\n :depth=\"depth\"\n :items=\"group.items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @hide-marker=\"emit('hideMarker')\"\n @update-marker-position=\"() => emit('updateMarkerPosition')\"\n @update-active-position=\"\n (opts) => (open ? emit('updateActivePosition', opts) : null)\n \"\n />\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport {\n watch,\n type DefineComponent,\n ref,\n onMounted,\n inject,\n nextTick,\n computed,\n} from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n defineProps<{\n item: NavItemLink\n active: boolean\n collapsible: boolean\n depth?: number\n linkComponent: DefineComponent | 'a'\n }>(),\n {\n depth: -1,\n },\n)\n\nconst emit = defineEmits<{\n (\n event: 'update:active',\n active: boolean,\n opts?: { top: number; height: number },\n ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nfunction setActiveMarkerPosition() {\n if (props.active) {\n nextTick(() => {\n const { top = 0, height = 36 } =\n $container.value?.getBoundingClientRect() ?? {}\n\n emit('update:active', props.active, {\n top,\n height,\n })\n })\n }\n}\n\nonMounted(() => {\n watch(\n () => props.active,\n (active) => {\n if (active) {\n setActiveMarkerPosition()\n } else {\n emit('update:active', active)\n }\n },\n { immediate: true },\n )\n})\n\ndefineExpose({\n setActiveMarkerPosition,\n})\n\nwatch(\n () => props.active,\n (active) => {\n if (active && $container.value) {\n // if active check if the item is visible in the\n // viewport and scrollIntoView if not\n const rect = $container.value.getBoundingClientRect()\n\n if (rect.top > 0 && rect.bottom < window.innerHeight) {\n return\n }\n\n if (rect.left > 0 && rect.right < window.innerWidth) {\n return\n }\n\n $container.value.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n })\n }\n },\n)\n\nconst itemWithoutLabel = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { label, ...rest } = props.item\n return rest\n})\n</script>\n\n<template>\n <li ref=\"$container\" class=\"list-none p-0\">\n <component\n :is=\"linkComponent\"\n v-bind=\"itemWithoutLabel\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-700 dark:text-gray-500': !active,\n 'py-[8px] text-[16px] leading-[24px]': depth < 0,\n 'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n }\"\n :style=\"{\n paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,\n }\"\n >\n <div\n v-if=\"depth >= 0\"\n class=\"left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full\"\n :class=\"{\n hidden: !markerIsMoving || !active,\n 'group-hover:block bg-gray-300': !active && collapsible,\n 'bg-indigo-500': active && markerIsMoving,\n }\"\n />\n {{ item.label }}\n </component>\n </li>\n</template>\n","<script lang=\"ts\">\nexport function hasActiveItemRecursively(\n items: (NavGroup | NavItemLink)[],\n activePath?: string,\n): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, activePath)\n }\n return item.href === activePath\n })\n}\n\nexport interface DocGroupEventsEmitted {\n /**\n * If the group is not collapsed, this event will emit the\n * active marker position all the way to the menu component\n */\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n /**\n * This event will trigger a re-render of the active marker\n * to update its position if not in the current subtree\n */\n (event: 'updateMarkerPosition'): void\n /**\n * This event will bubble-up and hide the active marker\n */\n (event: 'hideMarker'): void\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { DefineComponent, computed, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n items: (NavGroup | NavItemLink)[]\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth: number\n}>()\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nconst hasActiveItem = computed(() =>\n props.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\n/**\n * update the position of the marker when opening a group\n * @param index\n */\nfunction reTriggerSetActiveGroup(index = -1) {\n $items.value.forEach((item) => {\n item.setActiveMarkerPosition()\n })\n\n // calculate the index of the calling group in the list of groups\n const indexGroup =\n index -\n // remove all the items that are not groups from the array and count them\n props.items.slice(0, index).filter((item) => !('items' in item)).length\n\n // only update groups that come after the toggled one\n // others will not need to update the marker\n // since they are \"before\" in the rendering tree\n $groups.value.slice(indexGroup + 1).forEach((group) => {\n group.reTriggerSetActiveGroup()\n })\n}\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <ul class=\"list-none p-0\">\n <template v-for=\"(item, index) in items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :active-path=\"activePath\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update-active-position=\"\n (opts) => {\n emit('updateActivePosition', opts)\n }\n \"\n @update-marker-position=\"\n () => {\n if (hasActiveItem) {\n reTriggerSetActiveGroup(index)\n } else {\n emit('updateMarkerPosition')\n }\n }\n \"\n @hide-marker=\"emit('hideMarker')\"\n />\n </li>\n <DocLink\n v-else\n ref=\"$items\"\n :item=\"item\"\n :active=\"item.href === activePath\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update:active=\"\n (_, opts) => {\n if (!opts) {\n return\n } else if (depth < 0) {\n emit('hideMarker')\n } else {\n emit('updateActivePosition', opts)\n }\n }\n \"\n />\n </template>\n </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent, provide } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n defineProps<{\n items: (NavItemLink | NavGroup)[]\n activePath?: string\n collapsible?: boolean\n linkComponent?: DefineComponent | 'a'\n }>(),\n {\n linkComponent: 'a',\n collapsible: true,\n activePath: undefined,\n },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n const containerTop = $container.value?.getBoundingClientRect().top || 0\n activeTop.value = top - containerTop\n activeHeight.value = height\n showMarker.value = true\n}\n\nconst markerIsMoving = ref(false)\n\nprovide('transition-is-moving', markerIsMoving)\n</script>\n\n<template>\n <div ref=\"$container\" class=\"relative\">\n <div\n v-if=\"showMarker && collapsible && !markerIsMoving\"\n data-cy=\"doc-menu-active-marker\"\n class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n :style=\"{\n top: `${activeTop}px`,\n height: `${activeHeight - 8}px`,\n }\"\n />\n <DocGroupElements\n :items=\"items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n :depth=\"-1\"\n @update-active-position=\"updateActiveMarkerPosition\"\n @hide-marker=\"showMarker = false\"\n />\n </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","$listWrapper","Head","computed","emit","__emit","hasActiveItem","item","hasActiveItemRecursively","reTriggerSetActiveGroup","_a","active","markerIsMoving","inject","watch","__expose","$container","setActiveMarkerPosition","nextTick","top","height","onMounted","rect","itemWithoutLabel","label","rest","items","activePath","$items","$groups","index","indexGroup","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop","provide"],"mappings":"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"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,
|
|
1
|
+
(function(e,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],k):(e=typeof globalThis<"u"?globalThis:e||self,e.DocMenu=k(e.Vue,e.CyIcon))})(this,function(e,k){"use strict";const g={expandedIcon:"absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700",button:"flex leading-[24px] py-[10px] items-center relative w-full text-start",topButton:"leading-[24px] text-[16px] pl-[24px] font-medium",leafButton:"leading-[20px] text-[14px] pl-[48px]",openListBorderLeft:"absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"},v=e.defineComponent({__name:"_DocGroup",props:{group:{},activePath:{},collapsible:{type:Boolean},linkComponent:{},depth:{default:0}},emits:["updateActivePosition","updateMarkerPosition","hideMarker"],setup(u,{expose:m,emit:d}){const i=u,n=e.ref(i.group.collapsed!==!0),c=e.ref(),f=e.ref(),p=e.computed(()=>i.collapsible?"button":i.group.href?"a":"div"),a=d,t=e.computed(()=>i.group.items.some(o=>"items"in o?y(o.items,i.activePath):o.href===i.activePath));function l(){var o;(o=c.value)==null||o.reTriggerSetActiveGroup()}const r=e.computed(()=>i.group.href===i.activePath),h=e.inject("transition-is-moving",e.ref(!1));return e.watch(r,o=>{o&&a("hideMarker")}),e.watch(n,o=>{t.value?o?l():a("hideMarker"):a("updateMarkerPosition")}),e.watch(()=>i.activePath,()=>{t.value&&!n.value&&(n.value=!0)}),m({reTriggerSetActiveGroup:l}),(o,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.value),{class:e.normalizeClass([e.unref(g).button,{[e.unref(g).topButton]:o.depth===0,[e.unref(g).leafButton]:o.depth,"text-indigo-500 dark:text-indigo-400":r.value,"text-gray-900 dark:text-gray-100":t.value&&!r.value,"text-gray-800 dark:text-gray-200":!t.value&&!r.value}]),style:e.normalizeStyle({paddingLeft:o.depth>=1?`${(o.depth-1)*12+48}px`:void 0}),href:o.group.href,onClick:s[0]||(s[0]=()=>{o.collapsible?n.value=!n.value:a("updateActivePosition")})},{default:e.withCtx(()=>[i.collapsible?(e.openBlock(),e.createBlock(e.unref(k.IconChevronDownSmall),{key:0,"stroke-color":"current",size:o.depth?"8":"16",class:e.normalizeClass([e.unref(g).expandedIcon,{"rotate-0":n.value,"-rotate-90":!n.value}]),style:e.normalizeStyle({marginLeft:o.depth>=1?`${(o.depth-1)*12+28}px`:void 0})},null,8,["size","class","style"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(o.group.label),1)]),_:1},8,["class","style","href"])),e.createElementVNode("div",{class:e.normalizeClass(["grid transition-all relative",{"grid-rows-[0fr]":!n.value&&o.collapsible,"grid-rows-[1fr]":n.value||!o.collapsible}]),ref_key:"$listWrapper",ref:f,onTransitionstart:s[4]||(s[4]=()=>{h.value=!0}),onTransitionend:s[5]||(s[5]=()=>{h.value=!1,(n.value||!t.value)&&a("updateMarkerPosition")})},[n.value&&o.collapsible&&o.depth===0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(g).openListBorderLeft)},null,2)):e.createCommentVNode("",!0),e.createVNode(b,{ref_key:"$groupElements",ref:c,class:"overflow-hidden",depth:o.depth,items:o.group.items,"active-path":o.activePath,collapsible:o.collapsible,"link-component":o.linkComponent,onHideMarker:s[1]||(s[1]=B=>a("hideMarker")),onUpdateMarkerPosition:s[2]||(s[2]=()=>a("updateMarkerPosition")),onUpdateActivePosition:s[3]||(s[3]=B=>n.value?a("updateActivePosition",B):null)},null,8,["depth","items","active-path","collapsible","link-component"])],34)],64))}}),P=e.defineComponent({__name:"_DocLink",props:{item:{},active:{type:Boolean},collapsible:{type:Boolean},depth:{default:-1},linkComponent:{}},emits:["update:active"],setup(u,{expose:m,emit:d}){const i=u,n=d,c=e.ref(),f=e.inject("transition-is-moving",e.ref(!1));function p(){i.active&&e.nextTick(()=>{var r;const{top:t=0,height:l=36}=((r=c.value)==null?void 0:r.getBoundingClientRect())??{};n("update:active",i.active,{top:t,height:l})})}e.onMounted(()=>{e.watch(()=>i.active,t=>{t?p():n("update:active",t)},{immediate:!0})}),m({setActiveMarkerPosition:p}),e.watch(()=>i.active,t=>{if(t&&c.value){const l=c.value.getBoundingClientRect();if(l.top>0&&l.bottom<window.innerHeight||l.left>0&&l.right<window.innerWidth)return;c.value.scrollIntoView({block:"nearest",inline:"nearest"})}});const a=e.computed(()=>{const{label:t,...l}=i.item;return l});return(t,l)=>(e.openBlock(),e.createElementBlock("li",{ref_key:"$container",ref:c,class:"list-none p-0"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.linkComponent),e.mergeProps(a.value,{class:["group relative block w-full pl-[24px]",{"text-indigo-500 dark:text-indigo-400":t.active,"text-gray-700 dark:text-gray-500":!t.active,"py-[8px] text-[16px] leading-[24px]":t.depth<0,"leading-[20px] text-[14px] py-[12px]":t.depth>=0}],style:{paddingLeft:t.depth>=0?`${t.depth*12+48}px`:void 0}}),{default:e.withCtx(()=>[t.depth>=0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full",{hidden:!e.unref(f)||!t.active,"group-hover:block bg-gray-300":!t.active&&t.collapsible,"bg-indigo-500":t.active&&e.unref(f)}])},null,2)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.item.label),1)]),_:1},16,["class","style"]))],512))}}),C={class:"list-none p-0"},M={key:0,class:"relative list-none p-0"};function y(u,m){return u.some(d=>"items"in d?y(d.items,m):d.href===m)}const b=e.defineComponent({__name:"_DocGroupElements",props:{items:{},activePath:{},collapsible:{type:Boolean},linkComponent:{},depth:{}},emits:["updateActivePosition","updateMarkerPosition","hideMarker"],setup(u,{expose:m,emit:d}){const i=u,n=d,c=e.ref([]),f=e.ref([]),p=e.computed(()=>i.items.some(t=>"items"in t?y(t.items,i.activePath):t.href===i.activePath));function a(t=-1){c.value.forEach(r=>{r.setActiveMarkerPosition()});const l=t-i.items.slice(0,t).filter(r=>!("items"in r)).length;f.value.slice(l+1).forEach(r=>{r.reTriggerSetActiveGroup()})}return m({reTriggerSetActiveGroup:a}),(t,l)=>(e.openBlock(),e.createElementBlock("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(r,h)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[r&&"items"in r?(e.openBlock(),e.createElementBlock("li",M,[e.createVNode(v,{ref_for:!0,ref_key:"$groups",ref:f,"active-path":t.activePath,group:r,depth:t.depth+1,collapsible:t.collapsible,"link-component":t.linkComponent,onUpdateActivePosition:l[0]||(l[0]=o=>{n("updateActivePosition",o)}),onUpdateMarkerPosition:()=>{p.value?a(h):n("updateMarkerPosition")},onHideMarker:l[1]||(l[1]=o=>n("hideMarker"))},null,8,["active-path","group","depth","collapsible","link-component","onUpdateMarkerPosition"])])):(e.openBlock(),e.createBlock(P,{key:1,ref_for:!0,ref_key:"$items",ref:c,item:r,active:r.href===t.activePath,depth:t.depth,collapsible:t.collapsible,"link-component":t.linkComponent,"onUpdate:active":l[2]||(l[2]=(o,s)=>{if(s)t.depth<0?n("hideMarker"):n("updateActivePosition",s);else return})},null,8,["item","active","depth","collapsible","link-component"]))],64))),256))]))}});return e.defineComponent({__name:"DocMenu",props:{items:{},activePath:{default:void 0},collapsible:{type:Boolean,default:!0},linkComponent:{default:"a"}},setup(u){const m=e.ref(),d=e.ref(0),i=e.ref(36),n=e.ref(!1);function c({top:p,height:a}={height:0,top:0}){var l;const t=((l=m.value)==null?void 0:l.getBoundingClientRect().top)||0;d.value=p-t,i.value=a,n.value=!0}const f=e.ref(!1);return e.provide("transition-is-moving",f),(p,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"$container",ref:m,class:"relative"},[n.value&&p.collapsible&&!f.value?(e.openBlock(),e.createElementBlock("div",{key:0,"data-cy":"doc-menu-active-marker",class:"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]",style:e.normalizeStyle({top:`${d.value}px`,height:`${i.value-8}px`})},null,4)):e.createCommentVNode("",!0),e.createVNode(b,{items:p.items,"active-path":p.activePath,collapsible:p.collapsible,"link-component":p.linkComponent,depth:-1,onUpdateActivePosition:c,onHideMarker:a[0]||(a[0]=t=>n.value=!1)},null,8,["items","active-path","collapsible","link-component"])],512))}})});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
|
3
3
|
|
|
4
|
-
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] filter list-none p-0 text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden text-indigo-400 text-gray-100 text-gray-200 icon-dark-current block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
|
|
4
|
+
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] filter list-none p-0 text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden text-indigo-400 text-gray-100 text-gray-200 icon-dark-current visible block inline w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',\n button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[48px]',\n openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, inject } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements, {\n hasActiveItemRecursively,\n type DocGroupEventsEmitted,\n} from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\nconst $listWrapper = ref<HTMLDivElement>()\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst hasActiveItem = computed(() =>\n props.group.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\nfunction reTriggerSetActiveGroup() {\n $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, (open) => {\n if (hasActiveItem.value) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-900 dark:text-gray-100': hasActiveItem && !active,\n 'text-gray-800 dark:text-gray-200': !hasActiveItem && !active,\n },\n ]\"\n :style=\"{\n paddingLeft: depth >= 1 ? `${(depth - 1) * 12 + 48}px` : undefined,\n }\"\n :href=\"group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n } else {\n emit('updateActivePosition')\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"current\"\n :size=\"depth ? '8' : '16'\"\n :class=\"[\n classes.expandedIcon,\n {\n 'rotate-0': open,\n '-rotate-90': !open,\n },\n ]\"\n :style=\"{\n marginLeft: depth >= 1 ? `${(depth - 1) * 12 + 28}px` : undefined,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n class=\"grid transition-all relative\"\n ref=\"$listWrapper\"\n :class=\"{\n 'grid-rows-[0fr]': !open && collapsible,\n 'grid-rows-[1fr]': open || !collapsible,\n }\"\n @transitionstart=\"\n () => {\n markerIsMoving = true\n }\n \"\n @transitionend=\"\n () => {\n markerIsMoving = false\n if (open || !hasActiveItem) {\n emit('updateMarkerPosition')\n }\n }\n \"\n >\n <div\n v-if=\"open && collapsible && depth === 0\"\n :class=\"classes.openListBorderLeft\"\n />\n <DocGroupElements\n ref=\"$groupElements\"\n class=\"overflow-hidden\"\n :depth=\"depth\"\n :items=\"group.items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @hide-marker=\"emit('hideMarker')\"\n @update-marker-position=\"() => emit('updateMarkerPosition')\"\n @update-active-position=\"\n (opts) => (open ? emit('updateActivePosition', opts) : null)\n \"\n />\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport {\n watch,\n type DefineComponent,\n ref,\n onMounted,\n inject,\n nextTick,\n computed,\n} from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n defineProps<{\n item: NavItemLink\n active: boolean\n collapsible: boolean\n depth?: number\n linkComponent: DefineComponent | 'a'\n }>(),\n {\n depth: -1,\n },\n)\n\nconst emit = defineEmits<{\n (\n event: 'update:active',\n active: boolean,\n opts?: { top: number; height: number },\n ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nfunction setActiveMarkerPosition() {\n if (props.active) {\n nextTick(() => {\n const { top = 0, height = 36 } =\n $container.value?.getBoundingClientRect() ?? {}\n\n emit('update:active', props.active, {\n top,\n height,\n })\n })\n }\n}\n\nonMounted(() => {\n watch(\n () => props.active,\n (active) => {\n if (active) {\n setActiveMarkerPosition()\n } else {\n emit('update:active', active)\n }\n },\n { immediate: true },\n )\n})\n\ndefineExpose({\n setActiveMarkerPosition,\n})\n\nconst itemWithoutLabel = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { label, ...rest } = props.item\n return rest\n})\n</script>\n\n<template>\n <li ref=\"$container\" class=\"list-none p-0\">\n <component\n :is=\"linkComponent\"\n v-bind=\"itemWithoutLabel\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-700 dark:text-gray-500': !active,\n 'py-[8px] text-[16px] leading-[24px]': depth < 0,\n 'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n }\"\n :style=\"{\n paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,\n }\"\n >\n <div\n v-if=\"depth >= 0\"\n class=\"left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full\"\n :class=\"{\n hidden: !markerIsMoving || !active,\n 'group-hover:block bg-gray-300': !active && collapsible,\n 'bg-indigo-500': active && markerIsMoving,\n }\"\n />\n {{ item.label }}\n </component>\n </li>\n</template>\n","<script lang=\"ts\">\nexport function hasActiveItemRecursively(\n items: (NavGroup | NavItemLink)[],\n activePath?: string,\n): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, activePath)\n }\n return item.href === activePath\n })\n}\n\nexport interface DocGroupEventsEmitted {\n /**\n * If the group is not collapsed, this event will emit the\n * active marker position all the way to the menu component\n */\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n /**\n * This event will trigger a re-render of the active marker\n * to update its position if not in the current subtree\n */\n (event: 'updateMarkerPosition'): void\n /**\n * This event will bubble-up and hide the active marker\n */\n (event: 'hideMarker'): void\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { DefineComponent, computed, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n items: (NavGroup | NavItemLink)[]\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth: number\n}>()\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nconst hasActiveItem = computed(() =>\n props.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\n/**\n * update the position of the marker when opening a group\n * @param index\n */\nfunction reTriggerSetActiveGroup(index = -1) {\n $items.value.forEach((item) => {\n item.setActiveMarkerPosition()\n })\n\n // calculate the index of the calling group in the list of groups\n const indexGroup =\n index -\n // remove all the items that are not groups from the array and count them\n props.items.slice(0, index).filter((item) => !('items' in item)).length\n\n // only update groups that come after the toggled one\n // others will not need to update the marker\n // since they are \"before\" in the rendering tree\n $groups.value.slice(indexGroup + 1).forEach((group) => {\n group.reTriggerSetActiveGroup()\n })\n}\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <ul class=\"list-none p-0\">\n <template v-for=\"(item, index) in items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :active-path=\"activePath\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update-active-position=\"\n (opts) => {\n emit('updateActivePosition', opts)\n }\n \"\n @update-marker-position=\"\n () => {\n if (hasActiveItem) {\n reTriggerSetActiveGroup(index)\n } else {\n emit('updateMarkerPosition')\n }\n }\n \"\n @hide-marker=\"emit('hideMarker')\"\n />\n </li>\n <DocLink\n v-else\n ref=\"$items\"\n :item=\"item\"\n :active=\"item.href === activePath\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update:active=\"\n (_, opts) => {\n if (!opts) {\n return\n } else if (depth < 0) {\n emit('hideMarker')\n } else {\n emit('updateActivePosition', opts)\n }\n }\n \"\n />\n </template>\n </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent, provide } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n defineProps<{\n items: (NavItemLink | NavGroup)[]\n activePath?: string\n collapsible?: boolean\n linkComponent?: DefineComponent | 'a'\n }>(),\n {\n linkComponent: 'a',\n collapsible: true,\n activePath: undefined,\n },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n const containerTop = $container.value?.getBoundingClientRect().top || 0\n activeTop.value = top - containerTop\n activeHeight.value = height\n showMarker.value = true\n}\n\nconst markerIsMoving = ref(false)\n\nprovide('transition-is-moving', markerIsMoving)\n</script>\n\n<template>\n <div ref=\"$container\" class=\"relative\">\n <div\n v-if=\"showMarker && collapsible && !markerIsMoving\"\n data-cy=\"doc-menu-active-marker\"\n class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n :style=\"{\n top: `${activeTop}px`,\n height: `${activeHeight - 8}px`,\n }\"\n />\n <DocGroupElements\n :items=\"items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n :depth=\"-1\"\n @update-active-position=\"updateActiveMarkerPosition\"\n @hide-marker=\"showMarker = false\"\n />\n </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","$listWrapper","Head","computed","emit","__emit","hasActiveItem","item","hasActiveItemRecursively","reTriggerSetActiveGroup","_a","active","markerIsMoving","inject","watch","__expose","$container","setActiveMarkerPosition","nextTick","top","height","onMounted","itemWithoutLabel","label","rest","items","activePath","$items","$groups","index","indexGroup","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop","provide"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',\n button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[48px]',\n openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, inject } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements, {\n hasActiveItemRecursively,\n type DocGroupEventsEmitted,\n} from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\nconst $listWrapper = ref<HTMLDivElement>()\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst hasActiveItem = computed(() =>\n props.group.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\nfunction reTriggerSetActiveGroup() {\n $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, (open) => {\n if (hasActiveItem.value) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\nwatch(\n () => props.activePath,\n () => {\n if (hasActiveItem.value && !open.value) {\n open.value = true\n }\n },\n)\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-900 dark:text-gray-100': hasActiveItem && !active,\n 'text-gray-800 dark:text-gray-200': !hasActiveItem && !active,\n },\n ]\"\n :style=\"{\n paddingLeft: depth >= 1 ? `${(depth - 1) * 12 + 48}px` : undefined,\n }\"\n :href=\"group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n } else {\n emit('updateActivePosition')\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"current\"\n :size=\"depth ? '8' : '16'\"\n :class=\"[\n classes.expandedIcon,\n {\n 'rotate-0': open,\n '-rotate-90': !open,\n },\n ]\"\n :style=\"{\n marginLeft: depth >= 1 ? `${(depth - 1) * 12 + 28}px` : undefined,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n class=\"grid transition-all relative\"\n ref=\"$listWrapper\"\n :class=\"{\n 'grid-rows-[0fr]': !open && collapsible,\n 'grid-rows-[1fr]': open || !collapsible,\n }\"\n @transitionstart=\"\n () => {\n markerIsMoving = true\n }\n \"\n @transitionend=\"\n () => {\n markerIsMoving = false\n if (open || !hasActiveItem) {\n emit('updateMarkerPosition')\n }\n }\n \"\n >\n <div\n v-if=\"open && collapsible && depth === 0\"\n :class=\"classes.openListBorderLeft\"\n />\n <DocGroupElements\n ref=\"$groupElements\"\n class=\"overflow-hidden\"\n :depth=\"depth\"\n :items=\"group.items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @hide-marker=\"emit('hideMarker')\"\n @update-marker-position=\"() => emit('updateMarkerPosition')\"\n @update-active-position=\"\n (opts) => (open ? emit('updateActivePosition', opts) : null)\n \"\n />\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport {\n watch,\n type DefineComponent,\n ref,\n onMounted,\n inject,\n nextTick,\n computed,\n} from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n defineProps<{\n item: NavItemLink\n active: boolean\n collapsible: boolean\n depth?: number\n linkComponent: DefineComponent | 'a'\n }>(),\n {\n depth: -1,\n },\n)\n\nconst emit = defineEmits<{\n (\n event: 'update:active',\n active: boolean,\n opts?: { top: number; height: number },\n ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nfunction setActiveMarkerPosition() {\n if (props.active) {\n nextTick(() => {\n const { top = 0, height = 36 } =\n $container.value?.getBoundingClientRect() ?? {}\n\n emit('update:active', props.active, {\n top,\n height,\n })\n })\n }\n}\n\nonMounted(() => {\n watch(\n () => props.active,\n (active) => {\n if (active) {\n setActiveMarkerPosition()\n } else {\n emit('update:active', active)\n }\n },\n { immediate: true },\n )\n})\n\ndefineExpose({\n setActiveMarkerPosition,\n})\n\nwatch(\n () => props.active,\n (active) => {\n if (active && $container.value) {\n // if active check if the item is visible in the\n // viewport and scrollIntoView if not\n const rect = $container.value.getBoundingClientRect()\n\n if (rect.top > 0 && rect.bottom < window.innerHeight) {\n return\n }\n\n if (rect.left > 0 && rect.right < window.innerWidth) {\n return\n }\n\n $container.value.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n })\n }\n },\n)\n\nconst itemWithoutLabel = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { label, ...rest } = props.item\n return rest\n})\n</script>\n\n<template>\n <li ref=\"$container\" class=\"list-none p-0\">\n <component\n :is=\"linkComponent\"\n v-bind=\"itemWithoutLabel\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500 dark:text-indigo-400': active,\n 'text-gray-700 dark:text-gray-500': !active,\n 'py-[8px] text-[16px] leading-[24px]': depth < 0,\n 'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n }\"\n :style=\"{\n paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,\n }\"\n >\n <div\n v-if=\"depth >= 0\"\n class=\"left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full\"\n :class=\"{\n hidden: !markerIsMoving || !active,\n 'group-hover:block bg-gray-300': !active && collapsible,\n 'bg-indigo-500': active && markerIsMoving,\n }\"\n />\n {{ item.label }}\n </component>\n </li>\n</template>\n","<script lang=\"ts\">\nexport function hasActiveItemRecursively(\n items: (NavGroup | NavItemLink)[],\n activePath?: string,\n): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, activePath)\n }\n return item.href === activePath\n })\n}\n\nexport interface DocGroupEventsEmitted {\n /**\n * If the group is not collapsed, this event will emit the\n * active marker position all the way to the menu component\n */\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n /**\n * This event will trigger a re-render of the active marker\n * to update its position if not in the current subtree\n */\n (event: 'updateMarkerPosition'): void\n /**\n * This event will bubble-up and hide the active marker\n */\n (event: 'hideMarker'): void\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { DefineComponent, computed, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n items: (NavGroup | NavItemLink)[]\n activePath?: string\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth: number\n}>()\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nconst hasActiveItem = computed(() =>\n props.items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items, props.activePath)\n }\n return item.href === props.activePath\n }),\n)\n\n/**\n * update the position of the marker when opening a group\n * @param index\n */\nfunction reTriggerSetActiveGroup(index = -1) {\n $items.value.forEach((item) => {\n item.setActiveMarkerPosition()\n })\n\n // calculate the index of the calling group in the list of groups\n const indexGroup =\n index -\n // remove all the items that are not groups from the array and count them\n props.items.slice(0, index).filter((item) => !('items' in item)).length\n\n // only update groups that come after the toggled one\n // others will not need to update the marker\n // since they are \"before\" in the rendering tree\n $groups.value.slice(indexGroup + 1).forEach((group) => {\n group.reTriggerSetActiveGroup()\n })\n}\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <ul class=\"list-none p-0\">\n <template v-for=\"(item, index) in items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :active-path=\"activePath\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update-active-position=\"\n (opts) => {\n emit('updateActivePosition', opts)\n }\n \"\n @update-marker-position=\"\n () => {\n if (hasActiveItem) {\n reTriggerSetActiveGroup(index)\n } else {\n emit('updateMarkerPosition')\n }\n }\n \"\n @hide-marker=\"emit('hideMarker')\"\n />\n </li>\n <DocLink\n v-else\n ref=\"$items\"\n :item=\"item\"\n :active=\"item.href === activePath\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n @update:active=\"\n (_, opts) => {\n if (!opts) {\n return\n } else if (depth < 0) {\n emit('hideMarker')\n } else {\n emit('updateActivePosition', opts)\n }\n }\n \"\n />\n </template>\n </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent, provide } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n defineProps<{\n items: (NavItemLink | NavGroup)[]\n activePath?: string\n collapsible?: boolean\n linkComponent?: DefineComponent | 'a'\n }>(),\n {\n linkComponent: 'a',\n collapsible: true,\n activePath: undefined,\n },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n const containerTop = $container.value?.getBoundingClientRect().top || 0\n activeTop.value = top - containerTop\n activeHeight.value = height\n showMarker.value = true\n}\n\nconst markerIsMoving = ref(false)\n\nprovide('transition-is-moving', markerIsMoving)\n</script>\n\n<template>\n <div ref=\"$container\" class=\"relative\">\n <div\n v-if=\"showMarker && collapsible && !markerIsMoving\"\n data-cy=\"doc-menu-active-marker\"\n class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n :style=\"{\n top: `${activeTop}px`,\n height: `${activeHeight - 8}px`,\n }\"\n />\n <DocGroupElements\n :items=\"items\"\n :active-path=\"activePath\"\n :collapsible=\"collapsible\"\n :link-component=\"linkComponent\"\n :depth=\"-1\"\n @update-active-position=\"updateActiveMarkerPosition\"\n @hide-marker=\"showMarker = false\"\n />\n </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","$listWrapper","Head","computed","emit","__emit","hasActiveItem","item","hasActiveItemRecursively","reTriggerSetActiveGroup","_a","active","markerIsMoving","inject","watch","__expose","$container","setActiveMarkerPosition","nextTick","top","height","onMounted","rect","itemWithoutLabel","label","rest","items","activePath","$items","$groups","index","indexGroup","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop","provide"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/vue-docmenu",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@cypress-design/constants-docmenu": "^0.2.0",
|
|
24
|
-
"@cypress-design/vue-icon": "^0.
|
|
24
|
+
"@cypress-design/vue-icon": "^0.32.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@cypress-design/rollup-plugin-tailwind-keep": "*"
|