@ansh-ui/vue 0.2.0

package/dist/chunk-SHX2JGID.cjs

@@ -0,0 +1,269 @@
+'use strict';
+
+var chunk774WBLDR_cjs = require('./chunk-774WBLDR.cjs');
+var chunk6732H4BQ_cjs = require('./chunk-6732H4BQ.cjs');
+var vue = require('vue');
+
+var SidebarItem = vue.defineComponent({
+  name: "AnshSidebarItem",
+  props: {
+    item: { type: Object, required: true },
+    activeId: { type: String, default: void 0 },
+    collapsed: { type: Boolean, required: true },
+    depth: { type: Number, required: true }
+  },
+  emits: ["navigate"],
+  setup(props, { emit }) {
+    const hasChildren = vue.computed(() => Boolean(props.item.items && props.item.items.length > 0));
+    const containsActive = vue.computed(
+      () => hasChildren.value && props.item.items.some((child) => child.id === props.activeId)
+    );
+    const open = vue.ref(containsActive.value);
+    const panelId = chunk6732H4BQ_cjs.useId();
+    vue.watch(containsActive, (value) => {
+      if (value) open.value = true;
+    });
+    const isActive = vue.computed(() => props.item.id === props.activeId);
+    return () => {
+      const item = props.item;
+      if (hasChildren.value) {
+        return vue.h("li", { class: "ansh-sidebar__item" }, [
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: chunk6732H4BQ_cjs.cx(
+                "ansh-sidebar__link",
+                "ansh-sidebar__link--group",
+                containsActive.value && "ansh-sidebar__link--within",
+                "ansh-focusable"
+              ),
+              "aria-expanded": open.value,
+              "aria-controls": panelId,
+              disabled: item.disabled,
+              onClick: () => {
+                open.value = !open.value;
+              }
+            },
+            [
+              item.icon !== void 0 ? vue.h("span", { class: "ansh-sidebar__icon" }, [chunk6732H4BQ_cjs.resolveSlotContent(item.icon)]) : null,
+              vue.h(
+                "span",
+                { class: chunk6732H4BQ_cjs.cx("ansh-sidebar__label", props.collapsed && "ansh-visually-hidden") },
+                item.label
+              ),
+              vue.h(
+                "span",
+                {
+                  class: chunk6732H4BQ_cjs.cx("ansh-sidebar__chevron", open.value && "ansh-sidebar__chevron--open"),
+                  "aria-hidden": "true"
+                },
+                [
+                  vue.h("svg", { viewBox: "0 0 12 12", width: "10", height: "10" }, [
+                    vue.h("path", {
+                      d: "M3 4.5L6 7.5l3-3",
+                      stroke: "currentColor",
+                      "stroke-width": "1.5",
+                      fill: "none",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ]
+              )
+            ]
+          ),
+          // `hidden` rather than unmounting: the group's open state is cheap to keep, and
+          // unmounting would lose scroll position within a long nested list.
+          vue.h(
+            "ul",
+            {
+              class: "ansh-sidebar__list ansh-sidebar__list--nested",
+              id: panelId,
+              hidden: !open.value
+            },
+            item.items.map(
+              (child) => vue.h(SidebarItem, {
+                key: child.id,
+                item: child,
+                activeId: props.activeId,
+                collapsed: props.collapsed,
+                depth: props.depth + 1,
+                onNavigate: (navigated) => emit("navigate", navigated)
+              })
+            )
+          )
+        ]);
+      }
+      const tag = item.href ? "a" : "button";
+      return vue.h("li", { class: "ansh-sidebar__item" }, [
+        vue.h(
+          tag,
+          {
+            ...item.href ? { href: item.href } : { type: "button" },
+            class: chunk6732H4BQ_cjs.cx(
+              "ansh-sidebar__link",
+              isActive.value && "ansh-sidebar__link--active",
+              "ansh-focusable"
+            ),
+            // The current page, announced. A colour change alone conveys nothing.
+            "aria-current": isActive.value ? "page" : void 0,
+            "aria-disabled": item.disabled || void 0,
+            // A collapsed rail shows only icons, so the label becomes the accessible name via
+            // `title` for pointer users and stays in the DOM for everyone else.
+            title: props.collapsed ? item.label : void 0,
+            onClick: (event) => {
+              if (item.disabled) {
+                event.preventDefault();
+                return;
+              }
+              item.onClick?.();
+              emit("navigate", item);
+            }
+          },
+          [
+            item.icon !== void 0 ? vue.h("span", { class: "ansh-sidebar__icon" }, [chunk6732H4BQ_cjs.resolveSlotContent(item.icon)]) : null,
+            vue.h(
+              "span",
+              { class: chunk6732H4BQ_cjs.cx("ansh-sidebar__label", props.collapsed && "ansh-visually-hidden") },
+              item.label
+            ),
+            item.badge !== void 0 && !props.collapsed ? vue.h("span", { class: "ansh-sidebar__badge" }, [chunk6732H4BQ_cjs.resolveSlotContent(item.badge)]) : null
+          ]
+        )
+      ]);
+    };
+  }
+});
+var Sidebar = vue.defineComponent({
+  name: "AnshSidebar",
+  inheritAttrs: false,
+  props: {
+    sections: { type: Array, required: true },
+    /** Id of the active item. */
+    activeId: { type: String, default: void 0 },
+    /** Collapse to an icon rail. */
+    collapsed: { type: Boolean, default: void 0 },
+    defaultCollapsed: { type: Boolean, default: false },
+    /** Show the collapse toggle. Default `true`. */
+    collapsible: { type: Boolean, default: true },
+    label: { type: String, default: "Main" }
+  },
+  emits: ["update:collapsed", "navigate"],
+  setup(props, { attrs, emit, slots }) {
+    const [isCollapsed, setCollapsed] = chunk774WBLDR_cjs.useControllableState(
+      () => props.collapsed,
+      props.defaultCollapsed,
+      (next) => emit("update:collapsed", next)
+    );
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return vue.h(
+        "nav",
+        {
+          class: chunk6732H4BQ_cjs.cx(
+            "ansh-sidebar",
+            isCollapsed.value && "ansh-sidebar--collapsed",
+            attrClass
+          ),
+          "aria-label": props.label,
+          "data-collapsed": isCollapsed.value || void 0,
+          ...restAttrs
+        },
+        [
+          slots.header ? vue.h("div", { class: "ansh-sidebar__header" }, slots.header()) : null,
+          vue.h(
+            "div",
+            { class: "ansh-sidebar__scroll" },
+            props.sections.map(
+              (section) => vue.h("div", { class: "ansh-sidebar__section", key: section.id }, [
+                section.label ? vue.h(
+                  "h2",
+                  {
+                    // Hidden visually when collapsed but kept for assistive technology, so the
+                    // grouping survives the rail layout.
+                    class: chunk6732H4BQ_cjs.cx(
+                      "ansh-sidebar__heading",
+                      isCollapsed.value && "ansh-visually-hidden"
+                    )
+                  },
+                  section.label
+                ) : null,
+                vue.h(
+                  "ul",
+                  { class: "ansh-sidebar__list" },
+                  section.items.map(
+                    (item) => vue.h(SidebarItem, {
+                      key: item.id,
+                      item,
+                      activeId: props.activeId,
+                      collapsed: isCollapsed.value,
+                      depth: 0,
+                      onNavigate: (navigated) => emit("navigate", navigated)
+                    })
+                  )
+                )
+              ])
+            )
+          ),
+          slots.footer ? vue.h("div", { class: "ansh-sidebar__footer" }, slots.footer()) : null,
+          props.collapsible ? vue.h(
+            "button",
+            {
+              type: "button",
+              class: "ansh-sidebar__toggle ansh-focusable",
+              "aria-label": isCollapsed.value ? "Expand sidebar" : "Collapse sidebar",
+              "aria-pressed": isCollapsed.value,
+              onClick: () => setCollapsed(!isCollapsed.value)
+            },
+            [
+              vue.h(
+                "svg",
+                { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true" },
+                [
+                  vue.h("path", {
+                    d: isCollapsed.value ? "M6 3.5L10.5 8L6 12.5" : "M10 3.5L5.5 8L10 12.5",
+                    stroke: "currentColor",
+                    "stroke-width": "1.6",
+                    fill: "none",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ]
+              )
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AppShell = vue.defineComponent({
+  name: "AnshAppShell",
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    return () => {
+      const { class: attrClass } = attrs;
+      const hasSidebar = Boolean(slots.sidebar);
+      return vue.h(
+        "div",
+        { class: chunk6732H4BQ_cjs.cx("ansh-shell", hasSidebar && "ansh-shell--with-sidebar", attrClass) },
+        [
+          vue.h("a", { href: "#ansh-main", class: "ansh-skip-link" }, "Skip to main content"),
+          slots.header ? vue.h("header", { class: "ansh-shell__header" }, slots.header()) : null,
+          hasSidebar ? vue.h("aside", { class: "ansh-shell__sidebar" }, slots.sidebar()) : null,
+          vue.h(
+            "main",
+            { class: "ansh-shell__main", id: "ansh-main", tabindex: "-1" },
+            slots.default?.()
+          )
+        ]
+      );
+    };
+  }
+});
+
+exports.AppShell = AppShell;
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=chunk-SHX2JGID.cjs.map
+//# sourceMappingURL=chunk-SHX2JGID.cjs.map

package/dist/chunk-SHX2JGID.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/sidebar.ts"],"names":["defineComponent","computed","ref","useId","watch","h","cx","resolveSlotContent","useControllableState"],"mappings":"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","file":"chunk-SHX2JGID.cjs","sourcesContent":["import { type PropType, type VNode, computed, defineComponent, h, ref, watch } from 'vue'\nimport { type SlotContent, cx, resolveSlotContent, useId } from '../../primitives/utils'\nimport { useControllableState } from '../../primitives/use-controllable-state'\n\nexport interface NavItem {\n  id: string\n  label: string\n  href?: string\n  icon?: SlotContent\n  /** Count or status shown on the right. */\n  badge?: SlotContent\n  disabled?: boolean\n  onClick?: () => void\n  /** Nested items, rendered in a collapsible group. */\n  items?: readonly NavItem[]\n}\n\nexport interface NavSection {\n  id: string\n  /** Heading above the group. Omit for an unlabelled block. */\n  label?: string\n  items: readonly NavItem[]\n}\n\n/** Internal — a single entry (leaf link or expandable group) inside `Sidebar`. Not exported. */\nconst SidebarItem = defineComponent({\n  name: 'AnshSidebarItem',\n  props: {\n    item: { type: Object as PropType<NavItem>, required: true },\n    activeId: { type: String, default: undefined },\n    collapsed: { type: Boolean, required: true },\n    depth: { type: Number, required: true },\n  },\n  emits: ['navigate'],\n  setup(props, { emit }) {\n    const hasChildren = computed(() => Boolean(props.item.items && props.item.items.length > 0))\n    const containsActive = computed(\n      () => hasChildren.value && props.item.items!.some((child) => child.id === props.activeId),\n    )\n    // Groups start open when they contain the active page — landing on a nested route with the\n    // group collapsed leaves the user with no visible indication of where they are.\n    const open = ref(containsActive.value)\n    const panelId = useId()\n\n    watch(containsActive, (value) => {\n      if (value) open.value = true\n    })\n\n    const isActive = computed(() => props.item.id === props.activeId)\n\n    return (): VNode => {\n      const item = props.item\n\n      if (hasChildren.value) {\n        return h('li', { class: 'ansh-sidebar__item' }, [\n          h(\n            'button',\n            {\n              type: 'button',\n              class: cx(\n                'ansh-sidebar__link',\n                'ansh-sidebar__link--group',\n                containsActive.value && 'ansh-sidebar__link--within',\n                'ansh-focusable',\n              ),\n              'aria-expanded': open.value,\n              'aria-controls': panelId,\n              disabled: item.disabled,\n              onClick: () => {\n                open.value = !open.value\n              },\n            },\n            [\n              item.icon !== undefined\n                ? h('span', { class: 'ansh-sidebar__icon' }, [resolveSlotContent(item.icon)])\n                : null,\n              h(\n                'span',\n                { class: cx('ansh-sidebar__label', props.collapsed && 'ansh-visually-hidden') },\n                item.label,\n              ),\n              h(\n                'span',\n                {\n                  class: cx('ansh-sidebar__chevron', open.value && 'ansh-sidebar__chevron--open'),\n                  'aria-hidden': 'true',\n                },\n                [\n                  h('svg', { viewBox: '0 0 12 12', width: '10', height: '10' }, [\n                    h('path', {\n                      d: 'M3 4.5L6 7.5l3-3',\n                      stroke: 'currentColor',\n                      'stroke-width': '1.5',\n                      fill: 'none',\n                      'stroke-linecap': 'round',\n                      'stroke-linejoin': 'round',\n                    }),\n                  ]),\n                ],\n              ),\n            ],\n          ),\n\n          // `hidden` rather than unmounting: the group's open state is cheap to keep, and\n          // unmounting would lose scroll position within a long nested list.\n          h(\n            'ul',\n            {\n              class: 'ansh-sidebar__list ansh-sidebar__list--nested',\n              id: panelId,\n              hidden: !open.value,\n            },\n            item.items!.map((child) =>\n              h(SidebarItem, {\n                key: child.id,\n                item: child,\n                activeId: props.activeId,\n                collapsed: props.collapsed,\n                depth: props.depth + 1,\n                onNavigate: (navigated: NavItem) => emit('navigate', navigated),\n              }),\n            ),\n          ),\n        ])\n      }\n\n      const tag = item.href ? 'a' : 'button'\n\n      return h('li', { class: 'ansh-sidebar__item' }, [\n        h(\n          tag,\n          {\n            ...(item.href ? { href: item.href } : { type: 'button' as const }),\n            class: cx(\n              'ansh-sidebar__link',\n              isActive.value && 'ansh-sidebar__link--active',\n              'ansh-focusable',\n            ),\n            // The current page, announced. A colour change alone conveys nothing.\n            'aria-current': isActive.value ? 'page' : undefined,\n            'aria-disabled': item.disabled || undefined,\n            // A collapsed rail shows only icons, so the label becomes the accessible name via\n            // `title` for pointer users and stays in the DOM for everyone else.\n            title: props.collapsed ? item.label : undefined,\n            onClick: (event: MouseEvent) => {\n              if (item.disabled) {\n                event.preventDefault()\n                return\n              }\n              item.onClick?.()\n              emit('navigate', item)\n            },\n          },\n          [\n            item.icon !== undefined\n              ? h('span', { class: 'ansh-sidebar__icon' }, [resolveSlotContent(item.icon)])\n              : null,\n            h(\n              'span',\n              { class: cx('ansh-sidebar__label', props.collapsed && 'ansh-visually-hidden') },\n              item.label,\n            ),\n            item.badge !== undefined && !props.collapsed\n              ? h('span', { class: 'ansh-sidebar__badge' }, [resolveSlotContent(item.badge)])\n              : null,\n          ],\n        ),\n      ])\n    }\n  },\n})\n\n/**\n * The application sidebar — the Vue counterpart of `@ansh-ui/react`'s `Sidebar`.\n *\n * A `<nav>` containing lists of links — the structure a screen reader user navigates by landmark,\n * and the reason this isn't a stack of divs. Nested groups are `<button aria-expanded>` controlling\n * a `<ul>`, so their state is announced.\n *\n * Collapsing to an icon rail keeps the labels in the DOM (visually hidden), rather than removing\n * them. Removing them would leave a rail of unlabelled icons for anyone using assistive technology,\n * which is exactly the population for whom the space saving is irrelevant.\n *\n * `header`/`footer` are React props of arbitrary content in the source; here they are the `#header`\n * and `#footer` slots — passing a whole render tree through a prop is idiomatic React and awkward\n * Vue, the same reasoning `HoverCard`'s `#content` slot documents.\n */\nexport const Sidebar = defineComponent({\n  name: 'AnshSidebar',\n  inheritAttrs: false,\n  props: {\n    sections: { type: Array as PropType<readonly NavSection[]>, required: true },\n    /** Id of the active item. */\n    activeId: { type: String, default: undefined },\n    /** Collapse to an icon rail. */\n    collapsed: { type: Boolean, default: undefined },\n    defaultCollapsed: { type: Boolean, default: false },\n    /** Show the collapse toggle. Default `true`. */\n    collapsible: { type: Boolean, default: true },\n    label: { type: String, default: 'Main' },\n  },\n  emits: ['update:collapsed', 'navigate'],\n  setup(props, { attrs, emit, slots }) {\n    const [isCollapsed, setCollapsed] = useControllableState(\n      () => props.collapsed,\n      props.defaultCollapsed,\n      (next) => emit('update:collapsed', next),\n    )\n\n    return () => {\n      const { class: attrClass, ...restAttrs } = attrs as Record<string, unknown>\n\n      return h(\n        'nav',\n        {\n          class: cx(\n            'ansh-sidebar',\n            isCollapsed.value && 'ansh-sidebar--collapsed',\n            attrClass as string,\n          ),\n          'aria-label': props.label,\n          'data-collapsed': isCollapsed.value || undefined,\n          ...restAttrs,\n        },\n        [\n          slots.header ? h('div', { class: 'ansh-sidebar__header' }, slots.header()) : null,\n\n          h(\n            'div',\n            { class: 'ansh-sidebar__scroll' },\n            props.sections.map((section) =>\n              h('div', { class: 'ansh-sidebar__section', key: section.id }, [\n                section.label\n                  ? h(\n                      'h2',\n                      {\n                        // Hidden visually when collapsed but kept for assistive technology, so the\n                        // grouping survives the rail layout.\n                        class: cx(\n                          'ansh-sidebar__heading',\n                          isCollapsed.value && 'ansh-visually-hidden',\n                        ),\n                      },\n                      section.label,\n                    )\n                  : null,\n\n                h(\n                  'ul',\n                  { class: 'ansh-sidebar__list' },\n                  section.items.map((item) =>\n                    h(SidebarItem, {\n                      key: item.id,\n                      item,\n                      activeId: props.activeId,\n                      collapsed: isCollapsed.value,\n                      depth: 0,\n                      onNavigate: (navigated: NavItem) => emit('navigate', navigated),\n                    }),\n                  ),\n                ),\n              ]),\n            ),\n          ),\n\n          slots.footer ? h('div', { class: 'ansh-sidebar__footer' }, slots.footer()) : null,\n\n          props.collapsible\n            ? h(\n                'button',\n                {\n                  type: 'button',\n                  class: 'ansh-sidebar__toggle ansh-focusable',\n                  'aria-label': isCollapsed.value ? 'Expand sidebar' : 'Collapse sidebar',\n                  'aria-pressed': isCollapsed.value,\n                  onClick: () => setCollapsed(!isCollapsed.value),\n                },\n                [\n                  h(\n                    'svg',\n                    { viewBox: '0 0 16 16', width: '14', height: '14', 'aria-hidden': 'true' },\n                    [\n                      h('path', {\n                        d: isCollapsed.value ? 'M6 3.5L10.5 8L6 12.5' : 'M10 3.5L5.5 8L10 12.5',\n                        stroke: 'currentColor',\n                        'stroke-width': '1.6',\n                        fill: 'none',\n                        'stroke-linecap': 'round',\n                        'stroke-linejoin': 'round',\n                      }),\n                    ],\n                  ),\n                ],\n              )\n            : null,\n        ],\n      )\n    }\n  },\n})\n\n/**\n * The header + sidebar + content frame — the Vue counterpart of `@ansh-ui/react`'s `AppShell`.\n *\n * A grid rather than nested flex containers, so the sidebar and header can be `position: sticky`\n * without the content needing compensating margins — the arrangement that breaks the moment the\n * header's height changes.\n *\n * The skip link is the first focusable element on the page. It is the cheapest accessibility win\n * available and it is missing from almost every application shell: without it, a keyboard user\n * traverses the entire navigation on every single page load.\n *\n * `sidebar`/`header` are the `#sidebar`/`#header` slots (see `Sidebar`'s doc comment for why); the\n * main content is the default slot.\n */\nexport const AppShell = defineComponent({\n  name: 'AnshAppShell',\n  inheritAttrs: false,\n  setup(_props, { attrs, slots }) {\n    return () => {\n      const { class: attrClass } = attrs as Record<string, unknown>\n      const hasSidebar = Boolean(slots.sidebar)\n\n      return h(\n        'div',\n        { class: cx('ansh-shell', hasSidebar && 'ansh-shell--with-sidebar', attrClass as string) },\n        [\n          h('a', { href: '#ansh-main', class: 'ansh-skip-link' }, 'Skip to main content'),\n          slots.header ? h('header', { class: 'ansh-shell__header' }, slots.header()) : null,\n          hasSidebar ? h('aside', { class: 'ansh-shell__sidebar' }, slots.sidebar!()) : null,\n          h(\n            'main',\n            { class: 'ansh-shell__main', id: 'ansh-main', tabindex: '-1' },\n            slots.default?.(),\n          ),\n        ],\n      )\n    }\n  },\n})\n"]}