npm - @cypress-design/vue-docmenu - Versions diffs - 0.6.0 → 1.0.0 - Mend

@cypress-design/vue-docmenu 0.6.0 → 1.0.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.

Files changed (19) hide show

package/.turbo/turbo-build.log +4 -4
package/CHANGELOG.md +18 -0
package/DocMenuVue.cy.tsx +4 -3
package/_DocGroup.vue +1 -1
package/_DocGroupElements.vue +1 -1
package/_DocLink.vue +19 -16
package/dist/DocMenu.vue.d.ts +15 -14
package/dist/DocMenu.vue.d.ts.map +1 -1
package/dist/_DocGroup.vue.d.ts +13 -13
package/dist/_DocGroup.vue.d.ts.map +1 -1
package/dist/_DocGroupElements.vue.d.ts +3 -3
package/dist/_DocGroupElements.vue.d.ts.map +1 -1
package/dist/_DocLink.vue.d.ts +13 -13
package/dist/_DocLink.vue.d.ts.map +1 -1
package/dist/index.es.mjs +55 -53
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 +3 -3

package/.turbo/turbo-build.log CHANGED Viewed

@@ -2,13 +2,13 @@ $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
 [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
-[36mvite v5.0.12 [32mbuilding for production...[36m[39m
+[36mvite v5.2.12 [32mbuilding for production...[36m[39m
 transforming...
 [32m✓[39m 10 modules transformed.
 rendering chunks...
 computing gzip size...
-[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
-[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
-[32m✓ built in 3.21s[39m
+[2mdist/[22m[36mindex.es.mjs  [39m[1m[2m11.90 kB[22m[1m[22m[2m │ gzip: 3.47 kB[22m[2m │ map: 17.14 kB[22m
+[2mdist/[22m[36mindex.umd.js  [39m[1m[2m9.22 kB[22m[1m[22m[2m │ gzip: 2.98 kB[22m[2m │ map: 16.67 kB[22m
+[32m✓ built in 4.41s[39m
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # @cypress-design/vue-docmenu
+## 1.0.0
+### Major Changes
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+### Patch Changes
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/constants-docmenu@1.0.0
+  - @cypress-design/vue-icon@1.0.0
+## 0.6.1
+### Patch Changes
+- [`ad32042`](https://github.com/cypress-io/cypress-design/commit/ad3204289730de696c9728b1343e06ce68382561) Thanks [@elevatebart](https://github.com/elevatebart)! - only skip scrolling if both dimension are in view
 ## 0.6.0
 ### Minor Changes

package/DocMenuVue.cy.tsx CHANGED Viewed

@@ -111,7 +111,7 @@ describe('<DocMenu/>', () => {
     ))
   })
-  it.only('scrolls the active item into view', { viewportHeight: 200 }, () => {
+  it('scrolls the active item into view', { viewportHeight: 200 }, () => {
     const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
       defineComponent({
         props: {
@@ -127,7 +127,7 @@ describe('<DocMenu/>', () => {
     const pathState = ref('/fooTop')
     const SUT = () => {
       return (
-        <>
+        <div class="p-4">
           <button
             onClick={() => (pathState.value = '/faa6')}
             class="p-2 m-2 rounded bg-gray-100 border border-gray-300"
@@ -140,7 +140,7 @@ describe('<DocMenu/>', () => {
             linkComponent={CustomLinkVue}
             collapsible
           />
-        </>
+        </div>
       )
     }
     mount(() => <SUT />)
@@ -148,6 +148,7 @@ describe('<DocMenu/>', () => {
     cy.findByText('Code').click()
     cy.contains('Set path to').click()
+    cy.wait(200)
     cy.contains('Quisquam, quos').then(($el) => {
       const windowInnerHeight = Cypress.config(`viewportHeight`)

package/_DocGroup.vue CHANGED Viewed

@@ -124,8 +124,8 @@ defineExpose({
     {{ group.label }}
   </component>
   <div
-    class="grid transition-all relative"
     ref="$listWrapper"
+    class="grid transition-all relative"
     :class="{
       'grid-rows-[0fr]': !open && collapsible,
       'grid-rows-[1fr]': open || !collapsible,

package/_DocGroupElements.vue CHANGED Viewed

@@ -88,7 +88,7 @@ defineExpose({
 <template>
   <ul class="list-none p-0">
     <template v-for="(item, index) in items">
-      <li class="relative list-none p-0" v-if="item && 'items' in item">
+      <li v-if="item && 'items' in item" class="relative list-none p-0">
         <DocGroup
           ref="$groups"
           :active-path="activePath"

package/_DocLink.vue CHANGED Viewed

@@ -70,24 +70,27 @@ defineExpose({
 watch(
   () => props.active,
   (active) => {
-    if (active && $container.value) {
-      // if active check if the item is visible in the
-      // viewport and scrollIntoView if not
-      const rect = $container.value.getBoundingClientRect()
+    setTimeout(() => {
+      if (active && $container.value) {
+        // if active check if the item is visible in the
+        // viewport and scrollIntoView if not
+        const rect = $container.value.getBoundingClientRect()
-      if (rect.top > 0 && rect.bottom < window.innerHeight) {
-        return
-      }
+        if (
+          rect.top > 0 &&
+          rect.bottom < window.innerHeight &&
+          rect.left > 0 &&
+          rect.right < window.innerWidth
+        ) {
+          return
+        }
-      if (rect.left > 0 && rect.right < window.innerWidth) {
-        return
+        $container.value.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        })
       }
-      $container.value.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest',
-      })
-    }
+    }, 200)
   },
 )
@@ -99,7 +102,7 @@ const itemWithoutLabel = computed(() => {
 </script>
 <template>
-  <li ref="$container" class="list-none p-0">
+  <li ref="$container" class="list-none p-0 scroll-my-10">
     <component
       :is="linkComponent"
       v-bind="itemWithoutLabel"

package/dist/DocMenu.vue.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { type DefineComponent } from 'vue';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    items: (NavItemLink | NavGroup)[];
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
     collapsible?: boolean | undefined;
     linkComponent?: DefineComponent | "a" | undefined;
@@ -9,8 +9,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     linkComponent: string;
     collapsible: boolean;
     activePath: undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    items: (NavItemLink | NavGroup)[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
     collapsible?: boolean | undefined;
     linkComponent?: DefineComponent | "a" | undefined;
@@ -21,18 +21,10 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
 }>>>, {
     activePath: string;
     collapsible: boolean;
-    linkComponent: DefineComponent | 'a';
+    linkComponent: DefineComponent | "a";
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -41,4 +33,13 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 //# sourceMappingURL=DocMenu.vue.d.ts.map

package/dist/DocMenu.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue~~.ts~~"],"names":[],"mappings":"~~AAEA~~,OAAO,EAAO,KAAK,eAAe,EAAW,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA~~;;WA8I9D~~,CAAC,WAAW,GAAG,~~QAAQ~~,CAAC,EAAE~~;;;;;;;;;WAA1B~~,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE~~;;;;;;;;;gBACpB~~,MAAM;~~iBACL~~,OAAO;~~mBACL~~,eAAe,GAAG,GAAG~~;;AATzC~~,~~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"}
1	+ {"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue"],"names":[],"mappings":"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"}

package/dist/_DocGroup.vue.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { type DefineComponent } from 'vue';
 import { NavGroup } from '@cypress-design/constants-docmenu';
 declare function reTriggerSetActiveGroup(): void;
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     group: NavGroup;
     activePath?: string | undefined;
     collapsible: boolean;
-    linkComponent: DefineComponent | 'a';
+    linkComponent: DefineComponent | "a";
     depth?: number | undefined;
 }>, {
     depth: number;
@@ -18,11 +18,11 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     } | undefined) => void;
     updateMarkerPosition: () => void;
     hideMarker: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     group: NavGroup;
     activePath?: string | undefined;
     collapsible: boolean;
-    linkComponent: DefineComponent | 'a';
+    linkComponent: DefineComponent | "a";
     depth?: number | undefined;
 }>, {
     depth: number;
@@ -37,15 +37,6 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     depth: number;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -54,4 +45,13 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 //# sourceMappingURL=_DocGroup.vue.d.ts.map

package/dist/_DocGroup.vue.d.ts.map CHANGED Viewed

	@@ -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~~;;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	+ {"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue"],"names":[],"mappings":"AAwKA,OAAO,EAAY,KAAK,eAAe,EAAsB,MAAM,KAAK,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAyCrE,iBAAS,uBAAuB,SAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2SD,wBAQG;AAOH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/_DocGroupElements.vue.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export interface DocGroupEventsEmitted {
      */
     (event: 'hideMarker'): void;
 }
-declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: DefineComponent<__VLS_TypePropsToOption<{
     items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
     collapsible: boolean;
@@ -35,7 +35,7 @@ declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
     } | undefined) => void;
     updateMarkerPosition: () => void;
     hideMarker: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
     collapsible: boolean;
@@ -51,7 +51,7 @@ declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

package/dist/_DocGroupElements.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_DocGroupElements.vue.d.ts","sourceRoot":"","sources":["../_DocGroupElements.vue~~.ts~~"],"names":[],"mappings":"~~AAEA~~,OAAO,EAAE,eAAe,EAAiB,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAMzE,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,EACjC,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAOT;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,EAAE,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC7E;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAA;IACrC;;OAEG;IACH,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B;;~~WAyMQ~~,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;;;WAJN,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;~~AA5Mf~~,~~wBAgNI~~;~~AAAA~~,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;~~AACrE~~,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"}
1	+ {"version":3,"file":"_DocGroupElements.vue.d.ts","sourceRoot":"","sources":["../_DocGroupElements.vue"],"names":[],"mappings":"AA4IA,OAAO,EAAE,eAAe,EAAiB,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAMzE,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,EACjC,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAOT;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,EAAE,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC7E;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAA;IACrC;;OAEG;IACH,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B;;WAIQ,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;;;WAJN,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;AAPf,wBA+NK;AAML,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/_DocLink.vue.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import { type DefineComponent } from 'vue';
 import type { NavItemLink } from '@cypress-design/constants-docmenu';
 declare function setActiveMarkerPosition(): void;
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     item: NavItemLink;
     active: boolean;
     collapsible: boolean;
     depth?: number | undefined;
-    linkComponent: DefineComponent | 'a';
+    linkComponent: DefineComponent | "a";
 }>, {
     depth: number;
 }>, {
@@ -16,12 +16,12 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
         top: number;
         height: number;
     } | undefined) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     item: NavItemLink;
     active: boolean;
     collapsible: boolean;
     depth?: number | undefined;
-    linkComponent: DefineComponent | 'a';
+    linkComponent: DefineComponent | "a";
 }>, {
     depth: number;
 }>>> & {
@@ -33,15 +33,6 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     depth: number;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -50,4 +41,13 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 //# sourceMappingURL=_DocLink.vue.d.ts.map

package/dist/_DocLink.vue.d.ts.map CHANGED Viewed

	@@ -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~~;;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"}
1	+ {"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue"],"names":[],"mappings":"AAsIA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AA8BpE,iBAAS,uBAAuB,SAY/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKD,wBAQG;AAOH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/index.es.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-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";
+import { defineComponent as C, ref as d, computed as y, inject as L, 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";
 import { IconChevronDownSmall as j } from "@cypress-design/vue-icon";
 const k = {
   expandedIcon: "absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700",
@@ -19,18 +19,18 @@ const k = {
   setup(g, { expose: c, emit: v }) {
     const o = g, i = d(o.group.collapsed !== !0), u = d(), m = d(), s = y(
       () => o.collapsible ? "button" : o.group.href ? "a" : "div"
-    ), l = v, e = y(
-      () => o.group.items.some((t) => "items" in t ? I(t.items, o.activePath) : t.href === o.activePath)
+    ), a = v, e = y(
+      () => o.group.items.some((t) => "items" in t ? T(t.items, o.activePath) : t.href === o.activePath)
     );
     function n() {
       var t;
       (t = u.value) == null || t.reTriggerSetActiveGroup();
     }
-    const a = y(() => o.group.href === o.activePath), M = T("transition-is-moving", d(!1));
-    return P(a, (t) => {
-      t && l("hideMarker");
+    const l = y(() => o.group.href === o.activePath), M = L("transition-is-moving", d(!1));
+    return P(l, (t) => {
+      t && a("hideMarker");
     }), P(i, (t) => {
-      e.value ? t ? n() : l("hideMarker") : l("updateMarkerPosition");
+      e.value ? t ? n() : a("hideMarker") : a("updateMarkerPosition");
     }), P(
       () => o.activePath,
       () => {
@@ -45,9 +45,9 @@ const k = {
           {
             [h(k).topButton]: t.depth === 0,
             [h(k).leafButton]: t.depth,
-            "text-indigo-500 dark:text-indigo-400": a.value,
-            "text-gray-900 dark:text-gray-100": e.value && !a.value,
-            "text-gray-800 dark:text-gray-200": !e.value && !a.value
+            "text-indigo-500 dark:text-indigo-400": l.value,
+            "text-gray-900 dark:text-gray-100": e.value && !l.value,
+            "text-gray-800 dark:text-gray-200": !e.value && !l.value
           }
         ]),
         style: B({
@@ -55,7 +55,7 @@ const k = {
         }),
         href: t.group.href,
         onClick: r[0] || (r[0] = () => {
-          t.collapsible ? i.value = !i.value : l("updateActivePosition");
+          t.collapsible ? i.value = !i.value : a("updateActivePosition");
         })
       }, {
         default: E(() => [
@@ -79,17 +79,17 @@ const k = {
         _: 1
       }, 8, ["class", "style", "href"])),
       z("div", {
+        ref_key: "$listWrapper",
+        ref: m,
         class: b(["grid transition-all relative", {
           "grid-rows-[0fr]": !i.value && t.collapsible,
           "grid-rows-[1fr]": i.value || !t.collapsible
         }]),
-        ref_key: "$listWrapper",
-        ref: m,
         onTransitionstart: r[4] || (r[4] = () => {
           M.value = !0;
         }),
         onTransitionend: r[5] || (r[5] = () => {
-          M.value = !1, (i.value || !e.value) && l("updateMarkerPosition");
+          M.value = !1, (i.value || !e.value) && a("updateMarkerPosition");
         })
       }, [
         i.value && t.collapsible && t.depth === 0 ? (p(), f("div", {
@@ -105,9 +105,9 @@ const k = {
           "active-path": t.activePath,
           collapsible: t.collapsible,
           "link-component": t.linkComponent,
-          onHideMarker: r[1] || (r[1] = (L) => l("hideMarker")),
-          onUpdateMarkerPosition: r[2] || (r[2] = () => l("updateMarkerPosition")),
-          onUpdateActivePosition: r[3] || (r[3] = (L) => i.value ? l("updateActivePosition", L) : null)
+          onHideMarker: r[1] || (r[1] = (I) => a("hideMarker")),
+          onUpdateMarkerPosition: r[2] || (r[2] = () => a("updateMarkerPosition")),
+          onUpdateActivePosition: r[3] || (r[3] = (I) => i.value ? a("updateActivePosition", I) : null)
         }, null, 8, ["depth", "items", "active-path", "collapsible", "link-component"])
       ], 34)
     ], 64));
@@ -123,11 +123,11 @@ const k = {
   },
   emits: ["update:active"],
   setup(g, { expose: c, emit: v }) {
-    const o = g, i = v, u = d(), m = T("transition-is-moving", d(!1));
+    const o = g, i = v, u = d(), m = L("transition-is-moving", d(!1));
     function s() {
       o.active && N(() => {
-        var a;
-        const { top: e = 0, height: n = 36 } = ((a = u.value) == null ? void 0 : a.getBoundingClientRect()) ?? {};
+        var l;
+        const { top: e = 0, height: n = 36 } = ((l = u.value) == null ? void 0 : l.getBoundingClientRect()) ?? {};
         i("update:active", o.active, {
           top: e,
           height: n
@@ -147,27 +147,29 @@ const k = {
     }), P(
       () => o.active,
       (e) => {
-        if (e && u.value) {
-          const n = u.value.getBoundingClientRect();
-          if (n.top > 0 && n.bottom < window.innerHeight || n.left > 0 && n.right < window.innerWidth)
-            return;
-          u.value.scrollIntoView({
-            block: "nearest",
-            inline: "nearest"
-          });
-        }
+        setTimeout(() => {
+          if (e && u.value) {
+            const n = u.value.getBoundingClientRect();
+            if (n.top > 0 && n.bottom < window.innerHeight && n.left > 0 && n.right < window.innerWidth)
+              return;
+            u.value.scrollIntoView({
+              block: "nearest",
+              inline: "nearest"
+            });
+          }
+        }, 200);
       }
     );
-    const l = y(() => {
+    const a = y(() => {
       const { label: e, ...n } = o.item;
       return n;
     });
     return (e, n) => (p(), f("li", {
       ref_key: "$container",
       ref: u,
-      class: "list-none p-0"
+      class: "list-none p-0 scroll-my-10"
     }, [
-      (p(), $(D(e.linkComponent), V(l.value, {
+      (p(), $(D(e.linkComponent), V(a.value, {
         class: ["group relative block w-full pl-[24px]", {
           "text-indigo-500 dark:text-indigo-400": e.active,
           "text-gray-700 dark:text-gray-500": !e.active,
@@ -197,8 +199,8 @@ const k = {
   key: 0,
   class: "relative list-none p-0"
 };
-function I(g, c) {
-  return g.some((v) => "items" in v ? I(v.items, c) : v.href === c);
+function T(g, c) {
+  return g.some((v) => "items" in v ? T(v.items, c) : v.href === c);
 }
 const U = /* @__PURE__ */ C({
   __name: "_DocGroupElements",
@@ -212,29 +214,29 @@ const U = /* @__PURE__ */ C({
   emits: ["updateActivePosition", "updateMarkerPosition", "hideMarker"],
   setup(g, { expose: c, emit: v }) {
     const o = g, i = v, u = d([]), m = d([]), s = y(
-      () => o.items.some((e) => "items" in e ? I(e.items, o.activePath) : e.href === o.activePath)
+      () => o.items.some((e) => "items" in e ? T(e.items, o.activePath) : e.href === o.activePath)
     );
-    function l(e = -1) {
-      u.value.forEach((a) => {
-        a.setActiveMarkerPosition();
+    function a(e = -1) {
+      u.value.forEach((l) => {
+        l.setActiveMarkerPosition();
       });
       const n = e - // remove all the items that are not groups from the array and count them
-      o.items.slice(0, e).filter((a) => !("items" in a)).length;
-      m.value.slice(n + 1).forEach((a) => {
-        a.reTriggerSetActiveGroup();
+      o.items.slice(0, e).filter((l) => !("items" in l)).length;
+      m.value.slice(n + 1).forEach((l) => {
+        l.reTriggerSetActiveGroup();
       });
     }
     return c({
-      reTriggerSetActiveGroup: l
+      reTriggerSetActiveGroup: a
     }), (e, n) => (p(), f("ul", J, [
-      (p(!0), f(w, null, R(e.items, (a, M) => (p(), f(w, null, [
-        a && "items" in a ? (p(), f("li", K, [
+      (p(!0), f(w, null, R(e.items, (l, M) => (p(), f(w, null, [
+        l && "items" in l ? (p(), f("li", K, [
           x(F, {
             ref_for: !0,
             ref_key: "$groups",
             ref: m,
             "active-path": e.activePath,
-            group: a,
+            group: l,
             depth: e.depth + 1,
             collapsible: e.collapsible,
             "link-component": e.linkComponent,
@@ -242,7 +244,7 @@ const U = /* @__PURE__ */ C({
               i("updateActivePosition", t);
             }),
             onUpdateMarkerPosition: () => {
-              s.value ? l(M) : i("updateMarkerPosition");
+              s.value ? a(M) : i("updateMarkerPosition");
             },
             onHideMarker: n[1] || (n[1] = (t) => i("hideMarker"))
           }, null, 8, ["active-path", "group", "depth", "collapsible", "link-component", "onUpdateMarkerPosition"])
@@ -251,8 +253,8 @@ const U = /* @__PURE__ */ C({
           ref_for: !0,
           ref_key: "$items",
           ref: u,
-          item: a,
-          active: a.href === e.activePath,
+          item: l,
+          active: l.href === e.activePath,
           depth: e.depth,
           collapsible: e.collapsible,
           "link-component": e.linkComponent,
@@ -276,13 +278,13 @@ const U = /* @__PURE__ */ C({
   },
   setup(g) {
     const c = d(), v = d(0), o = d(36), i = d(!1);
-    function u({ top: s, height: l } = { height: 0, top: 0 }) {
+    function u({ top: s, height: a } = { height: 0, top: 0 }) {
       var n;
       const e = ((n = c.value) == null ? void 0 : n.getBoundingClientRect().top) || 0;
-      v.value = s - e, o.value = l, i.value = !0;
+      v.value = s - e, o.value = a, i.value = !0;
     }
     const m = d(!1);
-    return W("transition-is-moving", m), (s, l) => (p(), f("div", {
+    return W("transition-is-moving", m), (s, a) => (p(), f("div", {
       ref_key: "$container",
       ref: c,
       class: "relative"
@@ -303,7 +305,7 @@ const U = /* @__PURE__ */ C({
         "link-component": s.linkComponent,
         depth: -1,
         onUpdateActivePosition: u,
-        onHideMarker: l[0] || (l[0] = (e) => i.value = !1)
+        onHideMarker: a[0] || (a[0] = (e) => i.value = !1)
       }, null, 8, ["items", "active-path", "collapsible", "link-component"])
     ], 512));
   }
@@ -313,4 +315,4 @@ export {
 };
 //# sourceMappingURL=index.es.mjs.map
-/* <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"> */
+/* <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 scroll-my-10 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 Viewed

	@@ -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\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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"}
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 ref=\"$listWrapper\"\n class=\"grid transition-all relative\"\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 setTimeout(() => {\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 (\n rect.top > 0 &&\n rect.bottom < window.innerHeight &&\n rect.left > 0 &&\n rect.right < window.innerWidth\n ) {\n return\n }\n\n $container.value.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n })\n }\n }, 200)\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 scroll-my-10\">\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 v-if=\"item && 'items' in item\" class=\"relative list-none p-0\">\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 Viewed

@@ -1,4 +1,4 @@
-(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))}})});
+(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",{ref_key:"$listWrapper",ref:f,class:e.normalizeClass(["grid transition-all relative",{"grid-rows-[0fr]":!n.value&&o.collapsible,"grid-rows-[1fr]":n.value||!o.collapsible}]),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=>{setTimeout(()=>{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"})}},200)});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 scroll-my-10"},[(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))}})});
 //# sourceMappingURL=index.umd.js.map
-/* <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"> */
+/* <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 scroll-my-10 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 Viewed

	@@ -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\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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"}
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 ref=\"$listWrapper\"\n class=\"grid transition-all relative\"\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 setTimeout(() => {\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 (\n rect.top > 0 &&\n rect.bottom < window.innerHeight &&\n rect.left > 0 &&\n rect.right < window.innerWidth\n ) {\n return\n }\n\n $container.value.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n })\n }\n }, 200)\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 scroll-my-10\">\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 v-if=\"item && 'items' in item\" class=\"relative list-none p-0\">\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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/vue-docmenu",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "files": [
     "*"
   ],
@@ -20,8 +20,8 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-docmenu": "^0.2.0",
-    "@cypress-design/vue-icon": "^0.32.0"
+    "@cypress-design/constants-docmenu": "^1.0.0",
+    "@cypress-design/vue-icon": "^1.0.0"
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*"