@cypress-design/vue-docmenu 0.4.0 → 0.4.1

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n    button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n    leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: NavGroup\n    collapsible: boolean\n    linkComponent: DefineComponent | 'a'\n    depth?: number\n  }>(),\n  {\n    depth: 0,\n  },\n)\n\nconst open = ref(props.depth === 0)\n\nconst $groups = ref<{ height: number }[]>([])\n\nconst height = computed(() => {\n  return $groups.value && open.value\n    ? $groups.value.reduce(\n        (acc, { height: h }) => acc + h,\n        props.group.items.length,\n      )\n    : 0\n})\n\ndefineExpose<{\n  height: Ref<number>\n}>({\n  height,\n})\n\nconst activeMarkerTop = computed(() => {\n  const activeIndex = props.group.items.findIndex(\n    (item) => 'href' in item && item.active,\n  )\n\n  // how many groups are before the active element?\n  let numberOfGroups = props.group.items.filter(\n    (item, index) => !('href' in item) && index < activeIndex,\n  ).length\n\n  // if there is any open group before the active element\n  // compensate for the height\n  const groupHeight = $groups.value?.reduce((acc, group) => {\n    if (numberOfGroups < -1) return acc\n    numberOfGroups--\n    return acc + group.height\n  }, 0)\n  return (activeIndex + groupHeight) * 44\n})\n\nconst Head = computed(() =>\n  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n</script>\n\n<template>\n  <component\n    :is=\"Head\"\n    :class=\"[\n      classes.button,\n      {\n        [classes.topButton]: depth === 0,\n        [classes.leafButton]: depth,\n        'text-indigo-500': props.group.active,\n      },\n    ]\"\n    :href=\"props.group.href\"\n    @click=\"\n      () => {\n        if (collapsible) {\n          open = !open\n        }\n      }\n    \"\n  >\n    <IconChevronDownSmall\n      v-if=\"props.collapsible\"\n      stroke-color=\"gray-400\"\n      :size=\"depth ? '8' : '16'\"\n      class=\"absolute left-0 transform transition-transform\"\n      :class=\"{\n        'rotate-0': open,\n        '-rotate-90': !open,\n        'ml-[16px]': depth,\n      }\"\n    />\n    {{ group.label }}\n  </component>\n  <div\n    v-if=\"\n      props.collapsible &&\n      depth >= 0 &&\n      open &&\n      group.items.some((item) => 'href' in item && item.active)\n    \"\n    class=\"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]\"\n    :style=\"{\n      top: `${activeMarkerTop}px`,\n      left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,\n    }\"\n  />\n  <ul\n    v-show=\"open\"\n    class=\"list-none p-0 ml-[7.5px]\"\n    :class=\"{\n      'border-l border-gray-100': depth === 0 && props.collapsible,\n    }\"\n  >\n    <template v-for=\"item in group.items\">\n      <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n        <DocGroup\n          ref=\"$groups\"\n          :group=\"item\"\n          :depth=\"depth + 1\"\n          :collapsible=\"props.collapsible\"\n          :link-component=\"props.linkComponent\"\n        />\n      </li>\n      <DocLink\n        v-else\n        :item=\"item\"\n        :depth=\"depth\"\n        :collapsible=\"collapsible\"\n        :link-component=\"props.linkComponent\"\n      />\n    </template>\n  </ul>\n</template>\n"],"names":["classes","props","__props","open","ref","$groups","height","computed","acc","h","__expose","activeMarkerTop","activeIndex","item","numberOfGroups","index","groupHeight","_a","group","Head"],"mappings":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,6DACR,UAAW,mDACX,WAAY,sCAChB,ynCCGA,MAAMC,EAAQC,EAYRC,EAAOC,EAAA,IAAIH,EAAM,QAAU,CAAC,EAE5BI,EAAUD,MAA0B,CAAA,CAAE,EAEtCE,EAASC,EAAAA,SAAS,IACfF,EAAQ,OAASF,EAAK,MACzBE,EAAQ,MAAM,OACZ,CAACG,EAAK,CAAE,OAAQC,KAAQD,EAAMC,EAC9BR,EAAM,MAAM,MAAM,MAEpB,EAAA,CACL,EAIES,EAAA,CACD,OAAAJ,CAAA,CACD,EAEK,MAAAK,EAAkBJ,EAAAA,SAAS,IAAM,OAC/B,MAAAK,EAAcX,EAAM,MAAM,MAAM,UACnCY,GAAS,SAAUA,GAAQA,EAAK,MAAA,EAI/B,IAAAC,EAAiBb,EAAM,MAAM,MAAM,OACrC,CAACY,EAAME,IAAU,EAAE,SAAUF,IAASE,EAAQH,CAC9C,EAAA,OAIF,MAAMI,GAAcC,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,OAAO,CAACT,EAAKU,IAC1CJ,EAAiB,GAAWN,GAChCM,IACON,EAAMU,EAAM,QAClB,GACH,OAAQN,EAAcI,GAAe,EAAA,CACtC,EAEKG,EAAOZ,EAAA,SAAS,IACpBN,EAAM,YAAc,SAAWA,EAAM,MAAM,KAAO,IAAM,KAAA"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/vue-docmenu",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "files": [
     "*"
   ],
@@ -20,7 +20,7 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-docmenu": "^0.1.1",
+    "@cypress-design/constants-docmenu": "^0.1.2",
     "@cypress-design/vue-icon": "^0.31.2"
   },
   "devDependencies": {