npm - @scalar/sidebar - Versions diffs - 0.11.13 → 0.12.1 - Mend

@scalar/sidebar 0.11.13 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/SidebarItem.vue.js.map +1 -1
package/dist/components/SidebarItem.vue.script.js +1 -1
package/dist/components/SidebarItem.vue.script.js.map +1 -1
package/dist/style.css +29 -18
package/package.json +7 -7

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

	@@ -1 +1 @@
1	- {"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/\n Whether this item is the one currently displayed on the page.\n \n `isSelected` also reports true for every ancestor of the displayed item,\n * which is what the active styling of a group needs. Only the deepest\n * selected node is the current page though, so a group counts as current when\n * none of its children are selected. Leaf items already get this from the\n * `selected` prop of ScalarSidebarButton.\n /\nconst isCurrent = computed(\n () =>\n isSelected(item.id) &&\n !(hasChildren(item) && item.children.some((child) => isSelected(child.id))),\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-current=\"isCurrent ? 'page' : undefined\"\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":""}
1	+ {"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/\n Whether this item is the one currently displayed on the page.\n \n `isSelected` also reports true for every ancestor of the displayed item,\n * which is what the active styling of a group needs. Only the deepest\n * selected node is the current page though, so a group counts as current when\n * none of its children are selected. Leaf items already get this from the\n * `selected` prop of ScalarSidebarButton.\n /\nconst isCurrent = computed(\n () =>\n isSelected(item.id) &&\n !(hasChildren(item) && item.children.some((child) => isSelected(child.id))),\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 <!-- Keep the client section layout; reference tags all use collapsible groups. -->\n <ScalarSidebarSection\n v-if=\"layout === 'client' && 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-current=\"isCurrent ? 'page' : undefined\"\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 CHANGED Viewed

@@ -110,7 +110,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		};
 		return (_ctx, _cache) => {
 			const _component_SidebarItem = resolveComponent("SidebarItem", true);
-			return children.value.length > 0 && isGroup(__props.item) ? (openBlock(), createBlock(unref(ScalarSidebarSection), mergeProps({
+			return __props.layout === "client" && children.value.length > 0 && isGroup(__props.item) ? (openBlock(), createBlock(unref(ScalarSidebarSection), mergeProps({
 				key: 0,
 				"data-sidebar-id": __props.item.id
 			}, unref(draggableAttrs), toHandlers(unref(draggableEvents))), {

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

	@@ -1 +1 @@
1	- {"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/\n Whether this item is the one currently displayed on the page.\n \n `isSelected` also reports true for every ancestor of the displayed item,\n * which is what the active styling of a group needs. Only the deepest\n * selected node is the current page though, so a group counts as current when\n * none of its children are selected. Leaf items already get this from the\n * `selected` prop of ScalarSidebarButton.\n /\nconst isCurrent = computed(\n () =>\n isSelected(item.id) &&\n !(hasChildren(item) && item.children.some((child) => isSelected(child.id))),\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-current=\"isCurrent ? 'page' : undefined\"\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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"}
1	+ {"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/\n Whether this item is the one currently displayed on the page.\n \n `isSelected` also reports true for every ancestor of the displayed item,\n * which is what the active styling of a group needs. Only the deepest\n * selected node is the current page though, so a group counts as current when\n * none of its children are selected. Leaf items already get this from the\n * `selected` prop of ScalarSidebarButton.\n /\nconst isCurrent = computed(\n () =>\n isSelected(item.id) &&\n !(hasChildren(item) && item.children.some((child) => isSelected(child.id))),\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 <!-- Keep the client section layout; reference tags all use collapsible groups. -->\n <ScalarSidebarSection\n v-if=\"layout === 'client' && 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-current=\"isCurrent ? 'page' : undefined\"\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 CHANGED Viewed

@@ -3,7 +3,6 @@
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
-      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -39,6 +38,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
       --tw-gradient-via: #0000;
@@ -91,12 +91,12 @@
 }
 @layer scalar-base {
-  body {
+  body.scalar-app {
     line-height: inherit;
     margin: 0;
   }
-  :root {
+  :root, :host {
     --scalar-border-width: .5px;
     --scalar-radius: 3px;
     --scalar-radius-max: 20px;
@@ -180,7 +180,7 @@
   }
   @media (max-width: 460px) {
-    :root {
+    :root, :host {
       --scalar-font-size-1: 22px;
       --scalar-font-size-2: 14px;
       --scalar-font-size-3: 12px;
@@ -188,7 +188,7 @@
   }
   @media (max-width: 720px) {
-    :root {
+    :root, :host {
       --scalar-heading-1: 24px;
       --scalar-page-description: 20px;
     }
@@ -196,13 +196,13 @@
   @media (max-resolution: 1.5x) {
     @supports ((-moz-appearance: none)) {
-      :root {
+      :root, :host {
         --scalar-border-width: 1px;
       }
     }
   }
-  :root {
+  :root, :host {
     --scalar-text-decoration: underline;
     --scalar-text-decoration-hover: underline;
   }
@@ -1557,7 +1557,7 @@
   display: contents;
 }
-.scalar-app .markdown.markdown-summary.markdown-summary img, .scalar-app .markdown.markdown-summary.markdown-summary svg, .scalar-app .markdown.markdown-summary.markdown-summary hr, .scalar-app .markdown.markdown-summary.markdown-summary pre {
+.scalar-app .markdown.markdown-summary.markdown-summary [data-markdown-block], .scalar-app .markdown.markdown-summary.markdown-summary img, .scalar-app .markdown.markdown-summary.markdown-summary svg, .scalar-app .markdown.markdown-summary.markdown-summary hr, .scalar-app .markdown.markdown-summary.markdown-summary pre {
   display: none;
 }
@@ -1729,10 +1729,9 @@
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
-  border-style: var(--tw-border-style);
-  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
   --tw-shadow: var(--scalar-shadow-1);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1764,12 +1763,6 @@
   inherits: false
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -2052,8 +2045,8 @@
   right: 4px;
 }
-.scalar-app .right-1\.25 {
-  right: 5px;
+.scalar-app .right-1\.75 {
+  right: 7px;
 }
 .scalar-app .right-2 {
@@ -2537,10 +2530,18 @@
   min-height: 48px;
 }
+.scalar-app .w-2\/3 {
+  width: 66.6667%;
+}
 .scalar-app .w-3 {
   width: 12px;
 }
+.scalar-app .w-5 {
+  width: 20px;
+}
 .scalar-app .w-6 {
   width: 24px;
 }
@@ -3327,6 +3328,10 @@
   padding-right: 24px;
 }
+.scalar-app .pr-7\.25 {
+  padding-right: 29px;
+}
 .scalar-app .pr-\[100\%\] {
   padding-right: 100%;
 }
@@ -4293,6 +4298,12 @@
   initial-value: 0;
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-gradient-position {
   syntax: "*";
   inherits: false

package/package.json CHANGED Viewed

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/sidebar"
   },
-  "version": "0.11.13",
+  "version": "0.12.1",
   "engines": {
     "node": ">=22"
   },
@@ -32,12 +32,12 @@
     "dist"
   ],
   "dependencies": {
-    "@scalar/components": "0.31.0",
-    "@scalar/helpers": "0.16.2",
-    "@scalar/icons": "0.7.6",
-    "@scalar/themes": "0.19.0",
-    "@scalar/use-hooks": "0.4.19",
-    "@scalar/workspace-store": "0.68.2",
+    "@scalar/components": "0.32.0",
+    "@scalar/helpers": "0.16.4",
+    "@scalar/icons": "0.7.7",
+    "@scalar/themes": "0.19.2",
+    "@scalar/use-hooks": "0.4.21",
+    "@scalar/workspace-store": "0.68.4",
     "vue": "^3.5.40"
   },
   "devDependencies": {