@cypress-design/vue-docmenu 0.2.2 → 0.4.0

package/dist/index.es.mjs

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