@scalar/sidebar 0.8.19 → 0.9.0
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.
- package/dist/components/ScalarSidebar.vue.d.ts +9 -3
- package/dist/components/ScalarSidebar.vue.d.ts.map +1 -1
- package/dist/components/ScalarSidebar.vue.js.map +1 -1
- package/dist/components/ScalarSidebar.vue.script.js.map +1 -1
- package/dist/components/SidebarItem.vue.d.ts +9 -3
- package/dist/components/SidebarItem.vue.d.ts.map +1 -1
- package/dist/components/SidebarItem.vue.js.map +1 -1
- package/dist/components/SidebarItem.vue.script.js +6 -5
- package/dist/components/SidebarItem.vue.script.js.map +1 -1
- package/dist/components/SidebarItemLabel.vue.d.ts.map +1 -1
- package/dist/components/SidebarItemLabel.vue.js.map +1 -1
- package/dist/components/SidebarItemLabel.vue.script.js +1 -1
- package/dist/components/SidebarItemLabel.vue.script.js.map +1 -1
- package/dist/helpers/filter-items.d.ts +1 -1
- package/dist/helpers/filter-items.d.ts.map +1 -1
- package/dist/helpers/filter-items.js +2 -1
- package/dist/helpers/filter-items.js.map +1 -1
- package/dist/helpers/is-sidebar-folder.d.ts +1 -1
- package/dist/helpers/is-sidebar-folder.d.ts.map +1 -1
- package/dist/helpers/is-sidebar-folder.js +2 -1
- package/dist/helpers/is-sidebar-folder.js.map +1 -1
- package/dist/style.css +43 -2
- package/package.json +5 -5
|
@@ -22,9 +22,15 @@ type __VLS_Props = {
|
|
|
22
22
|
* Sidebar configuration options.
|
|
23
23
|
* - operationTitleSource: sets whether operations show their path or summary as the display title.
|
|
24
24
|
*/
|
|
25
|
-
options?: {
|
|
26
|
-
operationTitleSource: 'path' | 'summary'
|
|
27
|
-
|
|
25
|
+
options?: Partial<{
|
|
26
|
+
operationTitleSource: 'path' | 'summary';
|
|
27
|
+
/**
|
|
28
|
+
* Whether to hide the default examples for operations if there are no other examples.
|
|
29
|
+
*
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
hideOperationDefaultExamples: boolean;
|
|
33
|
+
}>;
|
|
28
34
|
/**
|
|
29
35
|
* The indentation in pixels to apply to nested items/groups in the sidebar.
|
|
30
36
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"AAgLA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAI3C,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,OAAO,CAAC;QAChB,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;QACxC;;;;WAIG;QACH,4BAA4B,EAAE,OAAO,CAAA;KACtC,CAAC,CAAA;IACF;;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;AA0KF,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"}
|
|
@@ -1 +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'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n DraggingItem,\n HoveredItem,\n UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout } 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?: {\n operationTitleSource: 'path' | 'summary'
|
|
1
|
+
{"version":3,"file":"ScalarSidebar.vue.js","names":[],"sources":["../../src/components/ScalarSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebar, ScalarSidebarItems } from '@scalar/components'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n DraggingItem,\n HoveredItem,\n UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout } 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?: Partial<{\n operationTitleSource: 'path' | 'summary'\n /**\n * Whether to hide the default examples for operations if there are no other examples.\n *\n * @default false\n */\n hideOperationDefaultExamples: boolean\n }>\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":""}
|
|
@@ -1 +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'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n DraggingItem,\n HoveredItem,\n UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout } 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?: {\n operationTitleSource: 'path' | 'summary'
|
|
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'\n\nimport { filterItems } from '@/helpers/filter-items'\nimport type {\n DraggingItem,\n HoveredItem,\n UseDraggableOptions,\n} from '@/hooks/use-draggable'\nimport type { Item, Layout } 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?: Partial<{\n operationTitleSource: 'path' | 'summary'\n /**\n * Whether to hide the default examples for operations if there are no other examples.\n *\n * @default false\n */\n hideOperationDefaultExamples: boolean\n }>\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":";;;;;;;;;;;;;;;;;;;;;;;EAkEA,MAAM,OAAO;EAqBb,MAAM,QAAQ,UAAA;;;;;EAuBd,MAAM,iBACJ,cACA,gBACG;AACH,QAAK,WAAW,cAAc,YAAW;;;uBAIzC,YAkDgB,MAAA,cAAA,EAAA;IAjDd,OAAM;IACL,OAAK,eAAA,EAAA,2BAA+B,QAAA,SAAM,MAAA,CAAA;;2BACrB;KAAtB,WAAsB,KAAA,QAAA,SAAA;KACtB,WA4CO,KAAA,QAAA,WAAA,EAAA,QAAA,CA3CL,YAsCqB,MAAA,mBAAA,EAAA,EAtCD,OAAM,iBAAe,EAAA;6BAEjB,CAAtB,WAAsB,KAAA,QAAA,SAAA,GAAA,UAAA,KAAA,EACtB,mBAkCc,UAAA,MAAA,WAjCG,MAAA,YAAW,CAAC,QAAA,QAAQ,QAAA,MAAK,GAAjC,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,GAAE;QACzC,eAAW,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,eAAgB,GAAE;;QAEpC,MAAM,YAAA;eACX;sBAAW,UAAK,CACjB,WAEmB,KAAA,QAAA,aAFnB,WAEmB,EAAA,SAAA,MAAA,EAAT,MAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,QAAA;eACX;sBAAO,UAAK,CACb,WAEmB,KAAA,QAAA,SAFnB,WAEmB,EAAA,SAAA,MAAA,EAAT,MAAK,CAAA,CAAA,CAAA;;;QAGT,MAAM,OAAA;eACX;sBAAM,UAAK,CACZ,WAEmB,KAAA,QAAA,QAFnB,WAEmB,EAAA,SAAA,MAAA,EAAT,MAAK,CAAA,CAAA,CAAA;;;;;;;;;;;;;;SAKrB,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KADL,mBAA0B,OAAA,EAArB,OAAM,UAAQ,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,CAAA;KAGvB,WAAsB,KAAA,QAAA,SAAA"}
|
|
@@ -21,9 +21,15 @@ type __VLS_Props = {
|
|
|
21
21
|
* Sidebar configuration options.
|
|
22
22
|
* - operationTitleSource: sets whether operations show their path or summary as the display title.
|
|
23
23
|
*/
|
|
24
|
-
options
|
|
25
|
-
operationTitleSource: 'path' | 'summary'
|
|
26
|
-
|
|
24
|
+
options?: Partial<{
|
|
25
|
+
operationTitleSource: 'path' | 'summary';
|
|
26
|
+
/**
|
|
27
|
+
* Whether to hide the default examples for operations if there are no other examples.
|
|
28
|
+
*
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
hideOperationDefaultExamples: boolean;
|
|
32
|
+
}>;
|
|
27
33
|
/**
|
|
28
34
|
* Prevents this item from being dragged.
|
|
29
35
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"AAsXA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAK3C,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,OAAO,CAAC;QAChB,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;QACxC;;;;WAIG;QACH,4BAA4B,EAAE,OAAO,CAAA;KACtC,CAAC,CAAA;IAEF;;;;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;AAyjBF,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItem.vue.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n ScalarSidebarGroup,\n ScalarSidebarItem,\n ScalarSidebarSection,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\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 } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst { item, layout, isSelected, isExpanded, isDraggable, isDroppable } =\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:\n | {\n operationTitleSource: 'path' | 'summary' | undefined\n }\n | 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</script>\n<template>\n <!-- Sidebar section -->\n <ScalarSidebarSection\n v-if=\"hasChildren(item) && 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 filterItems(layout, item.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=\"isSidebarFolder(layout, item, slots.empty !== undefined)\"\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=\"mr-1 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 :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 <template #items>\n <SidebarItem\n v-for=\"child in filterItems(layout, item.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 :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":""}
|
|
1
|
+
{"version":3,"file":"SidebarItem.vue.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n ScalarSidebarGroup,\n ScalarSidebarItem,\n ScalarSidebarSection,\n} from '@scalar/components'\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 } 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?: Partial<{\n operationTitleSource: 'path' | 'summary'\n /**\n * Whether to hide the default examples for operations if there are no other examples.\n *\n * @default false\n */\n hideOperationDefaultExamples: boolean\n }>\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=\"mr-1 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 :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 <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 :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":""}
|
|
@@ -5,7 +5,7 @@ import { isSidebarFolder } from "../helpers/is-sidebar-folder.js";
|
|
|
5
5
|
import { useDraggable } from "../hooks/use-draggable.js";
|
|
6
6
|
import SidebarHttpBadge_default from "./SidebarHttpBadge.vue.js";
|
|
7
7
|
import SidebarItemLabel_default from "./SidebarItemLabel.vue.js";
|
|
8
|
-
import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toHandlers, unref, useSlots, withCtx } from "vue";
|
|
8
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, toHandlers, unref, useSlots, withCtx } from "vue";
|
|
9
9
|
import { ScalarSidebarGroup, ScalarSidebarItem, ScalarSidebarSection } from "@scalar/components";
|
|
10
10
|
import { LibraryIcon } from "@scalar/icons/library";
|
|
11
11
|
//#region src/components/SidebarItem.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -54,13 +54,14 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
54
54
|
isDroppable: __props.isDroppable,
|
|
55
55
|
onDragEnd
|
|
56
56
|
});
|
|
57
|
+
const children = computed(() => hasChildren(__props.item) ? filterItems(__props.layout, __props.item.children, __props.options?.hideOperationDefaultExamples) : []);
|
|
57
58
|
return (_ctx, _cache) => {
|
|
58
59
|
const _component_SidebarItem = resolveComponent("SidebarItem", true);
|
|
59
|
-
return
|
|
60
|
+
return children.value.length > 0 && isGroup(__props.item) ? (openBlock(), createBlock(unref(ScalarSidebarSection), mergeProps({
|
|
60
61
|
key: 0,
|
|
61
62
|
"data-sidebar-id": __props.item.id
|
|
62
63
|
}, unref(draggableAttrs), toHandlers(unref(draggableEvents))), {
|
|
63
|
-
items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(
|
|
64
|
+
items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
|
|
64
65
|
return openBlock(), createBlock(_component_SidebarItem, {
|
|
65
66
|
key: child.id,
|
|
66
67
|
isDraggable: __props.isDraggable,
|
|
@@ -101,7 +102,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
101
102
|
}), 128))]),
|
|
102
103
|
default: withCtx(() => [createTextVNode(toDisplayString(__props.item.title) + " ", 1)]),
|
|
103
104
|
_: 3
|
|
104
|
-
}, 16, ["data-sidebar-id"])) : unref(isSidebarFolder)(__props.layout, __props.item, slots.empty !== void 0) ? (openBlock(), createBlock(unref(ScalarSidebarGroup), mergeProps({
|
|
105
|
+
}, 16, ["data-sidebar-id"])) : unref(isSidebarFolder)(__props.layout, __props.item, slots.empty !== void 0, __props.options?.hideOperationDefaultExamples ?? false) ? (openBlock(), createBlock(unref(ScalarSidebarGroup), mergeProps({
|
|
105
106
|
key: 1,
|
|
106
107
|
active: __props.isSelected(__props.item.id),
|
|
107
108
|
class: "relative",
|
|
@@ -114,7 +115,7 @@ var SidebarItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
114
115
|
onClick: _cache[4] || (_cache[4] = () => emit("selectItem", __props.item.id)),
|
|
115
116
|
onToggle: _cache[5] || (_cache[5] = () => emit("toggleGroup", __props.item.id))
|
|
116
117
|
}), createSlots({
|
|
117
|
-
items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(
|
|
118
|
+
items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
|
|
118
119
|
return openBlock(), createBlock(_component_SidebarItem, {
|
|
119
120
|
key: child.id,
|
|
120
121
|
isDraggable: __props.isDraggable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItem.vue.script.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n ScalarSidebarGroup,\n ScalarSidebarItem,\n ScalarSidebarSection,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\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 } from '@/types'\n\nimport SidebarHttpBadge from './SidebarHttpBadge.vue'\nimport SidebarItemLabel from './SidebarItemLabel.vue'\n\nconst { item, layout, isSelected, isExpanded, isDraggable, isDroppable } =\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:\n | {\n operationTitleSource: 'path' | 'summary' | undefined\n }\n | 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</script>\n<template>\n <!-- Sidebar section -->\n <ScalarSidebarSection\n v-if=\"hasChildren(item) && 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 filterItems(layout, item.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=\"isSidebarFolder(layout, item, slots.empty !== undefined)\"\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=\"mr-1 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 :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 <template #items>\n <SidebarItem\n v-for=\"child in filterItems(layout, item.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 :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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"}
|
|
1
|
+
{"version":3,"file":"SidebarItem.vue.script.js","names":[],"sources":["../../src/components/SidebarItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n ScalarSidebarGroup,\n ScalarSidebarItem,\n ScalarSidebarSection,\n} from '@scalar/components'\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 } 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?: Partial<{\n operationTitleSource: 'path' | 'summary'\n /**\n * Whether to hide the default examples for operations if there are no other examples.\n *\n * @default false\n */\n hideOperationDefaultExamples: boolean\n }>\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=\"mr-1 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 :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 <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 :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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItemLabel.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItemLabel.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SidebarItemLabel.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItemLabel.vue"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAC;AAgEF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItemLabel.vue.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n /**\n * The sidebar item to render.\n */\n item: Item\n /**\n * The source of the operation title.\n */\n operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n <
|
|
1
|
+
{"version":3,"file":"SidebarItemLabel.vue.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n /**\n * The sidebar item to render.\n */\n item: Item\n /**\n * The source of the operation title.\n */\n operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n <ScalarWrappingText\n v-if=\"item.type === 'model' || item.type === 'example'\"\n preset=\"property\"\n :text=\"item.title\" />\n <ScalarWrappingText\n v-else\n :text=\"\n operationTitleSource === 'path' && 'path' in item\n ? (item.path as string)\n : (item.title as string)\n \" />\n</template>\n"],"mappings":""}
|
|
@@ -9,7 +9,7 @@ var SidebarItemLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
|
|
|
9
9
|
},
|
|
10
10
|
setup(__props) {
|
|
11
11
|
return (_ctx, _cache) => {
|
|
12
|
-
return __props.item.type === "model" ? (openBlock(), createBlock(unref(ScalarWrappingText), {
|
|
12
|
+
return __props.item.type === "model" || __props.item.type === "example" ? (openBlock(), createBlock(unref(ScalarWrappingText), {
|
|
13
13
|
key: 0,
|
|
14
14
|
preset: "property",
|
|
15
15
|
text: __props.item.title
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItemLabel.vue.script.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n /**\n * The sidebar item to render.\n */\n item: Item\n /**\n * The source of the operation title.\n */\n operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n <
|
|
1
|
+
{"version":3,"file":"SidebarItemLabel.vue.script.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n /**\n * The sidebar item to render.\n */\n item: Item\n /**\n * The source of the operation title.\n */\n operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n <ScalarWrappingText\n v-if=\"item.type === 'model' || item.type === 'example'\"\n preset=\"property\"\n :text=\"item.title\" />\n <ScalarWrappingText\n v-else\n :text=\"\n operationTitleSource === 'path' && 'path' in item\n ? (item.path as string)\n : (item.title as string)\n \" />\n</template>\n"],"mappings":";;;;;;;;;;;UAkBU,QAAA,KAAK,SAAI,WAAgB,QAAA,KAAK,SAAI,aAAA,WAAA,EAD1C,YAGuB,MAAA,mBAAA,EAAA;;IADrB,QAAO;IACN,MAAM,QAAA,KAAK;0CACd,YAMM,MAAA,mBAAA,EAAA;;IAJH,MAAa,QAAA,yBAAoB,UAAA,UAAyB,QAAA,OAAgB,QAAA,KAAK,OAA2B,QAAA,KAAK"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { Item, Layout } from '../types';
|
|
2
|
-
export declare const filterItems: (layout: Layout, items: Item[]) => import("@scalar/workspace-store/schemas/navigation").TraversedEntry[];
|
|
2
|
+
export declare const filterItems: (layout: Layout, items: Item[], hideOperationDefaultExamples?: boolean) => import("@scalar/workspace-store/schemas/navigation").TraversedEntry[];
|
|
3
3
|
//# sourceMappingURL=filter-items.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-items.d.ts","sourceRoot":"","sources":["../../src/helpers/filter-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAK3C,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,EAAE,OAAO,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"filter-items.d.ts","sourceRoot":"","sources":["../../src/helpers/filter-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAK3C,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,EAAE,OAAO,IAAI,EAAE,EAAE,+BAA+B,OAAO,0EAiBhG,CAAA"}
|
|
@@ -6,7 +6,8 @@ var API_CLIENT_TYPES_SET = new Set([
|
|
|
6
6
|
"example",
|
|
7
7
|
"tag"
|
|
8
8
|
]);
|
|
9
|
-
var filterItems = (layout, items) => {
|
|
9
|
+
var filterItems = (layout, items, hideOperationDefaultExamples) => {
|
|
10
|
+
if (hideOperationDefaultExamples && items.length === 1 && items[0]?.type === "example" && items[0]?.name === "default") return [];
|
|
10
11
|
if (layout === "reference") return items;
|
|
11
12
|
return items.filter((c) => API_CLIENT_TYPES_SET.has(c.type));
|
|
12
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-items.js","names":[],"sources":["../../src/helpers/filter-items.ts"],"sourcesContent":["import type { Item, Layout } from '@/types'\n\n/** The type of items we want to */\nconst API_CLIENT_TYPES_SET = new Set(['document', 'operation', 'example', 'tag'])\n\nexport const filterItems = (layout: Layout, items: Item[]) => {\n if (layout === 'reference') {\n return items\n }\n\n // For client layout, filter to only show documents, operations, examples, and tags\n return items.filter((c) => API_CLIENT_TYPES_SET.has(c.type))\n}\n"],"mappings":";;AAGA,IAAM,uBAAuB,IAAI,IAAI;CAAC;CAAY;CAAa;CAAW;CAAM,CAAC;AAEjF,IAAa,eAAe,QAAgB,
|
|
1
|
+
{"version":3,"file":"filter-items.js","names":[],"sources":["../../src/helpers/filter-items.ts"],"sourcesContent":["import type { Item, Layout } from '@/types'\n\n/** The type of items we want to */\nconst API_CLIENT_TYPES_SET = new Set(['document', 'operation', 'example', 'tag'])\n\nexport const filterItems = (layout: Layout, items: Item[], hideOperationDefaultExamples?: boolean) => {\n // If we are hiding the default examples and there is only one example and it is the default example, we don't want to show it\n if (\n hideOperationDefaultExamples &&\n items.length === 1 &&\n items[0]?.type === 'example' &&\n items[0]?.name === 'default'\n ) {\n return []\n }\n\n if (layout === 'reference') {\n return items\n }\n\n // For client layout, filter to only show documents, operations, examples, and tags\n return items.filter((c) => API_CLIENT_TYPES_SET.has(c.type))\n}\n"],"mappings":";;AAGA,IAAM,uBAAuB,IAAI,IAAI;CAAC;CAAY;CAAa;CAAW;CAAM,CAAC;AAEjF,IAAa,eAAe,QAAgB,OAAe,iCAA2C;AAEpG,KACE,gCACA,MAAM,WAAW,KACjB,MAAM,IAAI,SAAS,aACnB,MAAM,IAAI,SAAS,UAEnB,QAAO,EAAE;AAGX,KAAI,WAAW,YACb,QAAO;AAIT,QAAO,MAAM,QAAQ,MAAM,qBAAqB,IAAI,EAAE,KAAK,CAAC"}
|
|
@@ -9,7 +9,7 @@ import type { Item, Layout } from '../types';
|
|
|
9
9
|
* @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)
|
|
10
10
|
* @returns True if the item should be rendered as a folder/group node
|
|
11
11
|
*/
|
|
12
|
-
export declare const isSidebarFolder: (layout: Layout, item: Item, hasEmptySlot: boolean) => item is Item & {
|
|
12
|
+
export declare const isSidebarFolder: (layout: Layout, item: Item, hasEmptySlot: boolean, hideOperationDefaultExamples: boolean) => item is Item & {
|
|
13
13
|
children?: Item[];
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=is-sidebar-folder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-sidebar-folder.d.ts","sourceRoot":"","sources":["../../src/helpers/is-sidebar-folder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,EACd,MAAM,IAAI,EACV,cAAc,OAAO,
|
|
1
|
+
{"version":3,"file":"is-sidebar-folder.d.ts","sourceRoot":"","sources":["../../src/helpers/is-sidebar-folder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,EACd,MAAM,IAAI,EACV,cAAc,OAAO,EACrB,8BAA8B,OAAO,KACpC,IAAI,IAAI,IAAI,GAAG;IAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAA;CAiCpC,CAAA"}
|
|
@@ -10,11 +10,12 @@ import { hasChildren } from "./has-children.js";
|
|
|
10
10
|
* @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)
|
|
11
11
|
* @returns True if the item should be rendered as a folder/group node
|
|
12
12
|
*/
|
|
13
|
-
var isSidebarFolder = (layout, item, hasEmptySlot) => {
|
|
13
|
+
var isSidebarFolder = (layout, item, hasEmptySlot, hideOperationDefaultExamples) => {
|
|
14
14
|
if (!hasChildren(item)) {
|
|
15
15
|
if (layout === "client" && hasEmptySlot) return item.type === "document" || item.type === "tag";
|
|
16
16
|
return false;
|
|
17
17
|
}
|
|
18
|
+
if (hideOperationDefaultExamples && item.type === "operation" && item.children?.length === 1 && item.children[0]?.type === "example" && item.children[0]?.name === "default") return false;
|
|
18
19
|
if (layout === "client") return true;
|
|
19
20
|
if (layout === "reference") return item.type !== "operation" && item.type !== "webhook";
|
|
20
21
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-sidebar-folder.js","names":[],"sources":["../../src/helpers/is-sidebar-folder.ts"],"sourcesContent":["import { hasChildren } from '@/helpers/has-children'\nimport type { Item, Layout } from '@/types'\n\n/**\n * Determines if a sidebar item should be treated as a \"folder\",\n * i.e. a collapsible group, depending on the layout, its type,\n * whether it has children, and special slot rules.\n *\n * @param layout - The sidebar layout ('client' or 'reference')\n * @param item - The sidebar item to check\n * @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)\n * @returns True if the item should be rendered as a folder/group node\n */\nexport const isSidebarFolder = (\n layout: Layout,\n item: Item,\n hasEmptySlot: boolean,\n): item is Item & { children?: Item[] } => {\n // If the item has no children, check if there is an empty slot.\n if (!hasChildren(item)) {\n // In 'client' layout, allow \"document\" or \"tag\" items to act as group if there's an empty slot\n if (layout === 'client' && hasEmptySlot) {\n return item.type === 'document' || item.type === 'tag'\n }\n // Otherwise, not a folder if it has no children\n return false\n }\n\n // 'client' layout: any item with children is a folder\n if (layout === 'client') {\n return true\n }\n\n // 'reference' layout: only non-'operation' and non-'webhook' are groups/folders\n if (layout === 'reference') {\n return item.type !== 'operation' && item.type !== 'webhook'\n }\n\n // Fallback: not a folder in other cases/layouts\n return false\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,mBACX,QACA,MACA,
|
|
1
|
+
{"version":3,"file":"is-sidebar-folder.js","names":[],"sources":["../../src/helpers/is-sidebar-folder.ts"],"sourcesContent":["import { hasChildren } from '@/helpers/has-children'\nimport type { Item, Layout } from '@/types'\n\n/**\n * Determines if a sidebar item should be treated as a \"folder\",\n * i.e. a collapsible group, depending on the layout, its type,\n * whether it has children, and special slot rules.\n *\n * @param layout - The sidebar layout ('client' or 'reference')\n * @param item - The sidebar item to check\n * @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)\n * @returns True if the item should be rendered as a folder/group node\n */\nexport const isSidebarFolder = (\n layout: Layout,\n item: Item,\n hasEmptySlot: boolean,\n hideOperationDefaultExamples: boolean,\n): item is Item & { children?: Item[] } => {\n // If the item has no children, check if there is an empty slot.\n if (!hasChildren(item)) {\n // In 'client' layout, allow \"document\" or \"tag\" items to act as group if there's an empty slot\n if (layout === 'client' && hasEmptySlot) {\n return item.type === 'document' || item.type === 'tag'\n }\n // Otherwise, not a folder if it has no children\n return false\n }\n\n if (\n hideOperationDefaultExamples &&\n item.type === 'operation' &&\n item.children?.length === 1 &&\n item.children[0]?.type === 'example' &&\n item.children[0]?.name === 'default'\n ) {\n return false\n }\n\n // 'client' layout: any item with children is a folder\n if (layout === 'client') {\n return true\n }\n\n // 'reference' layout: only non-'operation' and non-'webhook' are groups/folders\n if (layout === 'reference') {\n return item.type !== 'operation' && item.type !== 'webhook'\n }\n\n // Fallback: not a folder in other cases/layouts\n return false\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,mBACX,QACA,MACA,cACA,iCACyC;AAEzC,KAAI,CAAC,YAAY,KAAK,EAAE;AAEtB,MAAI,WAAW,YAAY,aACzB,QAAO,KAAK,SAAS,cAAc,KAAK,SAAS;AAGnD,SAAO;;AAGT,KACE,gCACA,KAAK,SAAS,eACd,KAAK,UAAU,WAAW,KAC1B,KAAK,SAAS,IAAI,SAAS,aAC3B,KAAK,SAAS,IAAI,SAAS,UAE3B,QAAO;AAIT,KAAI,WAAW,SACb,QAAO;AAIT,KAAI,WAAW,YACb,QAAO,KAAK,SAAS,eAAe,KAAK,SAAS;AAIpD,QAAO"}
|
package/dist/style.css
CHANGED
|
@@ -242,6 +242,7 @@
|
|
|
242
242
|
--scalar-text-decoration-hover: underline;
|
|
243
243
|
--scalar-link-font-weight: inherit;
|
|
244
244
|
--scalar-sidebar-indent: 20px;
|
|
245
|
+
--scalar-sidebar-padding: 12px;
|
|
245
246
|
}
|
|
246
247
|
|
|
247
248
|
.dark-mode {
|
|
@@ -1711,6 +1712,22 @@
|
|
|
1711
1712
|
display: flex;
|
|
1712
1713
|
}
|
|
1713
1714
|
|
|
1715
|
+
.animate-sidebar-border-bottom {
|
|
1716
|
+
animation: forwards border-bottom;
|
|
1717
|
+
animation-timeline: scroll();
|
|
1718
|
+
animation-range-end: 1px;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
@keyframes border-bottom {
|
|
1722
|
+
from {
|
|
1723
|
+
border-bottom-width: 0;
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
to {
|
|
1727
|
+
border-bottom-width: var(--scalar-border-width);
|
|
1728
|
+
}
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1714
1731
|
.group\/sidebar-section:first-of-type > .group\/spacer-before, .group\/sidebar-section:last-of-type > .group\/spacer-after {
|
|
1715
1732
|
height: 0;
|
|
1716
1733
|
}
|
|
@@ -2067,6 +2084,10 @@
|
|
|
2067
2084
|
}
|
|
2068
2085
|
}
|
|
2069
2086
|
|
|
2087
|
+
:where(.scalar-app) [class*="rotate-"], :where(.scalar-app) [class*="translate-"], :where(.scalar-app) [class*="scale-"] {
|
|
2088
|
+
transform: none;
|
|
2089
|
+
}
|
|
2090
|
+
|
|
2070
2091
|
.scalar-app .pointer-events-none {
|
|
2071
2092
|
pointer-events: none;
|
|
2072
2093
|
}
|
|
@@ -2160,6 +2181,10 @@
|
|
|
2160
2181
|
top: var(--nested-items-offset) !important;
|
|
2161
2182
|
}
|
|
2162
2183
|
|
|
2184
|
+
.scalar-app .top-\(--scalar-sidebar-sticky-offset\,0\) {
|
|
2185
|
+
top: var(--scalar-sidebar-sticky-offset, 0);
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2163
2188
|
.scalar-app .top-0 {
|
|
2164
2189
|
top: 0;
|
|
2165
2190
|
}
|
|
@@ -2344,6 +2369,10 @@
|
|
|
2344
2369
|
margin: 0 !important;
|
|
2345
2370
|
}
|
|
2346
2371
|
|
|
2372
|
+
.scalar-app .-m-\(--scalar-sidebar-padding\) {
|
|
2373
|
+
margin: calc(var(--scalar-sidebar-padding) * -1);
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2347
2376
|
.scalar-app .-m-0\.5 {
|
|
2348
2377
|
margin: -2px;
|
|
2349
2378
|
}
|
|
@@ -2707,6 +2736,10 @@
|
|
|
2707
2736
|
min-height: 48px;
|
|
2708
2737
|
}
|
|
2709
2738
|
|
|
2739
|
+
.scalar-app .w-\(--scalar-sidebar-width\) {
|
|
2740
|
+
width: var(--scalar-sidebar-width);
|
|
2741
|
+
}
|
|
2742
|
+
|
|
2710
2743
|
.scalar-app .w-3 {
|
|
2711
2744
|
width: 12px;
|
|
2712
2745
|
}
|
|
@@ -3251,6 +3284,10 @@
|
|
|
3251
3284
|
border-color: var(--scalar-sidebar-search-border-color, var(--scalar-border-color));
|
|
3252
3285
|
}
|
|
3253
3286
|
|
|
3287
|
+
.scalar-app .border-b-sidebar-border {
|
|
3288
|
+
border-bottom-color: var(--scalar-sidebar-border-color, var(--scalar-border-color));
|
|
3289
|
+
}
|
|
3290
|
+
|
|
3254
3291
|
.scalar-app .bg-\(--bg-light\) {
|
|
3255
3292
|
background-color: var(--bg-light);
|
|
3256
3293
|
}
|
|
@@ -3412,6 +3449,10 @@
|
|
|
3412
3449
|
mask-repeat: repeat;
|
|
3413
3450
|
}
|
|
3414
3451
|
|
|
3452
|
+
.scalar-app .p-\(--scalar-sidebar-padding\) {
|
|
3453
|
+
padding: var(--scalar-sidebar-padding);
|
|
3454
|
+
}
|
|
3455
|
+
|
|
3415
3456
|
.scalar-app .p-0 {
|
|
3416
3457
|
padding: 0;
|
|
3417
3458
|
}
|
|
@@ -4057,12 +4098,12 @@
|
|
|
4057
4098
|
font-family: inherit;
|
|
4058
4099
|
}
|
|
4059
4100
|
|
|
4060
|
-
.scalar-app .first\:rounded-t-\[inherit\]:first-child
|
|
4101
|
+
.scalar-app .first\:rounded-t-\[inherit\]:first-child {
|
|
4061
4102
|
border-top-left-radius: inherit;
|
|
4062
4103
|
border-top-right-radius: inherit;
|
|
4063
4104
|
}
|
|
4064
4105
|
|
|
4065
|
-
.scalar-app .last\:rounded-b-\[inherit\]:last-child
|
|
4106
|
+
.scalar-app .last\:rounded-b-\[inherit\]:last-child {
|
|
4066
4107
|
border-bottom-right-radius: inherit;
|
|
4067
4108
|
border-bottom-left-radius: inherit;
|
|
4068
4109
|
}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "git+https://github.com/scalar/scalar.git",
|
|
11
11
|
"directory": "packages/sidebar"
|
|
12
12
|
},
|
|
13
|
-
"version": "0.
|
|
13
|
+
"version": "0.9.0",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=22"
|
|
16
16
|
},
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.30",
|
|
34
|
-
"@scalar/components": "0.21.
|
|
34
|
+
"@scalar/components": "0.21.4",
|
|
35
35
|
"@scalar/helpers": "0.4.3",
|
|
36
|
-
"@scalar/themes": "0.15.2",
|
|
37
36
|
"@scalar/use-hooks": "0.4.2",
|
|
38
|
-
"@scalar/
|
|
39
|
-
"@scalar/
|
|
37
|
+
"@scalar/icons": "0.7.2",
|
|
38
|
+
"@scalar/workspace-store": "0.45.0",
|
|
39
|
+
"@scalar/themes": "0.15.3"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@tailwindcss/vite": "^4.2.0",
|