@scalar/api-client 2.38.3 → 2.39.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentSelector.vue.js","names":[],"sources":["../../../src/components/EnvironmentSelector/EnvironmentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n  ScalarListboxCheckbox,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { computed, onMounted, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { useLayout } from '@/hooks'\nimport { PathId } from '@/routes'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection, activeWorkspace, activeEnvironment } =\n  useActiveEntities()\nconst { collectionMutators } = useWorkspace()\nconst { layout } = useLayout()\n\nconst router = useRouter()\n\nconst updateSelected = (uid: string) => {\n  if (activeCollection.value && activeWorkspace.value) {\n    collectionMutators.edit(\n      activeCollection.value.uid,\n      'x-scalar-active-environment',\n      uid,\n    )\n\n    activeWorkspace.value.activeEnvironmentId = uid\n  }\n}\n\nconst redirectToEnvironments = () =>\n  router.push({\n    name: 'environment.default',\n    params: {\n      [PathId.Workspace]: activeWorkspace.value?.uid,\n    },\n  })\n\nconst selectedEnvironment = computed(() => {\n  const { value: environment } = activeEnvironment\n  const { value: collection } = activeCollection\n  return (\n    environment?.name ||\n    collection?.['x-scalar-active-environment'] ||\n    'No Environment'\n  )\n})\n\nconst availableEnvironments = computed(() => {\n  const { value: collection } = activeCollection\n  const environments = collection?.['x-scalar-environments']\n  return environments\n    ? Object.entries(environments).map(([key, env]) => ({\n        ...env,\n        uid: key,\n        name: key,\n      }))\n    : []\n})\n\nconst selectLatestEnvironment = () => {\n  const environments = availableEnvironments.value\n  if (environments.length > 0) {\n    // Get the latest created collection environment\n    const latestEnvironment = environments[environments.length - 1]\n\n    if (latestEnvironment?.uid) {\n      updateSelected(latestEnvironment.uid)\n    }\n  }\n}\n\n// Select for the collection its latest environment on creation\nwatch(availableEnvironments, (newEnvs, oldEnvs) => {\n  if (newEnvs.length > oldEnvs.length) {\n    selectLatestEnvironment()\n  }\n})\n\nconst setInitialEnvironment = (collection: Collection) => {\n  const activeEnv = collection['x-scalar-active-environment']\n  if (activeEnv && activeCollection.value && activeWorkspace.value) {\n    activeCollection.value['x-scalar-active-environment'] = activeEnv\n    activeWorkspace.value.activeEnvironmentId = activeEnv\n  } else if (activeWorkspace.value) {\n    activeWorkspace.value.activeEnvironmentId = ''\n  }\n}\n\nwatch(\n  activeCollection,\n  (newCollection) => newCollection && setInitialEnvironment(newCollection),\n)\n\nonMounted(() => {\n  activeCollection.value && setInitialEnvironment(activeCollection.value)\n})\n</script>\n<template>\n  <ScalarDropdown teleport>\n    <ScalarButton\n      class=\"text-c-1 hover:bg-b-2 line-clamp-1 h-auto w-fit justify-start px-1.5 py-1.5 font-normal\"\n      variant=\"ghost\">\n      <h2 class=\"m-0 flex items-center gap-1.5 font-medium whitespace-nowrap\">\n        {{ selectedEnvironment }}\n      </h2>\n    </ScalarButton>\n    <!-- Workspace list -->\n    <template #items>\n      <ScalarDropdownItem\n        v-for=\"environment in availableEnvironments\"\n        :key=\"environment.uid\"\n        class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n        @click.stop=\"updateSelected(environment.uid)\">\n        <ScalarListboxCheckbox\n          :selected=\"\n            activeCollection?.['x-scalar-active-environment'] ===\n            environment.uid\n          \" />\n        {{ environment.name }}\n      </ScalarDropdownItem>\n      <ScalarDropdownItem\n        class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n        @click.stop=\"updateSelected('')\">\n        <ScalarListboxCheckbox\n          :selected=\"\n            (activeEnvironment?.uid === '' &&\n              activeCollection?.['x-scalar-active-environment'] === '') ||\n            activeEnvironment?.name === 'No Environment'\n          \" />\n        No Environment\n      </ScalarDropdownItem>\n      <ScalarDropdownDivider />\n      <!-- Manage environments -->\n      <ScalarDropdownItem\n        v-if=\"layout !== 'modal'\"\n        class=\"flex items-center gap-1.5\"\n        @click=\"redirectToEnvironments\">\n        <div class=\"flex h-4 w-4 items-center justify-center\">\n          <ScalarIcon\n            icon=\"Brackets\"\n            size=\"sm\" />\n        </div>\n        <span class=\"leading-none\">Manage Environments</span>\n      </ScalarDropdownItem>\n    </template>\n  </ScalarDropdown>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,111 @@
+import { PathId } from "../../routes.js";
+import { useActiveEntities } from "../../store/active-entities.js";
+import { useLayout } from "../../hooks/useLayout.js";
+import { useWorkspace } from "../../store/store.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, onMounted, openBlock, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { ScalarButton, ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem, ScalarIcon, ScalarListboxCheckbox } from "@scalar/components";
+import { useRouter } from "vue-router";
+//#region src/components/EnvironmentSelector/EnvironmentSelector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-0 flex items-center gap-1.5 font-medium whitespace-nowrap" };
+var _hoisted_2 = { class: "flex h-4 w-4 items-center justify-center" };
+var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentSelector",
+	setup(__props) {
+		const { activeCollection, activeWorkspace, activeEnvironment } = useActiveEntities();
+		const { collectionMutators } = useWorkspace();
+		const { layout } = useLayout();
+		const router = useRouter();
+		const updateSelected = (uid) => {
+			if (activeCollection.value && activeWorkspace.value) {
+				collectionMutators.edit(activeCollection.value.uid, "x-scalar-active-environment", uid);
+				activeWorkspace.value.activeEnvironmentId = uid;
+			}
+		};
+		const redirectToEnvironments = () => router.push({
+			name: "environment.default",
+			params: { [PathId.Workspace]: activeWorkspace.value?.uid }
+		});
+		const selectedEnvironment = computed(() => {
+			const { value: environment } = activeEnvironment;
+			const { value: collection } = activeCollection;
+			return environment?.name || collection?.["x-scalar-active-environment"] || "No Environment";
+		});
+		const availableEnvironments = computed(() => {
+			const { value: collection } = activeCollection;
+			const environments = collection?.["x-scalar-environments"];
+			return environments ? Object.entries(environments).map(([key, env]) => ({
+				...env,
+				uid: key,
+				name: key
+			})) : [];
+		});
+		const selectLatestEnvironment = () => {
+			const environments = availableEnvironments.value;
+			if (environments.length > 0) {
+				const latestEnvironment = environments[environments.length - 1];
+				if (latestEnvironment?.uid) updateSelected(latestEnvironment.uid);
+			}
+		};
+		watch(availableEnvironments, (newEnvs, oldEnvs) => {
+			if (newEnvs.length > oldEnvs.length) selectLatestEnvironment();
+		});
+		const setInitialEnvironment = (collection) => {
+			const activeEnv = collection["x-scalar-active-environment"];
+			if (activeEnv && activeCollection.value && activeWorkspace.value) {
+				activeCollection.value["x-scalar-active-environment"] = activeEnv;
+				activeWorkspace.value.activeEnvironmentId = activeEnv;
+			} else if (activeWorkspace.value) activeWorkspace.value.activeEnvironmentId = "";
+		};
+		watch(activeCollection, (newCollection) => newCollection && setInitialEnvironment(newCollection));
+		onMounted(() => {
+			activeCollection.value && setInitialEnvironment(activeCollection.value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarDropdown), { teleport: "" }, {
+				items: withCtx(() => [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(availableEnvironments.value, (environment) => {
+						return openBlock(), createBlock(unref(ScalarDropdownItem), {
+							key: environment.uid,
+							class: "group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
+							onClick: withModifiers(($event) => updateSelected(environment.uid), ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarListboxCheckbox), { selected: unref(activeCollection)?.["x-scalar-active-environment"] === environment.uid }, null, 8, ["selected"]), createTextVNode(" " + toDisplayString(environment.name), 1)]),
+							_: 2
+						}, 1032, ["onClick"]);
+					}), 128)),
+					createVNode(unref(ScalarDropdownItem), {
+						class: "group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => updateSelected(""), ["stop"]))
+					}, {
+						default: withCtx(() => [createVNode(unref(ScalarListboxCheckbox), { selected: unref(activeEnvironment)?.uid === "" && unref(activeCollection)?.["x-scalar-active-environment"] === "" || unref(activeEnvironment)?.name === "No Environment" }, null, 8, ["selected"]), _cache[1] || (_cache[1] = createTextVNode(" No Environment ", -1))]),
+						_: 1
+					}),
+					createVNode(unref(ScalarDropdownDivider)),
+					unref(layout) !== "modal" ? (openBlock(), createBlock(unref(ScalarDropdownItem), {
+						key: 0,
+						class: "flex items-center gap-1.5",
+						onClick: redirectToEnvironments
+					}, {
+						default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarIcon), {
+							icon: "Brackets",
+							size: "sm"
+						})]), _cache[2] || (_cache[2] = createElementVNode("span", { class: "leading-none" }, "Manage Environments", -1))]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					class: "text-c-1 hover:bg-b-2 line-clamp-1 h-auto w-fit justify-start px-1.5 py-1.5 font-normal",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("h2", _hoisted_1, toDisplayString(selectedEnvironment.value), 1)]),
+					_: 1
+				})]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { EnvironmentSelector_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentSelector.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentSelector.vue.script.js","names":[],"sources":["../../../src/components/EnvironmentSelector/EnvironmentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n  ScalarListboxCheckbox,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { computed, onMounted, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { useLayout } from '@/hooks'\nimport { PathId } from '@/routes'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection, activeWorkspace, activeEnvironment } =\n  useActiveEntities()\nconst { collectionMutators } = useWorkspace()\nconst { layout } = useLayout()\n\nconst router = useRouter()\n\nconst updateSelected = (uid: string) => {\n  if (activeCollection.value && activeWorkspace.value) {\n    collectionMutators.edit(\n      activeCollection.value.uid,\n      'x-scalar-active-environment',\n      uid,\n    )\n\n    activeWorkspace.value.activeEnvironmentId = uid\n  }\n}\n\nconst redirectToEnvironments = () =>\n  router.push({\n    name: 'environment.default',\n    params: {\n      [PathId.Workspace]: activeWorkspace.value?.uid,\n    },\n  })\n\nconst selectedEnvironment = computed(() => {\n  const { value: environment } = activeEnvironment\n  const { value: collection } = activeCollection\n  return (\n    environment?.name ||\n    collection?.['x-scalar-active-environment'] ||\n    'No Environment'\n  )\n})\n\nconst availableEnvironments = computed(() => {\n  const { value: collection } = activeCollection\n  const environments = collection?.['x-scalar-environments']\n  return environments\n    ? Object.entries(environments).map(([key, env]) => ({\n        ...env,\n        uid: key,\n        name: key,\n      }))\n    : []\n})\n\nconst selectLatestEnvironment = () => {\n  const environments = availableEnvironments.value\n  if (environments.length > 0) {\n    // Get the latest created collection environment\n    const latestEnvironment = environments[environments.length - 1]\n\n    if (latestEnvironment?.uid) {\n      updateSelected(latestEnvironment.uid)\n    }\n  }\n}\n\n// Select for the collection its latest environment on creation\nwatch(availableEnvironments, (newEnvs, oldEnvs) => {\n  if (newEnvs.length > oldEnvs.length) {\n    selectLatestEnvironment()\n  }\n})\n\nconst setInitialEnvironment = (collection: Collection) => {\n  const activeEnv = collection['x-scalar-active-environment']\n  if (activeEnv && activeCollection.value && activeWorkspace.value) {\n    activeCollection.value['x-scalar-active-environment'] = activeEnv\n    activeWorkspace.value.activeEnvironmentId = activeEnv\n  } else if (activeWorkspace.value) {\n    activeWorkspace.value.activeEnvironmentId = ''\n  }\n}\n\nwatch(\n  activeCollection,\n  (newCollection) => newCollection && setInitialEnvironment(newCollection),\n)\n\nonMounted(() => {\n  activeCollection.value && setInitialEnvironment(activeCollection.value)\n})\n</script>\n<template>\n  <ScalarDropdown teleport>\n    <ScalarButton\n      class=\"text-c-1 hover:bg-b-2 line-clamp-1 h-auto w-fit justify-start px-1.5 py-1.5 font-normal\"\n      variant=\"ghost\">\n      <h2 class=\"m-0 flex items-center gap-1.5 font-medium whitespace-nowrap\">\n        {{ selectedEnvironment }}\n      </h2>\n    </ScalarButton>\n    <!-- Workspace list -->\n    <template #items>\n      <ScalarDropdownItem\n        v-for=\"environment in availableEnvironments\"\n        :key=\"environment.uid\"\n        class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n        @click.stop=\"updateSelected(environment.uid)\">\n        <ScalarListboxCheckbox\n          :selected=\"\n            activeCollection?.['x-scalar-active-environment'] ===\n            environment.uid\n          \" />\n        {{ environment.name }}\n      </ScalarDropdownItem>\n      <ScalarDropdownItem\n        class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n        @click.stop=\"updateSelected('')\">\n        <ScalarListboxCheckbox\n          :selected=\"\n            (activeEnvironment?.uid === '' &&\n              activeCollection?.['x-scalar-active-environment'] === '') ||\n            activeEnvironment?.name === 'No Environment'\n          \" />\n        No Environment\n      </ScalarDropdownItem>\n      <ScalarDropdownDivider />\n      <!-- Manage environments -->\n      <ScalarDropdownItem\n        v-if=\"layout !== 'modal'\"\n        class=\"flex items-center gap-1.5\"\n        @click=\"redirectToEnvironments\">\n        <div class=\"flex h-4 w-4 items-center justify-center\">\n          <ScalarIcon\n            icon=\"Brackets\"\n            size=\"sm\" />\n        </div>\n        <span class=\"leading-none\">Manage Environments</span>\n      </ScalarDropdownItem>\n    </template>\n  </ScalarDropdown>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,EAAE,kBAAkB,iBAAiB,sBACzC,mBAAkB;EACpB,MAAM,EAAE,uBAAuB,cAAa;EAC5C,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,SAAS,WAAU;EAEzB,MAAM,kBAAkB,QAAgB;AACtC,OAAI,iBAAiB,SAAS,gBAAgB,OAAO;AACnD,uBAAmB,KACjB,iBAAiB,MAAM,KACvB,+BACA,IACF;AAEA,oBAAgB,MAAM,sBAAsB;;;EAIhD,MAAM,+BACJ,OAAO,KAAK;GACV,MAAM;GACN,QAAQ,GACL,OAAO,YAAY,gBAAgB,OAAO,KAC5C;GACF,CAAA;EAEH,MAAM,sBAAsB,eAAe;GACzC,MAAM,EAAE,OAAO,gBAAgB;GAC/B,MAAM,EAAE,OAAO,eAAe;AAC9B,UACE,aAAa,QACb,aAAa,kCACb;IAEH;EAED,MAAM,wBAAwB,eAAe;GAC3C,MAAM,EAAE,OAAO,eAAe;GAC9B,MAAM,eAAe,aAAa;AAClC,UAAO,eACH,OAAO,QAAQ,aAAa,CAAC,KAAK,CAAC,KAAK,UAAU;IAChD,GAAG;IACH,KAAK;IACL,MAAM;IACP,EAAC,GACF,EAAC;IACN;EAED,MAAM,gCAAgC;GACpC,MAAM,eAAe,sBAAsB;AAC3C,OAAI,aAAa,SAAS,GAAG;IAE3B,MAAM,oBAAoB,aAAa,aAAa,SAAS;AAE7D,QAAI,mBAAmB,IACrB,gBAAe,kBAAkB,IAAG;;;AAM1C,QAAM,wBAAwB,SAAS,YAAY;AACjD,OAAI,QAAQ,SAAS,QAAQ,OAC3B,0BAAwB;IAE3B;EAED,MAAM,yBAAyB,eAA2B;GACxD,MAAM,YAAY,WAAW;AAC7B,OAAI,aAAa,iBAAiB,SAAS,gBAAgB,OAAO;AAChE,qBAAiB,MAAM,iCAAiC;AACxD,oBAAgB,MAAM,sBAAsB;cACnC,gBAAgB,MACzB,iBAAgB,MAAM,sBAAsB;;AAIhD,QACE,mBACC,kBAAkB,iBAAiB,sBAAsB,cAAc,CAC1E;AAEA,kBAAgB;AACd,oBAAiB,SAAS,sBAAsB,iBAAiB,MAAK;IACvE;;uBAGC,YA+CiB,MAAA,eAAA,EAAA,EA/CD,UAAA,IAAQ,EAAA;IASX,OAAK,cAEgC;uBAD9C,mBAWqB,UAAA,MAAA,WAVG,sBAAA,QAAf,gBAAW;0BADpB,YAWqB,MAAA,mBAAA,EAAA;OATlB,KAAK,YAAY;OAClB,OAAM;OACL,SAAK,eAAA,WAAO,eAAe,YAAY,IAAG,EAAA,CAAA,OAAA,CAAA;;8BAKrC,CAJN,YAIM,MAAA,sBAAA,EAAA,EAHH,UAAuB,MAAA,iBAAgB,GAAA,mCAAkD,YAAY,KAAA,EAAA,MAAA,GAAA,CAAA,WAAA,CAAA,EAAA,gBAGlG,MACN,gBAAG,YAAY,KAAI,EAAA,EAAA,CAAA,CAAA;;;;KAErB,YAUqB,MAAA,mBAAA,EAAA;MATnB,OAAM;MACL,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,eAAc,GAAA,EAAA,CAAA,OAAA,CAAA;;6BAMrB,CALN,YAKM,MAAA,sBAAA,EAAA,EAJH,UAAwB,MAAA,kBAAiB,EAAE,QAAG,MAAyB,MAAA,iBAAgB,GAAA,mCAAA,MAAyD,MAAA,kBAAiB,EAAE,SAAI,kBAAA,EAAA,MAAA,GAAA,CAAA,WAAA,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAIpK,oBAER,GAAA,EAAA,CAAA;;;KACA,YAAyB,MAAA,sBAAA,CAAA;KAGjB,MAAA,OAAM,KAAA,WAAA,WAAA,EADd,YAUqB,MAAA,mBAAA,EAAA;;MARnB,OAAM;MACL,SAAO;;6BAKF,CAJN,mBAIM,OAJN,YAIM,CAHJ,YAEc,MAAA,WAAA,EAAA;OADZ,MAAK;OACL,MAAK;sCAET,mBAAqD,QAAA,EAA/C,OAAM,gBAAc,EAAC,uBAAmB,GAAA,EAAA,CAAA;;;;2BArCnC,CANf,YAMe,MAAA,aAAA,EAAA;KALb,OAAM;KACN,SAAQ;;4BAGH,CAFL,mBAEK,MAFL,YAEK,gBADA,oBAAA,MAAmB,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/Form/Form.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.vue.js","names":[],"sources":["../../../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"],"mappings":""}

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

@@ -0,0 +1,82 @@
+import { useActiveEntities } from "../../store/active-entities.js";
+import DataTable_default from "../DataTable/DataTable.vue.js";
+import DataTableInput_default from "../DataTable/DataTableInput.vue.js";
+import DataTableRow_default from "../DataTable/DataTableRow.vue.js";
+import ViewLayoutSection_default from "../ViewLayout/ViewLayoutSection.vue.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" };
+var Form_vue_vue_type_script_setup_true_lang_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_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Form.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.vue.script.js","names":["$slots"],"sources":["../../../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"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA0BA,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/components/Form/LabelInput.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ClientLayout } from '@/hooks/useLayout';
+import type { ClientLayout } from '../../hooks/useLayout.js';
 type __VLS_Props = {
     inputId: string;
     placeholder: string;

package/dist/components/Form/LabelInput.vue.js

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

package/dist/components/Form/LabelInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelInput.vue.js","names":[],"sources":["../../../src/components/Form/LabelInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":""}

package/dist/components/Form/LabelInput.vue.script.js

@@ -0,0 +1,39 @@
+import { Fragment, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, toDisplayString, unref } from "vue";
+import { useBindCx } from "@scalar/components";
+//#region src/components/Form/LabelInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = [
+	"id",
+	"placeholder",
+	"value"
+];
+var LabelInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "LabelInput",
+	props: {
+		inputId: {},
+		placeholder: {},
+		value: {},
+		layout: {}
+	},
+	emits: ["updateValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { cx } = useBindCx();
+		const onInput = (event) => {
+			const target = event.target;
+			emit("updateValue", target.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex-1 flex gap-1 items-center pointer-events-none group"))), [__props.layout !== "modal" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("label", mergeProps(unref(cx)("absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text"), { for: __props.inputId }), null, 16, _hoisted_1), createElementVNode("input", mergeProps(unref(cx)("flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10"), {
+				id: __props.inputId,
+				placeholder: __props.placeholder,
+				value: __props.value,
+				onInput
+			}), null, 16, _hoisted_2)], 64)) : (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(cx)("flex items-center text-c-1 h-8"))), toDisplayString(__props.value), 17))], 16);
+		};
+	}
+});
+//#endregion
+export { LabelInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=LabelInput.vue.script.js.map

package/dist/components/Form/LabelInput.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelInput.vue.script.js","names":[],"sources":["../../../src/components/Form/LabelInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAYA,MAAM,OAAO;EAIb,MAAM,EAAE,OAAO,WAAU;EAEzB,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAS,MAAM;AACrB,QAAK,eAAe,OAAO,MAAK;;;uBAIhC,mBAyBM,OAAA,eAAA,mBAzBO,MAAA,GAAE,CAAA,2DAAA,CAAA,CAAA,EAAA,CACG,QAAA,WAAM,WAAA,WAAA,EAAtB,mBAkBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAjBT,mBAMmB,SANnB,WACqB,MAAA,GAAE,CAAA,gFAAA,EAAA,EAKpB,KAAK,QAAA,SAAO,CAAA,EAAA,MAAA,IAAA,WAAA,EACf,mBASqB,SATrB,WACqB,MAAA,GAAE,CAAA,kJAAA,EAAA;IAKpB,IAAI,QAAA;IACJ,aAAa,QAAA;IACb,OAAO,QAAA;IACA;oDAEZ,mBAIO,QAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAFG,MAAA,GAAE,CAAA,iCAAA,CAAA,CAAA,EAAA,gBACP,QAAA,MAAK,EAAA,GAAA,EAAA,EAAA,GAAA"}

package/dist/components/HelpfulLink.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpfulLink.vue.js","names":[],"sources":["../../src/components/HelpfulLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{ href: string }>()\n</script>\n<template>\n  <a\n    class=\"decoration-c-3 cursor-help underline underline-offset-2\"\n    :href=\"href\"\n    rel=\"noopener noreferrer\"\n    target=\"_blank\">\n    <slot />\n  </a>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,21 @@
+import { createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+//#region src/components/HelpfulLink.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+var HelpfulLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "HelpfulLink",
+	props: { href: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("a", {
+				class: "decoration-c-3 cursor-help underline underline-offset-2",
+				href: __props.href,
+				rel: "noopener noreferrer",
+				target: "_blank"
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { HelpfulLink_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=HelpfulLink.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpfulLink.vue.script.js","names":[],"sources":["../../src/components/HelpfulLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{ href: string }>()\n</script>\n<template>\n  <a\n    class=\"decoration-c-3 cursor-help underline underline-offset-2\"\n    :href=\"href\"\n    rel=\"noopener noreferrer\"\n    target=\"_blank\">\n    <slot />\n  </a>\n</template>\n"],"mappings":";;;;;;;;uBAIE,mBAMI,KAAA;IALF,OAAM;IACL,MAAM,QAAA;IACP,KAAI;IACJ,QAAO;OACP,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}

package/dist/components/HttpMethod/HttpMethod.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../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"],"mappings":""}

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

@@ -0,0 +1,76 @@
+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";
+//#region src/components/HttpMethod/HttpMethod.vue?vue&type=script&setup=true&lang.ts
+var HttpMethod_vue_vue_type_script_setup_true_lang_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));
+		};
+	}
+});
+//#endregion
+export { HttpMethod_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=HttpMethod.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../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"],"mappings":";;;;;;;;;;;;;;;;;;;EASA,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/components/HttpMethod/index.d.ts

@@ -1,2 +1,2 @@
-export { default as HttpMethod } from './HttpMethod.vue';
+export { default as HttpMethod } from './HttpMethod.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/HttpMethod/index.js

@@ -1,2 +1,2 @@
-import { t as HttpMethod_default } from "../../HttpMethod-rnWEgC3T.js";
+import HttpMethod_default from "./HttpMethod.vue.js";
 export { HttpMethod_default as HttpMethod };

package/dist/components/IconSelector.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSelector.vue.js","names":[],"sources":["../../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"],"mappings":""}

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

@@ -0,0 +1,65 @@
+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" };
+var IconSelector_vue_vue_type_script_setup_true_lang_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_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=IconSelector.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSelector.vue.script.js","names":[],"sources":["../../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"],"mappings":";;;;;;;;;;;;;;;EAMA,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"}

package/dist/components/ImportCollection/DropEventListener.vue.js

@@ -0,0 +1,7 @@
+import DropEventListener_vue_vue_type_script_setup_true_lang_default from "./DropEventListener.vue.script.js";
+//#region src/components/ImportCollection/DropEventListener.vue
+var DropEventListener_default = DropEventListener_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DropEventListener_default as default };
+
+//# sourceMappingURL=DropEventListener.vue.js.map

package/dist/components/ImportCollection/DropEventListener.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropEventListener.vue.js","names":[],"sources":["../../../src/components/ImportCollection/DropEventListener.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIcon } from '@scalar/components'\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\n\nconst emit = defineEmits<{\n  (e: 'input', value: string, integration: null, eventType: 'drop'): void\n}>()\n\nconst isDragging = ref<boolean>(false)\n\nlet dragCounter = 0\n\n// Register event listeners\nonMounted(() => {\n  document.addEventListener('dragenter', handleDragEnter)\n  document.addEventListener('dragleave', handleDragLeave)\n  document.addEventListener('dragover', handleDragOver)\n  document.addEventListener('drop', handleDrop)\n})\n\n// Unregister event listeners\nonBeforeUnmount(() => {\n  document.removeEventListener('dragenter', handleDragEnter)\n  document.removeEventListener('dragover', handleDragOver)\n  document.removeEventListener('dragleave', handleDragLeave)\n  document.removeEventListener('drop', handleDrop)\n})\n\nfunction isFromApp(event: DragEvent): boolean {\n  return event.dataTransfer?.types.includes('text/html') ?? false\n}\n\n// Drop\nfunction handleDrop(event: DragEvent) {\n  event.preventDefault()\n  isDragging.value = false\n  dragCounter = 0\n\n  // Prevent emitting for text/html dragged items\n  if (isFromApp(event)) {\n    return\n  }\n\n  if (event.dataTransfer) {\n    // Text\n    const droppedText = event.dataTransfer.getData('text').replace(/^blob:/, '')\n\n    if (droppedText) {\n      emit('input', droppedText, null, 'drop')\n    }\n    // Files\n    else if (event.dataTransfer.files.length > 0) {\n      const file = event.dataTransfer.files[0]\n      if (!file) {\n        return\n      }\n\n      const reader = new FileReader()\n\n      reader.onload = (e) => {\n        if (e.target && typeof e.target.result === 'string') {\n          emit('input', e.target.result, null, 'drop')\n        }\n      }\n\n      reader.readAsText(file)\n    }\n  }\n}\n\nfunction handleDragOver(event: DragEvent) {\n  event.preventDefault()\n}\n\nfunction handleDragLeave(event: DragEvent) {\n  event.preventDefault()\n  dragCounter--\n\n  if (dragCounter === 0) {\n    isDragging.value = false\n  }\n}\n\nfunction handleDragEnter(event: DragEvent) {\n  event.preventDefault()\n  dragCounter++\n\n  // Prevent displaying the draggable UI for text/html dragged items\n  if (isFromApp(event)) {\n    return\n  }\n\n  if (event.dataTransfer) {\n    const items = event.dataTransfer.items\n    for (const item of items) {\n      if (\n        item?.kind === 'string' ||\n        item?.type?.includes('json') ||\n        item?.type?.includes('yml') ||\n        item?.type?.includes('yaml')\n      ) {\n        isDragging.value = true\n        return\n      }\n    }\n  }\n  isDragging.value = false\n}\n</script>\n\n<template>\n  <transition\n    enterActiveClass=\"transition-opacity duration-200\"\n    enterFromClass=\"opacity-0\"\n    leaveActiveClass=\"transition-opacity duration-200\"\n    leaveToClass=\"opacity-0\">\n    <div\n      v-if=\"isDragging\"\n      class=\"bg-b-2 fixed right-1/2 bottom-1/2 z-50 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-xl border transition-opacity duration-200 md:right-10 md:bottom-10 md:translate-x-0 md:translate-y-0\">\n      <div class=\"flex h-full flex-col items-center justify-center\">\n        <div>\n          <ScalarIcon\n            icon=\"Download\"\n            size=\"xl\"\n            thickness=\"2\" />\n        </div>\n        <div class=\"text-c-1 m-4 text-center\">\n          Drop your OpenAPI document here\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n"],"mappings":""}