@cypress-design/vue-docmenu 0.3.0 → 0.4.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 +5 -4
- package/CHANGELOG.md +13 -0
- package/DocMenu.vue +16 -3
- package/DocMenuVue.cy.tsx +40 -2
- package/ReadMe.md +12 -12
- package/_DocGroup.vue +16 -8
- package/_DocLink.vue +8 -5
- package/dist/DocMenu.vue.d.ts +34 -19
- package/dist/DocMenu.vue.d.ts.map +1 -1
- package/dist/_DocGroup.vue.d.ts +35 -29
- package/dist/_DocGroup.vue.d.ts.map +1 -1
- package/dist/_DocLink.vue.d.ts +33 -27
- package/dist/_DocLink.vue.d.ts.map +1 -1
- package/dist/index.es.mjs +92 -82
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -3
- package/DocMenu.rootstory.tsx +0 -6
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
$ 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.4 [32mbuilding for production...[36m[39m
|
|
5
6
|
transforming...
|
|
6
7
|
[32m✓[39m 8 modules transformed.
|
|
7
8
|
rendering chunks...
|
|
8
9
|
computing gzip size...
|
|
9
|
-
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m6.
|
|
10
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[2m5.
|
|
11
|
-
[32m✓ built in
|
|
10
|
+
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m6.51 kB[22m[1m[22m[2m │ gzip: 2.08 kB[22m[2m │ map: 4.97 kB[22m
|
|
11
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m5.42 kB[22m[1m[22m[2m │ gzip: 1.83 kB[22m[2m │ map: 4.77 kB[22m
|
|
12
|
+
[32m✓ built in 3.04s[39m
|
|
12
13
|
$ yarn vue-tsc --project ./tsconfig.build.json
|
|
13
14
|
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @cypress-design/vue-docmenu
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#350](https://github.com/cypress-io/cypress-design/pull/350) [`abc414d`](https://github.com/cypress-io/cypress-design/commit/abc414da149eb6fe0cfa61497a0aa8630d8d8d6e) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: allow usage of a custom link component
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#347](https://github.com/cypress-io/cypress-design/pull/347) [`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: docmenu docusaurus style items structure
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [[`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4)]:
|
|
14
|
+
- @cypress-design/constants-docmenu@0.1.1
|
|
15
|
+
|
|
3
16
|
## 0.3.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/DocMenu.vue
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
+
import type { DefineComponent } from 'vue'
|
|
2
3
|
import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
|
|
3
4
|
import DocGroup from './_DocGroup.vue'
|
|
4
5
|
import DocLink from './_DocLink.vue'
|
|
@@ -7,10 +8,12 @@ withDefaults(
|
|
|
7
8
|
defineProps<{
|
|
8
9
|
items: (NavItemLink | NavGroup)[]
|
|
9
10
|
collapsible?: boolean
|
|
11
|
+
linkComponent?: DefineComponent | 'a'
|
|
10
12
|
}>(),
|
|
11
13
|
{
|
|
14
|
+
linkComponent: 'a',
|
|
12
15
|
collapsible: true,
|
|
13
|
-
}
|
|
16
|
+
},
|
|
14
17
|
)
|
|
15
18
|
</script>
|
|
16
19
|
|
|
@@ -18,9 +21,19 @@ withDefaults(
|
|
|
18
21
|
<ul class="overflow-y-hidden list-none p-0">
|
|
19
22
|
<template v-for="item in items">
|
|
20
23
|
<li v-if="'items' in item" class="relative list-none p-0">
|
|
21
|
-
<DocGroup
|
|
24
|
+
<DocGroup
|
|
25
|
+
:group="item"
|
|
26
|
+
:depth="0"
|
|
27
|
+
:collapsible="collapsible"
|
|
28
|
+
:link-component="linkComponent"
|
|
29
|
+
/>
|
|
22
30
|
</li>
|
|
23
|
-
<DocLink
|
|
31
|
+
<DocLink
|
|
32
|
+
v-else
|
|
33
|
+
:item="item"
|
|
34
|
+
:collapsible="collapsible"
|
|
35
|
+
:link-component="linkComponent"
|
|
36
|
+
/>
|
|
24
37
|
</template>
|
|
25
38
|
</ul>
|
|
26
39
|
</template>
|
package/DocMenuVue.cy.tsx
CHANGED
|
@@ -1,12 +1,50 @@
|
|
|
1
1
|
/// <reference types="cypress" />
|
|
2
|
+
import { type DefineComponent, defineComponent } from 'vue'
|
|
2
3
|
import { mount } from 'cypress/vue'
|
|
3
4
|
import assertions from '../assertions'
|
|
4
5
|
import type { NavGroup, NavItemLink } from '../constants'
|
|
5
|
-
import
|
|
6
|
+
import DocMenu from './DocMenu.vue'
|
|
7
|
+
|
|
8
|
+
const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
|
|
9
|
+
defineComponent({
|
|
10
|
+
props: {
|
|
11
|
+
href: String,
|
|
12
|
+
},
|
|
13
|
+
setup(props, { slots }) {
|
|
14
|
+
return () => (
|
|
15
|
+
<div>
|
|
16
|
+
{slots.default?.()} + href: {props.href}
|
|
17
|
+
</div>
|
|
18
|
+
)
|
|
19
|
+
},
|
|
20
|
+
})
|
|
6
21
|
|
|
7
22
|
describe('<DocMenu/>', () => {
|
|
23
|
+
it('renders', () => {
|
|
24
|
+
mount(() => <DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
|
|
25
|
+
cy.get('ul').should('exist')
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
it('renders the custom link components', () => {
|
|
29
|
+
mount(() => (
|
|
30
|
+
<DocMenu
|
|
31
|
+
items={[
|
|
32
|
+
{
|
|
33
|
+
label: 'Baaaaaaz',
|
|
34
|
+
items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
|
|
35
|
+
},
|
|
36
|
+
]}
|
|
37
|
+
linkComponent={CustomLinkVue}
|
|
38
|
+
/>
|
|
39
|
+
))
|
|
40
|
+
cy.findByText('Bar').click()
|
|
41
|
+
cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
|
|
42
|
+
})
|
|
43
|
+
|
|
8
44
|
function mountStory(items: (NavItemLink | NavGroup)[] = []) {
|
|
9
|
-
mount(() =>
|
|
45
|
+
mount(() => {
|
|
46
|
+
return <DocMenu items={items} />
|
|
47
|
+
})
|
|
10
48
|
}
|
|
11
49
|
assertions(mountStory)
|
|
12
50
|
})
|
package/ReadMe.md
CHANGED
|
@@ -22,53 +22,53 @@ import DocMenu from '@cypress-design/vue-docmenu'
|
|
|
22
22
|
<DocMenu
|
|
23
23
|
:items="[
|
|
24
24
|
{
|
|
25
|
-
|
|
25
|
+
label: 'Get Started',
|
|
26
26
|
href: '#',
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
|
-
|
|
29
|
+
label: 'Overview',
|
|
30
30
|
items: [
|
|
31
31
|
{
|
|
32
|
-
|
|
32
|
+
label: 'Overview Item 1',
|
|
33
33
|
href: '#',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
|
|
36
|
+
label: 'Overview Item 2',
|
|
37
37
|
href: '#',
|
|
38
38
|
active: true,
|
|
39
39
|
},
|
|
40
40
|
],
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
|
|
43
|
+
label: 'Getting Started',
|
|
44
44
|
items: [
|
|
45
45
|
{
|
|
46
|
-
|
|
46
|
+
label: 'Item 1',
|
|
47
47
|
href: '#',
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
|
-
|
|
50
|
+
label: 'Group',
|
|
51
51
|
items: [
|
|
52
52
|
{
|
|
53
|
-
|
|
53
|
+
label: 'Item 1',
|
|
54
54
|
href: '#',
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
|
-
|
|
57
|
+
label: 'Item 2',
|
|
58
58
|
href: '#',
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
|
-
|
|
61
|
+
label: 'Item 3',
|
|
62
62
|
href: '#',
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
|
|
65
|
+
label: 'Item 4',
|
|
66
66
|
href: '#',
|
|
67
67
|
},
|
|
68
68
|
],
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
|
-
|
|
71
|
+
label: 'Item 5',
|
|
72
72
|
href: '#',
|
|
73
73
|
active: true,
|
|
74
74
|
},
|
package/_DocGroup.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
-
import { computed, Ref, ref } from 'vue'
|
|
2
|
+
import { computed, type DefineComponent, Ref, ref } from 'vue'
|
|
3
3
|
import { IconChevronDownSmall } from '@cypress-design/vue-icon'
|
|
4
4
|
import { NavGroup, classes } from '@cypress-design/constants-docmenu'
|
|
5
5
|
import DocLink from './_DocLink.vue'
|
|
@@ -9,11 +9,12 @@ const props = withDefaults(
|
|
|
9
9
|
defineProps<{
|
|
10
10
|
group: NavGroup
|
|
11
11
|
collapsible: boolean
|
|
12
|
+
linkComponent: DefineComponent | 'a'
|
|
12
13
|
depth?: number
|
|
13
14
|
}>(),
|
|
14
15
|
{
|
|
15
16
|
depth: 0,
|
|
16
|
-
}
|
|
17
|
+
},
|
|
17
18
|
)
|
|
18
19
|
|
|
19
20
|
const open = ref(props.depth === 0)
|
|
@@ -24,7 +25,7 @@ const height = computed(() => {
|
|
|
24
25
|
return $groups.value && open.value
|
|
25
26
|
? $groups.value.reduce(
|
|
26
27
|
(acc, { height: h }) => acc + h,
|
|
27
|
-
props.group.items.length
|
|
28
|
+
props.group.items.length,
|
|
28
29
|
)
|
|
29
30
|
: 0
|
|
30
31
|
})
|
|
@@ -37,12 +38,12 @@ defineExpose<{
|
|
|
37
38
|
|
|
38
39
|
const activeMarkerTop = computed(() => {
|
|
39
40
|
const activeIndex = props.group.items.findIndex(
|
|
40
|
-
(item) => 'href' in item && item.active
|
|
41
|
+
(item) => 'href' in item && item.active,
|
|
41
42
|
)
|
|
42
43
|
|
|
43
44
|
// how many groups are before the active element?
|
|
44
45
|
let numberOfGroups = props.group.items.filter(
|
|
45
|
-
(item, index) => !('href' in item) && index < activeIndex
|
|
46
|
+
(item, index) => !('href' in item) && index < activeIndex,
|
|
46
47
|
).length
|
|
47
48
|
|
|
48
49
|
// if there is any open group before the active element
|
|
@@ -56,7 +57,7 @@ const activeMarkerTop = computed(() => {
|
|
|
56
57
|
})
|
|
57
58
|
|
|
58
59
|
const Head = computed(() =>
|
|
59
|
-
props.collapsible ? 'button' : props.group.href ? 'a' : 'div'
|
|
60
|
+
props.collapsible ? 'button' : props.group.href ? 'a' : 'div',
|
|
60
61
|
)
|
|
61
62
|
</script>
|
|
62
63
|
|
|
@@ -91,7 +92,7 @@ const Head = computed(() =>
|
|
|
91
92
|
'ml-[16px]': depth,
|
|
92
93
|
}"
|
|
93
94
|
/>
|
|
94
|
-
{{ group.
|
|
95
|
+
{{ group.label }}
|
|
95
96
|
</component>
|
|
96
97
|
<div
|
|
97
98
|
v-if="
|
|
@@ -120,9 +121,16 @@ const Head = computed(() =>
|
|
|
120
121
|
:group="item"
|
|
121
122
|
:depth="depth + 1"
|
|
122
123
|
:collapsible="props.collapsible"
|
|
124
|
+
:link-component="props.linkComponent"
|
|
123
125
|
/>
|
|
124
126
|
</li>
|
|
125
|
-
<DocLink
|
|
127
|
+
<DocLink
|
|
128
|
+
v-else
|
|
129
|
+
:item="item"
|
|
130
|
+
:depth="depth"
|
|
131
|
+
:collapsible="collapsible"
|
|
132
|
+
:link-component="props.linkComponent"
|
|
133
|
+
/>
|
|
126
134
|
</template>
|
|
127
135
|
</ul>
|
|
128
136
|
</template>
|
package/_DocLink.vue
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
+
import type { DefineComponent } from 'vue'
|
|
2
3
|
import type { NavItemLink } from '@cypress-design/constants-docmenu'
|
|
3
4
|
|
|
4
5
|
withDefaults(
|
|
5
6
|
defineProps<{
|
|
6
7
|
item: NavItemLink
|
|
7
|
-
depth?: number
|
|
8
8
|
collapsible: boolean
|
|
9
|
+
depth?: number
|
|
10
|
+
linkComponent: DefineComponent | 'a'
|
|
9
11
|
}>(),
|
|
10
12
|
{
|
|
11
13
|
depth: -1,
|
|
12
|
-
}
|
|
14
|
+
},
|
|
13
15
|
)
|
|
14
16
|
</script>
|
|
15
17
|
|
|
@@ -20,7 +22,8 @@ withDefaults(
|
|
|
20
22
|
'pl-[16px]': depth >= 0,
|
|
21
23
|
}"
|
|
22
24
|
>
|
|
23
|
-
<
|
|
25
|
+
<component
|
|
26
|
+
:is="linkComponent"
|
|
24
27
|
class="group relative block w-full pl-[24px]"
|
|
25
28
|
:class="{
|
|
26
29
|
'text-indigo-500': item.active,
|
|
@@ -39,7 +42,7 @@ withDefaults(
|
|
|
39
42
|
left: `-${18.5 + depth * 7.5}px`,
|
|
40
43
|
}"
|
|
41
44
|
/>
|
|
42
|
-
{{ item.
|
|
43
|
-
</
|
|
45
|
+
{{ item.label }}
|
|
46
|
+
</component>
|
|
44
47
|
</li>
|
|
45
48
|
</template>
|
package/dist/DocMenu.vue.d.ts
CHANGED
|
@@ -1,24 +1,39 @@
|
|
|
1
|
+
import type { DefineComponent } from 'vue';
|
|
1
2
|
import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
|
|
2
|
-
declare const _default:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
type: import("vue").PropType<(NavItemLink | NavGroup)[]>;
|
|
18
|
-
required: true;
|
|
19
|
-
};
|
|
20
|
-
}>>, {
|
|
3
|
+
declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
items: (NavItemLink | NavGroup)[];
|
|
5
|
+
collapsible?: boolean | undefined;
|
|
6
|
+
linkComponent?: DefineComponent | "a" | undefined;
|
|
7
|
+
}>, {
|
|
8
|
+
linkComponent: string;
|
|
9
|
+
collapsible: boolean;
|
|
10
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
11
|
+
items: (NavItemLink | NavGroup)[];
|
|
12
|
+
collapsible?: boolean | undefined;
|
|
13
|
+
linkComponent?: DefineComponent | "a" | undefined;
|
|
14
|
+
}>, {
|
|
15
|
+
linkComponent: string;
|
|
16
|
+
collapsible: boolean;
|
|
17
|
+
}>>>, {
|
|
21
18
|
collapsible: boolean;
|
|
19
|
+
linkComponent: DefineComponent | 'a';
|
|
22
20
|
}, {}>;
|
|
23
21
|
export default _default;
|
|
22
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
23
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
24
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
25
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
26
|
+
} : {
|
|
27
|
+
type: import('vue').PropType<T[K]>;
|
|
28
|
+
required: true;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
type __VLS_WithDefaults<P, D> = {
|
|
32
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
33
|
+
default: D[K];
|
|
34
|
+
}> : P[K];
|
|
35
|
+
};
|
|
36
|
+
type __VLS_Prettify<T> = {
|
|
37
|
+
[K in keyof T]: T[K];
|
|
38
|
+
} & {};
|
|
24
39
|
//# sourceMappingURL=DocMenu.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA
|
|
1
|
+
{"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;WAyH9D,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;WAA1B,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;iBACnB,OAAO;mBACL,eAAe,GAAG,GAAG;;AARzC,wBAUG;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/_DocGroup.vue.d.ts
CHANGED
|
@@ -1,34 +1,40 @@
|
|
|
1
|
+
import { type DefineComponent, Ref } from 'vue';
|
|
1
2
|
import { NavGroup } from '@cypress-design/constants-docmenu';
|
|
2
|
-
declare const _default:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
type: import("vue").PropType<number>;
|
|
20
|
-
default: number;
|
|
21
|
-
};
|
|
22
|
-
collapsible: {
|
|
23
|
-
type: import("vue").PropType<boolean>;
|
|
24
|
-
required: true;
|
|
25
|
-
};
|
|
26
|
-
group: {
|
|
27
|
-
type: import("vue").PropType<NavGroup>;
|
|
28
|
-
required: true;
|
|
29
|
-
};
|
|
30
|
-
}>>, {
|
|
3
|
+
declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
group: NavGroup;
|
|
5
|
+
collapsible: boolean;
|
|
6
|
+
linkComponent: DefineComponent | 'a';
|
|
7
|
+
depth?: number | undefined;
|
|
8
|
+
}>, {
|
|
9
|
+
depth: number;
|
|
10
|
+
}>, {
|
|
11
|
+
height: Ref<number>;
|
|
12
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
13
|
+
group: NavGroup;
|
|
14
|
+
collapsible: boolean;
|
|
15
|
+
linkComponent: DefineComponent | 'a';
|
|
16
|
+
depth?: number | undefined;
|
|
17
|
+
}>, {
|
|
18
|
+
depth: number;
|
|
19
|
+
}>>>, {
|
|
31
20
|
depth: number;
|
|
32
21
|
}, {}>;
|
|
33
22
|
export default _default;
|
|
23
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
24
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
25
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
26
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
27
|
+
} : {
|
|
28
|
+
type: import('vue').PropType<T[K]>;
|
|
29
|
+
required: true;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
type __VLS_WithDefaults<P, D> = {
|
|
33
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
34
|
+
default: D[K];
|
|
35
|
+
}> : P[K];
|
|
36
|
+
};
|
|
37
|
+
type __VLS_Prettify<T> = {
|
|
38
|
+
[K in keyof T]: T[K];
|
|
39
|
+
} & {};
|
|
34
40
|
//# sourceMappingURL=_DocGroup.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,eAAe,EAAE,GAAG,EAAO,MAAM,KAAK,CAAA;AAE9D,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;;WAyQ1D,QAAQ;iBACF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;WAF7B,QAAQ;iBACF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;WAC5B,MAAM;;AAVlB,wBAYG;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/_DocLink.vue.d.ts
CHANGED
|
@@ -1,32 +1,38 @@
|
|
|
1
|
+
import type { DefineComponent } from 'vue';
|
|
1
2
|
import type { NavItemLink } from '@cypress-design/constants-docmenu';
|
|
2
|
-
declare const _default:
|
|
3
|
-
item:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
collapsible:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
type: import("vue").PropType<NavItemLink>;
|
|
18
|
-
required: true;
|
|
19
|
-
};
|
|
20
|
-
depth: {
|
|
21
|
-
type: import("vue").PropType<number>;
|
|
22
|
-
default: number;
|
|
23
|
-
};
|
|
24
|
-
collapsible: {
|
|
25
|
-
type: import("vue").PropType<boolean>;
|
|
26
|
-
required: true;
|
|
27
|
-
};
|
|
28
|
-
}>>, {
|
|
3
|
+
declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
item: NavItemLink;
|
|
5
|
+
collapsible: boolean;
|
|
6
|
+
depth?: number | undefined;
|
|
7
|
+
linkComponent: DefineComponent | 'a';
|
|
8
|
+
}>, {
|
|
9
|
+
depth: number;
|
|
10
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
11
|
+
item: NavItemLink;
|
|
12
|
+
collapsible: boolean;
|
|
13
|
+
depth?: number | undefined;
|
|
14
|
+
linkComponent: DefineComponent | 'a';
|
|
15
|
+
}>, {
|
|
16
|
+
depth: number;
|
|
17
|
+
}>>>, {
|
|
29
18
|
depth: number;
|
|
30
19
|
}, {}>;
|
|
31
20
|
export default _default;
|
|
21
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
22
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
23
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
24
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
25
|
+
} : {
|
|
26
|
+
type: import('vue').PropType<T[K]>;
|
|
27
|
+
required: true;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
type __VLS_WithDefaults<P, D> = {
|
|
31
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
32
|
+
default: D[K];
|
|
33
|
+
}> : P[K];
|
|
34
|
+
};
|
|
35
|
+
type __VLS_Prettify<T> = {
|
|
36
|
+
[K in keyof T]: T[K];
|
|
37
|
+
} & {};
|
|
32
38
|
//# sourceMappingURL=_DocLink.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA
|
|
1
|
+
{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;UA+G1D,WAAW;iBACJ,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;UAH9B,WAAW;iBACJ,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;WAD5B,MAAM;;AARlB,wBAWG;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,168 +1,178 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as v, openBlock as t, createElementBlock as p, normalizeClass as a, createBlock as u, resolveDynamicComponent as x, withCtx as B, normalizeStyle as w, createCommentVNode as k, createTextVNode as $, toDisplayString as D, ref as C, computed as g, Fragment as d, unref as m, withDirectives as G, createElementVNode as H, renderList as z, createVNode as S, vShow as L } from "vue";
|
|
2
2
|
import { IconChevronDownSmall as M } from "@cypress-design/vue-icon";
|
|
3
3
|
const b = {
|
|
4
4
|
button: "flex leading-[24px] py-[10px] items-center relative w-full",
|
|
5
5
|
topButton: "leading-[24px] text-[16px] pl-[24px] font-medium",
|
|
6
6
|
leafButton: "leading-[20px] text-[14px] pl-[40px]"
|
|
7
|
-
},
|
|
7
|
+
}, N = /* @__PURE__ */ v({
|
|
8
8
|
__name: "_DocLink",
|
|
9
9
|
props: {
|
|
10
10
|
item: {},
|
|
11
|
+
collapsible: { type: Boolean },
|
|
11
12
|
depth: { default: -1 },
|
|
12
|
-
|
|
13
|
+
linkComponent: {}
|
|
13
14
|
},
|
|
14
|
-
setup(
|
|
15
|
-
return (l, o) => (t(),
|
|
16
|
-
class:
|
|
15
|
+
setup(h) {
|
|
16
|
+
return (l, o) => (t(), p("li", {
|
|
17
|
+
class: a(["list-none p-0", {
|
|
17
18
|
"pl-[16px]": l.depth >= 0
|
|
18
19
|
}])
|
|
19
20
|
}, [
|
|
20
|
-
|
|
21
|
-
class:
|
|
21
|
+
(t(), u(x(l.linkComponent), {
|
|
22
|
+
class: a(["group relative block w-full pl-[24px]", {
|
|
22
23
|
"text-indigo-500": l.item.active,
|
|
23
24
|
"py-[8px] text-[16px] leading-[24px]": l.depth < 0,
|
|
24
25
|
"leading-[20px] text-[14px] py-[12px]": l.depth >= 0
|
|
25
26
|
}]),
|
|
26
27
|
href: l.item.href
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
}, {
|
|
29
|
+
default: B(() => [
|
|
30
|
+
l.depth >= 0 ? (t(), p("div", {
|
|
31
|
+
key: 0,
|
|
32
|
+
class: a(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden", {
|
|
33
|
+
"group-hover:block bg-gray-300": !l.item.active && l.collapsible
|
|
34
|
+
}]),
|
|
35
|
+
style: w({
|
|
36
|
+
left: `-${18.5 + l.depth * 7.5}px`
|
|
37
|
+
})
|
|
38
|
+
}, null, 6)) : k("", !0),
|
|
39
|
+
$(" " + D(l.item.label), 1)
|
|
40
|
+
]),
|
|
41
|
+
_: 1
|
|
42
|
+
}, 8, ["class", "href"]))
|
|
39
43
|
], 2));
|
|
40
44
|
}
|
|
41
|
-
}),
|
|
45
|
+
}), O = {
|
|
42
46
|
key: 0,
|
|
43
47
|
class: "relative list-none p-0"
|
|
44
|
-
},
|
|
48
|
+
}, V = /* @__PURE__ */ v({
|
|
45
49
|
__name: "_DocGroup",
|
|
46
50
|
props: {
|
|
47
51
|
group: {},
|
|
48
52
|
collapsible: { type: Boolean },
|
|
53
|
+
linkComponent: {},
|
|
49
54
|
depth: { default: 0 }
|
|
50
55
|
},
|
|
51
|
-
setup(
|
|
52
|
-
const o =
|
|
53
|
-
(e, { height:
|
|
56
|
+
setup(h, { expose: l }) {
|
|
57
|
+
const o = h, n = C(o.depth === 0), c = C([]), I = g(() => c.value && n.value ? c.value.reduce(
|
|
58
|
+
(e, { height: i }) => e + i,
|
|
54
59
|
o.group.items.length
|
|
55
60
|
) : 0);
|
|
56
61
|
l({
|
|
57
|
-
height:
|
|
62
|
+
height: I
|
|
58
63
|
});
|
|
59
|
-
const
|
|
60
|
-
var
|
|
64
|
+
const E = g(() => {
|
|
65
|
+
var y;
|
|
61
66
|
const e = o.group.items.findIndex(
|
|
62
|
-
(
|
|
67
|
+
(s) => "href" in s && s.active
|
|
63
68
|
);
|
|
64
|
-
let
|
|
65
|
-
(
|
|
69
|
+
let i = o.group.items.filter(
|
|
70
|
+
(s, f) => !("href" in s) && f < e
|
|
66
71
|
).length;
|
|
67
|
-
const
|
|
68
|
-
return (e +
|
|
69
|
-
}),
|
|
72
|
+
const r = (y = c.value) == null ? void 0 : y.reduce((s, f) => i < -1 ? s : (i--, s + f.height), 0);
|
|
73
|
+
return (e + r) * 44;
|
|
74
|
+
}), F = g(
|
|
70
75
|
() => o.collapsible ? "button" : o.group.href ? "a" : "div"
|
|
71
76
|
);
|
|
72
|
-
return (e,
|
|
73
|
-
(t(),
|
|
74
|
-
class:
|
|
75
|
-
|
|
77
|
+
return (e, i) => (t(), p(d, null, [
|
|
78
|
+
(t(), u(x(F.value), {
|
|
79
|
+
class: a([
|
|
80
|
+
m(b).button,
|
|
76
81
|
{
|
|
77
|
-
[
|
|
78
|
-
[
|
|
82
|
+
[m(b).topButton]: e.depth === 0,
|
|
83
|
+
[m(b).leafButton]: e.depth,
|
|
79
84
|
"text-indigo-500": o.group.active
|
|
80
85
|
}
|
|
81
86
|
]),
|
|
82
87
|
href: o.group.href,
|
|
83
|
-
onClick:
|
|
84
|
-
e.collapsible && (
|
|
88
|
+
onClick: i[0] || (i[0] = () => {
|
|
89
|
+
e.collapsible && (n.value = !n.value);
|
|
85
90
|
})
|
|
86
91
|
}, {
|
|
87
|
-
default:
|
|
88
|
-
o.collapsible ? (t(),
|
|
92
|
+
default: B(() => [
|
|
93
|
+
o.collapsible ? (t(), u(m(M), {
|
|
89
94
|
key: 0,
|
|
90
95
|
"stroke-color": "gray-400",
|
|
91
96
|
size: e.depth ? "8" : "16",
|
|
92
|
-
class:
|
|
93
|
-
"rotate-0":
|
|
94
|
-
"-rotate-90": !
|
|
97
|
+
class: a(["absolute left-0 transform transition-transform", {
|
|
98
|
+
"rotate-0": n.value,
|
|
99
|
+
"-rotate-90": !n.value,
|
|
95
100
|
"ml-[16px]": e.depth
|
|
96
101
|
}])
|
|
97
|
-
}, null, 8, ["size", "class"])) :
|
|
98
|
-
$(" " +
|
|
102
|
+
}, null, 8, ["size", "class"])) : k("", !0),
|
|
103
|
+
$(" " + D(e.group.label), 1)
|
|
99
104
|
]),
|
|
100
105
|
_: 1
|
|
101
106
|
}, 8, ["class", "href"])),
|
|
102
|
-
o.collapsible && e.depth >= 0 &&
|
|
107
|
+
o.collapsible && e.depth >= 0 && n.value && e.group.items.some((r) => "href" in r && r.active) ? (t(), p("div", {
|
|
103
108
|
key: 0,
|
|
104
109
|
class: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]",
|
|
105
110
|
style: w({
|
|
106
|
-
top: `${
|
|
111
|
+
top: `${E.value}px`,
|
|
107
112
|
left: `-${e.depth === 0 ? 0 : e.depth * 7.5 + 1}px`
|
|
108
113
|
})
|
|
109
|
-
}, null, 4)) :
|
|
110
|
-
H(
|
|
111
|
-
class:
|
|
114
|
+
}, null, 4)) : k("", !0),
|
|
115
|
+
G(H("ul", {
|
|
116
|
+
class: a(["list-none p-0 ml-[7.5px]", {
|
|
112
117
|
"border-l border-gray-100": e.depth === 0 && o.collapsible
|
|
113
118
|
}])
|
|
114
119
|
}, [
|
|
115
|
-
(t(!0),
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
(t(!0), p(d, null, z(e.group.items, (r) => (t(), p(d, null, [
|
|
121
|
+
r && "items" in r ? (t(), p("li", O, [
|
|
122
|
+
S(V, {
|
|
118
123
|
ref_for: !0,
|
|
119
124
|
ref_key: "$groups",
|
|
120
|
-
ref:
|
|
121
|
-
group:
|
|
125
|
+
ref: c,
|
|
126
|
+
group: r,
|
|
122
127
|
depth: e.depth + 1,
|
|
123
|
-
collapsible: o.collapsible
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
collapsible: o.collapsible,
|
|
129
|
+
"link-component": o.linkComponent
|
|
130
|
+
}, null, 8, ["group", "depth", "collapsible", "link-component"])
|
|
131
|
+
])) : (t(), u(N, {
|
|
126
132
|
key: 1,
|
|
127
|
-
item:
|
|
133
|
+
item: r,
|
|
128
134
|
depth: e.depth,
|
|
129
|
-
collapsible: e.collapsible
|
|
130
|
-
|
|
135
|
+
collapsible: e.collapsible,
|
|
136
|
+
"link-component": o.linkComponent
|
|
137
|
+
}, null, 8, ["item", "depth", "collapsible", "link-component"]))
|
|
131
138
|
], 64))), 256))
|
|
132
139
|
], 2), [
|
|
133
|
-
[L,
|
|
140
|
+
[L, n.value]
|
|
134
141
|
])
|
|
135
142
|
], 64));
|
|
136
143
|
}
|
|
137
|
-
}),
|
|
144
|
+
}), T = { class: "overflow-y-hidden list-none p-0" }, j = {
|
|
138
145
|
key: 0,
|
|
139
146
|
class: "relative list-none p-0"
|
|
140
|
-
},
|
|
147
|
+
}, A = /* @__PURE__ */ v({
|
|
141
148
|
__name: "DocMenu",
|
|
142
149
|
props: {
|
|
143
150
|
items: {},
|
|
144
|
-
collapsible: { type: Boolean, default: !0 }
|
|
151
|
+
collapsible: { type: Boolean, default: !0 },
|
|
152
|
+
linkComponent: { type: [Object, Function, String], default: "a" }
|
|
145
153
|
},
|
|
146
|
-
setup(
|
|
147
|
-
return (l, o) => (t(),
|
|
148
|
-
(t(!0),
|
|
149
|
-
"items" in
|
|
150
|
-
|
|
151
|
-
group:
|
|
154
|
+
setup(h) {
|
|
155
|
+
return (l, o) => (t(), p("ul", T, [
|
|
156
|
+
(t(!0), p(d, null, z(l.items, (n) => (t(), p(d, null, [
|
|
157
|
+
"items" in n ? (t(), p("li", j, [
|
|
158
|
+
S(V, {
|
|
159
|
+
group: n,
|
|
152
160
|
depth: 0,
|
|
153
|
-
collapsible: l.collapsible
|
|
154
|
-
|
|
155
|
-
|
|
161
|
+
collapsible: l.collapsible,
|
|
162
|
+
"link-component": l.linkComponent
|
|
163
|
+
}, null, 8, ["group", "collapsible", "link-component"])
|
|
164
|
+
])) : (t(), u(N, {
|
|
156
165
|
key: 1,
|
|
157
|
-
item:
|
|
158
|
-
collapsible: l.collapsible
|
|
159
|
-
|
|
166
|
+
item: n,
|
|
167
|
+
collapsible: l.collapsible,
|
|
168
|
+
"link-component": l.linkComponent
|
|
169
|
+
}, null, 8, ["item", "collapsible", "link-component"]))
|
|
160
170
|
], 64))), 256))
|
|
161
171
|
]));
|
|
162
172
|
}
|
|
163
173
|
});
|
|
164
174
|
export {
|
|
165
|
-
|
|
175
|
+
A as default
|
|
166
176
|
};
|
|
167
177
|
//# sourceMappingURL=index.es.mjs.map
|
|
168
178
|
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n collapsible: boolean\n depth?: number\n }>(),\n {\n depth: 0,\n }
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.depth === 0)\n\nconst $groups = ref<{ height: number }[]>([])\n\nconst height = computed(() => {\n return $groups.value && open.value\n ? $groups.value.reduce(\n (acc, { height: h }) => acc + h,\n props.group.items.length,\n )\n : 0\n})\n\ndefineExpose<{\n height: Ref<number>\n}>({\n height,\n})\n\nconst activeMarkerTop = computed(() => {\n const activeIndex = props.group.items.findIndex(\n (item) => 'href' in item && item.active,\n )\n\n // how many groups are before the active element?\n let numberOfGroups = props.group.items.filter(\n (item, index) => !('href' in item) && index < activeIndex,\n ).length\n\n // if there is any open group before the active element\n // compensate for the height\n const groupHeight = $groups.value?.reduce((acc, group) => {\n if (numberOfGroups < -1) return acc\n numberOfGroups--\n return acc + group.height\n }, 0)\n return (activeIndex + groupHeight) * 44\n})\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\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': props.group.active,\n },\n ]\"\n :href=\"props.group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"gray-400\"\n :size=\"depth ? '8' : '16'\"\n class=\"absolute left-0 transform transition-transform\"\n :class=\"{\n 'rotate-0': open,\n '-rotate-90': !open,\n 'ml-[16px]': depth,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n v-if=\"\n props.collapsible &&\n depth >= 0 &&\n open &&\n group.items.some((item) => 'href' in item && item.active)\n \"\n class=\"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]\"\n :style=\"{\n top: `${activeMarkerTop}px`,\n left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,\n }\"\n />\n <ul\n v-show=\"open\"\n class=\"list-none p-0 ml-[7.5px]\"\n :class=\"{\n 'border-l border-gray-100': depth === 0 && props.collapsible,\n }\"\n >\n <template v-for=\"item in group.items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"props.collapsible\"\n :link-component=\"props.linkComponent\"\n />\n </li>\n <DocLink\n v-else\n :item=\"item\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"props.linkComponent\"\n />\n </template>\n </ul>\n</template>\n"],"names":["classes","props","__props","open","ref","$groups","height","computed","acc","h","__expose","activeMarkerTop","activeIndex","item","numberOfGroups","index","groupHeight","_a","group","Head"],"mappings":";;AAAO,MAAMA,IAAU;AAAA,EACnB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACGA,UAAMC,IAAQC,GAYRC,IAAOC,EAAIH,EAAM,UAAU,CAAC,GAE5BI,IAAUD,EAA0B,CAAA,CAAE,GAEtCE,IAASC,EAAS,MACfF,EAAQ,SAASF,EAAK,QACzBE,EAAQ,MAAM;AAAA,MACZ,CAACG,GAAK,EAAE,QAAQC,QAAQD,IAAMC;AAAA,MAC9BR,EAAM,MAAM,MAAM;AAAA,IAEpB,IAAA,CACL;AAIE,IAAAS,EAAA;AAAA,MACD,QAAAJ;AAAA,IAAA,CACD;AAEK,UAAAK,IAAkBJ,EAAS,MAAM;;AAC/B,YAAAK,IAAcX,EAAM,MAAM,MAAM;AAAA,QACpC,CAACY,MAAS,UAAUA,KAAQA,EAAK;AAAA,MAAA;AAI/B,UAAAC,IAAiBb,EAAM,MAAM,MAAM;AAAA,QACrC,CAACY,GAAME,MAAU,EAAE,UAAUF,MAASE,IAAQH;AAAA,MAC9C,EAAA;AAIF,YAAMI,KAAcC,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,OAAO,CAACT,GAAKU,MAC1CJ,IAAiB,KAAWN,KAChCM,KACON,IAAMU,EAAM,SAClB;AACH,cAAQN,IAAcI,KAAe;AAAA,IAAA,CACtC,GAEKG,IAAOZ;AAAA,MAAS,MACpBN,EAAM,cAAc,WAAWA,EAAM,MAAM,OAAO,MAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.DocMenu=a(e.Vue,e.CyIcon))})(this,function(e,a){"use strict";const c={button:"flex leading-[24px] py-[10px] items-center relative w-full",topButton:"leading-[24px] text-[16px] pl-[24px] font-medium",leafButton:"leading-[20px] text-[14px] pl-[40px]"},
|
|
1
|
+
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.DocMenu=a(e.Vue,e.CyIcon))})(this,function(e,a){"use strict";const c={button:"flex leading-[24px] py-[10px] items-center relative w-full",topButton:"leading-[24px] text-[16px] pl-[24px] font-medium",leafButton:"leading-[20px] text-[14px] pl-[40px]"},f=e.defineComponent({__name:"_DocLink",props:{item:{},collapsible:{type:Boolean},depth:{default:-1},linkComponent:{}},setup(d){return(o,n)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["list-none p-0",{"pl-[16px]":o.depth>=0}])},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.linkComponent),{class:e.normalizeClass(["group relative block w-full pl-[24px]",{"text-indigo-500":o.item.active,"py-[8px] text-[16px] leading-[24px]":o.depth<0,"leading-[20px] text-[14px] py-[12px]":o.depth>=0}]),href:o.item.href},{default:e.withCtx(()=>[o.depth>=0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden",{"group-hover:block bg-gray-300":!o.item.active&&o.collapsible}]),style:e.normalizeStyle({left:`-${18.5+o.depth*7.5}px`})},null,6)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(o.item.label),1)]),_:1},8,["class","href"]))],2))}}),u={key:0,class:"relative list-none p-0"},k=e.defineComponent({__name:"_DocGroup",props:{group:{},collapsible:{type:Boolean},linkComponent:{},depth:{default:0}},setup(d,{expose:o}){const n=d,t=e.ref(n.depth===0),s=e.ref([]),b=e.computed(()=>s.value&&t.value?s.value.reduce((l,{height:r})=>l+r,n.group.items.length):0);o({height:b});const y=e.computed(()=>{var h;const l=n.group.items.findIndex(i=>"href"in i&&i.active);let r=n.group.items.filter((i,m)=>!("href"in i)&&m<l).length;const p=(h=s.value)==null?void 0:h.reduce((i,m)=>r<-1?i:(r--,i+m.height),0);return(l+p)*44}),C=e.computed(()=>n.collapsible?"button":n.group.href?"a":"div");return(l,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C.value),{class:e.normalizeClass([e.unref(c).button,{[e.unref(c).topButton]:l.depth===0,[e.unref(c).leafButton]:l.depth,"text-indigo-500":n.group.active}]),href:n.group.href,onClick:r[0]||(r[0]=()=>{l.collapsible&&(t.value=!t.value)})},{default:e.withCtx(()=>[n.collapsible?(e.openBlock(),e.createBlock(e.unref(a.IconChevronDownSmall),{key:0,"stroke-color":"gray-400",size:l.depth?"8":"16",class:e.normalizeClass(["absolute left-0 transform transition-transform",{"rotate-0":t.value,"-rotate-90":!t.value,"ml-[16px]":l.depth}])},null,8,["size","class"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.group.label),1)]),_:1},8,["class","href"])),n.collapsible&&l.depth>=0&&t.value&&l.group.items.some(p=>"href"in p&&p.active)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]",style:e.normalizeStyle({top:`${y.value}px`,left:`-${l.depth===0?0:l.depth*7.5+1}px`})},null,4)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("ul",{class:e.normalizeClass(["list-none p-0 ml-[7.5px]",{"border-l border-gray-100":l.depth===0&&n.collapsible}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.group.items,p=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[p&&"items"in p?(e.openBlock(),e.createElementBlock("li",u,[e.createVNode(k,{ref_for:!0,ref_key:"$groups",ref:s,group:p,depth:l.depth+1,collapsible:n.collapsible,"link-component":n.linkComponent},null,8,["group","depth","collapsible","link-component"])])):(e.openBlock(),e.createBlock(f,{key:1,item:p,depth:l.depth,collapsible:l.collapsible,"link-component":n.linkComponent},null,8,["item","depth","collapsible","link-component"]))],64))),256))],2),[[e.vShow,t.value]])],64))}}),g={class:"overflow-y-hidden list-none p-0"},B={key:0,class:"relative list-none p-0"};return e.defineComponent({__name:"DocMenu",props:{items:{},collapsible:{type:Boolean,default:!0},linkComponent:{type:[Object,Function,String],default:"a"}},setup(d){return(o,n)=>(e.openBlock(),e.createElementBlock("ul",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,t=>(e.openBlock(),e.createElementBlock(e.Fragment,null,["items"in t?(e.openBlock(),e.createElementBlock("li",B,[e.createVNode(k,{group:t,depth:0,collapsible:o.collapsible,"link-component":o.linkComponent},null,8,["group","collapsible","link-component"])])):(e.openBlock(),e.createBlock(f,{key:1,item:t,collapsible:o.collapsible,"link-component":o.linkComponent},null,8,["item","collapsible","link-component"]))],64))),256))]))}})});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
|
3
3
|
|
|
4
4
|
/* <wind-keep class="overflow-y-hidden list-none p-0 relative filter text-indigo-500 absolute left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px] ml-[7.5px] border-l border-gray-100 icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] hidden group-hover:block bg-gray-300 flex py-[10px] items-center font-medium pl-[40px]"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n collapsible: boolean\n depth?: number\n }>(),\n {\n depth: 0,\n }
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n defineProps<{\n group: NavGroup\n collapsible: boolean\n linkComponent: DefineComponent | 'a'\n depth?: number\n }>(),\n {\n depth: 0,\n },\n)\n\nconst open = ref(props.depth === 0)\n\nconst $groups = ref<{ height: number }[]>([])\n\nconst height = computed(() => {\n return $groups.value && open.value\n ? $groups.value.reduce(\n (acc, { height: h }) => acc + h,\n props.group.items.length,\n )\n : 0\n})\n\ndefineExpose<{\n height: Ref<number>\n}>({\n height,\n})\n\nconst activeMarkerTop = computed(() => {\n const activeIndex = props.group.items.findIndex(\n (item) => 'href' in item && item.active,\n )\n\n // how many groups are before the active element?\n let numberOfGroups = props.group.items.filter(\n (item, index) => !('href' in item) && index < activeIndex,\n ).length\n\n // if there is any open group before the active element\n // compensate for the height\n const groupHeight = $groups.value?.reduce((acc, group) => {\n if (numberOfGroups < -1) return acc\n numberOfGroups--\n return acc + group.height\n }, 0)\n return (activeIndex + groupHeight) * 44\n})\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\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': props.group.active,\n },\n ]\"\n :href=\"props.group.href\"\n @click=\"\n () => {\n if (collapsible) {\n open = !open\n }\n }\n \"\n >\n <IconChevronDownSmall\n v-if=\"props.collapsible\"\n stroke-color=\"gray-400\"\n :size=\"depth ? '8' : '16'\"\n class=\"absolute left-0 transform transition-transform\"\n :class=\"{\n 'rotate-0': open,\n '-rotate-90': !open,\n 'ml-[16px]': depth,\n }\"\n />\n {{ group.label }}\n </component>\n <div\n v-if=\"\n props.collapsible &&\n depth >= 0 &&\n open &&\n group.items.some((item) => 'href' in item && item.active)\n \"\n class=\"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]\"\n :style=\"{\n top: `${activeMarkerTop}px`,\n left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,\n }\"\n />\n <ul\n v-show=\"open\"\n class=\"list-none p-0 ml-[7.5px]\"\n :class=\"{\n 'border-l border-gray-100': depth === 0 && props.collapsible,\n }\"\n >\n <template v-for=\"item in group.items\">\n <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n <DocGroup\n ref=\"$groups\"\n :group=\"item\"\n :depth=\"depth + 1\"\n :collapsible=\"props.collapsible\"\n :link-component=\"props.linkComponent\"\n />\n </li>\n <DocLink\n v-else\n :item=\"item\"\n :depth=\"depth\"\n :collapsible=\"collapsible\"\n :link-component=\"props.linkComponent\"\n />\n </template>\n </ul>\n</template>\n"],"names":["classes","props","__props","open","ref","$groups","height","computed","acc","h","__expose","activeMarkerTop","activeIndex","item","numberOfGroups","index","groupHeight","_a","group","Head"],"mappings":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,6DACR,UAAW,mDACX,WAAY,sCAChB,ynCCGA,MAAMC,EAAQC,EAYRC,EAAOC,EAAA,IAAIH,EAAM,QAAU,CAAC,EAE5BI,EAAUD,MAA0B,CAAA,CAAE,EAEtCE,EAASC,EAAAA,SAAS,IACfF,EAAQ,OAASF,EAAK,MACzBE,EAAQ,MAAM,OACZ,CAACG,EAAK,CAAE,OAAQC,KAAQD,EAAMC,EAC9BR,EAAM,MAAM,MAAM,MAEpB,EAAA,CACL,EAIES,EAAA,CACD,OAAAJ,CAAA,CACD,EAEK,MAAAK,EAAkBJ,EAAAA,SAAS,IAAM,OAC/B,MAAAK,EAAcX,EAAM,MAAM,MAAM,UACnCY,GAAS,SAAUA,GAAQA,EAAK,MAAA,EAI/B,IAAAC,EAAiBb,EAAM,MAAM,MAAM,OACrC,CAACY,EAAME,IAAU,EAAE,SAAUF,IAASE,EAAQH,CAC9C,EAAA,OAIF,MAAMI,GAAcC,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,OAAO,CAACT,EAAKU,IAC1CJ,EAAiB,GAAWN,GAChCM,IACON,EAAMU,EAAM,QAClB,GACH,OAAQN,EAAcI,GAAe,EAAA,CACtC,EAEKG,EAAOZ,EAAA,SAAS,IACpBN,EAAM,YAAc,SAAWA,EAAM,MAAM,KAAO,IAAM,KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/vue-docmenu",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build:types": "yarn vue-tsc --project ./tsconfig.build.json"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@cypress-design/constants-docmenu": "^0.1.
|
|
24
|
-
"@cypress-design/vue-icon": "^0.
|
|
23
|
+
"@cypress-design/constants-docmenu": "^0.1.1",
|
|
24
|
+
"@cypress-design/vue-icon": "^0.31.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@cypress-design/rollup-plugin-tailwind-keep": "*"
|