@cypress-design/vue-docmenu 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+$ yarn build:module && yarn build:types
+$ yarn vite build
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
+vite v4.2.1 building for production...
+transforming...
+✓ 9 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  7.14 kB │ gzip: 2.53 kB │ map: 262.85 kB
+dist/index.umd.js  6.15 kB │ gzip: 2.31 kB │ map: 262.53 kB
+✓ built in 6.20s
+$ 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

@@ -0,0 +1,12 @@
+# @cypress-design/vue-docmenu
+
+## 0.1.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/vue-icon@0.20.0

package/DocMenu.rootstory.tsx

@@ -0,0 +1,6 @@
+import type { NavGroup, NavItemLink } from '../constants'
+import DocMenu from './DocMenu.vue'
+
+export default ({ items }: { items: (NavGroup | NavItemLink)[] }) => {
+  return <DocMenu items={items} />
+}

package/DocMenu.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { NavGroup, NavItemLink } from '../constants'
+import DocGroup from './_DocGroup.vue'
+import DocLink from './_DocLink.vue'
+
+withDefaults(
+  defineProps<{
+    items: (NavItemLink | NavGroup)[]
+    collapsible?: boolean
+  }>(),
+  {
+    collapsible: true,
+  }
+)
+</script>
+
+<template>
+  <ul class="overflow-y-hidden list-none p-0">
+    <template v-for="item in items">
+      <li v-if="'items' in item" class="relative list-none p-0">
+        <DocGroup :group="item" :depth="0" :collapsible="collapsible" />
+      </li>
+      <DocLink v-else :item="item" :collapsible="collapsible" />
+    </template>
+  </ul>
+</template>

package/DocMenuVue.cy.tsx

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/vue'
+import assertions from '../assertions'
+import type { NavGroup, NavItemLink } from '../constants'
+import DocMenuStory from './DocMenu.rootstory'
+
+describe('<DocMenu/>', () => {
+  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
+    mount(() => <DocMenuStory items={items} />)
+  }
+  assertions(mountStory)
+})

package/ReadMe.md

@@ -0,0 +1,79 @@
+# DocMenu
+
+## Summary
+
+Describe your component here.
+
+## Install
+
+```bash
+npm install @cypress-design/vue-docmenu
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-docmenu
+```
+
+## Usage
+
+```vue live
+<DocMenu
+  :items="[
+    {
+      text: 'Get Started',
+      href: '#',
+    },
+    {
+      text: 'Overview',
+      items: [
+        {
+          text: 'Overview Item 1',
+          href: '#',
+        },
+        {
+          text: 'Overview Item 2',
+          href: '#',
+          active: true,
+        },
+      ],
+    },
+    {
+      text: 'Getting Started',
+      items: [
+        {
+          text: 'Item 1',
+          href: '#',
+        },
+        {
+          text: 'Group',
+          items: [
+            {
+              text: 'Item 1',
+              href: '#',
+            },
+            {
+              text: 'Item 2',
+              href: '#',
+            },
+            {
+              text: 'Item 3',
+              href: '#',
+            },
+            {
+              text: 'Item 4',
+              href: '#',
+            },
+          ],
+        },
+        {
+          text: 'Item 5',
+          href: '#',
+          active: true,
+        },
+      ],
+    },
+  ]"
+/>
+```

package/_DocGroup.vue

@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed, Ref, ref } from 'vue'
+import { IconChevronDownSmall } from '@cypress-design/vue-icon'
+import { NavGroup, classes } from '../constants'
+import DocLink from './_DocLink.vue'
+import DocGroup from './_DocGroup.vue'
+
+const props = withDefaults(
+  defineProps<{
+    group: NavGroup
+    collapsible: boolean
+    depth?: number
+  }>(),
+  {
+    depth: 0,
+  }
+)
+
+const open = ref(props.depth === 0)
+
+const $groups = ref<(typeof DocGroup)[]>([])
+
+const height = computed(() => {
+  return $groups.value && open.value
+    ? $groups.value.reduce(
+        (acc, { height: h }) => acc + h,
+        props.group.items.length
+      )
+    : 0
+})
+
+defineExpose<{
+  height: Ref<number>
+}>({
+  height,
+})
+
+const activeMarkerTop = computed(() => {
+  const activeIndex = props.group.items.findIndex(
+    (item) => 'href' in item && item.active
+  )
+
+  // how many groups are before the active element?
+  let numberOfGroups = props.group.items.filter(
+    (item, index) => !('href' in item) && index < activeIndex
+  ).length
+
+  // if there is any open group before the active element
+  // compensate for the height
+  const groupHeight = $groups.value?.reduce((acc, group) => {
+    if (numberOfGroups < -1) return acc
+    numberOfGroups--
+    return acc + group.height
+  }, 0)
+  return (activeIndex + groupHeight) * 44
+})
+
+const Head = computed(() =>
+  props.collapsible ? 'button' : props.group.href ? 'a' : 'div'
+)
+</script>
+
+<template>
+  <component
+    :is="Head"
+    :class="[
+      classes.button,
+      {
+        [classes.topButton]: depth === 0,
+        [classes.leafButton]: depth,
+      },
+    ]"
+    :href="props.group.href"
+    @click="
+      () => {
+        if (collapsible) {
+          open = !open
+        }
+      }
+    "
+  >
+    <IconChevronDownSmall
+      v-if="props.collapsible"
+      stroke-color="gray-400"
+      :size="depth ? '8' : '16'"
+      class="absolute left-0 transform transition-transform"
+      :class="{
+        'rotate-0': open,
+        '-rotate-90': !open,
+        'ml-[16px]': depth,
+      }"
+    />
+    {{ group.text }}
+  </component>
+  <div
+    v-if="
+      props.collapsible &&
+      depth >= 0 &&
+      open &&
+      group.items.some((item) => 'href' in item && item.active)
+    "
+    class="absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]"
+    :style="{
+      top: `${activeMarkerTop}px`,
+      left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,
+    }"
+  />
+  <ul
+    v-show="open"
+    class="list-none p-0 ml-[7.5px]"
+    :class="{
+      'border-l border-gray-100': depth === 0 && props.collapsible,
+    }"
+  >
+    <template v-for="item in group.items">
+      <li class="relative list-none p-0" v-if="'items' in item">
+        <DocGroup
+          ref="$groups"
+          :group="item"
+          :depth="depth + 1"
+          :collapsible="props.collapsible"
+        />
+      </li>
+      <DocLink v-else :item="item" :depth="depth" :collapsible="collapsible" />
+    </template>
+  </ul>
+</template>

package/_DocLink.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { NavItemLink } from '../constants'
+
+withDefaults(
+  defineProps<{
+    item: NavItemLink
+    depth?: number
+    collapsible: boolean
+  }>(),
+  {
+    depth: -1,
+  }
+)
+</script>
+
+<template>
+  <li
+    class="list-none p-0"
+    :class="{
+      'pl-[16px]': depth >= 0,
+    }"
+  >
+    <a
+      class="group relative block w-full pl-[24px]"
+      :class="{
+        'text-indigo-500 dark:text-indigo-200': item.active,
+        'py-[8px] text-[16px] leading-[24px]': depth < 0,
+        'leading-[20px] text-[14px] py-[12px]': depth >= 0,
+      }"
+      :href="item.href"
+    >
+      <div
+        v-if="depth >= 0"
+        class="absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden"
+        :class="{
+          'group-hover:block bg-gray-300': !item.active && collapsible,
+        }"
+        :style="{
+          left: `-${18.5 + depth * 7.5}px`,
+        }"
+      />
+      {{ item.text }}
+    </a>
+  </li>
+</template>

package/dist/constants.d.ts

@@ -0,0 +1,17 @@
+export interface NavItemBase {
+    text: string;
+    href?: string;
+    active?: boolean;
+}
+export interface NavItemLink extends NavItemBase {
+    href: string;
+}
+export interface NavGroup extends NavItemBase {
+    items: (NavItemLink | NavGroup)[];
+}
+export declare const classes: {
+    readonly button: "flex leading-[24px] py-[10px] items-center relative w-full";
+    readonly topButton: "leading-[24px] text-[16px] pl-[24px] font-medium";
+    readonly leafButton: "leading-[20px] text-[14px] pl-[40px]";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,CAAA;CAClC;AAED,eAAO,MAAM,OAAO;;;;CAIV,CAAA"}

package/dist/index.es.mjs

@@ -0,0 +1,203 @@
+import { h as I, defineComponent as C, openBlock as o, createElementBlock as i, normalizeClass as d, createElementVNode as z, normalizeStyle as B, createCommentVNode as y, createTextVNode as D, toDisplayString as O, ref as $, computed as v, Fragment as h, createBlock as x, resolveDynamicComponent as L, unref as c, withCtx as M, withDirectives as V, renderList as N, createVNode as S, vShow as G } from "vue";
+import * as H from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as T } from "@cypress-design/icon-registry";
+const A = ({
+  body: e,
+  compiledClasses: a,
+  size: t,
+  class: l,
+  interactiveColorsOnGroup: p,
+  ...m
+}) => {
+  const g = Object.keys(m).reduce(
+    (r, n) => (!T.includes(n) && n !== "name" && (r[n] = m[n]), r),
+    {}
+  ), f = {
+    width: t,
+    height: t,
+    viewBox: `0 0 ${t} ${t}`,
+    fill: "none",
+    innerHTML: e,
+    ...g
+    // add all standard attributes back to the svg tag
+  };
+  return a.length && (f.class = a.join(" ")), f;
+}, P = (e) => {
+  const { sizeWithDefault: a, compiledClasses: t } = H.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+    8: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',
+    16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'
+  }[a];
+  if (!l)
+    throw Error(`Icon "chevron-down-small" is not available in size ${a}`);
+  return I("svg", A({
+    ...e,
+    size: a,
+    body: l,
+    compiledClasses: t
+  }));
+}, k = {
+  button: "flex leading-[24px] py-[10px] items-center relative w-full",
+  topButton: "leading-[24px] text-[16px] pl-[24px] font-medium",
+  leafButton: "leading-[20px] text-[14px] pl-[40px]"
+}, R = ["href"], j = /* @__PURE__ */ C({
+  __name: "_DocLink",
+  props: {
+    item: null,
+    depth: { default: -1 },
+    collapsible: { type: Boolean }
+  },
+  setup(e) {
+    return (a, t) => (o(), i("li", {
+      class: d(["list-none p-0", {
+        "pl-[16px]": e.depth >= 0
+      }])
+    }, [
+      z("a", {
+        class: d(["group relative block w-full pl-[24px]", {
+          "text-indigo-500 dark:text-indigo-200": e.item.active,
+          "py-[8px] text-[16px] leading-[24px]": e.depth < 0,
+          "leading-[20px] text-[14px] py-[12px]": e.depth >= 0
+        }]),
+        href: e.item.href
+      }, [
+        e.depth >= 0 ? (o(), i("div", {
+          key: 0,
+          class: d(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden", {
+            "group-hover:block bg-gray-300": !e.item.active && e.collapsible
+          }]),
+          style: B({
+            left: `-${18.5 + e.depth * 7.5}px`
+          })
+        }, null, 6)) : y("", !0),
+        D(" " + O(e.item.text), 1)
+      ], 10, R)
+    ], 2));
+  }
+}), F = {
+  key: 0,
+  class: "relative list-none p-0"
+}, E = /* @__PURE__ */ C({
+  __name: "_DocGroup",
+  props: {
+    group: null,
+    collapsible: { type: Boolean },
+    depth: { default: 0 }
+  },
+  setup(e, { expose: a }) {
+    const t = e, l = $(t.depth === 0), p = $([]), m = v(() => p.value && l.value ? p.value.reduce(
+      (r, { height: n }) => r + n,
+      t.group.items.length
+    ) : 0);
+    a({
+      height: m
+    });
+    const g = v(() => {
+      var w;
+      const r = t.group.items.findIndex(
+        (u) => "href" in u && u.active
+      );
+      let n = t.group.items.filter(
+        (u, b) => !("href" in u) && b < r
+      ).length;
+      const s = (w = p.value) == null ? void 0 : w.reduce((u, b) => n < -1 ? u : (n--, u + b.height), 0);
+      return (r + s) * 44;
+    }), f = v(
+      () => t.collapsible ? "button" : t.group.href ? "a" : "div"
+    );
+    return (r, n) => (o(), i(h, null, [
+      (o(), x(L(c(f)), {
+        class: d([
+          c(k).button,
+          {
+            [c(k).topButton]: e.depth === 0,
+            [c(k).leafButton]: e.depth
+          }
+        ]),
+        href: t.group.href,
+        onClick: n[0] || (n[0] = () => {
+          e.collapsible && (l.value = !l.value);
+        })
+      }, {
+        default: M(() => [
+          t.collapsible ? (o(), x(c(P), {
+            key: 0,
+            "stroke-color": "gray-400",
+            size: e.depth ? "8" : "16",
+            class: d(["absolute left-0 transform transition-transform", {
+              "rotate-0": l.value,
+              "-rotate-90": !l.value,
+              "ml-[16px]": e.depth
+            }])
+          }, null, 8, ["size", "class"])) : y("", !0),
+          D(" " + O(e.group.text), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "href"])),
+      t.collapsible && e.depth >= 0 && l.value && e.group.items.some((s) => "href" in s && s.active) ? (o(), i("div", {
+        key: 0,
+        class: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]",
+        style: B({
+          top: `${c(g)}px`,
+          left: `-${e.depth === 0 ? 0 : e.depth * 7.5 + 1}px`
+        })
+      }, null, 4)) : y("", !0),
+      V(z("ul", {
+        class: d(["list-none p-0 ml-[7.5px]", {
+          "border-l border-gray-100": e.depth === 0 && t.collapsible
+        }])
+      }, [
+        (o(!0), i(h, null, N(e.group.items, (s) => (o(), i(h, null, [
+          "items" in s ? (o(), i("li", F, [
+            S(E, {
+              ref_for: !0,
+              ref_key: "$groups",
+              ref: p,
+              group: s,
+              depth: e.depth + 1,
+              collapsible: t.collapsible
+            }, null, 8, ["group", "depth", "collapsible"])
+          ])) : (o(), x(j, {
+            key: 1,
+            item: s,
+            depth: e.depth,
+            collapsible: e.collapsible
+          }, null, 8, ["item", "depth", "collapsible"]))
+        ], 64))), 256))
+      ], 2), [
+        [G, l.value]
+      ])
+    ], 64));
+  }
+}), W = { class: "overflow-y-hidden list-none p-0" }, q = {
+  key: 0,
+  class: "relative list-none p-0"
+}, Q = /* @__PURE__ */ C({
+  __name: "DocMenu",
+  props: {
+    items: null,
+    collapsible: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    return (a, t) => (o(), i("ul", W, [
+      (o(!0), i(h, null, N(e.items, (l) => (o(), i(h, null, [
+        "items" in l ? (o(), i("li", q, [
+          S(E, {
+            group: l,
+            depth: 0,
+            collapsible: e.collapsible
+          }, null, 8, ["group", "collapsible"])
+        ])) : (o(), x(j, {
+          key: 1,
+          item: l,
+          collapsible: e.collapsible
+        }, null, 8, ["item", "collapsible"]))
+      ], 64))), 256))
+    ]));
+  }
+});
+export {
+  Q as default
+};
+//# sourceMappingURL=index.es.mjs.map
+
+/* <windicss-keep class="overflow-y-hidden list-none p-0 relative absolute left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px] ml-[7.5px] border-l border-gray-100 icon-dark-gray-400 pl-[16px] block w-full pl-[24px] text-indigo-500 dark:text-indigo-200 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] hidden group-hover:block bg-gray-300 flex py-[10px] items-center font-medium pl-[40px]"> */