@scalar/api-client 2.38.4 → 2.39.0

package/dist/components/Sidebar/Actions/EditSidebarListCollection.vue.script.js

@@ -0,0 +1,56 @@
+import IconSelector_default from "../../IconSelector.vue.js";
+import SidebarListElementForm_default from "./SidebarListElementForm.vue.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
+import { ScalarButton, ScalarTextInput } from "@scalar/components";
+import { LibraryIcon } from "@scalar/icons/library";
+//#region src/components/Sidebar/Actions/EditSidebarListCollection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "grid grid-cols-[auto_1fr] gap-2" };
+var _hoisted_2 = { class: "flex aspect-square" };
+var EditSidebarListCollection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EditSidebarListCollection",
+	props: {
+		name: {},
+		icon: {}
+	},
+	emits: ["close", "edit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const newName = ref(props.name);
+		const newIcon = ref(props.icon);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SidebarListElementForm_default, {
+				onCancel: _cache[2] || (_cache[2] = ($event) => emit("close")),
+				onSubmit: _cache[3] || (_cache[3] = ($event) => emit("edit", newName.value, newIcon.value))
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(IconSelector_default, {
+					modelValue: newIcon.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newIcon.value = $event),
+					placement: "bottom-start"
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarButton), {
+						class: "aspect-square h-auto px-0",
+						variant: "outlined"
+					}, {
+						default: withCtx(() => [createVNode(unref(LibraryIcon), {
+							class: "text-c-2 size-4",
+							src: newIcon.value
+						}, null, 8, ["src"])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue"])]), createVNode(unref(ScalarTextInput), {
+					modelValue: newName.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => newName.value = $event),
+					autofocus: "",
+					class: "flex-1"
+				}, null, 8, ["modelValue"])])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { EditSidebarListCollection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EditSidebarListCollection.vue.script.js.map

package/dist/components/Sidebar/Actions/EditSidebarListCollection.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditSidebarListCollection.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/EditSidebarListCollection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTextInput } from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { ref } from 'vue'\n\nimport IconSelector from '@/components/IconSelector.vue'\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nconst props = defineProps<{\n  name: string\n  icon: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'edit', newName: string, newIcon: string): void\n}>()\n\nconst newName = ref(props.name)\nconst newIcon = ref(props.icon)\n</script>\n<template>\n  <SidebarListElementForm\n    @cancel=\"emit('close')\"\n    @submit=\"emit('edit', newName, newIcon)\">\n    <div class=\"grid grid-cols-[auto_1fr] gap-2\">\n      <div class=\"flex aspect-square\">\n        <IconSelector\n          v-model=\"newIcon\"\n          placement=\"bottom-start\">\n          <ScalarButton\n            class=\"aspect-square h-auto px-0\"\n            variant=\"outlined\">\n            <LibraryIcon\n              class=\"text-c-2 size-4\"\n              :src=\"newIcon\" />\n          </ScalarButton>\n        </IconSelector>\n      </div>\n      <ScalarTextInput\n        v-model=\"newName\"\n        autofocus\n        class=\"flex-1\" />\n    </div>\n  </SidebarListElementForm>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAKb,MAAM,UAAU,IAAI,MAAM,KAAI;EAC9B,MAAM,UAAU,IAAI,MAAM,KAAI;;uBAG5B,YAsByB,gCAAA;IArBtB,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAS,QAAA,OAAS,QAAA,MAAO;;2BAmBhC,CAlBN,mBAkBM,OAlBN,YAkBM,CAjBJ,mBAYM,OAZN,YAYM,CAXJ,YAUe,sBAAA;iBATJ,QAAA;0EAAO,QAAA;KAChB,WAAU;;4BAOK,CANf,YAMe,MAAA,aAAA,EAAA;MALb,OAAM;MACN,SAAQ;;6BAGW,CAFnB,YAEmB,MAAA,YAAA,EAAA;OADjB,OAAM;OACL,KAAK,QAAA;;;;;6BAId,YAGmB,MAAA,gBAAA,EAAA;iBAFR,QAAA;0EAAO,QAAA;KAChB,WAAA;KACA,OAAM"}

package/dist/components/Sidebar/Actions/EditSidebarListElement.vue.js

@@ -0,0 +1,7 @@
+import EditSidebarListElement_vue_vue_type_script_setup_true_lang_default from "./EditSidebarListElement.vue.script.js";
+//#region src/components/Sidebar/Actions/EditSidebarListElement.vue
+var EditSidebarListElement_default = EditSidebarListElement_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EditSidebarListElement_default as default };
+
+//# sourceMappingURL=EditSidebarListElement.vue.js.map

package/dist/components/Sidebar/Actions/EditSidebarListElement.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditSidebarListElement.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/EditSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarTextInput } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nconst props = defineProps<{\n  name: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'edit', newName: string): void\n}>()\n\nconst newName = ref(props.name)\n</script>\n<template>\n  <SidebarListElementForm\n    @cancel=\"emit('close')\"\n    @submit=\"emit('edit', newName)\">\n    <ScalarTextInput\n      v-model=\"newName\"\n      autofocus />\n  </SidebarListElementForm>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/Actions/EditSidebarListElement.vue.script.js

@@ -0,0 +1,31 @@
+import SidebarListElementForm_default from "./SidebarListElementForm.vue.js";
+import { createBlock, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
+import { ScalarTextInput } from "@scalar/components";
+//#region src/components/Sidebar/Actions/EditSidebarListElement.vue?vue&type=script&setup=true&lang.ts
+var EditSidebarListElement_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EditSidebarListElement",
+	props: { name: {} },
+	emits: ["close", "edit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const newName = ref(props.name);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SidebarListElementForm_default, {
+				onCancel: _cache[1] || (_cache[1] = ($event) => emit("close")),
+				onSubmit: _cache[2] || (_cache[2] = ($event) => emit("edit", newName.value))
+			}, {
+				default: withCtx(() => [createVNode(unref(ScalarTextInput), {
+					modelValue: newName.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newName.value = $event),
+					autofocus: ""
+				}, null, 8, ["modelValue"])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { EditSidebarListElement_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EditSidebarListElement.vue.script.js.map

package/dist/components/Sidebar/Actions/EditSidebarListElement.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditSidebarListElement.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/EditSidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarTextInput } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nconst props = defineProps<{\n  name: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'close'): void\n  (e: 'edit', newName: string): void\n}>()\n\nconst newName = ref(props.name)\n</script>\n<template>\n  <SidebarListElementForm\n    @cancel=\"emit('close')\"\n    @submit=\"emit('edit', newName)\">\n    <ScalarTextInput\n      v-model=\"newName\"\n      autofocus />\n  </SidebarListElementForm>\n</template>\n"],"mappings":";;;;;;;;;EAMA,MAAM,QAAQ;EAId,MAAM,OAAO;EAKb,MAAM,UAAU,IAAI,MAAM,KAAI;;uBAG5B,YAMyB,gCAAA;IALtB,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;IACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAS,QAAA,MAAO;;2BAGf,CAFd,YAEc,MAAA,gBAAA,EAAA;iBADH,QAAA;0EAAO,QAAA;KAChB,WAAA"}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.js

@@ -0,0 +1,7 @@
+import SidebarListElementForm_vue_vue_type_script_setup_true_lang_default from "./SidebarListElementForm.vue.script.js";
+//#region src/components/Sidebar/Actions/SidebarListElementForm.vue
+var SidebarListElementForm_default = SidebarListElementForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarListElementForm_default as default };
+
+//# sourceMappingURL=SidebarListElementForm.vue.js.map

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElementForm.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js

@@ -0,0 +1,41 @@
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarButton } from "@scalar/components";
+//#region src/components/Sidebar/Actions/SidebarListElementForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex justify-between gap-10" };
+var SidebarListElementForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarListElementForm",
+	props: {
+		danger: { type: Boolean },
+		label: {}
+	},
+	emits: ["cancel", "submit"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "flex flex-col gap-4 text-base",
+				onSubmit: _cache[1] || (_cache[1] = withModifiers(($event) => emit("submit"), ["prevent"]))
+			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarButton), {
+				size: "sm",
+				type: "button",
+				variant: "outlined",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
+			}, {
+				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+				_: 1
+			}), createVNode(unref(ScalarButton), {
+				"data-testid": "sidebar-list-element-form-submit-button",
+				size: "sm",
+				type: "submit",
+				variant: __props.danger ? "danger" : "solid"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.label ?? "Save"), 1)]),
+				_: 1
+			}, 8, ["variant"])])], 32);
+		};
+	}
+});
+//#endregion
+export { SidebarListElementForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarListElementForm.vue.script.js.map

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElementForm.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAMX,mBAoBO,QAAA;IAnBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,SAAA,EAAA,CAAA,UAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,UAAA,EACR,mBAeM,OAfN,YAeM,CAdJ,YAMe,MAAA,aAAA,EAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,GAAA,CAAA,EAAA,CAAA;;OACA,YAMe,MAAA,aAAA,EAAA;IALb,eAAY;IACZ,MAAK;IACL,MAAK;IACJ,SAAS,QAAA,SAAM,WAAA;;2BACK,CAAA,gBAAA,gBAAlB,QAAA,SAAK,OAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/Sidebar/Sidebar.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import Sidebar_vue_vue_type_script_setup_true_lang_default from "./Sidebar.vue.script.js";
+/* empty css                      */
+//#region src/components/Sidebar/Sidebar.vue
+var Sidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Sidebar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7aa06e5a"]]);
+//#endregion
+export { Sidebar_default as default };
+
+//# sourceMappingURL=Sidebar.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.vue.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,71 @@
+import { useLayout } from "../../hooks/useLayout.js";
+import { useSidebar } from "../../hooks/useSidebar.js";
+import { useWorkspace } from "../../store/store.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { useBreakpoints } from "@scalar/use-hooks/useBreakpoints";
+//#region src/components/Sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5"
+};
+var _hoisted_2 = { class: "m-0 text-sm font-medium whitespace-nowrap" };
+var _hoisted_3 = { class: "bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5" };
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Sidebar",
+	props: { title: {} },
+	setup(__props) {
+		const { isSidebarOpen } = useSidebar();
+		const { sidebarWidth, setSidebarWidth } = useWorkspace();
+		const { layout } = useLayout();
+		const isDragging = ref(false);
+		const sidebarRef = ref(null);
+		const { breakpoints } = useBreakpoints();
+		const startDrag = (event) => {
+			event.preventDefault();
+			const startX = event.clientX;
+			/** Current sidebar width when dragging starts */
+			const startWidth = Number.parseInt(getComputedStyle(sidebarRef.value).width || sidebarWidth.value, 10);
+			const doDrag = (dragEvent) => {
+				isDragging.value = true;
+				document.body.classList.add("dragging");
+				let newWidth = startWidth + dragEvent.clientX - startX;
+				if (newWidth > 420)
+ /** Elastic effect */
+				newWidth = 420 + (newWidth - 420) * .2;
+				if (newWidth < 240) newWidth = 240;
+				setSidebarWidth(`${newWidth}px`);
+			};
+			const stopDrag = () => {
+				isDragging.value = false;
+				document.body.classList.remove("dragging");
+				document.documentElement.removeEventListener("mousemove", doDrag, false);
+				document.documentElement.removeEventListener("mouseup", stopDrag, false);
+				/** Reset to max width if exceeded */
+				if (Number.parseInt(sidebarWidth.value, 10) > 420) setSidebarWidth("360px");
+				else if (Number.parseInt(sidebarWidth.value, 10) < 240) setSidebarWidth("240px");
+			};
+			document.documentElement.addEventListener("mousemove", doDrag, false);
+			document.documentElement.addEventListener("mouseup", stopDrag, false);
+		};
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("aside", {
+				ref_key: "sidebarRef",
+				ref: sidebarRef,
+				class: normalizeClass(["sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0", { dragging: isDragging.value }]),
+				style: normalizeStyle({ width: unref(breakpoints).lg ? unref(sidebarWidth) : "100%" })
+			}, [
+				renderSlot(_ctx.$slots, "header", {}, void 0, true),
+				unref(layout) !== "modal" && __props.title ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("h2", _hoisted_2, toDisplayString(__props.title), 1), !unref(breakpoints).lg ? renderSlot(_ctx.$slots, "button", { key: 0 }, void 0, true) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(["custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]", { "sidebar-mask": unref(layout) !== "modal" }]) }, [renderSlot(_ctx.$slots, "content", {}, void 0, true)], 2),
+				unref(breakpoints).lg ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "button", {}, void 0, true)]), createElementVNode("div", {
+					class: "resizer",
+					onMousedown: startDrag
+				}, null, 32)], 64)) : createCommentVNode("", true)
+			], 6)), [[vShow, unref(isSidebarOpen)]]);
+		};
+	}
+});
+//#endregion
+export { Sidebar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Sidebar.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.vue.script.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAYA,MAAM,EAAE,kBAAkB,YAAW;EACrC,MAAM,EAAE,cAAc,oBAAoB,cAAa;EACvD,MAAM,EAAE,WAAW,WAAU;EAC7B,MAAM,aAAa,IAAI,MAAK;EAE5B,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,EAAE,gBAAgB,gBAAe;EAEvC,MAAM,aAAa,UAAsB;AACvC,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;;GAErB,MAAM,aAAa,OAAO,SACxB,iBAAiB,WAAW,MAAO,CAAC,SAAS,aAAa,OAC1D,GACF;GAEA,MAAM,UAAU,cAA0B;AACxC,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,IAAI,WAAU;IACtC,IAAI,WAAW,aAAa,UAAU,UAAU;AAChD,QAAI,WAAW;;AAEb,eAAW,OAAO,WAAW,OAAO;AAEtC,QAAI,WAAW,IACb,YAAW;AAEb,oBAAgB,GAAG,SAAS,IAAG;;GAGjC,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,OAAO,WAAU;AACzC,aAAS,gBAAgB,oBAAoB,aAAa,QAAQ,MAAK;AACvE,aAAS,gBAAgB,oBAAoB,WAAW,UAAU,MAAK;;AAEvE,QAAI,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IAC5C,iBAAgB,QAAO;aACd,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IACnD,iBAAgB,QAAO;;AAI3B,YAAS,gBAAgB,iBAAiB,aAAa,QAAQ,MAAK;AACpE,YAAS,gBAAgB,iBAAiB,WAAW,UAAU,MAAK;;;uCAIpE,mBAiCQ,SAAA;aA/BF;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,yIAAuI,EAAA,UACzH,WAAA,OAAU,CAAA,CAAA;IAC7B,OAAK,eAAA,EAAA,OAAW,MAAA,YAAW,CAAC,KAAK,MAAA,aAAY,GAAA,QAAA,CAAA;;IAC9C,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA;IAEd,MAAA,OAAM,KAAA,WAAgB,QAAA,SAAA,WAAA,EAD9B,mBASM,OATN,YASM,CANJ,mBAEK,MAFL,YAEK,gBADA,QAAA,MAAK,EAAA,EAAA,EAAA,CAGD,MAAA,YAAW,CAAC,KADrB,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,KAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEpB,mBAMM,OAAA,EALJ,OAAK,eAAA,CAAC,8DAA4D,EAAA,gBAChC,MAAA,OAAM,KAAA,SAAA,CAAA,CAAA,EAAA,EAAA,CAGxC,WAAuB,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA;IAET,MAAA,YAAW,CAAC,MAAA,WAAA,EAA5B,mBAQW,UAAA,EAAA,KAAA,GAAA,EAAA,CAPT,mBAGM,OAHN,YAGM,CADJ,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,EAExB,mBAE2B,OAAA;KADzB,OAAM;KACL,aAAW;;oBA9BR,MAAA,cAAa,CAAA,CAAA,CAAA"}

package/dist/components/Sidebar/SidebarButton.vue.js

@@ -0,0 +1,7 @@
+import SidebarButton_vue_vue_type_script_setup_true_lang_default from "./SidebarButton.vue.script.js";
+//#region src/components/Sidebar/SidebarButton.vue
+var SidebarButton_default = SidebarButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarButton_default as default };
+
+//# sourceMappingURL=SidebarButton.vue.js.map

package/dist/components/Sidebar/SidebarButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarButton.vue.js","names":[],"sources":["../../../src/components/Sidebar/SidebarButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarHotkey } from '@scalar/components'\n\nimport { useLayout } from '@/hooks'\n\nconst props = defineProps<{\n  click: () => void\n  hotkey?: string\n}>()\n\nconst { layout } = useLayout()\n\nconst handleClick = () => {\n  props.click()\n}\n</script>\n<template>\n  <ScalarButton\n    class=\"bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5\"\n    variant=\"outlined\"\n    @click=\"handleClick\">\n    <slot name=\"title\" />\n    <ScalarHotkey\n      v-if=\"hotkey && layout === 'desktop'\"\n      class=\"text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex\"\n      :hotkey=\"hotkey\" />\n  </ScalarButton>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/SidebarButton.vue.script.js

@@ -0,0 +1,36 @@
+import { useLayout } from "../../hooks/useLayout.js";
+import { createBlock, createCommentVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ScalarButton, ScalarHotkey } from "@scalar/components";
+//#region src/components/Sidebar/SidebarButton.vue?vue&type=script&setup=true&lang.ts
+var SidebarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarButton",
+	props: {
+		click: { type: Function },
+		hotkey: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { layout } = useLayout();
+		const handleClick = () => {
+			props.click();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarButton), {
+				class: "bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5",
+				variant: "outlined",
+				onClick: handleClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "title"), __props.hotkey && unref(layout) === "desktop" ? (openBlock(), createBlock(unref(ScalarHotkey), {
+					key: 0,
+					class: "text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex",
+					hotkey: __props.hotkey
+				}, null, 8, ["hotkey"])) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { SidebarButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarButton.vue.script.js.map

package/dist/components/Sidebar/SidebarButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarButton.vue.script.js","names":[],"sources":["../../../src/components/Sidebar/SidebarButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarHotkey } from '@scalar/components'\n\nimport { useLayout } from '@/hooks'\n\nconst props = defineProps<{\n  click: () => void\n  hotkey?: string\n}>()\n\nconst { layout } = useLayout()\n\nconst handleClick = () => {\n  props.click()\n}\n</script>\n<template>\n  <ScalarButton\n    class=\"bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5\"\n    variant=\"outlined\"\n    @click=\"handleClick\">\n    <slot name=\"title\" />\n    <ScalarHotkey\n      v-if=\"hotkey && layout === 'desktop'\"\n      class=\"text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex\"\n      :hotkey=\"hotkey\" />\n  </ScalarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,oBAAoB;AACxB,SAAM,OAAM;;;uBAIZ,YASe,MAAA,aAAA,EAAA;IARb,OAAM;IACN,SAAQ;IACP,SAAO;;2BACa,CAArB,WAAqB,KAAA,QAAA,QAAA,EAEb,QAAA,UAAU,MAAA,OAAM,KAAA,aAAA,WAAA,EADxB,YAGqB,MAAA,aAAA,EAAA;;KADnB,OAAM;KACL,QAAQ,QAAA"}

package/dist/components/Sidebar/SidebarList.vue.js

@@ -0,0 +1,13 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock, openBlock, renderSlot } from "vue";
+//#region src/components/Sidebar/SidebarList.vue
+var _sfc_main = {};
+var _hoisted_1 = { class: "gap-1/2 flex flex-col px-3 pb-[75px]" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("ul", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+}
+var SidebarList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { SidebarList_default as default };
+
+//# sourceMappingURL=SidebarList.vue.js.map

package/dist/components/Sidebar/SidebarList.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarList.vue.js","names":[],"sources":["../../../src/components/Sidebar/SidebarList.vue"],"sourcesContent":["<template>\n  <ul class=\"gap-1/2 flex flex-col px-3 pb-[75px]\">\n    <slot />\n  </ul>\n</template>\n"],"mappings":";;;;mBACM,OAAM,wCAAsC;;qBAAhD,mBAEK,MAFL,YAEK,CADH,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/Sidebar/SidebarListElement.vue.js

@@ -0,0 +1,10 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import SidebarListElement_vue_vue_type_script_setup_true_lang_default from "./SidebarListElement.vue.script.js";
+/* empty css                                 */
+/* empty css                                   */
+//#region src/components/Sidebar/SidebarListElement.vue
+var SidebarListElement_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SidebarListElement_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-298ba76d"]]);
+//#endregion
+export { SidebarListElement_default as default };
+
+//# sourceMappingURL=SidebarListElement.vue.js.map

package/dist/components/Sidebar/SidebarListElement.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElement.vue.js","names":[],"sources":["../../../src/components/Sidebar/SidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport {\n  Draggable,\n  type DraggableProps,\n  type DraggingItem,\n  type HoveredItem,\n} from '@scalar/draggable'\nimport { computed, ref } from 'vue'\nimport { useRouter, type RouteLocationRaw } from 'vue-router'\n\nimport SidebarListElementActions from '@/components/Sidebar/SidebarListElementActions.vue'\n\nconst {\n  isDraggable = false,\n  isDroppable = false,\n  to,\n} = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    color?: string\n    icon?: Icon\n    isDefault?: boolean\n  }\n  warningMessage?: string\n  to: RouteLocationRaw\n  isDeletable?: boolean\n  isCopyable?: boolean\n  isRenameable?: boolean\n  /**\n   * Toggle dragging on and off\n   *\n   * @default false\n   */\n  isDraggable?: boolean\n  /**\n   * Prevents items from being hovered and dropped into\n   *\n   * @default false\n   */\n  isDroppable?: DraggableProps['isDroppable']\n  collectionId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'colorModal', id: string): void\n  (e: 'rename', id: string): void\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n}>()\n\nconst router = useRouter()\n\nconst handleNavigation = (event: MouseEvent) => {\n  if (event.metaKey) {\n    window.open(router.resolve(to).href, '_blank')\n  } else {\n    router.push(to)\n  }\n}\n\nconst handleDelete = (id: string) => {\n  emit('delete', id)\n}\n\nconst handleColorClick = (uid: string) => {\n  emit('colorModal', uid)\n}\n\nconst handleRename = (id: string) => {\n  emit('rename', id)\n}\n\n/** The draggable component (bound in template via ref=\"_draggableRef\") */\nconst _draggableRef = ref<{\n  draggingItem: DraggingItem\n  hoveredItem: HoveredItem\n} | null>(null)\nvoid _draggableRef\n\n/** Calculate offsets for drag and drop */\nconst getDraggableOffsets = computed(() => ({\n  ceiling: 0.5,\n  floor: 0.5,\n}))\n</script>\n\n<template>\n  <li>\n    <Draggable\n      :id=\"variable.uid\"\n      ref=\"_draggableRef\"\n      :ceiling=\"getDraggableOffsets.ceiling\"\n      :floor=\"getDraggableOffsets.floor\"\n      :isDraggable=\"isDraggable\"\n      :isDroppable=\"isDroppable\"\n      :parentIds=\"collectionId ? [collectionId] : []\"\n      @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\">\n      <router-link\n        class=\"text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline\"\n        :class=\"[variable.color ? 'pl-5' : 'pl-1.5']\"\n        exactActiveClass=\"bg-b-2 !text-c-1\"\n        role=\"button\"\n        :to=\"to\"\n        @click.prevent=\"handleNavigation($event)\">\n        <button\n          v-if=\"variable.color\"\n          class=\"hover:bg-b-3 rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleColorClick(variable.uid)\">\n          <div\n            class=\"h-2.5 w-2.5 rounded-xl\"\n            :style=\"{ backgroundColor: variable.color }\"></div>\n        </button>\n        <ScalarIcon\n          v-if=\"variable.icon\"\n          class=\"text-sidebar-c-2 size-3.5 stroke-[2.25]\"\n          :icon=\"variable.icon\" />\n        <span\n          class=\"empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5\">\n          {{ variable.name }}\n        </span>\n        <SidebarListElementActions\n          :isCopyable=\"Boolean(isCopyable)\"\n          :isDeletable=\"Boolean(isDeletable)\"\n          :isRenameable=\"Boolean(isRenameable)\"\n          :variable=\"{ ...variable, isDefault: variable.isDefault ?? false }\"\n          :warningMessage=\"warningMessage\"\n          @delete=\"handleDelete\"\n          @rename=\"handleRename\" />\n      </router-link>\n    </Draggable>\n  </li>\n</template>\n\n<style>\n@import '@scalar/draggable/style.css';\n</style>\n\n<style scoped>\n.empty-variable-name:empty:before {\n  content: 'Untitled';\n  color: var(--scalar-color-3);\n}\n</style>\n"],"mappings":""}

package/dist/components/Sidebar/SidebarListElement.vue.script.js

@@ -0,0 +1,128 @@
+import SidebarListElementActions_default from "./SidebarListElementActions.vue.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarIcon } from "@scalar/components";
+import { useRouter } from "vue-router";
+import { Draggable } from "@scalar/draggable";
+//#region src/components/Sidebar/SidebarListElement.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5" };
+var SidebarListElement_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarListElement",
+	props: {
+		variable: {},
+		warningMessage: {},
+		to: {},
+		isDeletable: { type: Boolean },
+		isCopyable: { type: Boolean },
+		isRenameable: { type: Boolean },
+		isDraggable: {
+			type: Boolean,
+			default: false
+		},
+		isDroppable: {
+			type: [Boolean, Function],
+			default: false
+		},
+		collectionId: {}
+	},
+	emits: [
+		"delete",
+		"colorModal",
+		"rename",
+		"onDragEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const router = useRouter();
+		const handleNavigation = (event) => {
+			if (event.metaKey) window.open(router.resolve(__props.to).href, "_blank");
+			else router.push(__props.to);
+		};
+		const handleDelete = (id) => {
+			emit("delete", id);
+		};
+		const handleColorClick = (uid) => {
+			emit("colorModal", uid);
+		};
+		const handleRename = (id) => {
+			emit("rename", id);
+		};
+		/** The draggable component (bound in template via ref="_draggableRef") */
+		const _draggableRef = ref(null);
+		/** Calculate offsets for drag and drop */
+		const getDraggableOffsets = computed(() => ({
+			ceiling: .5,
+			floor: .5
+		}));
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return openBlock(), createElementBlock("li", null, [createVNode(unref(Draggable), {
+				id: __props.variable.uid,
+				ref_key: "_draggableRef",
+				ref: _draggableRef,
+				ceiling: getDraggableOffsets.value.ceiling,
+				floor: getDraggableOffsets.value.floor,
+				isDraggable: __props.isDraggable,
+				isDroppable: __props.isDroppable,
+				parentIds: __props.collectionId ? [__props.collectionId] : [],
+				onOnDragEnd: _cache[2] || (_cache[2] = (...args) => _ctx.$emit("onDragEnd", ...args))
+			}, {
+				default: withCtx(() => [createVNode(_component_router_link, {
+					class: normalizeClass(["text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline", [__props.variable.color ? "pl-5" : "pl-1.5"]]),
+					exactActiveClass: "bg-b-2 !text-c-1",
+					role: "button",
+					to: __props.to,
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => handleNavigation($event), ["prevent"]))
+				}, {
+					default: withCtx(() => [
+						__props.variable.color ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							class: "hover:bg-b-3 rounded p-1.5",
+							type: "button",
+							onClick: _cache[0] || (_cache[0] = ($event) => handleColorClick(__props.variable.uid))
+						}, [createElementVNode("div", {
+							class: "h-2.5 w-2.5 rounded-xl",
+							style: normalizeStyle({ backgroundColor: __props.variable.color })
+						}, null, 4)])) : createCommentVNode("", true),
+						__props.variable.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
+							key: 1,
+							class: "text-sidebar-c-2 size-3.5 stroke-[2.25]",
+							icon: __props.variable.icon
+						}, null, 8, ["icon"])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_1, toDisplayString(__props.variable.name), 1),
+						createVNode(SidebarListElementActions_default, {
+							isCopyable: Boolean(__props.isCopyable),
+							isDeletable: Boolean(__props.isDeletable),
+							isRenameable: Boolean(__props.isRenameable),
+							variable: {
+								...__props.variable,
+								isDefault: __props.variable.isDefault ?? false
+							},
+							warningMessage: __props.warningMessage,
+							onDelete: handleDelete,
+							onRename: handleRename
+						}, null, 8, [
+							"isCopyable",
+							"isDeletable",
+							"isRenameable",
+							"variable",
+							"warningMessage"
+						])
+					]),
+					_: 1
+				}, 8, ["class", "to"])]),
+				_: 1
+			}, 8, [
+				"id",
+				"ceiling",
+				"floor",
+				"isDraggable",
+				"isDroppable",
+				"parentIds"
+			])]);
+		};
+	}
+});
+//#endregion
+export { SidebarListElement_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarListElement.vue.script.js.map

package/dist/components/Sidebar/SidebarListElement.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElement.vue.script.js","names":["$emit"],"sources":["../../../src/components/Sidebar/SidebarListElement.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport {\n  Draggable,\n  type DraggableProps,\n  type DraggingItem,\n  type HoveredItem,\n} from '@scalar/draggable'\nimport { computed, ref } from 'vue'\nimport { useRouter, type RouteLocationRaw } from 'vue-router'\n\nimport SidebarListElementActions from '@/components/Sidebar/SidebarListElementActions.vue'\n\nconst {\n  isDraggable = false,\n  isDroppable = false,\n  to,\n} = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    color?: string\n    icon?: Icon\n    isDefault?: boolean\n  }\n  warningMessage?: string\n  to: RouteLocationRaw\n  isDeletable?: boolean\n  isCopyable?: boolean\n  isRenameable?: boolean\n  /**\n   * Toggle dragging on and off\n   *\n   * @default false\n   */\n  isDraggable?: boolean\n  /**\n   * Prevents items from being hovered and dropped into\n   *\n   * @default false\n   */\n  isDroppable?: DraggableProps['isDroppable']\n  collectionId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'colorModal', id: string): void\n  (e: 'rename', id: string): void\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n}>()\n\nconst router = useRouter()\n\nconst handleNavigation = (event: MouseEvent) => {\n  if (event.metaKey) {\n    window.open(router.resolve(to).href, '_blank')\n  } else {\n    router.push(to)\n  }\n}\n\nconst handleDelete = (id: string) => {\n  emit('delete', id)\n}\n\nconst handleColorClick = (uid: string) => {\n  emit('colorModal', uid)\n}\n\nconst handleRename = (id: string) => {\n  emit('rename', id)\n}\n\n/** The draggable component (bound in template via ref=\"_draggableRef\") */\nconst _draggableRef = ref<{\n  draggingItem: DraggingItem\n  hoveredItem: HoveredItem\n} | null>(null)\nvoid _draggableRef\n\n/** Calculate offsets for drag and drop */\nconst getDraggableOffsets = computed(() => ({\n  ceiling: 0.5,\n  floor: 0.5,\n}))\n</script>\n\n<template>\n  <li>\n    <Draggable\n      :id=\"variable.uid\"\n      ref=\"_draggableRef\"\n      :ceiling=\"getDraggableOffsets.ceiling\"\n      :floor=\"getDraggableOffsets.floor\"\n      :isDraggable=\"isDraggable\"\n      :isDroppable=\"isDroppable\"\n      :parentIds=\"collectionId ? [collectionId] : []\"\n      @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\">\n      <router-link\n        class=\"text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline\"\n        :class=\"[variable.color ? 'pl-5' : 'pl-1.5']\"\n        exactActiveClass=\"bg-b-2 !text-c-1\"\n        role=\"button\"\n        :to=\"to\"\n        @click.prevent=\"handleNavigation($event)\">\n        <button\n          v-if=\"variable.color\"\n          class=\"hover:bg-b-3 rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleColorClick(variable.uid)\">\n          <div\n            class=\"h-2.5 w-2.5 rounded-xl\"\n            :style=\"{ backgroundColor: variable.color }\"></div>\n        </button>\n        <ScalarIcon\n          v-if=\"variable.icon\"\n          class=\"text-sidebar-c-2 size-3.5 stroke-[2.25]\"\n          :icon=\"variable.icon\" />\n        <span\n          class=\"empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5\">\n          {{ variable.name }}\n        </span>\n        <SidebarListElementActions\n          :isCopyable=\"Boolean(isCopyable)\"\n          :isDeletable=\"Boolean(isDeletable)\"\n          :isRenameable=\"Boolean(isRenameable)\"\n          :variable=\"{ ...variable, isDefault: variable.isDefault ?? false }\"\n          :warningMessage=\"warningMessage\"\n          @delete=\"handleDelete\"\n          @rename=\"handleRename\" />\n      </router-link>\n    </Draggable>\n  </li>\n</template>\n\n<style>\n@import '@scalar/draggable/style.css';\n</style>\n\n<style scoped>\n.empty-variable-name:empty:before {\n  content: 'Untitled';\n  color: var(--scalar-color-3);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;EAOb,MAAM,SAAS,WAAU;EAEzB,MAAM,oBAAoB,UAAsB;AAC9C,OAAI,MAAM,QACR,QAAO,KAAK,OAAO,QAAQ,QAAA,GAAG,CAAC,MAAM,SAAQ;OAE7C,QAAO,KAAK,QAAA,GAAE;;EAIlB,MAAM,gBAAgB,OAAe;AACnC,QAAK,UAAU,GAAE;;EAGnB,MAAM,oBAAoB,QAAgB;AACxC,QAAK,cAAc,IAAG;;EAGxB,MAAM,gBAAgB,OAAe;AACnC,QAAK,UAAU,GAAE;;;EAInB,MAAM,gBAAgB,IAGZ,KAAI;;EAId,MAAM,sBAAsB,gBAAgB;GAC1C,SAAS;GACT,OAAO;GACR,EAAC;;;uBAIA,mBA4CK,MAAA,MAAA,CA3CH,YA0CY,MAAA,UAAA,EAAA;IAzCT,IAAI,QAAA,SAAS;aACV;IAAJ,KAAI;IACH,SAAS,oBAAA,MAAoB;IAC7B,OAAO,oBAAA,MAAoB;IAC3B,aAAa,QAAA;IACb,aAAa,QAAA;IACb,WAAW,QAAA,eAAY,CAAI,QAAA,aAAY,GAAA,EAAA;IACvC,aAAS,OAAA,OAAA,OAAA,MAAA,GAAM,SAASA,KAAAA,MAAK,aAAA,GAAiB,KAAI;;2BAiCrC,CAhCd,YAgCc,wBAAA;KA/BZ,OAAK,eAAA,CAAC,mHAAiH,CAC9G,QAAA,SAAS,QAAK,SAAA,SAAA,CAAA,CAAA;KACvB,kBAAiB;KACjB,MAAK;KACJ,IAAI,QAAA;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,iBAAiB,OAAM,EAAA,CAAA,UAAA,CAAA;;4BAS9B;MAPD,QAAA,SAAS,SAAA,WAAA,EADjB,mBAQS,UAAA;;OANP,OAAM;OACN,MAAK;OACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,iBAAiB,QAAA,SAAS,IAAG;UACrC,mBAEqD,OAAA;OADnD,OAAM;OACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,SAAS,OAAK,CAAA;;MAGrC,QAAA,SAAS,QAAA,WAAA,EADjB,YAG0B,MAAA,WAAA,EAAA;;OADxB,OAAM;OACL,MAAM,QAAA,SAAS;;MAClB,mBAGO,QAHP,YAGO,gBADF,QAAA,SAAS,KAAI,EAAA,EAAA;MAElB,YAO2B,mCAAA;OANxB,YAAY,QAAQ,QAAA,WAAU;OAC9B,aAAa,QAAQ,QAAA,YAAW;OAChC,cAAc,QAAQ,QAAA,aAAY;OAClC,UAAQ;QAAA,GAAO,QAAA;QAAQ,WAAa,QAAA,SAAS,aAAS;QAAA;OACtD,gBAAgB,QAAA;OAChB,UAAQ;OACR,UAAQ"}

package/dist/components/Sidebar/SidebarListElementActions.vue.js

@@ -0,0 +1,7 @@
+import SidebarListElementActions_vue_vue_type_script_setup_true_lang_default from "./SidebarListElementActions.vue.script.js";
+//#region src/components/Sidebar/SidebarListElementActions.vue
+var SidebarListElementActions_default = SidebarListElementActions_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarListElementActions_default as default };
+
+//# sourceMappingURL=SidebarListElementActions.vue.js.map

package/dist/components/Sidebar/SidebarListElementActions.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElementActions.vue.js","names":[],"sources":["../../../src/components/Sidebar/SidebarListElementActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon, ScalarModal, useModal } from '@scalar/components'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { ref } from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nconst { variable } = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    isDefault: boolean\n  }\n  warningMessage: string | undefined\n  isCopyable?: boolean\n  isDeletable?: boolean\n  isRenameable?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'rename', id: string): void\n}>()\n\nenum ModalAction {\n  Delete = 'Delete',\n  None = 'None',\n}\n\nconst currentAction = ref({ action: ModalAction.None, name: '' })\n\nconst modalState = useModal()\nconst { copyToClipboard } = useClipboard()\n\nfunction startActionFlow(action: ModalAction) {\n  currentAction.value = { action, name: variable.name }\n  modalState.show()\n}\n\nfunction handleModalClose() {\n  modalState.hide()\n  currentAction.value = { action: ModalAction.None, name: '' }\n}\n\nfunction handleDelete(id: string) {\n  emit('delete', id)\n  handleModalClose()\n}\n</script>\n<template>\n  <div class=\"absolute right-1 flex opacity-0 group-hover:opacity-100\">\n    <button\n      v-if=\"isCopyable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"copyToClipboard(variable.name)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Clipboard\" />\n    </button>\n    <button\n      v-if=\"isRenameable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"emit('rename', variable.uid)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Edit\" />\n    </button>\n    <button\n      v-if=\"!variable.isDefault && isDeletable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1\"\n      type=\"button\"\n      @click.prevent=\"startActionFlow(ModalAction.Delete)\">\n      <ScalarIcon\n        class=\"h-3.5 w-3.5\"\n        icon=\"Close\" />\n    </button>\n  </div>\n  <ScalarModal\n    size=\"sm\"\n    :state=\"modalState\"\n    :title=\"`${currentAction.action} ${currentAction.name}`\">\n    <DeleteSidebarListElement\n      v-if=\"currentAction.action === ModalAction.Delete\"\n      :variableName=\"currentAction.name\"\n      :warningMessage=\"warningMessage\"\n      @close=\"handleModalClose\"\n      @delete=\"handleDelete(variable.uid)\" />\n  </ScalarModal>\n</template>\n"],"mappings":""}