npm - @cypress-design/vue-docmenu - Versions diffs - 0.4.1 → 0.5.0 - Mend

@cypress-design/vue-docmenu 0.4.1 → 0.5.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 (18) hide show

package/.turbo/turbo-build.log +3 -3
package/CHANGELOG.md +20 -0
package/DocMenu.vue +7 -3
package/DocMenuVue.cy.tsx +27 -17
package/_DocGroup.vue +77 -34
package/_DocGroupElements.vue +66 -25
package/_DocLink.vue +11 -12
package/dist/DocMenu.vue.d.ts.map +1 -1
package/dist/_DocGroup.vue.d.ts +2 -2
package/dist/_DocGroup.vue.d.ts.map +1 -1
package/dist/_DocGroupElements.vue.d.ts +23 -4
package/dist/_DocGroupElements.vue.d.ts.map +1 -1
package/dist/_DocLink.vue.d.ts.map +1 -1
package/dist/index.es.mjs +179 -139
package/dist/index.es.mjs.map +1 -1
package/dist/index.umd.js +2 -2
package/dist/index.umd.js.map +1 -1
package/package.json +2 -2

package/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 button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, nextTick } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements 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>()\n\nconst Head = computed(() =>\n props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<{\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n (event: 'hideMarker'): void\n (event: 'updateMarkerPosition'): void\n}>()\n\nfunction hasActiveItemRecursively(items = props.group.items): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items)\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\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, async (open) => {\n await nextTick()\n if (hasActiveItemRecursively()) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500': active,\n },\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=\"gray-400\"\n :size=\"depth ? '8' : '16'\"\n class=\"absolute left-0 transform transition-transform\"\n :class=\"{\n 'rotate-0': open,\n '-rotate-90': !open,\n 'ml-[16px]': depth,\n }\"\n />\n {{ group.label }}\n </component>\n <DocGroupElements\n ref=\"$groupElements\"\n v-show=\"open\"\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=\"(opts) => emit('updateActivePosition', opts)\"\n />\n</template>\n","<script lang=\"ts\" setup>\nimport { watch, type DefineComponent, ref, onMounted } 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\nfunction setActiveMarkerPosition() {\n if (props.active) {\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\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</script>\n\n<template>\n <li\n ref=\"$container\"\n class=\"list-none p-0\"\n :class=\"{\n 'pl-[16px]': depth >= 0,\n }\"\n >\n <component\n :is=\"linkComponent\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500': active,\n 'py-[8px] text-[16px] leading-[24px]': depth < 0,\n 'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n }\"\n :href=\"item.href\"\n >\n <div\n v-if=\"depth >= 0\"\n class=\"absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden\"\n :class=\"{\n 'group-hover:block bg-gray-300': !active && collapsible,\n }\"\n :style=\"{\n left: `-${18.5 + depth * 7.5}px`,\n }\"\n />\n {{ item.label }}\n </component>\n </li>\n</template>\n","<script lang=\"ts\" setup>\nimport { DefineComponent, 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<{\n (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n (event: 'hideMarker'): void\n (event: 'updateMarkerPosition'): void\n}>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nfunction hasActiveItemRecursively(items = props.items): boolean {\n return items.some((item) => {\n if ('items' in item) {\n return hasActiveItemRecursively(item.items)\n }\n return item.href === props.activePath\n })\n}\n\nfunction reTriggerSetActiveGroup() {\n $items.value.forEach((item) => {\n item.setActiveMarkerPosition()\n })\n $groups.value.forEach((group) => {\n group.reTriggerSetActiveGroup()\n })\n}\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <ul\n class=\"list-none p-0\"\n :class=\"{\n 'border-l border-gray-100': depth === 0 && collapsible,\n 'ml-[8px]': depth >= 0,\n }\"\n >\n <template v-for=\"item 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 (hasActiveItemRecursively()) {\n reTriggerSetActiveGroup()\n } else {\n emit('updateMarkerPosition')\n }\n }\n \"\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) return\n emit('updateActivePosition', opts)\n }\n \"\n />\n </template>\n </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent } 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</script>\n\n<template>\n <div ref=\"$container\" class=\"relative\">\n <div\n v-if=\"showMarker && collapsible\"\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 + 4}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","Head","computed","emit","__emit","hasActiveItemRecursively","items","item","reTriggerSetActiveGroup","_a","active","watch","nextTick","__expose","$container","setActiveMarkerPosition","top","height","onMounted","$items","$groups","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop"],"mappings":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,6DACR,UAAW,mDACX,WAAY,sCAChB,qOCEA,MAAMC,EAAQC,EAaRC,EAAOC,EAAAA,IAAIH,EAAM,MAAM,YAAc,EAAI,EACzCI,EAAiBD,EAAAA,MAEjBE,EAAOC,EAAA,SAAS,IACpBN,EAAM,YAAc,SAAWA,EAAM,MAAM,KAAO,IAAM,KAAA,EAGpDO,EAAOC,EAMb,SAASC,EAAyBC,EAAQV,EAAM,MAAM,MAAgB,CAC7D,OAAAU,EAAM,KAAMC,GACb,UAAWA,EACNF,EAAyBE,EAAK,KAAK,EAErCA,EAAK,OAASX,EAAM,UAC5B,CACH,CAEA,SAASY,GAA0B,QACjCC,EAAAT,EAAe,QAAf,MAAAS,EAAsB,yBACxB,CAEA,MAAMC,EAASR,EAAS,SAAA,IAAMN,EAAM,MAAM,OAASA,EAAM,UAAU,EAE7De,OAAAA,QAAAD,EAASA,GAAW,CACpBA,GACFP,EAAK,YAAY,CACnB,CACD,EAEKQ,QAAAb,EAAM,MAAOA,GAAS,CAC1B,MAAMc,EAAS,SAAA,EACXP,IACEP,EACsBU,IAExBL,EAAK,YAAY,EAGnBA,EAAK,sBAAsB,CAC7B,CACD,EAEYU,EAAA,CACX,wBAAAL,CAAA,CACD,i7CChED,MAAMZ,EAAQC,EAaRM,EAAOC,EAQPU,EAAaf,EAAAA,MAEnB,SAASgB,GAA0B,OACjC,GAAInB,EAAM,OAAQ,CACV,KAAA,CAAE,IAAAoB,EAAM,EAAG,OAAAC,EAAS,MACxBR,EAAAK,EAAW,QAAX,YAAAL,EAAkB,0BAA2B,GAE1CN,EAAA,gBAAiBP,EAAM,OAAQ,CAClC,IAAAoB,EACA,OAAAC,CAAA,CACD,CACH,CACF,CAEAC,OAAAA,EAAAA,UAAU,IAAM,CACdP,EAAA,MACE,IAAMf,EAAM,OACXc,GAAW,CACNA,EACsBK,IAExBZ,EAAK,gBAAiBO,CAAM,CAEhC,EACA,CAAE,UAAW,EAAK,CAAA,CACpB,CACD,EAEYG,EAAA,CACX,wBAAAE,CAAA,CACD,ynCCjDD,MAAMnB,EAAQC,EAQRM,EAAOC,EAMPe,EAASpB,MAAwB,CAAA,CAAE,EACnCqB,EAAUrB,MAAyB,CAAA,CAAE,EAElC,SAAAM,EAAyBC,EAAQV,EAAM,MAAgB,CACvD,OAAAU,EAAM,KAAMC,GACb,UAAWA,EACNF,EAAyBE,EAAK,KAAK,EAErCA,EAAK,OAASX,EAAM,UAC5B,CACH,CAEA,SAASY,GAA0B,CAC1BW,EAAA,MAAM,QAASZ,GAAS,CAC7BA,EAAK,wBAAwB,CAAA,CAC9B,EACOa,EAAA,MAAM,QAASC,GAAU,CAC/BA,EAAM,wBAAwB,CAAA,CAC/B,CACH,CAEa,OAAAR,EAAA,CACX,wBAAAL,CAAA,CACD,8vCCxBD,MAAMM,EAAaf,EAAAA,MAEbuB,EAAYvB,MAAI,CAAC,EACjBwB,EAAexB,MAAI,EAAE,EACrByB,EAAazB,MAAI,EAAK,EAEnB,SAAA0B,EAA2B,CAAE,IAAAT,EAAK,OAAAC,CAAO,EAAI,CAAE,OAAQ,EAAG,IAAK,GAAK,OAC3E,MAAMS,IAAejB,EAAAK,EAAW,QAAX,YAAAL,EAAkB,wBAAwB,MAAO,EACtEa,EAAU,MAAQN,EAAMU,EACxBH,EAAa,MAAQN,EACrBO,EAAW,MAAQ,EACrB"}
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(open, () => {\n $listWrapper.value?.addEventListener(\n 'transitionstart',\n () => {\n markerIsMoving.value = true\n },\n { once: true },\n )\n\n $listWrapper.value?.addEventListener(\n 'transitionend',\n () => {\n markerIsMoving.value = false\n if (open.value \|\| !hasActiveItem.value) {\n emit('updateMarkerPosition')\n }\n },\n { once: true },\n )\n})\n\nwatch(active, (active) => {\n if (active) {\n emit('hideMarker')\n }\n})\n\nwatch(open, (open) => {\n if (hasActiveItem.value) {\n if (open) {\n reTriggerSetActiveGroup()\n } else {\n emit('hideMarker')\n }\n } else {\n emit('updateMarkerPosition')\n }\n})\n\ndefineExpose({\n reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n <component\n :is=\"Head\"\n :class=\"[\n classes.button,\n {\n [classes.topButton]: depth === 0,\n [classes.leafButton]: depth,\n 'text-indigo-500': active,\n 'text-gray-900 dark:text-gray-200':\n !hasActiveItem && !active && depth === 0,\n 'text-gray-700 dark:text-gray-500':\n !hasActiveItem && !active && depth >= 0,\n },\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 'ml-[28px]': depth,\n },\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 >\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 { watch, type DefineComponent, ref, onMounted, inject } 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 const { top = 0, height = 36 } =\n $container.value?.getBoundingClientRect() ?? {}\n\n emit('update:active', props.active, {\n top,\n height,\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</script>\n\n<template>\n <li ref=\"$container\" class=\"list-none p-0\">\n <component\n :is=\"linkComponent\"\n class=\"group relative block w-full pl-[24px]\"\n :class=\"{\n 'text-indigo-500': 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 :href=\"item.href\"\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","_b","__expose","$container","setActiveMarkerPosition","top","height","onMounted","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.4.1",
+  "version": "0.5.0",
   "files": [
     "*"
   ],
@@ -20,7 +20,7 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-docmenu": "^0.1.2",
+    "@cypress-design/constants-docmenu": "^0.2.0",
     "@cypress-design/vue-icon": "^0.31.2"
   },
   "devDependencies": {