@cypress-design/vue-docmenu 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,13 +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...
+vite v4.2.2 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
+dist/index.es.mjs  7.16 kB │ gzip: 2.53 kB │ map: 262.71 kB
+dist/index.umd.js  6.16 kB │ gzip: 2.31 kB │ map: 262.39 kB
+✓ built in 5.71s
 $ 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

@@ -1,5 +1,19 @@
 # @cypress-design/vue-docmenu
 
+## 0.2.0
+
+### Minor Changes
+
+- [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
+
+### Patch Changes
+
+- [#203](https://github.com/cypress-io/cypress-design/pull/203) [`68f7726`](https://github.com/cypress-io/cypress-design/commit/68f77266223181ef479dc7ff77f8a7d32f3e5766) Thanks [@elevatebart](https://github.com/elevatebart)! - allow groups to be active
+
+- Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
+  - @cypress-design/constants-docmenu@0.1.0
+  - @cypress-design/vue-icon@0.21.0
+
 ## 0.1.0
 
 ### Minor Changes

package/DocMenu.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { NavGroup, NavItemLink } from '../constants'
+import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
 import DocGroup from './_DocGroup.vue'
 import DocLink from './_DocLink.vue'
 

package/ReadMe.md

@@ -1,9 +1,5 @@
 # DocMenu
 
-## Summary
-
-Describe your component here.
-
 ## Install
 
 ```bash

package/_DocGroup.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, Ref, ref } from 'vue'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
-import { NavGroup, classes } from '../constants'
+import { NavGroup, classes } from '@cypress-design/constants-docmenu'
 import DocLink from './_DocLink.vue'
 import DocGroup from './_DocGroup.vue'
 
@@ -18,7 +18,7 @@ const props = withDefaults(
 
 const open = ref(props.depth === 0)
 
-const $groups = ref<(typeof DocGroup)[]>([])
+const $groups = ref<{ height: number }[]>([])
 
 const height = computed(() => {
   return $groups.value && open.value
@@ -68,6 +68,7 @@ const Head = computed(() =>
       {
         [classes.topButton]: depth === 0,
         [classes.leafButton]: depth,
+        'text-indigo-500 dark:text-indigo-200': props.group.active,
       },
     ]"
     :href="props.group.href"
@@ -113,7 +114,7 @@ const Head = computed(() =>
     }"
   >
     <template v-for="item in group.items">
-      <li class="relative list-none p-0" v-if="'items' in item">
+      <li class="relative list-none p-0" v-if="item && 'items' in item">
         <DocGroup
           ref="$groups"
           :group="item"

package/_DocLink.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { NavItemLink } from '../constants'
+import type { NavItemLink } from '@cypress-design/constants-docmenu'
 
 withDefaults(
   defineProps<{

package/dist/{vue/DocMenu.vue.d.ts → DocMenu.vue.d.ts}

@@ -1,4 +1,4 @@
-import { NavGroup, NavItemLink } from '../constants';
+import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: (NavItemLink | NavGroup)[];
     collapsible?: boolean | undefined;

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;WAoB9D,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;WAA1B,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;iBACnB,OAAO;;AAjBzB,wBAiGc;AACd,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,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

package/dist/{vue/_DocGroup.vue.d.ts → _DocGroup.vue.d.ts}

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-import { NavGroup } from '../constants';
+import { NavGroup } from '@cypress-design/constants-docmenu';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     group: NavGroup;
     collapsible: boolean;

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

@@ -0,0 +1 @@
+{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,GAAG,EAAO,MAAM,KAAK,CAAA;AAExC,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;;WAgE1D,QAAQ;iBACF,OAAO;;;;;YAMd,IAAI,MAAM,CAAC;;WAPV,QAAQ;iBACF,OAAO;;;;;WACZ,MAAM;;AA9DlB,wBA8Nc;AACd,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,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

package/dist/{vue/_DocLink.vue.d.ts → _DocLink.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { NavItemLink } from '../constants';
+import type { NavItemLink } from '@cypress-design/constants-docmenu';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     item: NavItemLink;
     depth?: number | undefined;

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

@@ -0,0 +1 @@
+{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;UAmB1D,WAAW;;iBAEJ,OAAO;;;;UAFd,WAAW;;iBAEJ,OAAO;;;;WADZ,MAAM;;AAlBlB,wBAqGc;AACd,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,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { NavItemLink, NavGroup } from '@cypress-design/constants-docmenu';
+export { default } from './DocMenu.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.es.mjs

@@ -1,4 +1,4 @@
-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 { 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 g, 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 = ({
@@ -9,8 +9,8 @@ const A = ({
   interactiveColorsOnGroup: p,
   ...m
 }) => {
-  const g = Object.keys(m).reduce(
-    (r, n) => (!T.includes(n) && n !== "name" && (r[n] = m[n]), r),
+  const x = Object.keys(m).reduce(
+    (s, n) => (!T.includes(n) && n !== "name" && (s[n] = m[n]), s),
     {}
   ), f = {
     width: t,
@@ -18,7 +18,7 @@ const A = ({
     viewBox: `0 0 ${t} ${t}`,
     fill: "none",
     innerHTML: e,
-    ...g
+    ...x
     // add all standard attributes back to the svg tag
   };
   return a.length && (f.class = a.join(" ")), f;
@@ -85,32 +85,33 @@ const A = ({
   },
   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,
+      (s, { height: n }) => s + n,
       t.group.items.length
     ) : 0);
     a({
       height: m
     });
-    const g = v(() => {
+    const x = v(() => {
       var w;
-      const r = t.group.items.findIndex(
+      const s = t.group.items.findIndex(
         (u) => "href" in u && u.active
       );
       let n = t.group.items.filter(
-        (u, b) => !("href" in u) && b < r
+        (u, b) => !("href" in u) && b < s
       ).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;
+      const r = (w = p.value) == null ? void 0 : w.reduce((u, b) => n < -1 ? u : (n--, u + b.height), 0);
+      return (s + r) * 44;
     }), f = v(
       () => t.collapsible ? "button" : t.group.href ? "a" : "div"
     );
-    return (r, n) => (o(), i(h, null, [
-      (o(), x(L(c(f)), {
+    return (s, n) => (o(), i(h, null, [
+      (o(), g(L(c(f)), {
         class: d([
           c(k).button,
           {
             [c(k).topButton]: e.depth === 0,
-            [c(k).leafButton]: e.depth
+            [c(k).leafButton]: e.depth,
+            "text-indigo-500 dark:text-indigo-200": t.group.active
           }
         ]),
         href: t.group.href,
@@ -119,7 +120,7 @@ const A = ({
         })
       }, {
         default: M(() => [
-          t.collapsible ? (o(), x(c(P), {
+          t.collapsible ? (o(), g(c(P), {
             key: 0,
             "stroke-color": "gray-400",
             size: e.depth ? "8" : "16",
@@ -133,11 +134,11 @@ const A = ({
         ]),
         _: 1
       }, 8, ["class", "href"])),
-      t.collapsible && e.depth >= 0 && l.value && e.group.items.some((s) => "href" in s && s.active) ? (o(), i("div", {
+      t.collapsible && e.depth >= 0 && l.value && e.group.items.some((r) => "href" in r && r.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`,
+          top: `${c(x)}px`,
           left: `-${e.depth === 0 ? 0 : e.depth * 7.5 + 1}px`
         })
       }, null, 4)) : y("", !0),
@@ -146,19 +147,19 @@ const A = ({
           "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, [
+        (o(!0), i(h, null, N(e.group.items, (r) => (o(), i(h, null, [
+          r && "items" in r ? (o(), i("li", F, [
             S(E, {
               ref_for: !0,
               ref_key: "$groups",
               ref: p,
-              group: s,
+              group: r,
               depth: e.depth + 1,
               collapsible: t.collapsible
             }, null, 8, ["group", "depth", "collapsible"])
-          ])) : (o(), x(j, {
+          ])) : (o(), g(j, {
             key: 1,
-            item: s,
+            item: r,
             depth: e.depth,
             collapsible: e.collapsible
           }, null, 8, ["item", "depth", "collapsible"]))
@@ -186,7 +187,7 @@ const A = ({
             depth: 0,
             collapsible: e.collapsible
           }, null, 8, ["group", "collapsible"])
-        ])) : (o(), x(j, {
+        ])) : (o(), g(j, {
           key: 1,
           item: l,
           collapsible: e.collapsible
@@ -200,4 +201,4 @@ export {
 };
 //# 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]"> */
+/* <windicss-keep class="overflow-y-hidden list-none p-0 relative 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 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"> */