@scalar/api-client 2.38.1 → 2.38.2

package/dist/EnvironmentModal-DBEJ4Kzj.js

@@ -0,0 +1,288 @@
+import { r as useWorkspace } from "./store-DpSUVhjp.js";
+import { n as CommandActionForm_default, t as CommandActionInput_default } from "./CommandActionInput-TkcAx6E8.js";
+import { n as SidebarListElementForm_default } from "./DeleteSidebarListElement-C-p87d03.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, vModelText, watch, withCtx, withDirectives } from "vue";
+import { ScalarButton, ScalarIcon, ScalarListbox, ScalarModal } from "@scalar/components";
+import { useToasts } from "@scalar/use-toasts";
+//#region src/views/Environment/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["onClick"];
+var _hoisted_2 = ["placeholder"];
+//#endregion
+//#region src/views/Environment/EnvironmentColors.vue
+var EnvironmentColors_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$2);
+				}), 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
+//#region src/views/Environment/EnvironmentColorModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "flex flex-col gap-4" };
+//#endregion
+//#region src/views/Environment/EnvironmentColorModal.vue
+var EnvironmentColorModal_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentColorModal",
+	props: {
+		state: {},
+		selectedColor: {}
+	},
+	emits: ["cancel", "submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const newColor = ref("");
+		const handleColorSelect = (color) => {
+			newColor.value = color;
+		};
+		const handleSubmit = () => {
+			emit("submit", newColor.value);
+			newColor.value = "";
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarModal), {
+				size: "xxs",
+				state: __props.state,
+				title: "Edit Environment Color"
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [createVNode(EnvironmentColors_default, {
+					activeColor: newColor.value || props.selectedColor,
+					class: "w-full p-1",
+					onSelect: handleColorSelect
+				}, null, 8, ["activeColor"]), createVNode(SidebarListElementForm_default, {
+					onCancel: _cache[0] || (_cache[0] = ($event) => emit("cancel")),
+					onSubmit: handleSubmit
+				})])]),
+				_: 1
+			}, 8, ["state"]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Environment/EnvironmentModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-start gap-2" };
+//#endregion
+//#region src/views/Environment/EnvironmentModal.vue
+var EnvironmentModal_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 { EnvironmentColorModal_default as n, EnvironmentModal_default as t };
+
+//# sourceMappingURL=EnvironmentModal-DBEJ4Kzj.js.map

package/dist/EnvironmentModal-DBEJ4Kzj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentModal-DBEJ4Kzj.js","names":[],"sources":["../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentModal.vue","../src/views/Environment/EnvironmentModal.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","<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","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<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","<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":"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"}

package/dist/Form-CSKzyHGO.js

@@ -0,0 +1,83 @@
+import { w as useActiveEntities } from "./store-DpSUVhjp.js";
+import { r as DataTable_default, t as DataTableRow_default } from "./DataTableRow-c3XveEUO.js";
+import { t as DataTableInput_default } from "./DataTableInput-yaU5g-kP.js";
+import { t as ViewLayoutSection_default } from "./ViewLayoutSection-mUqKbQry.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/components/Form/Form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { class: "flex flex-1 flex-col gap-1.5" };
+var _hoisted_3 = ["for"];
+var _hoisted_4 = { class: "centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5" };
+//#endregion
+//#region src/components/Form/Form.vue
+var Form_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		title: {},
+		options: {},
+		data: {},
+		onUpdate: { type: Function }
+	},
+	setup(__props) {
+		const { activeEnvVariables, activeEnvironment, activeWorkspace } = useActiveEntities();
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutSection_default, { class: "last:rounded-b-lg" }, createSlots({
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [Object.keys(__props.data).length > 0 && unref(activeWorkspace) ? (openBlock(), createBlock(DataTable_default, {
+					key: 0,
+					columns: [""],
+					class: "rounded-b-lg"
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+						return openBlock(), createBlock(DataTableRow_default, {
+							key: index,
+							class: normalizeClass({ "border-t": index === 0 })
+						}, {
+							default: withCtx(() => [createVNode(DataTableInput_default, {
+								class: "pr-9",
+								lineWrapping: "",
+								id: unref(id),
+								envVariables: unref(activeEnvVariables),
+								environment: unref(activeEnvironment),
+								modelValue: __props.data[option.key] ?? "",
+								placeholder: option.placeholder,
+								workspace: unref(activeWorkspace),
+								"onUpdate:modelValue": ($event) => __props.onUpdate(option.key, $event)
+							}, createSlots({
+								default: withCtx(() => [createElementVNode("label", { for: unref(id) }, toDisplayString(option.label), 9, _hoisted_3)]),
+								_: 2
+							}, [option.key === "description" ? {
+								name: "icon",
+								fn: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(unref(ScalarIcon), {
+									icon: "Markdown",
+									size: "lg"
+								})])]),
+								key: "0"
+							} : void 0]), 1032, [
+								"id",
+								"envVariables",
+								"environment",
+								"modelValue",
+								"placeholder",
+								"workspace",
+								"onUpdate:modelValue"
+							])]),
+							_: 2
+						}, 1032, ["class"]);
+					}), 128))]),
+					_: 1
+				})) : createCommentVNode("", true)])]),
+				_: 2
+			}, [__props.title || _ctx.$slots.title ? {
+				name: "title",
+				fn: withCtx(() => [__props.title ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1)) : renderSlot(_ctx.$slots, "title", { key: 1 })]),
+				key: "0"
+			} : void 0]), 1024);
+		};
+	}
+});
+//#endregion
+export { Form_default as t };
+
+//# sourceMappingURL=Form-CSKzyHGO.js.map

package/dist/Form-CSKzyHGO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form-CSKzyHGO.js","names":["$slots"],"sources":["../src/components/Form/Form.vue","../src/components/Form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EC0BA,MAAM,EAAE,oBAAoB,mBAAmB,oBAC7C,mBAAkB;EACpB,MAAM,KAAK,OAAM;;uBAGf,YA+CoB,2BAAA,EA/CD,OAAM,qBAAmB,EAAA,YAAA;2BA8CpC,CArCN,mBAqCM,OArCN,YAqCM,CAnCI,OAAO,KAAK,QAAA,KAAI,CAAE,SAAM,KAAQ,MAAA,gBAAe,IAAA,WAAA,EADvD,YAmCY,mBAAA;;KAjCT,SAAS,CAAA,GAAI;KACd,OAAM;;4BAE8B,EAAA,UAAA,KAAA,EADpC,mBA8Be,UAAA,MAAA,WA7Ba,QAAA,UAAlB,QAAQ,UAAK;0BADvB,YA8Be,sBAAA;OA5BZ,KAAK;OACL,OAAK,eAAA,EAAA,YAAgB,UAAK,GAAA,CAAA;;8BA0BV,CAzBjB,YAyBiB,wBAAA;QAxBf,OAAM;QACN,cAAA;QACC,IAAI,MAAA,GAAE;QACN,cAAc,MAAA,mBAAkB;QAChC,aAAa,MAAA,kBAAiB;QAC9B,YAAY,QAAA,KAAK,OAAO,QAAG;QAC3B,aAAa,OAAO;QACpB,WAAW,MAAA,gBAAe;QAC1B,wBAAiB,WAAE,QAAA,SAAS,OAAO,KAAqB,OAAM;;QACpD,SAAO,cAGR,CAFR,mBAEQ,SAAA,EAFA,KAAK,MAAA,GAAE,EAAA,EAAA,gBACV,OAAO,MAAK,EAAA,GAAA,WAAA,CAAA,CAAA;;WAIX,OAAO,QAAG,gBAAA;cACf;0BAMK,CALN,mBAKM,OALN,YAKM,CAHJ,YAEc,MAAA,WAAA,EAAA;SADZ,MAAK;SACL,MAAK;;;;;;;;;;;;;;;;;;OAtCX,QAAA,SAASA,KAAAA,OAAO,QAAA;UACrB;sBACoC,CAAzB,QAAA,SAAA,WAAA,EAAZ,mBAAqC,QAAA,YAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,IAC3B,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/HttpMethod-rnWEgC3T.js

@@ -0,0 +1,78 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarListbox, cva, cx } from "@scalar/components";
+import { REQUEST_METHODS, getHttpMethodInfo } from "@scalar/helpers/http/http-info";
+//#endregion
+//#region src/components/HttpMethod/HttpMethod.vue
+var HttpMethod_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "HttpMethod",
+	props: {
+		isSquare: {
+			type: Boolean,
+			default: false
+		},
+		method: {},
+		isEditable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const method = computed(() => getHttpMethodInfo(props.method));
+		const methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({
+			id,
+			label: id.toUpperCase(),
+			color: getHttpMethodInfo(id).colorClass
+		}));
+		const selectedMethod = computed({
+			get: () => methodOptions.find(({ id }) => id === props.method),
+			set: (opt) => opt?.id && emit("change", opt.id)
+		});
+		const variants = cva({
+			base: "text-center font-code text-3xs justify-center items-center flex",
+			variants: {
+				isSquare: {
+					true: "px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto",
+					false: "rounded-full"
+				},
+				isEditable: {
+					true: "http-bg-gradient rounded-md border border-r",
+					false: "cursor-auto"
+				}
+			}
+		});
+		const httpLabel = computed(() => method.value.short);
+		return (_ctx, _cache) => {
+			return __props.isEditable ? (openBlock(), createBlock(unref(ScalarListbox), {
+				key: 0,
+				modelValue: selectedMethod.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedMethod.value = $event),
+				class: "font-code scalar-client mt-1 text-sm",
+				options: unref(methodOptions)
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["h-full", { "pointer-events-none": !__props.isEditable }]) }, [createElementVNode("button", {
+					class: normalizeClass(["relative h-full", unref(cx)(unref(variants)({
+						isSquare: __props.isSquare,
+						isEditable: __props.isEditable
+					}), method.value.colorClass)]),
+					type: "button"
+				}, [createElementVNode("span", null, toDisplayString(httpLabel.value), 1)], 2)], 2)]),
+				_: 1
+			}, 8, ["modelValue", "options"])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["relative gap-1 whitespace-nowrap", unref(cx)(unref(variants)({
+					isSquare: __props.isSquare,
+					isEditable: __props.isEditable
+				}), method.value.colorClass)]),
+				type: "button"
+			}, toDisplayString(method.value.short), 3));
+		};
+	}
+}), [["__scopeId", "data-v-076b14a1"]]);
+//#endregion
+export { HttpMethod_default as t };
+
+//# sourceMappingURL=HttpMethod-rnWEgC3T.js.map

package/dist/HttpMethod-rnWEgC3T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod-rnWEgC3T.js","names":[],"sources":["../src/components/HttpMethod/HttpMethod.vue","../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { RequestMethod } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: RequestMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({\n  id: id as RequestMethod,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border border-r',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { RequestMethod } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: RequestMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = Object.entries(REQUEST_METHODS).map(([id]) => ({\n  id: id as RequestMethod,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border border-r',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;ECSA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,OAAO,CAAA;EAC7D,MAAM,gBAAgB,OAAO,QAAQ,gBAAgB,CAAC,KAAK,CAAC,SAAS;GAC/D;GACJ,OAAO,GAAG,aAAa;GACvB,OAAO,kBAAkB,GAAG,CAAC;GAC9B,EAAC;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,OAAO;GAC9D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,GAAG;GAChD,CAAA;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;KACR;IACD,YAAY;KACV,MAAM;KACN,OAAO;KACR;IACF;GACF,CAAA;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,MAAK;;UAKzC,QAAA,cAAA,WAAA,EADR,YAegB,MAAA,cAAA,EAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,cAAa;;2BAUjB,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,YAAU,CAAA,CAAA,EAAA,EAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;MAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,MAAS,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;KAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,MAAK,EAAA,EAAA"}

package/dist/IconSelector-BDC_GQXv.js

@@ -0,0 +1,67 @@
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { ScalarPopover } from "@scalar/components";
+import { LibraryIcon, libraryIcons } from "@scalar/icons/library";
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
+//#region src/components/IconSelector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex text-sm" };
+var _hoisted_2 = { class: "bg-b-1 custom-scroll grid w-dvw max-w-[420px] auto-rows-[32px] grid-cols-[repeat(auto-fill,minmax(32px,1fr))] content-between justify-between rounded border p-1" };
+//#endregion
+//#region src/components/IconSelector.vue
+var IconSelector_default = /* @__PURE__ */ defineComponent({
+	__name: "IconSelector",
+	props: {
+		modelValue: {},
+		placement: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const value = computed({
+			get: () => props.modelValue,
+			set: (v) => emit("update:modelValue", v)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarPopover), {
+				class: "bg-b-2 rounded",
+				focus: "",
+				placement: __props.placement ?? "bottom"
+			}, {
+				popover: withCtx(({ close }) => [createVNode(unref(RadioGroup), {
+					modelValue: value.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+					class: "flex flex-col"
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(RadioGroupLabel), { class: "text-c-2 px-1 py-1" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [_cache[1] || (_cache[1] = createTextVNode("Select an icon", -1))])]),
+						_: 3
+					})]), createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(libraryIcons), (icon) => {
+						return openBlock(), createBlock(unref(RadioGroupOption), {
+							key: icon.src,
+							as: "li",
+							class: "text-c-3 hover:text-c-2 hover:bg-b-2 ui-checked:bg-b-3 ui-active:bg-b-2 flex cursor-pointer items-center justify-center rounded p-2",
+							value: icon.src,
+							onClick: close
+						}, {
+							default: withCtx(() => [createVNode(unref(RadioGroupLabel), { class: "sr-only" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(icon.src.replaceAll("-", " ")) + " Icon ", 1)]),
+								_: 2
+							}, 1024), createVNode(unref(LibraryIcon), {
+								class: "stroke-[1.5]",
+								src: icon.src
+							}, null, 8, ["src"])]),
+							_: 2
+						}, 1032, ["value", "onClick"]);
+					}), 128))])]),
+					_: 2
+				}, 1032, ["modelValue"])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["placement"]);
+		};
+	}
+});
+//#endregion
+export { IconSelector_default as t };
+
+//# sourceMappingURL=IconSelector-BDC_GQXv.js.map

package/dist/IconSelector-BDC_GQXv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSelector-BDC_GQXv.js","names":[],"sources":["../src/components/IconSelector.vue","../src/components/IconSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'\nimport { ScalarPopover } from '@scalar/components'\nimport { LibraryIcon, libraryIcons } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  modelValue: string\n  placement?: AlignedPlacement\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', icon: string): void\n}>()\n\ntype Side = 'top' | 'bottom'\ntype Alignment = 'start' | 'end'\ntype AlignedPlacement = `${Side}-${Alignment}`\n\nconst value = computed<string>({\n  get: () => props.modelValue,\n  set: (v) => emit('update:modelValue', v),\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"bg-b-2 rounded\"\n    focus\n    :placement=\"placement ?? 'bottom'\">\n    <slot />\n    <template #popover=\"{ close }\">\n      <RadioGroup\n        v-model=\"value\"\n        class=\"flex flex-col\">\n        <div class=\"flex text-sm\">\n          <RadioGroupLabel class=\"text-c-2 px-1 py-1\">\n            <slot name=\"title\">Select an icon</slot>\n          </RadioGroupLabel>\n        </div>\n        <ul\n          class=\"bg-b-1 custom-scroll grid w-dvw max-w-[420px] auto-rows-[32px] grid-cols-[repeat(auto-fill,minmax(32px,1fr))] content-between justify-between rounded border p-1\">\n          <RadioGroupOption\n            v-for=\"icon in libraryIcons\"\n            :key=\"icon.src\"\n            as=\"li\"\n            class=\"text-c-3 hover:text-c-2 hover:bg-b-2 ui-checked:bg-b-3 ui-active:bg-b-2 flex cursor-pointer items-center justify-center rounded p-2\"\n            :value=\"icon.src\"\n            @click=\"close\">\n            <RadioGroupLabel class=\"sr-only\">\n              {{ icon.src.replaceAll('-', ' ') }} Icon\n            </RadioGroupLabel>\n            <LibraryIcon\n              class=\"stroke-[1.5]\"\n              :src=\"icon.src\" />\n          </RadioGroupOption>\n        </ul>\n      </RadioGroup>\n    </template>\n  </ScalarPopover>\n</template>\n","<script setup lang=\"ts\">\nimport { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'\nimport { ScalarPopover } from '@scalar/components'\nimport { LibraryIcon, libraryIcons } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  modelValue: string\n  placement?: AlignedPlacement\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', icon: string): void\n}>()\n\ntype Side = 'top' | 'bottom'\ntype Alignment = 'start' | 'end'\ntype AlignedPlacement = `${Side}-${Alignment}`\n\nconst value = computed<string>({\n  get: () => props.modelValue,\n  set: (v) => emit('update:modelValue', v),\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"bg-b-2 rounded\"\n    focus\n    :placement=\"placement ?? 'bottom'\">\n    <slot />\n    <template #popover=\"{ close }\">\n      <RadioGroup\n        v-model=\"value\"\n        class=\"flex flex-col\">\n        <div class=\"flex text-sm\">\n          <RadioGroupLabel class=\"text-c-2 px-1 py-1\">\n            <slot name=\"title\">Select an icon</slot>\n          </RadioGroupLabel>\n        </div>\n        <ul\n          class=\"bg-b-1 custom-scroll grid w-dvw max-w-[420px] auto-rows-[32px] grid-cols-[repeat(auto-fill,minmax(32px,1fr))] content-between justify-between rounded border p-1\">\n          <RadioGroupOption\n            v-for=\"icon in libraryIcons\"\n            :key=\"icon.src\"\n            as=\"li\"\n            class=\"text-c-3 hover:text-c-2 hover:bg-b-2 ui-checked:bg-b-3 ui-active:bg-b-2 flex cursor-pointer items-center justify-center rounded p-2\"\n            :value=\"icon.src\"\n            @click=\"close\">\n            <RadioGroupLabel class=\"sr-only\">\n              {{ icon.src.replaceAll('-', ' ') }} Icon\n            </RadioGroupLabel>\n            <LibraryIcon\n              class=\"stroke-[1.5]\"\n              :src=\"icon.src\" />\n          </RadioGroupOption>\n        </ul>\n      </RadioGroup>\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;ECMA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAQb,MAAM,QAAQ,SAAiB;GAC7B,WAAW,MAAM;GACjB,MAAM,MAAM,KAAK,qBAAqB,EAAE;GACzC,CAAA;;uBAGC,YAiCgB,MAAA,cAAA,EAAA;IAhCd,OAAM;IACN,OAAA;IACC,WAAW,QAAA,aAAS;;IAEV,SAAO,SA0BH,EA1BO,YAAK,CACzB,YAyBa,MAAA,WAAA,EAAA;iBAxBF,MAAA;wEAAK,QAAA;KACd,OAAM;;4BAKA,CAJN,mBAIM,OAJN,YAIM,CAHJ,YAEkB,MAAA,gBAAA,EAAA,EAFD,OAAM,sBAAoB,EAAA;6BACD,CAAxC,WAAwC,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAArB,kBAAc,GAAA,EAAA,CAAA,CAAA,CAAA;;WAGrC,mBAgBK,MAhBL,YAgBK,EAAA,UAAA,KAAA,EAdH,mBAamB,UAAA,MAAA,WAZF,MAAA,aAAY,GAApB,SAAI;0BADb,YAamB,MAAA,iBAAA,EAAA;OAXhB,KAAK,KAAK;OACX,IAAG;OACH,OAAM;OACL,OAAO,KAAK;OACZ,SAAO;;8BAGU,CAFlB,YAEkB,MAAA,gBAAA,EAAA,EAFD,OAAM,WAAS,EAAA;+BACK,CAAA,gBAAA,gBAAhC,KAAK,IAAI,WAAU,KAAA,IAAA,CAAA,GAAa,UACrC,EAAA,CAAA,CAAA;;iBACA,YAEoB,MAAA,YAAA,EAAA;QADlB,OAAM;QACL,KAAK,KAAK;;;;;;;2BAxBb,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}