@scalar/sidebar 0.9.36 → 0.10.1

package/dist/components/ScalarSidebar.vue.d.ts

@@ -27,6 +27,13 @@ type __VLS_Props = {
      * The indentation in pixels to apply to nested items/groups in the sidebar.
      */
     indent?: number;
+    /**
+     * Returns the URL for a sidebar item.
+     *
+     * When provided (and it returns a value) items render as anchor tags
+     * instead of buttons, so search engines can crawl the navigation.
+     */
+    getHref?: (item: Item) => string | undefined;
     /**
      * Prevents this item from being dragged.
      *

package/dist/components/ScalarSidebar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"AAwKA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI3D,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,KAAK,EAAE,IAAI,EAAE,CAAA;IACb;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AA8BF,KAAK,WAAW,GAAG;IACjB,oCAAoC;IACpC,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,iEAAiE;IACjE,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,2DAA2D;IAC3D,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,4EAA4E;IAC5E,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,2CAA2C;IAC3C,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CACrD,CAAC;AA6KF,QAAA,MAAM,UAAU;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"AAiLA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI3D,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,KAAK,EAAE,IAAI,EAAE,CAAA;IACb;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS,CAAA;IAC5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AA+BF,KAAK,WAAW,GAAG;IACjB,oCAAoC;IACpC,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,iEAAiE;IACjE,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,2DAA2D;IAC3D,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,4EAA4E;IAC5E,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,2CAA2C;IAC3C,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CACrD,CAAC;AA+KF,QAAA,MAAM,UAAU;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSidebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.vue.js","names":[],"sources":["../../src/components/ScalarSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebar, ScalarSidebarItems } from '@scalar/components/sidebar'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n  DraggingItem,\n  HoveredItem,\n  UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarItem from './SidebarItem.vue'\n\nconst {\n  layout,\n  items,\n  indent = 20,\n} = defineProps<{\n  /**\n   * Layout type for the sidebar.\n   * Determines whether the sidebar should behave in 'client' or 'reference' mode.\n   */\n  layout: Layout\n  /**\n   * List of items to render in the sidebar.\n   */\n  items: Item[]\n  /**\n   * Function to determine whether a given item (by id) is currently selected.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine whether a given item (by id) is currently expanded (open to show children).\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n  /**\n   * The indentation in pixels to apply to nested items/groups in the sidebar.\n   */\n  indent?: number\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the user reorders sidebar items via drag-and-drop.\n   * @param draggingItem - The item being dragged.\n   * @param hoveredItem - The item currently being hovered over.\n   */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when a sidebar item is selected.\n   * @param id - The id of the selected item.\n   */\n  (e: 'selectItem', id: string): void\n\n  /**\n   * Emitted when the group is toggled.\n   * @param id - The id of the group.\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /** Overrides the main items list */\n  default?(): unknown\n  /** Adds an optional decorator for each item like an edit menu */\n  decorator?(props: { item: Item }): unknown\n  /** Places content at the top of the sidebar outside of the items list */\n  header?(): unknown\n  /** Places content between the header and the items list */\n  spacer?(): unknown\n  /** Places content at the bottom of the sidebar outside of the items list */\n  footer?(): unknown\n  /** Places content before the first item in the items list */\n  before?(): unknown\n  /** Places content when an item is empty */\n  empty?(props: { item: Item }): unknown\n  /** Places content when an item is empty */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\n/**\n * Handle drag and drop reordering of sidebar items.\n * Emit the reorder event to the parent component for handling.\n */\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n) => {\n  emit('reorder', draggingItem, hoveredItem)\n}\n</script>\n<template>\n  <ScalarSidebar\n    class=\"flex min-h-0 flex-col\"\n    :style=\"{ '--scalar-sidebar-indent': indent + 'px' }\">\n    <slot name=\"header\" />\n    <slot>\n      <ScalarSidebarItems class=\"custom-scroll\">\n        <!-- First item -->\n        <slot name=\"before\" />\n        <SidebarItem\n          v-for=\"item in filterItems(layout, items)\"\n          :key=\"item.id\"\n          :isDraggable=\"isDraggable ?? layout === 'client'\"\n          :isDroppable=\"isDroppable\"\n          :isExpanded=\"isExpanded\"\n          :isSelected=\"isSelected\"\n          :item=\"item\"\n          :layout=\"layout\"\n          :options=\"options\"\n          @onDragEnd=\"handleDragEnd\"\n          @selectItem=\"(id) => emit('selectItem', id)\"\n          @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n          <template\n            v-if=\"slots.decorator\"\n            #decorator=\"props\">\n            <slot\n              name=\"decorator\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.empty\"\n            #empty=\"props\">\n            <slot\n              name=\"empty\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.icon\"\n            #icon=\"props\">\n            <slot\n              name=\"icon\"\n              v-bind=\"props\" />\n          </template>\n        </SidebarItem>\n      </ScalarSidebarItems>\n      <!-- Spacer -->\n      <slot name=\"spacer\">\n        <div class=\"flex-1\"></div>\n      </slot>\n    </slot>\n    <slot name=\"footer\" />\n  </ScalarSidebar>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebar.vue.js","names":[],"sources":["../../src/components/ScalarSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebar, ScalarSidebarItems } from '@scalar/components/sidebar'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n  DraggingItem,\n  HoveredItem,\n  UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarItem from './SidebarItem.vue'\n\nconst {\n  layout,\n  items,\n  indent = 20,\n  getHref,\n} = defineProps<{\n  /**\n   * Layout type for the sidebar.\n   * Determines whether the sidebar should behave in 'client' or 'reference' mode.\n   */\n  layout: Layout\n  /**\n   * List of items to render in the sidebar.\n   */\n  items: Item[]\n  /**\n   * Function to determine whether a given item (by id) is currently selected.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine whether a given item (by id) is currently expanded (open to show children).\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n  /**\n   * The indentation in pixels to apply to nested items/groups in the sidebar.\n   */\n  indent?: number\n  /**\n   * Returns the URL for a sidebar item.\n   *\n   * When provided (and it returns a value) items render as anchor tags\n   * instead of buttons, so search engines can crawl the navigation.\n   */\n  getHref?: (item: Item) => string | undefined\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the user reorders sidebar items via drag-and-drop.\n   * @param draggingItem - The item being dragged.\n   * @param hoveredItem - The item currently being hovered over.\n   */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when a sidebar item is selected.\n   * @param id - The id of the selected item.\n   */\n  (e: 'selectItem', id: string): void\n\n  /**\n   * Emitted when the group is toggled.\n   * @param id - The id of the group.\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /** Overrides the main items list */\n  default?(): unknown\n  /** Adds an optional decorator for each item like an edit menu */\n  decorator?(props: { item: Item }): unknown\n  /** Places content at the top of the sidebar outside of the items list */\n  header?(): unknown\n  /** Places content between the header and the items list */\n  spacer?(): unknown\n  /** Places content at the bottom of the sidebar outside of the items list */\n  footer?(): unknown\n  /** Places content before the first item in the items list */\n  before?(): unknown\n  /** Places content when an item is empty */\n  empty?(props: { item: Item }): unknown\n  /** Places content when an item is empty */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\n/**\n * Handle drag and drop reordering of sidebar items.\n * Emit the reorder event to the parent component for handling.\n */\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n) => {\n  emit('reorder', draggingItem, hoveredItem)\n}\n</script>\n<template>\n  <ScalarSidebar\n    class=\"flex min-h-0 flex-col\"\n    :style=\"{ '--scalar-sidebar-indent': indent + 'px' }\">\n    <slot name=\"header\" />\n    <slot>\n      <ScalarSidebarItems class=\"custom-scroll\">\n        <!-- First item -->\n        <slot name=\"before\" />\n        <SidebarItem\n          v-for=\"item in filterItems(layout, items)\"\n          :key=\"item.id\"\n          :getHref=\"getHref\"\n          :isDraggable=\"isDraggable ?? layout === 'client'\"\n          :isDroppable=\"isDroppable\"\n          :isExpanded=\"isExpanded\"\n          :isSelected=\"isSelected\"\n          :item=\"item\"\n          :layout=\"layout\"\n          :options=\"options\"\n          @onDragEnd=\"handleDragEnd\"\n          @selectItem=\"(id) => emit('selectItem', id)\"\n          @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n          <template\n            v-if=\"slots.decorator\"\n            #decorator=\"props\">\n            <slot\n              name=\"decorator\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.empty\"\n            #empty=\"props\">\n            <slot\n              name=\"empty\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.icon\"\n            #icon=\"props\">\n            <slot\n              name=\"icon\"\n              v-bind=\"props\" />\n          </template>\n        </SidebarItem>\n      </ScalarSidebarItems>\n      <!-- Spacer -->\n      <slot name=\"spacer\">\n        <div class=\"flex-1\"></div>\n      </slot>\n    </slot>\n    <slot name=\"footer\" />\n  </ScalarSidebar>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar.vue.script.js

@@ -12,6 +12,7 @@ var ScalarSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		isExpanded: { type: Function },
 		options: {},
 		indent: { default: 20 },
+		getHref: { type: Function },
 		isDraggable: {},
 		isDroppable: { type: Function }
 	},
@@ -41,6 +42,7 @@ var ScalarSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						default: withCtx(() => [renderSlot(_ctx.$slots, "before"), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterItems)(__props.layout, __props.items), (item) => {
 							return openBlock(), createBlock(SidebarItem_default, {
 								key: item.id,
+								getHref: __props.getHref,
 								isDraggable: __props.isDraggable ?? __props.layout === "client",
 								isDroppable: __props.isDroppable,
 								isExpanded: __props.isExpanded,
@@ -68,6 +70,7 @@ var ScalarSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 									key: "2"
 								} : void 0
 							]), 1032, [
+								"getHref",
 								"isDraggable",
 								"isDroppable",
 								"isExpanded",

package/dist/components/ScalarSidebar.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.vue.script.js","names":[],"sources":["../../src/components/ScalarSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebar, ScalarSidebarItems } from '@scalar/components/sidebar'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n  DraggingItem,\n  HoveredItem,\n  UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarItem from './SidebarItem.vue'\n\nconst {\n  layout,\n  items,\n  indent = 20,\n} = defineProps<{\n  /**\n   * Layout type for the sidebar.\n   * Determines whether the sidebar should behave in 'client' or 'reference' mode.\n   */\n  layout: Layout\n  /**\n   * List of items to render in the sidebar.\n   */\n  items: Item[]\n  /**\n   * Function to determine whether a given item (by id) is currently selected.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine whether a given item (by id) is currently expanded (open to show children).\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n  /**\n   * The indentation in pixels to apply to nested items/groups in the sidebar.\n   */\n  indent?: number\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the user reorders sidebar items via drag-and-drop.\n   * @param draggingItem - The item being dragged.\n   * @param hoveredItem - The item currently being hovered over.\n   */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when a sidebar item is selected.\n   * @param id - The id of the selected item.\n   */\n  (e: 'selectItem', id: string): void\n\n  /**\n   * Emitted when the group is toggled.\n   * @param id - The id of the group.\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /** Overrides the main items list */\n  default?(): unknown\n  /** Adds an optional decorator for each item like an edit menu */\n  decorator?(props: { item: Item }): unknown\n  /** Places content at the top of the sidebar outside of the items list */\n  header?(): unknown\n  /** Places content between the header and the items list */\n  spacer?(): unknown\n  /** Places content at the bottom of the sidebar outside of the items list */\n  footer?(): unknown\n  /** Places content before the first item in the items list */\n  before?(): unknown\n  /** Places content when an item is empty */\n  empty?(props: { item: Item }): unknown\n  /** Places content when an item is empty */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\n/**\n * Handle drag and drop reordering of sidebar items.\n * Emit the reorder event to the parent component for handling.\n */\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n) => {\n  emit('reorder', draggingItem, hoveredItem)\n}\n</script>\n<template>\n  <ScalarSidebar\n    class=\"flex min-h-0 flex-col\"\n    :style=\"{ '--scalar-sidebar-indent': indent + 'px' }\">\n    <slot name=\"header\" />\n    <slot>\n      <ScalarSidebarItems class=\"custom-scroll\">\n        <!-- First item -->\n        <slot name=\"before\" />\n        <SidebarItem\n          v-for=\"item in filterItems(layout, items)\"\n          :key=\"item.id\"\n          :isDraggable=\"isDraggable ?? layout === 'client'\"\n          :isDroppable=\"isDroppable\"\n          :isExpanded=\"isExpanded\"\n          :isSelected=\"isSelected\"\n          :item=\"item\"\n          :layout=\"layout\"\n          :options=\"options\"\n          @onDragEnd=\"handleDragEnd\"\n          @selectItem=\"(id) => emit('selectItem', id)\"\n          @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n          <template\n            v-if=\"slots.decorator\"\n            #decorator=\"props\">\n            <slot\n              name=\"decorator\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.empty\"\n            #empty=\"props\">\n            <slot\n              name=\"empty\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.icon\"\n            #icon=\"props\">\n            <slot\n              name=\"icon\"\n              v-bind=\"props\" />\n          </template>\n        </SidebarItem>\n      </ScalarSidebarItems>\n      <!-- Spacer -->\n      <slot name=\"spacer\">\n        <div class=\"flex-1\"></div>\n      </slot>\n    </slot>\n    <slot name=\"footer\" />\n  </ScalarSidebar>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0DA,MAAM,OAAO;EAqBb,MAAM,QAAQ,SAAA;;;;;EAuBd,MAAM,iBACJ,cACA,gBACG;GACH,KAAK,WAAW,cAAc,WAAW;EAC3C;;uBAGE,YAkDgB,MAAA,aAAA,GAAA;IAjDd,OAAM;IACL,OAAK,eAAA,EAAA,2BAA+B,QAAA,SAAM,KAAA,CAAA;;2BACrB;KAAtB,WAAsB,KAAA,QAAA,QAAA;KACtB,WA4CO,KAAA,QAAA,WAAA,CAAA,SAAA,CA3CL,YAsCqB,MAAA,kBAAA,GAAA,EAtCD,OAAM,gBAAe,GAAA;6BAEjB,CAAtB,WAAsB,KAAA,QAAA,QAAA,IAAA,UAAA,IAAA,GACtB,mBAkCc,UAAA,MAAA,WAjCG,MAAA,WAAA,CAAW,CAAC,QAAA,QAAQ,QAAA,KAAK,IAAjC,SAAI;2BADb,YAkCc,qBAAA;QAhCX,KAAK,KAAK;QACV,aAAa,QAAA,eAAe,QAAA,WAAM;QAClC,aAAa,QAAA;QACb,YAAY,QAAA;QACZ,YAAY,QAAA;QACN;QACN,QAAQ,QAAA;QACR,SAAS,QAAA;QACT,aAAW;QACX,cAAU,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,cAAe,EAAE;QACzC,eAAW,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,eAAgB,EAAE;;QAEpC,MAAM,YAAA;eACX;sBAAW,UAAK,CACjB,WAEmB,KAAA,QAAA,aAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,QAAA;eACX;sBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,OAAA;eACX;sBAAM,UAAK,CACZ,WAEmB,KAAA,QAAA,QAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;;;;;;;;;;;;SAKrB,WAEO,KAAA,QAAA,UAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KADL,mBAA0B,OAAA,EAArB,OAAM,SAAQ,GAAA,MAAA,EAAA,EAAA,CAAA,CAAA,CAAA;KAGvB,WAAsB,KAAA,QAAA,QAAA"}
+{"version":3,"file":"ScalarSidebar.vue.script.js","names":[],"sources":["../../src/components/ScalarSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebar, ScalarSidebarItems } from '@scalar/components/sidebar'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n  DraggingItem,\n  HoveredItem,\n  UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarItem from './SidebarItem.vue'\n\nconst {\n  layout,\n  items,\n  indent = 20,\n  getHref,\n} = defineProps<{\n  /**\n   * Layout type for the sidebar.\n   * Determines whether the sidebar should behave in 'client' or 'reference' mode.\n   */\n  layout: Layout\n  /**\n   * List of items to render in the sidebar.\n   */\n  items: Item[]\n  /**\n   * Function to determine whether a given item (by id) is currently selected.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine whether a given item (by id) is currently expanded (open to show children).\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n  /**\n   * The indentation in pixels to apply to nested items/groups in the sidebar.\n   */\n  indent?: number\n  /**\n   * Returns the URL for a sidebar item.\n   *\n   * When provided (and it returns a value) items render as anchor tags\n   * instead of buttons, so search engines can crawl the navigation.\n   */\n  getHref?: (item: Item) => string | undefined\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the user reorders sidebar items via drag-and-drop.\n   * @param draggingItem - The item being dragged.\n   * @param hoveredItem - The item currently being hovered over.\n   */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when a sidebar item is selected.\n   * @param id - The id of the selected item.\n   */\n  (e: 'selectItem', id: string): void\n\n  /**\n   * Emitted when the group is toggled.\n   * @param id - The id of the group.\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /** Overrides the main items list */\n  default?(): unknown\n  /** Adds an optional decorator for each item like an edit menu */\n  decorator?(props: { item: Item }): unknown\n  /** Places content at the top of the sidebar outside of the items list */\n  header?(): unknown\n  /** Places content between the header and the items list */\n  spacer?(): unknown\n  /** Places content at the bottom of the sidebar outside of the items list */\n  footer?(): unknown\n  /** Places content before the first item in the items list */\n  before?(): unknown\n  /** Places content when an item is empty */\n  empty?(props: { item: Item }): unknown\n  /** Places content when an item is empty */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\n/**\n * Handle drag and drop reordering of sidebar items.\n * Emit the reorder event to the parent component for handling.\n */\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n) => {\n  emit('reorder', draggingItem, hoveredItem)\n}\n</script>\n<template>\n  <ScalarSidebar\n    class=\"flex min-h-0 flex-col\"\n    :style=\"{ '--scalar-sidebar-indent': indent + 'px' }\">\n    <slot name=\"header\" />\n    <slot>\n      <ScalarSidebarItems class=\"custom-scroll\">\n        <!-- First item -->\n        <slot name=\"before\" />\n        <SidebarItem\n          v-for=\"item in filterItems(layout, items)\"\n          :key=\"item.id\"\n          :getHref=\"getHref\"\n          :isDraggable=\"isDraggable ?? layout === 'client'\"\n          :isDroppable=\"isDroppable\"\n          :isExpanded=\"isExpanded\"\n          :isSelected=\"isSelected\"\n          :item=\"item\"\n          :layout=\"layout\"\n          :options=\"options\"\n          @onDragEnd=\"handleDragEnd\"\n          @selectItem=\"(id) => emit('selectItem', id)\"\n          @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n          <template\n            v-if=\"slots.decorator\"\n            #decorator=\"props\">\n            <slot\n              name=\"decorator\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.empty\"\n            #empty=\"props\">\n            <slot\n              name=\"empty\"\n              v-bind=\"props\" />\n          </template>\n          <template\n            v-if=\"slots.icon\"\n            #icon=\"props\">\n            <slot\n              name=\"icon\"\n              v-bind=\"props\" />\n          </template>\n        </SidebarItem>\n      </ScalarSidebarItems>\n      <!-- Spacer -->\n      <slot name=\"spacer\">\n        <div class=\"flex-1\"></div>\n      </slot>\n    </slot>\n    <slot name=\"footer\" />\n  </ScalarSidebar>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAkEA,MAAM,OAAO;EAqBb,MAAM,QAAQ,SAAA;;;;;EAuBd,MAAM,iBACJ,cACA,gBACG;GACH,KAAK,WAAW,cAAc,WAAW;EAC3C;;uBAGE,YAmDgB,MAAA,aAAA,GAAA;IAlDd,OAAM;IACL,OAAK,eAAA,EAAA,2BAA+B,QAAA,SAAM,KAAA,CAAA;;2BACrB;KAAtB,WAAsB,KAAA,QAAA,QAAA;KACtB,WA6CO,KAAA,QAAA,WAAA,CAAA,SAAA,CA5CL,YAuCqB,MAAA,kBAAA,GAAA,EAvCD,OAAM,gBAAe,GAAA;6BAEjB,CAAtB,WAAsB,KAAA,QAAA,QAAA,IAAA,UAAA,IAAA,GACtB,mBAmCc,UAAA,MAAA,WAlCG,MAAA,WAAA,CAAW,CAAC,QAAA,QAAQ,QAAA,KAAK,IAAjC,SAAI;2BADb,YAmCc,qBAAA;QAjCX,KAAK,KAAK;QACV,SAAS,QAAA;QACT,aAAa,QAAA,eAAe,QAAA,WAAM;QAClC,aAAa,QAAA;QACb,YAAY,QAAA;QACZ,YAAY,QAAA;QACN;QACN,QAAQ,QAAA;QACR,SAAS,QAAA;QACT,aAAW;QACX,cAAU,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,cAAe,EAAE;QACzC,eAAW,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,eAAgB,EAAE;;QAEpC,MAAM,YAAA;eACX;sBAAW,UAAK,CACjB,WAEmB,KAAA,QAAA,aAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,QAAA;eACX;sBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,OAAA;eACX;sBAAM,UAAK,CACZ,WAEmB,KAAA,QAAA,QAFnB,WAEmB,EAAA,SAAA,KAAA,GAAT,KAAK,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;SAKrB,WAEO,KAAA,QAAA,UAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KADL,mBAA0B,OAAA,EAArB,OAAM,SAAQ,GAAA,MAAA,EAAA,EAAA,CAAA,CAAA,CAAA;KAGvB,WAAsB,KAAA,QAAA,QAAA"}

package/dist/components/SidebarItem.vue.d.ts

@@ -22,6 +22,13 @@ type __VLS_Props = {
      * - operationTitleSource: sets whether operations show their path or summary as the display title.
      */
     options?: SidebarOptions;
+    /**
+     * Returns the URL for a sidebar item.
+     *
+     * When provided (and it returns a value) items render as anchor tags
+     * instead of buttons, so search engines can crawl the navigation.
+     */
+    getHref?: (item: Item) => string | undefined;
     /**
      * Prevents this item from being dragged.
      *

package/dist/components/SidebarItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"AAyYA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK3D,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AAiCF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C;;;OAGG;IACH,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CACrD,CAAC;AAonBF,QAAA,MAAM,UAAU;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"AAqeA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK3D,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS,CAAA;IAE5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AAkCF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C;;;OAGG;IACH,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CACrD,CAAC;AA+wBF,QAAA,MAAM,UAAU;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/SidebarItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.vue.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ScalarSidebarGroup,\n  ScalarSidebarGroupToggle,\n  ScalarSidebarItem,\n  ScalarSidebarSection,\n} from '@scalar/components/sidebar'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport SidebarItemDecorator from '@/components/SidebarItemDecorator.vue'\nimport { filterItems } from '@/helpers/filter-items'\nimport { hasChildren } from '@/helpers/has-children'\nimport { isSidebarFolder } from '@/helpers/is-sidebar-folder'\nimport {\n  useDraggable,\n  type DraggingItem,\n  type HoveredItem,\n  type UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst {\n  item,\n  layout,\n  isSelected,\n  isExpanded,\n  isDraggable,\n  isDroppable,\n  options,\n} = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The layout mode for the sidebar ('client' or 'reference').\n   */\n  layout: Layout\n  /**\n   * Function to determine if an item is currently selected by id.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine if an item is currently expanded (showing its children) by id.\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the item is selected\n   * @param id - The id of the selected item\n   */\n  (e: 'selectItem', id: string): void\n  /**\n   * Emitted when a drag operation ends for this item\n   * @param draggingItem - The item being dragged\n   * @param hoveredItem - The item currently being hovered over\n   */\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when the group is toggled\n   * @param id - The id of the group\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /**\n   * Adds an optional decorator for each item, such as an edit menu.\n   * The slot receives an object with the current item.\n   */\n  decorator?(props: { item: Item }): unknown\n  /**\n   * Adds an optional empty state for an item.\n   * The slot receives an object with the current item.\n   */\n  empty?(props: { item: Item }): unknown\n  /**\n   * Adds an optional icon for each item.\n   * The slot receives an object with the current item and the open state.\n   */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\nconst isGroup = (\n  currentItem: Item,\n): currentItem is Item & { isGroup: true } => {\n  return 'isGroup' in currentItem && currentItem.isGroup\n}\n\nconst isDeprecated = (\n  currentItem: Item,\n): currentItem is Item & { isDeprecated: true } => {\n  return ('isDeprecated' in currentItem && currentItem.isDeprecated) ?? false\n}\n\n/**\n * Handle drag end event and bubble it up to parent.\n */\nconst onDragEnd = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n  emit('onDragEnd', draggingItem, hoveredItem)\n}\nconst { draggableAttrs, draggableEvents } = useDraggable({\n  id: item.id,\n  isDraggable,\n  isDroppable,\n  onDragEnd,\n})\n\nconst children = computed(() =>\n  hasChildren(item)\n    ? filterItems(layout, item.children, options?.hideOperationDefaultExamples)\n    : [],\n)\n</script>\n<template>\n  <!-- Sidebar section -->\n  <ScalarSidebarSection\n    v-if=\"children.length > 0 && isGroup(item)\"\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    v-on=\"draggableEvents\">\n    {{ item.title }}\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n    </template>\n  </ScalarSidebarSection>\n\n  <!-- Sidebar group (folder) -->\n  <ScalarSidebarGroup\n    v-else-if=\"\n      isSidebarFolder(\n        layout,\n        item,\n        slots.empty !== undefined,\n        options?.hideOperationDefaultExamples ?? false,\n      )\n    \"\n    :active=\"isSelected(item.id)\"\n    class=\"relative\"\n    controlled\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    :discrete=\"layout === 'reference' && item.type === 'text'\"\n    :open=\"isExpanded(item.id)\"\n    v-on=\"draggableEvents\"\n    @click=\"() => emit('selectItem', item.id)\"\n    @toggle=\"() => emit('toggleGroup', item.id)\">\n    <template\n      v-if=\"item.type === 'document'\"\n      #icon=\"{ open }\">\n      <slot\n        :item=\"item\"\n        name=\"icon\"\n        :open=\"open\">\n        <LibraryIcon\n          class=\"block\"\n          :src=\"('icon' in item && item.icon) || 'interface-content-folder'\" />\n      </slot>\n    </template>\n    <span\n      v-if=\"isDeprecated(item)\"\n      class=\"line-through\">\n      <SidebarItemLabel\n        :item\n        :operationTitleSource=\"options?.operationTitleSource\" />\n    </span>\n    <SidebarItemLabel\n      v-else\n      :item\n      :operationTitleSource=\"options?.operationTitleSource\" />\n    <template\n      v-if=\"'method' in item\"\n      #aside>\n      <SidebarHttpBadge\n        :active=\"isSelected(item.id)\"\n        class=\"ml-2 h-4 self-start\"\n        :class=\"{\n          // Hide the badge when we're showing the decorator\n          'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n            slots.decorator,\n        }\"\n        :label=\"options?.labels?.httpMethod\"\n        :method=\"item.method\"\n        :webhook=\"item.type === 'webhook'\" />\n    </template>\n    <!--\n      Hide the chevron\n    -->\n    <template\n      v-if=\"'method' in item\"\n      #toggle>\n      <span class=\"hidden\"></span>\n    </template>\n    <template\n      v-else\n      #toggle=\"{ open }\">\n      <ScalarSidebarGroupToggle\n        class=\"text-sidebar-c-2\"\n        :open>\n        <template #label>\n          {{\n            open\n              ? (options?.labels?.closeGroup ?? 'Close Group')\n              : (options?.labels?.openGroup ?? 'Open Group')\n          }}\n        </template>\n      </ScalarSidebarGroupToggle>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        :parentIds=\"[]\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n      <template v-if=\"slots.empty && (item.children?.length ?? 0) === 0\">\n        <slot\n          :item\n          name=\"empty\" />\n      </template>\n    </template>\n  </ScalarSidebarGroup>\n\n  <!-- Sidebar item (leaf node) -->\n  <ScalarSidebarItem\n    is=\"button\"\n    v-else\n    v-bind=\"draggableAttrs\"\n    class=\"relative\"\n    :data-sidebar-id=\"item.id\"\n    :selected=\"isSelected(item.id)\"\n    v-on=\"draggableEvents\"\n    @click=\"() => emit('selectItem', item.id)\">\n    <template\n      v-if=\"slots.icon\"\n      #icon>\n      <slot\n        :item=\"item\"\n        name=\"icon\"\n        :open=\"true\" />\n    </template>\n    <span\n      v-if=\"isDeprecated(item)\"\n      class=\"line-through\">\n      <SidebarItemLabel\n        :item\n        :operationTitleSource=\"options?.operationTitleSource\" />\n    </span>\n    <SidebarItemLabel\n      v-else\n      :item\n      :operationTitleSource=\"options?.operationTitleSource\" />\n    <template\n      v-if=\"'method' in item\"\n      #aside>\n      <SidebarHttpBadge\n        v-if=\"'method' in item\"\n        :active=\"isSelected(item.id)\"\n        class=\"ml-2 h-4 self-start\"\n        :class=\"{\n          // Hide the badge when we're showing the decorator\n          'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n            slots.decorator,\n        }\"\n        :label=\"options?.labels?.httpMethod\"\n        :method=\"item.method\"\n        :webhook=\"item.type === 'webhook'\" />\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n  </ScalarSidebarItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SidebarItem.vue.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ScalarSidebarButton,\n  ScalarSidebarGroup,\n  ScalarSidebarGroupToggle,\n  ScalarSidebarGroupToggleButton,\n  ScalarSidebarGroupToggleSpacer,\n  ScalarSidebarIndent,\n  ScalarSidebarItem,\n  ScalarSidebarSection,\n} from '@scalar/components/sidebar'\nimport { isPlainLeftClick } from '@scalar/helpers/dom/is-plain-left-click'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport SidebarItemDecorator from '@/components/SidebarItemDecorator.vue'\nimport { filterItems } from '@/helpers/filter-items'\nimport { hasChildren } from '@/helpers/has-children'\nimport { isSidebarFolder } from '@/helpers/is-sidebar-folder'\nimport {\n  useDraggable,\n  type DraggingItem,\n  type HoveredItem,\n  type UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst {\n  item,\n  layout,\n  isSelected,\n  isExpanded,\n  isDraggable,\n  isDroppable,\n  options,\n  getHref,\n} = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The layout mode for the sidebar ('client' or 'reference').\n   */\n  layout: Layout\n  /**\n   * Function to determine if an item is currently selected by id.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine if an item is currently expanded (showing its children) by id.\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n\n  /**\n   * Returns the URL for a sidebar item.\n   *\n   * When provided (and it returns a value) items render as anchor tags\n   * instead of buttons, so search engines can crawl the navigation.\n   */\n  getHref?: (item: Item) => string | undefined\n\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the item is selected\n   * @param id - The id of the selected item\n   */\n  (e: 'selectItem', id: string): void\n  /**\n   * Emitted when a drag operation ends for this item\n   * @param draggingItem - The item being dragged\n   * @param hoveredItem - The item currently being hovered over\n   */\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when the group is toggled\n   * @param id - The id of the group\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /**\n   * Adds an optional decorator for each item, such as an edit menu.\n   * The slot receives an object with the current item.\n   */\n  decorator?(props: { item: Item }): unknown\n  /**\n   * Adds an optional empty state for an item.\n   * The slot receives an object with the current item.\n   */\n  empty?(props: { item: Item }): unknown\n  /**\n   * Adds an optional icon for each item.\n   * The slot receives an object with the current item and the open state.\n   */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\nconst isGroup = (\n  currentItem: Item,\n): currentItem is Item & { isGroup: true } => {\n  return 'isGroup' in currentItem && currentItem.isGroup\n}\n\nconst isDeprecated = (\n  currentItem: Item,\n): currentItem is Item & { isDeprecated: true } => {\n  return ('isDeprecated' in currentItem && currentItem.isDeprecated) ?? false\n}\n\n/**\n * Handle drag end event and bubble it up to parent.\n */\nconst onDragEnd = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n  emit('onDragEnd', draggingItem, hoveredItem)\n}\nconst { draggableAttrs, draggableEvents } = useDraggable({\n  id: item.id,\n  isDraggable,\n  isDroppable,\n  onDragEnd,\n})\n\nconst children = computed(() =>\n  hasChildren(item)\n    ? filterItems(layout, item.children, options?.hideOperationDefaultExamples)\n    : [],\n)\n\n/** The URL for this item, when the consumer provides one it renders as a link */\nconst href = computed(() => getHref?.(item) || undefined)\n\n/**\n * Whether the group renders its toggle separately from its label.\n *\n * A label that navigates cannot also own the open state, so a group that\n * renders as a link needs a toggle button of its own. Without one there is no\n * way to collapse the group from the keyboard, because pressing Enter on the\n * label follows the link instead.\n */\nconst isDiscrete = computed(\n  () => Boolean(href.value) || (layout === 'reference' && item.type === 'text'),\n)\n\n/**\n * Builds the screen reader label for the discrete group toggle.\n *\n * The title of the group is appended so the toggles can be told apart. A page\n * can hold a lot of them, and a list of identical \"Open Group\" buttons gives a\n * screen reader user nothing to navigate by.\n */\nconst getToggleLabel = (open: boolean): string => {\n  const label = open\n    ? (options?.labels?.closeGroup ?? 'Close Group')\n    : (options?.labels?.openGroup ?? 'Open Group')\n\n  return item.title ? `${label} - ${item.title}` : label\n}\n\n/**\n * Emit the select event for a click on the item label.\n *\n * When the item renders as a link we only hijack plain left clicks on the\n * link itself for in-app navigation. Modified clicks (meta, ctrl, shift,\n * alt) and middle clicks keep the browser's default behavior so the link\n * can be opened in a new tab or window, and clicks on surrounding content\n * (like the decorator menu) keep their native behavior. A click whose\n * default is already prevented has been handled by someone else, so it is\n * left alone rather than navigated a second time.\n */\nconst handleSelect = (event: MouseEvent) => {\n  if (href.value) {\n    const anchor =\n      event.target instanceof Element ? event.target.closest('a') : null\n    if (anchor?.getAttribute('href') !== href.value) {\n      return\n    }\n    if (event.defaultPrevented || !isPlainLeftClick(event)) {\n      return\n    }\n    event.preventDefault()\n  }\n  emit('selectItem', item.id)\n}\n</script>\n<template>\n  <!-- Sidebar section -->\n  <ScalarSidebarSection\n    v-if=\"children.length > 0 && isGroup(item)\"\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    v-on=\"draggableEvents\">\n    {{ item.title }}\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :getHref=\"getHref\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n    </template>\n  </ScalarSidebarSection>\n\n  <!-- Sidebar group (folder) -->\n  <ScalarSidebarGroup\n    v-else-if=\"\n      isSidebarFolder(\n        layout,\n        item,\n        slots.empty !== undefined,\n        options?.hideOperationDefaultExamples ?? false,\n      )\n    \"\n    :active=\"isSelected(item.id)\"\n    class=\"relative\"\n    controlled\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    :discrete=\"isDiscrete\"\n    :open=\"isExpanded(item.id)\"\n    v-on=\"draggableEvents\">\n    <template #button=\"{ open, level }\">\n      <ScalarSidebarButton\n        :is=\"href ? 'a' : 'button'\"\n        :active=\"isSelected(item.id)\"\n        :aria-expanded=\"isDiscrete ? undefined : open\"\n        :href=\"href\"\n        :indent=\"level\"\n        @click=\"handleSelect\">\n        <template #indent>\n          <ScalarSidebarIndent\n            class=\"-my-2 mr-0\"\n            :indent=\"level\" />\n        </template>\n        <template\n          v-if=\"item.type === 'document'\"\n          #icon>\n          <slot\n            :item=\"item\"\n            name=\"icon\"\n            :open=\"open\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n          </slot>\n        </template>\n        <span\n          v-if=\"isDeprecated(item)\"\n          class=\"line-through\">\n          <SidebarItemLabel\n            :item\n            :operationTitleSource=\"options?.operationTitleSource\" />\n        </span>\n        <SidebarItemLabel\n          v-else\n          :item\n          :operationTitleSource=\"options?.operationTitleSource\" />\n        <template #aside>\n          <SidebarHttpBadge\n            v-if=\"'method' in item\"\n            :active=\"isSelected(item.id)\"\n            class=\"ml-2 h-4 self-start\"\n            :class=\"{\n              // Hide the badge when we're showing the decorator\n              'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n                slots.decorator,\n            }\"\n            :label=\"options?.labels?.httpMethod\"\n            :method=\"item.method\"\n            :webhook=\"item.type === 'webhook'\" />\n          <ScalarSidebarGroupToggleSpacer v-if=\"isDiscrete\" />\n          <ScalarSidebarGroupToggle\n            v-else-if=\"!('method' in item)\"\n            class=\"text-sidebar-c-2\"\n            :open>\n            <template #label>\n              {{\n                open\n                  ? (options?.labels?.closeGroup ?? 'Close Group')\n                  : (options?.labels?.openGroup ?? 'Open Group')\n              }}\n            </template>\n          </ScalarSidebarGroupToggle>\n        </template>\n      </ScalarSidebarButton>\n      <ScalarSidebarGroupToggleButton\n        v-if=\"isDiscrete\"\n        :open\n        @click=\"() => emit('toggleGroup', item.id)\">\n        <template #label>{{ getToggleLabel(open) }}</template>\n      </ScalarSidebarGroupToggleButton>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :getHref=\"getHref\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        :parentIds=\"[]\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n      <template v-if=\"slots.empty && (item.children?.length ?? 0) === 0\">\n        <slot\n          :item\n          name=\"empty\" />\n      </template>\n    </template>\n  </ScalarSidebarGroup>\n\n  <!-- Sidebar item (leaf node) -->\n  <ScalarSidebarItem\n    v-else\n    v-bind=\"draggableAttrs\"\n    class=\"relative\"\n    :data-sidebar-id=\"item.id\"\n    v-on=\"draggableEvents\"\n    @click=\"handleSelect\">\n    <template #button=\"{ level }\">\n      <ScalarSidebarButton\n        :is=\"href ? 'a' : 'button'\"\n        :href=\"href\"\n        :indent=\"level\"\n        :selected=\"isSelected(item.id)\">\n        <template\n          v-if=\"slots.icon\"\n          #icon>\n          <slot\n            :item=\"item\"\n            name=\"icon\"\n            :open=\"true\" />\n        </template>\n        <span\n          v-if=\"isDeprecated(item)\"\n          class=\"line-through\">\n          <SidebarItemLabel\n            :item\n            :operationTitleSource=\"options?.operationTitleSource\" />\n        </span>\n        <SidebarItemLabel\n          v-else\n          :item\n          :operationTitleSource=\"options?.operationTitleSource\" />\n        <template\n          v-if=\"'method' in item\"\n          #aside>\n          <SidebarHttpBadge\n            :active=\"isSelected(item.id)\"\n            class=\"ml-2 h-4 self-start\"\n            :class=\"{\n              // Hide the badge when we're showing the decorator\n              'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n                slots.decorator,\n            }\"\n            :label=\"options?.labels?.httpMethod\"\n            :method=\"item.method\"\n            :webhook=\"item.type === 'webhook'\" />\n        </template>\n      </ScalarSidebarButton>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n  </ScalarSidebarItem>\n</template>\n"],"mappings":""}

package/dist/components/SidebarItem.vue.script.js

@@ -5,8 +5,9 @@ import { isSidebarFolder } from "../helpers/is-sidebar-folder.js";
 import { useDraggable } from "../hooks/use-draggable.js";
 import SidebarHttpBadge_default from "./SidebarHttpBadge.vue.js";
 import SidebarItemLabel_default from "./SidebarItemLabel.vue.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toHandlers, unref, useSlots, withCtx } from "vue";
-import { ScalarSidebarGroup, ScalarSidebarGroupToggle, ScalarSidebarItem, ScalarSidebarSection } from "@scalar/components/sidebar";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toHandlers, unref, useSlots, withCtx } from "vue";
+import { ScalarSidebarButton, ScalarSidebarGroup, ScalarSidebarGroupToggle, ScalarSidebarGroupToggleButton, ScalarSidebarGroupToggleSpacer, ScalarSidebarIndent, ScalarSidebarItem, ScalarSidebarSection } from "@scalar/components/sidebar";
+import { isPlainLeftClick } from "@scalar/helpers/dom/is-plain-left-click";
 import { LibraryIcon } from "@scalar/icons/library";
 //#region src/components/SidebarItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -25,6 +26,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		isSelected: { type: Function },
 		isExpanded: { type: Function },
 		options: {},
+		getHref: { type: Function },
 		isDraggable: {},
 		isDroppable: { type: Function }
 	},
@@ -55,6 +57,47 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			onDragEnd
 		});
 		const children = computed(() => hasChildren(__props.item) ? filterItems(__props.layout, __props.item.children, __props.options?.hideOperationDefaultExamples) : []);
+		/** The URL for this item, when the consumer provides one it renders as a link */
+		const href = computed(() => __props.getHref?.(__props.item) || void 0);
+		/**
+		* Whether the group renders its toggle separately from its label.
+		*
+		* A label that navigates cannot also own the open state, so a group that
+		* renders as a link needs a toggle button of its own. Without one there is no
+		* way to collapse the group from the keyboard, because pressing Enter on the
+		* label follows the link instead.
+		*/
+		const isDiscrete = computed(() => Boolean(href.value) || __props.layout === "reference" && __props.item.type === "text");
+		/**
+		* Builds the screen reader label for the discrete group toggle.
+		*
+		* The title of the group is appended so the toggles can be told apart. A page
+		* can hold a lot of them, and a list of identical "Open Group" buttons gives a
+		* screen reader user nothing to navigate by.
+		*/
+		const getToggleLabel = (open) => {
+			const label = open ? __props.options?.labels?.closeGroup ?? "Close Group" : __props.options?.labels?.openGroup ?? "Open Group";
+			return __props.item.title ? `${label} - ${__props.item.title}` : label;
+		};
+		/**
+		* Emit the select event for a click on the item label.
+		*
+		* When the item renders as a link we only hijack plain left clicks on the
+		* link itself for in-app navigation. Modified clicks (meta, ctrl, shift,
+		* alt) and middle clicks keep the browser's default behavior so the link
+		* can be opened in a new tab or window, and clicks on surrounding content
+		* (like the decorator menu) keep their native behavior. A click whose
+		* default is already prevented has been handled by someone else, so it is
+		* left alone rather than navigated a second time.
+		*/
+		const handleSelect = (event) => {
+			if (href.value) {
+				if ((event.target instanceof Element ? event.target.closest("a") : null)?.getAttribute("href") !== href.value) return;
+				if (event.defaultPrevented || !isPlainLeftClick(event)) return;
+				event.preventDefault();
+			}
+			emit("selectItem", __props.item.id);
+		};
 		return (_ctx, _cache) => {
 			const _component_SidebarItem = resolveComponent("SidebarItem", true);
 			return children.value.length > 0 && isGroup(__props.item) ? (openBlock(), createBlock(unref(ScalarSidebarSection), mergeProps({
@@ -64,6 +107,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
 					return openBlock(), createBlock(_component_SidebarItem, {
 						key: child.id,
+						getHref: __props.getHref,
 						isDraggable: __props.isDraggable,
 						isDroppable: __props.isDroppable,
 						isExpanded: __props.isExpanded,
@@ -91,6 +135,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 							key: "2"
 						} : void 0
 					]), 1032, [
+						"getHref",
 						"isDraggable",
 						"isDroppable",
 						"isExpanded",
@@ -109,15 +154,79 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				controlled: "",
 				"data-sidebar-id": __props.item.id
 			}, unref(draggableAttrs), {
-				discrete: __props.layout === "reference" && __props.item.type === "text",
+				discrete: isDiscrete.value,
 				open: __props.isExpanded(__props.item.id)
-			}, toHandlers(unref(draggableEvents)), {
-				onClick: _cache[4] || (_cache[4] = () => emit("selectItem", __props.item.id)),
-				onToggle: _cache[5] || (_cache[5] = () => emit("toggleGroup", __props.item.id))
-			}), createSlots({
+			}, toHandlers(unref(draggableEvents))), createSlots({
+				button: withCtx(({ open, level }) => [createVNode(unref(ScalarSidebarButton), {
+					is: href.value ? "a" : "button",
+					active: __props.isSelected(__props.item.id),
+					"aria-expanded": isDiscrete.value ? void 0 : open,
+					href: href.value,
+					indent: level,
+					onClick: handleSelect
+				}, createSlots({
+					indent: withCtx(() => [createVNode(unref(ScalarSidebarIndent), {
+						class: "-my-2 mr-0",
+						indent: level
+					}, null, 8, ["indent"])]),
+					aside: withCtx(() => ["method" in __props.item ? (openBlock(), createBlock(SidebarHttpBadge_default, {
+						key: 0,
+						active: __props.isSelected(__props.item.id),
+						class: normalizeClass(["ml-2 h-4 self-start", { "group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0": slots.decorator }]),
+						label: __props.options?.labels?.httpMethod,
+						method: __props.item.method,
+						webhook: __props.item.type === "webhook"
+					}, null, 8, [
+						"active",
+						"class",
+						"label",
+						"method",
+						"webhook"
+					])) : createCommentVNode("", true), isDiscrete.value ? (openBlock(), createBlock(unref(ScalarSidebarGroupToggleSpacer), { key: 1 })) : !("method" in __props.item) ? (openBlock(), createBlock(unref(ScalarSidebarGroupToggle), {
+						key: 2,
+						class: "text-sidebar-c-2",
+						open
+					}, {
+						label: withCtx(() => [createTextVNode(toDisplayString(open ? __props.options?.labels?.closeGroup ?? "Close Group" : __props.options?.labels?.openGroup ?? "Open Group"), 1)]),
+						_: 2
+					}, 1032, ["open"])) : createCommentVNode("", true)]),
+					default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(SidebarItemLabel_default, {
+						item: __props.item,
+						operationTitleSource: __props.options?.operationTitleSource
+					}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
+						key: 1,
+						item: __props.item,
+						operationTitleSource: __props.options?.operationTitleSource
+					}, null, 8, ["item", "operationTitleSource"]))]),
+					_: 2
+				}, [__props.item.type === "document" ? {
+					name: "icon",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {
+						item: __props.item,
+						open
+					}, () => [createVNode(unref(LibraryIcon), {
+						class: "block",
+						src: "icon" in __props.item && __props.item.icon || "interface-content-folder"
+					}, null, 8, ["src"])])]),
+					key: "0"
+				} : void 0]), 1032, [
+					"is",
+					"active",
+					"aria-expanded",
+					"href",
+					"indent"
+				]), isDiscrete.value ? (openBlock(), createBlock(unref(ScalarSidebarGroupToggleButton), {
+					key: 0,
+					open,
+					onClick: _cache[2] || (_cache[2] = () => emit("toggleGroup", __props.item.id))
+				}, {
+					label: withCtx(() => [createTextVNode(toDisplayString(getToggleLabel(open)), 1)]),
+					_: 2
+				}, 1032, ["open"])) : createCommentVNode("", true)]),
 				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
 					return openBlock(), createBlock(_component_SidebarItem, {
 						key: child.id,
+						getHref: __props.getHref,
 						isDraggable: __props.isDraggable,
 						isDroppable: __props.isDroppable,
 						isExpanded: __props.isExpanded,
@@ -127,8 +236,8 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						options: __props.options,
 						parentIds: [],
 						onOnDragEnd: onDragEnd,
-						onSelectItem: _cache[2] || (_cache[2] = (id) => emit("selectItem", id)),
-						onToggleGroup: _cache[3] || (_cache[3] = (id) => emit("toggleGroup", id))
+						onSelectItem: _cache[3] || (_cache[3] = (id) => emit("selectItem", id)),
+						onToggleGroup: _cache[4] || (_cache[4] = (id) => emit("toggleGroup", id))
 					}, createSlots({ _: 2 }, [
 						slots.decorator ? {
 							name: "decorator",
@@ -146,6 +255,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 							key: "2"
 						} : void 0
 					]), 1032, [
+						"getHref",
 						"isDraggable",
 						"isDroppable",
 						"isExpanded",
@@ -155,102 +265,48 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"options"
 					]);
 				}), 128)), slots.empty && (__props.item.children?.length ?? 0) === 0 ? renderSlot(_ctx.$slots, "empty", { item: __props.item }, void 0, void 0, 0) : createCommentVNode("", true)]),
-				default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(SidebarItemLabel_default, {
-					item: __props.item,
-					operationTitleSource: __props.options?.operationTitleSource
-				}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
-					key: 1,
-					item: __props.item,
-					operationTitleSource: __props.options?.operationTitleSource
-				}, null, 8, ["item", "operationTitleSource"]))]),
 				_: 2
-			}, [
-				__props.item.type === "document" ? {
-					name: "icon",
-					fn: withCtx(({ open }) => [renderSlot(_ctx.$slots, "icon", {
-						item: __props.item,
-						open
-					}, () => [createVNode(unref(LibraryIcon), {
-						class: "block",
-						src: "icon" in __props.item && __props.item.icon || "interface-content-folder"
-					}, null, 8, ["src"])])]),
-					key: "0"
-				} : void 0,
-				"method" in __props.item ? {
-					name: "aside",
-					fn: withCtx(() => [createVNode(SidebarHttpBadge_default, {
-						active: __props.isSelected(__props.item.id),
-						class: normalizeClass(["ml-2 h-4 self-start", { "group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0": slots.decorator }]),
-						label: __props.options?.labels?.httpMethod,
-						method: __props.item.method,
-						webhook: __props.item.type === "webhook"
-					}, null, 8, [
-						"active",
-						"class",
-						"label",
-						"method",
-						"webhook"
-					])]),
-					key: "1"
-				} : void 0,
-				"method" in __props.item ? {
-					name: "toggle",
-					fn: withCtx(() => [_cache[7] || (_cache[7] = createElementVNode("span", { class: "hidden" }, null, -1))]),
-					key: "2"
-				} : {
-					name: "toggle",
-					fn: withCtx(({ open }) => [createVNode(unref(ScalarSidebarGroupToggle), {
-						class: "text-sidebar-c-2",
-						open
-					}, {
-						label: withCtx(() => [createTextVNode(toDisplayString(open ? __props.options?.labels?.closeGroup ?? "Close Group" : __props.options?.labels?.openGroup ?? "Open Group"), 1)]),
-						_: 2
-					}, 1032, ["open"])]),
-					key: "3"
-				},
-				slots.decorator ? {
-					name: "after",
-					fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
-						_: 3
-					})]),
-					key: "4"
-				} : void 0
-			]), 1040, [
+			}, [slots.decorator ? {
+				name: "after",
+				fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
+					_: 3
+				})]),
+				key: "0"
+			} : void 0]), 1040, [
 				"active",
 				"data-sidebar-id",
 				"discrete",
 				"open"
-			])) : (openBlock(), createBlock(unref(ScalarSidebarItem), mergeProps({
-				key: 2,
-				is: "button"
-			}, unref(draggableAttrs), {
+			])) : (openBlock(), createBlock(unref(ScalarSidebarItem), mergeProps({ key: 2 }, unref(draggableAttrs), {
 				class: "relative",
-				"data-sidebar-id": __props.item.id,
-				selected: __props.isSelected(__props.item.id)
-			}, toHandlers(unref(draggableEvents)), { onClick: _cache[6] || (_cache[6] = () => emit("selectItem", __props.item.id)) }), createSlots({
-				default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(SidebarItemLabel_default, {
-					item: __props.item,
-					operationTitleSource: __props.options?.operationTitleSource
-				}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
-					key: 1,
-					item: __props.item,
-					operationTitleSource: __props.options?.operationTitleSource
-				}, null, 8, ["item", "operationTitleSource"]))]),
-				_: 2
-			}, [
-				slots.icon ? {
+				"data-sidebar-id": __props.item.id
+			}, toHandlers(unref(draggableEvents)), { onClick: handleSelect }), createSlots({
+				button: withCtx(({ level }) => [createVNode(unref(ScalarSidebarButton), {
+					is: href.value ? "a" : "button",
+					href: href.value,
+					indent: level,
+					selected: __props.isSelected(__props.item.id)
+				}, createSlots({
+					default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(SidebarItemLabel_default, {
+						item: __props.item,
+						operationTitleSource: __props.options?.operationTitleSource
+					}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
+						key: 1,
+						item: __props.item,
+						operationTitleSource: __props.options?.operationTitleSource
+					}, null, 8, ["item", "operationTitleSource"]))]),
+					_: 2
+				}, [slots.icon ? {
 					name: "icon",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {
 						item: __props.item,
 						open: true
 					})]),
 					key: "0"
-				} : void 0,
-				"method" in __props.item ? {
+				} : void 0, "method" in __props.item ? {
 					name: "aside",
-					fn: withCtx(() => ["method" in __props.item ? (openBlock(), createBlock(SidebarHttpBadge_default, {
-						key: 0,
+					fn: withCtx(() => [createVNode(SidebarHttpBadge_default, {
 						active: __props.isSelected(__props.item.id),
 						class: normalizeClass(["ml-2 h-4 self-start", { "group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0": slots.decorator }]),
 						label: __props.options?.labels?.httpMethod,
@@ -262,18 +318,23 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"label",
 						"method",
 						"webhook"
-					])) : createCommentVNode("", true)]),
+					])]),
 					key: "1"
-				} : void 0,
-				slots.decorator ? {
-					name: "after",
-					fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
-						_: 3
-					})]),
-					key: "2"
-				} : void 0
-			]), 1040, ["data-sidebar-id", "selected"]));
+				} : void 0]), 1032, [
+					"is",
+					"href",
+					"indent",
+					"selected"
+				])]),
+				_: 2
+			}, [slots.decorator ? {
+				name: "after",
+				fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
+					_: 3
+				})]),
+				key: "0"
+			} : void 0]), 1040, ["data-sidebar-id"]));
 		};
 	}
 });

package/dist/components/SidebarItem.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.vue.script.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ScalarSidebarGroup,\n  ScalarSidebarGroupToggle,\n  ScalarSidebarItem,\n  ScalarSidebarSection,\n} from '@scalar/components/sidebar'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport SidebarItemDecorator from '@/components/SidebarItemDecorator.vue'\nimport { filterItems } from '@/helpers/filter-items'\nimport { hasChildren } from '@/helpers/has-children'\nimport { isSidebarFolder } from '@/helpers/is-sidebar-folder'\nimport {\n  useDraggable,\n  type DraggingItem,\n  type HoveredItem,\n  type UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst {\n  item,\n  layout,\n  isSelected,\n  isExpanded,\n  isDraggable,\n  isDroppable,\n  options,\n} = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The layout mode for the sidebar ('client' or 'reference').\n   */\n  layout: Layout\n  /**\n   * Function to determine if an item is currently selected by id.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine if an item is currently expanded (showing its children) by id.\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the item is selected\n   * @param id - The id of the selected item\n   */\n  (e: 'selectItem', id: string): void\n  /**\n   * Emitted when a drag operation ends for this item\n   * @param draggingItem - The item being dragged\n   * @param hoveredItem - The item currently being hovered over\n   */\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when the group is toggled\n   * @param id - The id of the group\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /**\n   * Adds an optional decorator for each item, such as an edit menu.\n   * The slot receives an object with the current item.\n   */\n  decorator?(props: { item: Item }): unknown\n  /**\n   * Adds an optional empty state for an item.\n   * The slot receives an object with the current item.\n   */\n  empty?(props: { item: Item }): unknown\n  /**\n   * Adds an optional icon for each item.\n   * The slot receives an object with the current item and the open state.\n   */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\nconst isGroup = (\n  currentItem: Item,\n): currentItem is Item & { isGroup: true } => {\n  return 'isGroup' in currentItem && currentItem.isGroup\n}\n\nconst isDeprecated = (\n  currentItem: Item,\n): currentItem is Item & { isDeprecated: true } => {\n  return ('isDeprecated' in currentItem && currentItem.isDeprecated) ?? false\n}\n\n/**\n * Handle drag end event and bubble it up to parent.\n */\nconst onDragEnd = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n  emit('onDragEnd', draggingItem, hoveredItem)\n}\nconst { draggableAttrs, draggableEvents } = useDraggable({\n  id: item.id,\n  isDraggable,\n  isDroppable,\n  onDragEnd,\n})\n\nconst children = computed(() =>\n  hasChildren(item)\n    ? filterItems(layout, item.children, options?.hideOperationDefaultExamples)\n    : [],\n)\n</script>\n<template>\n  <!-- Sidebar section -->\n  <ScalarSidebarSection\n    v-if=\"children.length > 0 && isGroup(item)\"\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    v-on=\"draggableEvents\">\n    {{ item.title }}\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n    </template>\n  </ScalarSidebarSection>\n\n  <!-- Sidebar group (folder) -->\n  <ScalarSidebarGroup\n    v-else-if=\"\n      isSidebarFolder(\n        layout,\n        item,\n        slots.empty !== undefined,\n        options?.hideOperationDefaultExamples ?? false,\n      )\n    \"\n    :active=\"isSelected(item.id)\"\n    class=\"relative\"\n    controlled\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    :discrete=\"layout === 'reference' && item.type === 'text'\"\n    :open=\"isExpanded(item.id)\"\n    v-on=\"draggableEvents\"\n    @click=\"() => emit('selectItem', item.id)\"\n    @toggle=\"() => emit('toggleGroup', item.id)\">\n    <template\n      v-if=\"item.type === 'document'\"\n      #icon=\"{ open }\">\n      <slot\n        :item=\"item\"\n        name=\"icon\"\n        :open=\"open\">\n        <LibraryIcon\n          class=\"block\"\n          :src=\"('icon' in item && item.icon) || 'interface-content-folder'\" />\n      </slot>\n    </template>\n    <span\n      v-if=\"isDeprecated(item)\"\n      class=\"line-through\">\n      <SidebarItemLabel\n        :item\n        :operationTitleSource=\"options?.operationTitleSource\" />\n    </span>\n    <SidebarItemLabel\n      v-else\n      :item\n      :operationTitleSource=\"options?.operationTitleSource\" />\n    <template\n      v-if=\"'method' in item\"\n      #aside>\n      <SidebarHttpBadge\n        :active=\"isSelected(item.id)\"\n        class=\"ml-2 h-4 self-start\"\n        :class=\"{\n          // Hide the badge when we're showing the decorator\n          'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n            slots.decorator,\n        }\"\n        :label=\"options?.labels?.httpMethod\"\n        :method=\"item.method\"\n        :webhook=\"item.type === 'webhook'\" />\n    </template>\n    <!--\n      Hide the chevron\n    -->\n    <template\n      v-if=\"'method' in item\"\n      #toggle>\n      <span class=\"hidden\"></span>\n    </template>\n    <template\n      v-else\n      #toggle=\"{ open }\">\n      <ScalarSidebarGroupToggle\n        class=\"text-sidebar-c-2\"\n        :open>\n        <template #label>\n          {{\n            open\n              ? (options?.labels?.closeGroup ?? 'Close Group')\n              : (options?.labels?.openGroup ?? 'Open Group')\n          }}\n        </template>\n      </ScalarSidebarGroupToggle>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        :parentIds=\"[]\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n      <template v-if=\"slots.empty && (item.children?.length ?? 0) === 0\">\n        <slot\n          :item\n          name=\"empty\" />\n      </template>\n    </template>\n  </ScalarSidebarGroup>\n\n  <!-- Sidebar item (leaf node) -->\n  <ScalarSidebarItem\n    is=\"button\"\n    v-else\n    v-bind=\"draggableAttrs\"\n    class=\"relative\"\n    :data-sidebar-id=\"item.id\"\n    :selected=\"isSelected(item.id)\"\n    v-on=\"draggableEvents\"\n    @click=\"() => emit('selectItem', item.id)\">\n    <template\n      v-if=\"slots.icon\"\n      #icon>\n      <slot\n        :item=\"item\"\n        name=\"icon\"\n        :open=\"true\" />\n    </template>\n    <span\n      v-if=\"isDeprecated(item)\"\n      class=\"line-through\">\n      <SidebarItemLabel\n        :item\n        :operationTitleSource=\"options?.operationTitleSource\" />\n    </span>\n    <SidebarItemLabel\n      v-else\n      :item\n      :operationTitleSource=\"options?.operationTitleSource\" />\n    <template\n      v-if=\"'method' in item\"\n      #aside>\n      <SidebarHttpBadge\n        v-if=\"'method' in item\"\n        :active=\"isSelected(item.id)\"\n        class=\"ml-2 h-4 self-start\"\n        :class=\"{\n          // Hide the badge when we're showing the decorator\n          'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n            slots.decorator,\n        }\"\n        :label=\"options?.labels?.httpMethod\"\n        :method=\"item.method\"\n        :webhook=\"item.type === 'webhook'\" />\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n  </ScalarSidebarItem>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"SidebarItem.vue.script.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  ScalarSidebarButton,\n  ScalarSidebarGroup,\n  ScalarSidebarGroupToggle,\n  ScalarSidebarGroupToggleButton,\n  ScalarSidebarGroupToggleSpacer,\n  ScalarSidebarIndent,\n  ScalarSidebarItem,\n  ScalarSidebarSection,\n} from '@scalar/components/sidebar'\nimport { isPlainLeftClick } from '@scalar/helpers/dom/is-plain-left-click'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport SidebarItemDecorator from '@/components/SidebarItemDecorator.vue'\nimport { filterItems } from '@/helpers/filter-items'\nimport { hasChildren } from '@/helpers/has-children'\nimport { isSidebarFolder } from '@/helpers/is-sidebar-folder'\nimport {\n  useDraggable,\n  type DraggingItem,\n  type HoveredItem,\n  type UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout, SidebarOptions } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst {\n  item,\n  layout,\n  isSelected,\n  isExpanded,\n  isDraggable,\n  isDroppable,\n  options,\n  getHref,\n} = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The layout mode for the sidebar ('client' or 'reference').\n   */\n  layout: Layout\n  /**\n   * Function to determine if an item is currently selected by id.\n   */\n  isSelected: (id: string) => boolean\n  /**\n   * Function to determine if an item is currently expanded (showing its children) by id.\n   */\n  isExpanded: (id: string) => boolean\n  /**\n   * Sidebar configuration options.\n   * - operationTitleSource: sets whether operations show their path or summary as the display title.\n   */\n  options?: SidebarOptions\n\n  /**\n   * Returns the URL for a sidebar item.\n   *\n   * When provided (and it returns a value) items render as anchor tags\n   * instead of buttons, so search engines can crawl the navigation.\n   */\n  getHref?: (item: Item) => string | undefined\n\n  /**\n   * Prevents this item from being dragged.\n   *\n   * @default true\n   */\n  isDraggable?: UseDraggableOptions['isDraggable']\n  /**\n   * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.\n   *\n   * @default true\n   */\n  isDroppable?: UseDraggableOptions['isDroppable']\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the item is selected\n   * @param id - The id of the selected item\n   */\n  (e: 'selectItem', id: string): void\n  /**\n   * Emitted when a drag operation ends for this item\n   * @param draggingItem - The item being dragged\n   * @param hoveredItem - The item currently being hovered over\n   */\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n\n  /**\n   * Emitted when the group is toggled\n   * @param id - The id of the group\n   */\n  (e: 'toggleGroup', id: string): void\n}>()\n\nconst slots = defineSlots<{\n  /**\n   * Adds an optional decorator for each item, such as an edit menu.\n   * The slot receives an object with the current item.\n   */\n  decorator?(props: { item: Item }): unknown\n  /**\n   * Adds an optional empty state for an item.\n   * The slot receives an object with the current item.\n   */\n  empty?(props: { item: Item }): unknown\n  /**\n   * Adds an optional icon for each item.\n   * The slot receives an object with the current item and the open state.\n   */\n  icon?(props: { item: Item; open: boolean }): unknown\n}>()\n\nconst isGroup = (\n  currentItem: Item,\n): currentItem is Item & { isGroup: true } => {\n  return 'isGroup' in currentItem && currentItem.isGroup\n}\n\nconst isDeprecated = (\n  currentItem: Item,\n): currentItem is Item & { isDeprecated: true } => {\n  return ('isDeprecated' in currentItem && currentItem.isDeprecated) ?? false\n}\n\n/**\n * Handle drag end event and bubble it up to parent.\n */\nconst onDragEnd = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n  emit('onDragEnd', draggingItem, hoveredItem)\n}\nconst { draggableAttrs, draggableEvents } = useDraggable({\n  id: item.id,\n  isDraggable,\n  isDroppable,\n  onDragEnd,\n})\n\nconst children = computed(() =>\n  hasChildren(item)\n    ? filterItems(layout, item.children, options?.hideOperationDefaultExamples)\n    : [],\n)\n\n/** The URL for this item, when the consumer provides one it renders as a link */\nconst href = computed(() => getHref?.(item) || undefined)\n\n/**\n * Whether the group renders its toggle separately from its label.\n *\n * A label that navigates cannot also own the open state, so a group that\n * renders as a link needs a toggle button of its own. Without one there is no\n * way to collapse the group from the keyboard, because pressing Enter on the\n * label follows the link instead.\n */\nconst isDiscrete = computed(\n  () => Boolean(href.value) || (layout === 'reference' && item.type === 'text'),\n)\n\n/**\n * Builds the screen reader label for the discrete group toggle.\n *\n * The title of the group is appended so the toggles can be told apart. A page\n * can hold a lot of them, and a list of identical \"Open Group\" buttons gives a\n * screen reader user nothing to navigate by.\n */\nconst getToggleLabel = (open: boolean): string => {\n  const label = open\n    ? (options?.labels?.closeGroup ?? 'Close Group')\n    : (options?.labels?.openGroup ?? 'Open Group')\n\n  return item.title ? `${label} - ${item.title}` : label\n}\n\n/**\n * Emit the select event for a click on the item label.\n *\n * When the item renders as a link we only hijack plain left clicks on the\n * link itself for in-app navigation. Modified clicks (meta, ctrl, shift,\n * alt) and middle clicks keep the browser's default behavior so the link\n * can be opened in a new tab or window, and clicks on surrounding content\n * (like the decorator menu) keep their native behavior. A click whose\n * default is already prevented has been handled by someone else, so it is\n * left alone rather than navigated a second time.\n */\nconst handleSelect = (event: MouseEvent) => {\n  if (href.value) {\n    const anchor =\n      event.target instanceof Element ? event.target.closest('a') : null\n    if (anchor?.getAttribute('href') !== href.value) {\n      return\n    }\n    if (event.defaultPrevented || !isPlainLeftClick(event)) {\n      return\n    }\n    event.preventDefault()\n  }\n  emit('selectItem', item.id)\n}\n</script>\n<template>\n  <!-- Sidebar section -->\n  <ScalarSidebarSection\n    v-if=\"children.length > 0 && isGroup(item)\"\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    v-on=\"draggableEvents\">\n    {{ item.title }}\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :getHref=\"getHref\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n    </template>\n  </ScalarSidebarSection>\n\n  <!-- Sidebar group (folder) -->\n  <ScalarSidebarGroup\n    v-else-if=\"\n      isSidebarFolder(\n        layout,\n        item,\n        slots.empty !== undefined,\n        options?.hideOperationDefaultExamples ?? false,\n      )\n    \"\n    :active=\"isSelected(item.id)\"\n    class=\"relative\"\n    controlled\n    :data-sidebar-id=\"item.id\"\n    v-bind=\"draggableAttrs\"\n    :discrete=\"isDiscrete\"\n    :open=\"isExpanded(item.id)\"\n    v-on=\"draggableEvents\">\n    <template #button=\"{ open, level }\">\n      <ScalarSidebarButton\n        :is=\"href ? 'a' : 'button'\"\n        :active=\"isSelected(item.id)\"\n        :aria-expanded=\"isDiscrete ? undefined : open\"\n        :href=\"href\"\n        :indent=\"level\"\n        @click=\"handleSelect\">\n        <template #indent>\n          <ScalarSidebarIndent\n            class=\"-my-2 mr-0\"\n            :indent=\"level\" />\n        </template>\n        <template\n          v-if=\"item.type === 'document'\"\n          #icon>\n          <slot\n            :item=\"item\"\n            name=\"icon\"\n            :open=\"open\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n          </slot>\n        </template>\n        <span\n          v-if=\"isDeprecated(item)\"\n          class=\"line-through\">\n          <SidebarItemLabel\n            :item\n            :operationTitleSource=\"options?.operationTitleSource\" />\n        </span>\n        <SidebarItemLabel\n          v-else\n          :item\n          :operationTitleSource=\"options?.operationTitleSource\" />\n        <template #aside>\n          <SidebarHttpBadge\n            v-if=\"'method' in item\"\n            :active=\"isSelected(item.id)\"\n            class=\"ml-2 h-4 self-start\"\n            :class=\"{\n              // Hide the badge when we're showing the decorator\n              'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n                slots.decorator,\n            }\"\n            :label=\"options?.labels?.httpMethod\"\n            :method=\"item.method\"\n            :webhook=\"item.type === 'webhook'\" />\n          <ScalarSidebarGroupToggleSpacer v-if=\"isDiscrete\" />\n          <ScalarSidebarGroupToggle\n            v-else-if=\"!('method' in item)\"\n            class=\"text-sidebar-c-2\"\n            :open>\n            <template #label>\n              {{\n                open\n                  ? (options?.labels?.closeGroup ?? 'Close Group')\n                  : (options?.labels?.openGroup ?? 'Open Group')\n              }}\n            </template>\n          </ScalarSidebarGroupToggle>\n        </template>\n      </ScalarSidebarButton>\n      <ScalarSidebarGroupToggleButton\n        v-if=\"isDiscrete\"\n        :open\n        @click=\"() => emit('toggleGroup', item.id)\">\n        <template #label>{{ getToggleLabel(open) }}</template>\n      </ScalarSidebarGroupToggleButton>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n    <template #items>\n      <SidebarItem\n        v-for=\"child in children\"\n        :key=\"child.id\"\n        :getHref=\"getHref\"\n        :isDraggable=\"isDraggable\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"isExpanded\"\n        :isSelected=\"isSelected\"\n        :item=\"child\"\n        :layout=\"layout\"\n        :options=\"options\"\n        :parentIds=\"[]\"\n        @onDragEnd=\"onDragEnd\"\n        @selectItem=\"(id) => emit('selectItem', id)\"\n        @toggleGroup=\"(id) => emit('toggleGroup', id)\">\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"decorator\" />\n        </template>\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"empty\" />\n        </template>\n        <template\n          v-if=\"slots.icon\"\n          #icon=\"slotProps\">\n          <slot\n            v-bind=\"slotProps\"\n            name=\"icon\" />\n        </template>\n      </SidebarItem>\n      <template v-if=\"slots.empty && (item.children?.length ?? 0) === 0\">\n        <slot\n          :item\n          name=\"empty\" />\n      </template>\n    </template>\n  </ScalarSidebarGroup>\n\n  <!-- Sidebar item (leaf node) -->\n  <ScalarSidebarItem\n    v-else\n    v-bind=\"draggableAttrs\"\n    class=\"relative\"\n    :data-sidebar-id=\"item.id\"\n    v-on=\"draggableEvents\"\n    @click=\"handleSelect\">\n    <template #button=\"{ level }\">\n      <ScalarSidebarButton\n        :is=\"href ? 'a' : 'button'\"\n        :href=\"href\"\n        :indent=\"level\"\n        :selected=\"isSelected(item.id)\">\n        <template\n          v-if=\"slots.icon\"\n          #icon>\n          <slot\n            :item=\"item\"\n            name=\"icon\"\n            :open=\"true\" />\n        </template>\n        <span\n          v-if=\"isDeprecated(item)\"\n          class=\"line-through\">\n          <SidebarItemLabel\n            :item\n            :operationTitleSource=\"options?.operationTitleSource\" />\n        </span>\n        <SidebarItemLabel\n          v-else\n          :item\n          :operationTitleSource=\"options?.operationTitleSource\" />\n        <template\n          v-if=\"'method' in item\"\n          #aside>\n          <SidebarHttpBadge\n            :active=\"isSelected(item.id)\"\n            class=\"ml-2 h-4 self-start\"\n            :class=\"{\n              // Hide the badge when we're showing the decorator\n              'group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0':\n                slots.decorator,\n            }\"\n            :label=\"options?.labels?.httpMethod\"\n            :method=\"item.method\"\n            :webhook=\"item.type === 'webhook'\" />\n        </template>\n      </ScalarSidebarButton>\n    </template>\n    <template\n      v-if=\"slots.decorator\"\n      #after>\n      <SidebarItemDecorator>\n        <slot\n          :item\n          name=\"decorator\" />\n      </SidebarItemDecorator>\n    </template>\n  </ScalarSidebarItem>\n</template>\n"],"mappings":"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"}

package/dist/style.css

@@ -3300,6 +3300,10 @@
   padding-right: 12px;
 }
 
+.scalar-app .pr-6 {
+  padding-right: 24px;
+}
+
 .scalar-app .pr-\[100\%\] {
   padding-right: 100%;
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/sidebar"
   },
-  "version": "0.9.36",
+  "version": "0.10.1",
   "engines": {
     "node": ">=22"
   },
@@ -33,12 +33,12 @@
   ],
   "dependencies": {
     "vue": "^3.5.40",
-    "@scalar/components": "0.27.11",
-    "@scalar/helpers": "0.10.0",
-    "@scalar/icons": "0.7.5",
-    "@scalar/themes": "0.17.2",
-    "@scalar/use-hooks": "0.4.9",
-    "@scalar/workspace-store": "0.57.0"
+    "@scalar/components": "0.28.1",
+    "@scalar/icons": "0.7.6",
+    "@scalar/themes": "0.17.3",
+    "@scalar/helpers": "0.11.1",
+    "@scalar/use-hooks": "0.4.10",
+    "@scalar/workspace-store": "0.58.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",