@scalar/api-client 2.38.4 → 2.39.0

package/dist/views/Environment/EnvironmentColors.vue.script.js

@@ -0,0 +1,126 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, unref, vModelText, watch, withDirectives } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/views/Environment/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = ["placeholder"];
+var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentColors",
+	props: {
+		activeColor: {},
+		selector: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const customColor = ref("");
+		const customColorInputRef = ref(null);
+		const showCustomInput = ref(false);
+		const showSelector = ref(false);
+		const colorOptions = [
+			{ color: "#FFFFFF" },
+			{ color: "#EF0006" },
+			{ color: "#EDBE20" },
+			{ color: "#069061" },
+			{ color: "#FB892C" },
+			{ color: "#0082D0" },
+			{ color: "#5203D1" },
+			{ color: "#FFC0CB" }
+		];
+		const backgroundStyle = computed(() => {
+			return props.activeColor && !colorOptions.some((option) => option.color === props.activeColor) || customColor.value ? `background-color: ${props.activeColor || customColor.value};` : "background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));";
+		});
+		const handleClick = () => {
+			showCustomInput.value = !showCustomInput.value;
+			if (props.selector) showSelector.value = false;
+			nextTick(() => {
+				if (customColorInputRef.value) customColorInputRef.value.focus();
+			});
+		};
+		watch(customColor, (newColor) => {
+			if (newColor && !newColor.startsWith("#")) customColor.value = `#${newColor}`;
+			showCustomInput.value = true;
+		});
+		const handleSelectorClick = () => {
+			if (props.selector) showSelector.value = !showSelector.value;
+		};
+		const selectColor = (color) => {
+			emit("select", color);
+			if (props.selector) showSelector.value = false;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [!showCustomInput.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.selector && !showSelector.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
+				style: normalizeStyle({ backgroundColor: __props.activeColor }),
+				onClick: handleSelectorClick
+			}, [__props.activeColor ? (openBlock(), createBlock(unref(ScalarIcon), {
+				key: 0,
+				class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
+				icon: "Checkmark",
+				size: "xs"
+			}, null, 8, ["class"])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), showSelector.value || !props.selector ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["color-selector flex flex-row items-center justify-between gap-1.5 space-x-1", props.selector ? "h-4" : "min-h-10 min-w-[296px]"])
+			}, [
+				(openBlock(), createElementBlock(Fragment, null, renderList(colorOptions, (option) => {
+					return createElementVNode("div", {
+						key: option.color,
+						class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
+						style: normalizeStyle({ backgroundColor: option.color }),
+						onClick: ($event) => selectColor(option.color)
+					}, [__props.activeColor === option.color && !customColor.value ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
+						icon: "Checkmark",
+						size: "xs"
+					}, null, 8, ["class"])) : createCommentVNode("", true)], 14, _hoisted_1);
+				}), 64)),
+				_cache[2] || (_cache[2] = createElementVNode("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
+				createElementVNode("label", {
+					class: normalizeClass(["z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
+					style: normalizeStyle(backgroundStyle.value),
+					onClick: handleClick
+				}, [!showCustomInput.value && (__props.activeColor === customColor.value || __props.activeColor && !colorOptions.some((option) => option.color === __props.activeColor)) ? (openBlock(), createBlock(unref(ScalarIcon), {
+					key: 0,
+					class: "text-c-btn",
+					icon: "Checkmark",
+					size: "xs"
+				})) : createCommentVNode("", true)], 6)
+			], 2)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), showCustomInput.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["color-selector flex flex-1 items-center gap-2 rounded", props.selector ? "h-4" : "min-h-10"])
+			}, [
+				createElementVNode("span", { class: normalizeClass(["absolute rounded-full border border-dashed", props.selector ? "h-4 w-4" : "h-5 w-5"]) }, null, 2),
+				createElementVNode("span", {
+					class: normalizeClass(["z-[1] rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
+					style: normalizeStyle(backgroundStyle.value)
+				}, null, 6),
+				withDirectives(createElementVNode("input", {
+					ref_key: "customColorInputRef",
+					ref: customColorInputRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
+					class: "w-full flex-1 border-transparent text-sm outline-none",
+					placeholder: __props.activeColor || "#000000",
+					type: "text",
+					onInput: _cache[1] || (_cache[1] = ($event) => selectColor(customColor.value))
+				}, null, 40, _hoisted_2), [[vModelText, customColor.value]]),
+				createElementVNode("button", {
+					class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
+					type: "button",
+					onClick: handleClick
+				}, [createVNode(unref(ScalarIcon), {
+					icon: "Checkmark",
+					size: "xs"
+				})])
+			], 2)) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentColors_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentColors.vue.script.js.map

package/dist/views/Environment/EnvironmentColors.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../src/views/Environment/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    activeColor: string\n    selector?: boolean\n  }>(),\n  {\n    selector: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\nconst colorOptions = [\n  { color: '#FFFFFF' },\n  { color: '#EF0006' },\n  { color: '#EDBE20' },\n  { color: '#069061' },\n  { color: '#FB892C' },\n  { color: '#0082D0' },\n  { color: '#5203D1' },\n  { color: '#FFC0CB' },\n]\n\nconst backgroundStyle = computed(() => {\n  return (props.activeColor &&\n    !colorOptions.some((option) => option.color === props.activeColor)) ||\n    customColor.value\n    ? `background-color: ${props.activeColor || customColor.value};`\n    : 'background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));'\n})\n\nconst handleClick = () => {\n  showCustomInput.value = !showCustomInput.value\n  if (props.selector) {\n    showSelector.value = false\n  }\n  nextTick(() => {\n    if (customColorInputRef.value) {\n      customColorInputRef.value.focus()\n    }\n  })\n}\n\nwatch(customColor, (newColor) => {\n  if (newColor && !newColor.startsWith('#')) {\n    customColor.value = `#${newColor}`\n  }\n  showCustomInput.value = true\n})\n\nconst handleSelectorClick = () => {\n  if (props.selector) {\n    showSelector.value = !showSelector.value\n  }\n}\n\nconst selectColor = (color: string) => {\n  emit('select', color)\n  if (props.selector) {\n    showSelector.value = false\n  }\n}\n</script>\n<template>\n  <div>\n    <template v-if=\"!showCustomInput\">\n      <div\n        v-if=\"props.selector && !showSelector\"\n        class=\"flex cursor-pointer items-center justify-center rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"{ backgroundColor: activeColor }\"\n        @click=\"handleSelectorClick\">\n        <ScalarIcon\n          v-if=\"activeColor\"\n          class=\"text-c-btn\"\n          :class=\"props.selector && 'p-0.5'\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n      <div\n        v-if=\"showSelector || !props.selector\"\n        class=\"color-selector flex flex-row items-center justify-between gap-1.5 space-x-1\"\n        :class=\"props.selector ? 'h-4' : 'min-h-10 min-w-[296px]'\">\n        <div\n          v-for=\"option in colorOptions\"\n          :key=\"option.color\"\n          class=\"flex cursor-pointer items-center justify-center rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"{ backgroundColor: option.color }\"\n          @click=\"selectColor(option.color)\">\n          <ScalarIcon\n            v-if=\"activeColor === option.color && !customColor\"\n            class=\"text-c-btn\"\n            :class=\"props.selector && 'p-0.5'\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </div>\n        <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n        <label\n          class=\"z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"backgroundStyle\"\n          @click=\"handleClick\">\n          <ScalarIcon\n            v-if=\"\n              !showCustomInput &&\n              (activeColor === customColor ||\n                (activeColor &&\n                  !colorOptions.some((option) => option.color === activeColor)))\n            \"\n            class=\"text-c-btn\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </label>\n      </div>\n    </template>\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex flex-1 items-center gap-2 rounded\"\n      :class=\"props.selector ? 'h-4' : 'min-h-10'\">\n      <span\n        class=\"absolute rounded-full border border-dashed\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\" />\n      <span\n        class=\"z-[1] rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"backgroundStyle\">\n      </span>\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"selectColor(customColor)\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"handleClick\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/views/Environment/EnvironmentModal.vue.js

@@ -0,0 +1,7 @@
+import EnvironmentModal_vue_vue_type_script_setup_true_lang_default from "./EnvironmentModal.vue.script.js";
+//#region src/views/Environment/EnvironmentModal.vue
+var EnvironmentModal_default = EnvironmentModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentModal_default as default };
+
+//# sourceMappingURL=EnvironmentModal.vue.js.map

package/dist/views/Environment/EnvironmentModal.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentModal.vue.js","names":[],"sources":["../../../src/views/Environment/EnvironmentModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/views/Environment/EnvironmentModal.vue.script.js

@@ -0,0 +1,122 @@
+import { useWorkspace } from "../../store/store.js";
+import CommandActionForm_default from "../../components/CommandPalette/CommandActionForm.vue.js";
+import CommandActionInput_default from "../../components/CommandPalette/CommandActionInput.vue.js";
+import EnvironmentColors_default from "./EnvironmentColors.vue.js";
+import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarListbox, ScalarModal } from "@scalar/components";
+import { useToasts } from "@scalar/use-toasts";
+//#region src/views/Environment/EnvironmentModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-start gap-2" };
+var EnvironmentModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentModal",
+	props: {
+		state: {},
+		activeWorkspaceCollections: {},
+		collectionId: {}
+	},
+	emits: ["cancel", "submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { events } = useWorkspace();
+		const environmentName = ref("");
+		const selectedColor = ref("#FFFFFF");
+		const collections = computed(() => [...props.activeWorkspaceCollections.filter((collection) => collection.info?.title !== "Drafts").map((collection) => ({
+			id: collection.uid,
+			label: collection.info?.title ?? "Untitled Collection"
+		}))]);
+		const selectedEnvironment = ref(collections.value.find((collection) => collection.id === props.collectionId));
+		const { toast } = useToasts();
+		const handleColorSelect = (color) => {
+			selectedColor.value = color;
+		};
+		watch(() => props.state.open, (isOpen) => {
+			if (isOpen) {
+				environmentName.value = "";
+				selectedColor.value = "#FFFFFF";
+				if (props.collectionId) selectedEnvironment.value = collections.value.find((collection) => collection.id === props.collectionId);
+				else selectedEnvironment.value = void 0;
+			}
+		});
+		const handleSubmit = () => {
+			if (!environmentName.value.trim()) {
+				toast("Please enter a name before adding an environment.", "error");
+				return;
+			}
+			if (!selectedEnvironment.value?.id) {
+				toast("Please select a collection before adding an environment.", "error");
+				return;
+			}
+			emit("submit", {
+				name: environmentName.value,
+				color: selectedColor.value,
+				type: selectedEnvironment.value?.id === "global" ? "global" : "collection",
+				collectionId: selectedEnvironment.value?.id !== "global" ? selectedEnvironment.value?.id : void 0
+			});
+		};
+		const redirectToCreateCollection = () => {
+			props.state.hide();
+			events.commandPalette.emit({ commandName: "Create Collection" });
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarModal), {
+				bodyClass: "border-t-0 rounded-t-lg",
+				size: "xs",
+				state: __props.state
+			}, {
+				default: withCtx(() => [createVNode(CommandActionForm_default, {
+					disabled: !selectedEnvironment.value || !environmentName.value.trim(),
+					onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel")),
+					onSubmit: handleSubmit
+				}, {
+					options: withCtx(() => [createVNode(unref(ScalarListbox), {
+						modelValue: selectedEnvironment.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedEnvironment.value = $event),
+						options: collections.value,
+						placeholder: "Select Type"
+					}, {
+						default: withCtx(() => [collections.value.length > 0 ? (openBlock(), createBlock(unref(ScalarButton), {
+							key: 0,
+							class: "hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs",
+							variant: "outlined"
+						}, {
+							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(selectedEnvironment.value ? "text-c-1" : "text-c-3") }, toDisplayString(selectedEnvironment.value ? selectedEnvironment.value.label : "Select Collection"), 3), createVNode(unref(ScalarIcon), {
+								class: "text-c-3",
+								icon: "ChevronDown",
+								size: "xs"
+							})]),
+							_: 1
+						})) : (openBlock(), createBlock(unref(ScalarButton), {
+							key: 1,
+							class: "hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs",
+							variant: "outlined",
+							onClick: redirectToCreateCollection
+						}, {
+							default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "text-c-1" }, "Create Collection", -1)])]),
+							_: 1
+						}))]),
+						_: 1
+					}, 8, ["modelValue", "options"])]),
+					submit: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Add Environment ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(EnvironmentColors_default, {
+						activeColor: selectedColor.value,
+						class: "peer",
+						selector: "",
+						onSelect: handleColorSelect
+					}, null, 8, ["activeColor"]), createVNode(CommandActionInput_default, {
+						modelValue: environmentName.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => environmentName.value = $event),
+						class: "-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden",
+						placeholder: "Environment name"
+					}, null, 8, ["modelValue"])])]),
+					_: 1
+				}, 8, ["disabled"])]),
+				_: 1
+			}, 8, ["state"]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentModal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentModal.vue.script.js.map

package/dist/views/Environment/EnvironmentModal.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentModal.vue.script.js","names":[],"sources":["../../../src/views/Environment/EnvironmentModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAab,MAAM,EAAE,WAAW,cAAa;EAEhC,MAAM,kBAAkB,IAAI,GAAE;EAC9B,MAAM,gBAAgB,IAAI,UAAS;EAEnC,MAAM,cAAc,eAAe,CACjC,GAAG,MAAM,2BACN,QAAQ,eAAe,WAAW,MAAM,UAAU,SAAQ,CAC1D,KAAK,gBAAgB;GACpB,IAAI,WAAW;GACf,OAAO,WAAW,MAAM,SAAS;GAClC,EAAE,CACN,CAAA;EAED,MAAM,sBAAsB,IAC1B,YAAY,MAAM,MAAM,eAAe,WAAW,OAAO,MAAM,aAAa,CAC9E;EAEA,MAAM,EAAE,UAAU,WAAU;EAE5B,MAAM,qBAAqB,UAAkB;AAC3C,iBAAc,QAAQ;;AAIxB,cACQ,MAAM,MAAM,OACjB,WAAW;AACV,OAAI,QAAQ;AACV,oBAAgB,QAAQ;AACxB,kBAAc,QAAQ;AACtB,QAAI,MAAM,aACR,qBAAoB,QAAQ,YAAY,MAAM,MAC3C,eAAe,WAAW,OAAO,MAAM,aAC1C;QAEA,qBAAoB,QAAQ,KAAA;;IAIpC;EAEA,MAAM,qBAAqB;AACzB,OAAI,CAAC,gBAAgB,MAAM,MAAM,EAAE;AACjC,UAAM,qDAAqD,QAAO;AAClE;;AAEF,OAAI,CAAC,oBAAoB,OAAO,IAAI;AAClC,UAAM,4DAA4D,QAAO;AACzE;;AAEF,QAAK,UAAU;IACb,MAAM,gBAAgB;IACtB,OAAO,cAAc;IACrB,MAAM,oBAAoB,OAAO,OAAO,WAAW,WAAW;IAC9D,cACE,oBAAoB,OAAO,OAAO,WAC9B,oBAAoB,OAAO,KAC3B,KAAA;IACP,CAAA;;EAGH,MAAM,mCAAmC;AACvC,SAAM,MAAM,MAAK;AACjB,UAAO,eAAe,KAAK,EAAE,aAAa,qBAAqB,CAAA;;;uBAK/D,YAiDc,MAAA,YAAA,EAAA;IAhDZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6CY,CA5CpB,YA4CoB,2BAAA;KA3CjB,UAAQ,CAAG,oBAAA,SAAmB,CAAK,gBAAA,MAAgB,MAAI;KACvD,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;KACZ,UAAQ;;KAYE,SAAO,cA0BA,CAzBhB,YAyBgB,MAAA,cAAA,EAAA;kBAxBL,oBAAA;uFAAmB,QAAA;MAC3B,SAAS,YAAA;MACV,aAAY;;6BAcG,CAZP,YAAA,MAAY,SAAM,KAAA,WAAA,EAD1B,YAae,MAAA,aAAA,EAAA;;OAXb,OAAM;OACN,SAAQ;;8BAKC,CAJT,mBAIS,QAAA,EAJF,OAAK,eAAE,oBAAA,QAAmB,aAAA,WAAA,EAAA,EAAA,gBAC/B,oBAAA,QAAsC,oBAAA,MAAoB,QAAA,oBAAA,EAAA,EAAA,EAI5D,YAGc,MAAA,WAAA,EAAA;QAFZ,OAAM;QACN,MAAK;QACL,MAAK;;;0BAET,YAMe,MAAA,aAAA,EAAA;;OAJb,OAAM;OACN,SAAQ;OACP,SAAO;;8BACuC,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAA/C,mBAA+C,QAAA,EAAzC,OAAM,YAAU,EAAC,qBAAiB,GAAA,CAAA,EAAA,CAAA;;;;;KAInC,QAAM,cAAkB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAjB,qBAAiB,GAAA,CAAA,EAAA,CAAA;4BA7B7B,CAVN,mBAUM,OAVN,YAUM,CATJ,YAIgC,2BAAA;MAH7B,aAAa,cAAA;MACd,OAAM;MACN,UAAA;MACC,UAAQ;mCACX,YAGmC,4BAAA;kBAFxB,gBAAA;mFAAe,QAAA;MACxB,OAAM;MACN,aAAY"}

package/dist/views/Environment/EnvironmentVariableDropdown.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
-import { type EnvVariables } from '../../libs/env-helpers';
+import { type EnvVariables } from '../../libs/env-helpers.js';
 type __VLS_Props = {
     query: string;
     environment: Environment;

package/dist/views/Environment/EnvironmentVariableDropdown.vue.js

@@ -0,0 +1,7 @@
+import EnvironmentVariableDropdown_vue_vue_type_script_setup_true_lang_default from "./EnvironmentVariableDropdown.vue.script.js";
+//#region src/views/Environment/EnvironmentVariableDropdown.vue
+var EnvironmentVariableDropdown_default = EnvironmentVariableDropdown_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentVariableDropdown_default as default };
+
+//# sourceMappingURL=EnvironmentVariableDropdown.vue.js.map

package/dist/views/Environment/EnvironmentVariableDropdown.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariableDropdown.vue.js","names":[],"sources":["../../../src/views/Environment/EnvironmentVariableDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else-if=\"router\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

package/dist/views/Environment/EnvironmentVariableDropdown.vue.script.js

@@ -0,0 +1,133 @@
+import { PathId } from "../../routes.js";
+import { useActiveEntities } from "../../store/active-entities.js";
+import { getEnvColor } from "../../libs/env-helpers.js";
+import { parseEnvVariables } from "../../libs/environment-parser.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarTeleport } from "@scalar/components";
+import { useRouter } from "vue-router";
+import { ScalarIconGlobe, ScalarIconPlus } from "@scalar/icons";
+import { onClickOutside } from "@vueuse/core";
+import Fuse from "fuse.js";
+//#region src/views/Environment/EnvironmentVariableDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "gap-1/2 flex flex-col"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = { class: "flex items-center gap-2 whitespace-nowrap" };
+var _hoisted_4 = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" };
+var EnvironmentVariableDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentVariableDropdown",
+	props: {
+		query: {},
+		environment: {},
+		envVariables: {},
+		dropdownPosition: {}
+	},
+	emits: ["select"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const isOpen = ref(true);
+		const dropdownRef = ref(null);
+		const selectedVariableIndex = ref(0);
+		const router = useRouter();
+		const { activeCollection } = useActiveEntities();
+		const redirectToEnvironment = () => {
+			if (!router) return;
+			const { currentRoute, push } = router;
+			const workspaceId = currentRoute.value.params.workspace;
+			if (!activeCollection.value || activeCollection.value.info?.title === "Drafts") push({
+				name: "environment.default",
+				params: { [PathId.Workspace]: workspaceId }
+			});
+			else push({
+				name: "collection.environment",
+				params: { [PathId.Collection]: activeCollection.value.uid }
+			});
+			isOpen.value = false;
+		};
+		const fuse = new Fuse(parseEnvVariables(props.envVariables), { keys: ["key", "value"] });
+		const filteredVariables = computed(() => {
+			const searchQuery = props.query;
+			if (!searchQuery)
+ /** return the last 4 environment variables on first display */
+			return parseEnvVariables(props.envVariables).slice(-4).filter(({ key, value }) => key !== "" || value !== "");
+			/** filter environment variables by name */
+			const result = fuse.search(searchQuery, { limit: 10 });
+			if (result.length > 0) return result.map((res) => res.item).filter(({ key, value }) => key !== "" || value !== "");
+			return [];
+		});
+		const selectVariable = (variableKey) => {
+			emit("select", variableKey);
+		};
+		const handleArrowKey = (direction) => {
+			const offset = direction === "up" ? -1 : 1;
+			const length = filteredVariables.value.length;
+			if (length === 0) return;
+			selectedVariableIndex.value = (selectedVariableIndex.value + offset + length) % length;
+		};
+		const handleSelect = () => {
+			if (selectedVariableIndex.value >= 0) {
+				const selectedVariable = filteredVariables.value[selectedVariableIndex.value];
+				if (selectedVariable) selectVariable(selectedVariable.key);
+			}
+		};
+		__expose({
+			handleArrowKey,
+			handleSelect
+		});
+		onMounted(() => {
+			selectedVariableIndex.value = 0;
+		});
+		const dropdownStyle = computed(() => {
+			return {
+				left: (props.dropdownPosition?.left ?? 0) + "px",
+				top: (props.dropdownPosition?.top ?? 0) + 5 + "px"
+			};
+		});
+		onClickOutside(dropdownRef, () => {
+			isOpen.value = false;
+		}, { ignore: [dropdownRef] });
+		return (_ctx, _cache) => {
+			return isOpen.value ? (openBlock(), createBlock(unref(ScalarTeleport), {
+				key: 0,
+				class: "scalar-client"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					class: "custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75",
+					style: normalizeStyle(dropdownStyle.value)
+				}, [filteredVariables.value.length ? (openBlock(), createElementBlock("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredVariables.value, (item, index) => {
+					return openBlock(), createElementBlock("li", {
+						key: item.key,
+						class: normalizeClass(["font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150", { "bg-b-2": index === selectedVariableIndex.value }]),
+						onClick: ($event) => selectVariable(item.key)
+					}, [createElementVNode("div", _hoisted_3, [item.source === "collection" && __props.environment.name !== "No Environment" ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
+						style: normalizeStyle({ backgroundColor: unref(getEnvColor)(__props.environment) })
+					}, null, 4)) : (openBlock(), createBlock(unref(ScalarIconGlobe), {
+						key: 1,
+						class: "-ml-0.25 size-2.5",
+						icon: "Globe"
+					})), createTextVNode(" " + toDisplayString(item.key), 1)]), createElementVNode("span", _hoisted_4, toDisplayString(item.value), 1)], 10, _hoisted_2);
+				}), 128))])) : unref(router) ? (openBlock(), createBlock(unref(ScalarButton), {
+					key: 1,
+					class: "font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
+					variant: "outlined",
+					onClick: redirectToEnvironment
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), _cache[0] || (_cache[0] = createTextVNode(" Add Variable ", -1))]),
+					_: 1
+				})) : createCommentVNode("", true), _cache[1] || (_cache[1] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))], 4)]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { EnvironmentVariableDropdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentVariableDropdown.vue.script.js.map

package/dist/views/Environment/EnvironmentVariableDropdown.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariableDropdown.vue.script.js","names":[],"sources":["../../../src/views/Environment/EnvironmentVariableDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else-if=\"router\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":"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"}

package/dist/views/Environment/handle-drag.d.ts

@@ -1,6 +1,6 @@
 import type { DraggingItem, HoveredItem } from '@scalar/draggable';
 import type { Collection } from '@scalar/oas-utils/entities/spec';
-import type { ActiveEntitiesStore } from '../../store/active-entities';
+import type { ActiveEntitiesStore } from '../../store/active-entities.js';
 type CollectionMutator = {
     edit: (uid: Collection['uid'], path: 'x-scalar-environments', value: Collection['x-scalar-environments']) => void;
 };

package/dist/views/Environment/handle-drag.js

@@ -0,0 +1,38 @@
+//#region src/views/Environment/handle-drag.ts
+/** Create environment DnD handlers */
+function environmentDragHandlerFactory(activeWorkspaceCollections, collectionMutator) {
+	/** Drag handler that mutates the collection's environments order */
+	const handleDragEnd = (draggingItem, hoveredItem) => {
+		if (!draggingItem || !hoveredItem) return;
+		const { id: draggingUid, parentId: draggingParentUid } = draggingItem;
+		const { id: hoveredUid, parentId: hoveredParentUid, offset } = hoveredItem;
+		if (draggingParentUid !== hoveredParentUid) return;
+		const collection = activeWorkspaceCollections.value.find((c) => c.uid === draggingParentUid);
+		if (!collection || !collection["x-scalar-environments"]) return;
+		const environments = collection["x-scalar-environments"];
+		const envKeys = Object.keys(environments);
+		({ ...environments });
+		const draggedIndex = envKeys.findIndex((key) => key === draggingUid);
+		envKeys.splice(draggedIndex, 1);
+		const targetIndex = envKeys.findIndex((key) => key === hoveredUid) + (offset === 1 ? 1 : 0);
+		envKeys.splice(targetIndex, 0, draggingUid);
+		collection["x-scalar-environments"] = envKeys.reduce((acc, key) => {
+			const env = environments[key];
+			if (env) acc[key] = env;
+			return acc;
+		}, {});
+		collectionMutator.edit(collection.uid, "x-scalar-environments", collection["x-scalar-environments"]);
+	};
+	/** Ensure only environments within the same collection can be dropped */
+	const isDroppable = (draggingItem, hoveredItem) => {
+		return draggingItem.parentId === hoveredItem.parentId;
+	};
+	return {
+		handleDragEnd,
+		isDroppable
+	};
+}
+//#endregion
+export { environmentDragHandlerFactory };
+
+//# sourceMappingURL=handle-drag.js.map

package/dist/views/Environment/handle-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-drag.js","names":[],"sources":["../../../src/views/Environment/handle-drag.ts"],"sourcesContent":["import type { DraggingItem, HoveredItem } from '@scalar/draggable'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\n\nimport type { ActiveEntitiesStore } from '@/store/active-entities'\n\ntype CollectionMutator = {\n  edit: (uid: Collection['uid'], path: 'x-scalar-environments', value: Collection['x-scalar-environments']) => void\n}\n\n/** Create environment DnD handlers */\nexport function environmentDragHandlerFactory(\n  activeWorkspaceCollections: ActiveEntitiesStore['activeWorkspaceCollections'],\n  collectionMutator: CollectionMutator,\n) {\n  /** Drag handler that mutates the collection's environments order */\n  const handleDragEnd = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n    if (!draggingItem || !hoveredItem) {\n      return\n    }\n\n    const { id: draggingUid, parentId: draggingParentUid } = draggingItem\n    const { id: hoveredUid, parentId: hoveredParentUid, offset } = hoveredItem\n\n    // Only allow reordering within the same collection\n    if (draggingParentUid !== hoveredParentUid) {\n      return\n    }\n\n    const collection = activeWorkspaceCollections.value.find((c) => c.uid === draggingParentUid)\n\n    if (!collection || !collection['x-scalar-environments']) {\n      return\n    }\n\n    const environments = collection['x-scalar-environments']\n    const envKeys = Object.keys(environments)\n    const orderedEnvs = { ...environments }\n\n    // Remove dragged item from its position\n    const draggedIndex = envKeys.findIndex((key) => key === draggingUid)\n    envKeys.splice(draggedIndex, 1)\n\n    // Insert at new position\n    const hoveredIndex = envKeys.findIndex((key) => key === hoveredUid)\n    const targetIndex = hoveredIndex + (offset === 1 ? 1 : 0)\n    envKeys.splice(targetIndex, 0, draggingUid)\n\n    // Rebuild ordered environments object\n    const reorderedEnvs = envKeys.reduce(\n      (acc, key) => {\n        const env = environments[key]\n        if (env) {\n          acc[key] = env\n        }\n        return acc\n      },\n      {} as typeof orderedEnvs,\n    )\n\n    collection['x-scalar-environments'] = reorderedEnvs\n    collectionMutator.edit(collection.uid, 'x-scalar-environments', collection['x-scalar-environments'])\n  }\n\n  /** Ensure only environments within the same collection can be dropped */\n  const isDroppable = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n    return draggingItem.parentId === hoveredItem.parentId\n  }\n\n  return {\n    handleDragEnd,\n    isDroppable,\n  }\n}\n"],"mappings":";;AAUA,SAAgB,8BACd,4BACA,mBACA;;CAEA,MAAM,iBAAiB,cAA4B,gBAA6B;AAC9E,MAAI,CAAC,gBAAgB,CAAC,YACpB;EAGF,MAAM,EAAE,IAAI,aAAa,UAAU,sBAAsB;EACzD,MAAM,EAAE,IAAI,YAAY,UAAU,kBAAkB,WAAW;AAG/D,MAAI,sBAAsB,iBACxB;EAGF,MAAM,aAAa,2BAA2B,MAAM,MAAM,MAAM,EAAE,QAAQ,kBAAkB;AAE5F,MAAI,CAAC,cAAc,CAAC,WAAW,yBAC7B;EAGF,MAAM,eAAe,WAAW;EAChC,MAAM,UAAU,OAAO,KAAK,aAAa;AACrB,GAAA,EAAE,GAAG,cAAc;EAGvC,MAAM,eAAe,QAAQ,WAAW,QAAQ,QAAQ,YAAY;AACpE,UAAQ,OAAO,cAAc,EAAE;EAI/B,MAAM,cADe,QAAQ,WAAW,QAAQ,QAAQ,WAAW,IAC/B,WAAW,IAAI,IAAI;AACvD,UAAQ,OAAO,aAAa,GAAG,YAAY;AAc3C,aAAW,2BAXW,QAAQ,QAC3B,KAAK,QAAQ;GACZ,MAAM,MAAM,aAAa;AACzB,OAAI,IACF,KAAI,OAAO;AAEb,UAAO;KAET,EAAE,CACH;AAGD,oBAAkB,KAAK,WAAW,KAAK,yBAAyB,WAAW,yBAAyB;;;CAItG,MAAM,eAAe,cAA4B,gBAA6B;AAC5E,SAAO,aAAa,aAAa,YAAY;;AAG/C,QAAO;EACL;EACA;EACD"}

package/dist/views/Request/Request.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared';
-import type { SendRequestResult } from '../../libs/send-request/create-request-operation';
+import type { SendRequestResult } from '../../libs/send-request/create-request-operation.js';
 type __VLS_Props = {
     invalidParams: Set<string>;
     selectedSecuritySchemeUids: SelectedSecuritySchemeUids;

package/dist/views/Request/Request.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import Request_vue_vue_type_script_setup_true_lang_default from "./Request.vue.script.js";
+/* empty css                      */
+//#region src/views/Request/Request.vue
+var Request_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Request_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-57ae0d10"]]);
+//#endregion
+export { Request_default as default };
+
+//# sourceMappingURL=Request.vue.js.map

package/dist/views/Request/Request.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Request.vue.js","names":[],"sources":["../../../src/views/Request/Request.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared'\nimport { computed } from 'vue'\n\nimport EmptyState from '@/components/EmptyState.vue'\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\nimport { useLayout } from '@/hooks'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { importCurlCommand } from '@/libs/importers/curl'\nimport type { SendRequestResult } from '@/libs/send-request/create-request-operation'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\nimport RequestSection from '@/views/Request/RequestSection/RequestSection.vue'\nimport RequestSubpageHeader from '@/views/Request/RequestSubpageHeader.vue'\nimport ResponseSection from '@/views/Request/ResponseSection/ResponseSection.vue'\n\nconst { invalidParams, selectedSecuritySchemeUids, requestResult } =\n  defineProps<{\n    invalidParams: Set<string>\n    selectedSecuritySchemeUids: SelectedSecuritySchemeUids\n    requestResult?: SendRequestResult | null\n  }>()\ndefineEmits<(e: 'newTab', item: { name: string; uid: string }) => void>()\n\nconst { events } = useWorkspace()\nconst { isSidebarOpen } = useSidebar()\nconst workspaceContext = useWorkspace()\nconst { layout } = useLayout()\n\nconst {\n  activeCollection,\n  activeExample,\n  activeRequest,\n  activeWorkspace,\n  activeServer,\n  activeEnvVariables,\n  activeEnvironment,\n  activeWorkspaceRequests,\n} = useActiveEntities()\nconst { modalState, requestHistory } = workspaceContext\n\nconst activeHistoryEntry = computed(() =>\n  [...requestHistory]\n    .reverse()\n    .find((r) => r.request.uid === activeExample.value?.uid),\n)\n\nfunction handleCurlImport(curl: string) {\n  events.commandPalette.emit({\n    commandName: 'Import from cURL',\n    metaData: {\n      parsedCurl: importCurlCommand(curl),\n      collectionUid: activeCollection.value?.uid,\n    },\n  })\n}\n</script>\n\n<template>\n  <div\n    v-if=\"activeCollection && activeWorkspace\"\n    class=\"bg-b-1 relative z-0 flex h-full flex-1 flex-col overflow-hidden pt-0\"\n    :class=\"{\n      '!mr-0 !mb-0 !border-0': layout === 'modal',\n    }\">\n    <div class=\"flex h-full\">\n      <!-- Ensure we have a request for this view -->\n      <div\n        v-if=\"activeRequest\"\n        class=\"flex h-full flex-1 flex-col\">\n        <RequestSubpageHeader\n          v-model=\"isSidebarOpen\"\n          :collection=\"activeCollection\"\n          :envVariables=\"activeEnvVariables\"\n          :environment=\"activeEnvironment\"\n          :operation=\"activeRequest\"\n          :server=\"activeServer\"\n          :workspace=\"activeWorkspace\"\n          @hideModal=\"() => modalState.hide()\"\n          @importCurl=\"handleCurlImport\" />\n        <ViewLayout>\n          <!-- TODO possible loading state -->\n          <ViewLayoutContent\n            v-if=\"activeExample\"\n            class=\"flex-1\"\n            :class=\"[isSidebarOpen ? 'sidebar-active-hide-layout' : '']\">\n            <RequestSection\n              :collection=\"activeCollection\"\n              :envVariables=\"activeEnvVariables\"\n              :environment=\"activeEnvironment\"\n              :example=\"activeExample\"\n              :invalidParams=\"invalidParams\"\n              :operation=\"activeRequest\"\n              :selectedSecuritySchemeUids=\"selectedSecuritySchemeUids\"\n              :server=\"activeServer\"\n              :workspace=\"activeWorkspace\" />\n            <ResponseSection\n              :collection=\"activeCollection\"\n              :numWorkspaceRequests=\"activeWorkspaceRequests.length\"\n              :operation=\"activeRequest\"\n              :requestResult=\"requestResult\"\n              :response=\"activeHistoryEntry?.response\"\n              :workspace=\"activeWorkspace\" />\n          </ViewLayoutContent>\n        </ViewLayout>\n      </div>\n\n      <!-- No active request -->\n      <EmptyState v-else />\n    </div>\n  </div>\n\n  <!-- No Collection or Workspace -->\n  <EmptyState v-else />\n</template>\n\n<style scoped>\n.request-text-color-text {\n  color: var(--scalar-color-1);\n  background: linear-gradient(\n    var(--scalar-background-1),\n    var(--scalar-background-3)\n  );\n  box-shadow: 0 0 0 1px var(--scalar-border-color);\n}\n@media screen and (max-width: 800px) {\n  .sidebar-active-hide-layout {\n    display: none;\n  }\n  .sidebar-active-width {\n    width: 100%;\n  }\n}\n</style>\n"],"mappings":""}