import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, useId, vModelText, withCtx, withDirectives } from "vue";
import { ScalarButton, ScalarListbox } from "@scalar/components";
import { ScalarIconCaretDown } from "@scalar/icons";
//#region src/components/Server/ServerVariablesSelect.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = {
	key: 0,
	class: "sr-only"
};
//#endregion
//#region src/components/Server/ServerVariablesSelect.vue
var ServerVariablesSelect_default = /* @__PURE__ */ defineComponent({
	__name: "ServerVariablesSelect",
	props: {
		enum: {},
		value: {},
		controls: {}
	},
	emits: ["change"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const options = computed(() => props.enum.map((s) => ({
			id: s,
			label: s
		})));
		const selected = computed({
			get: () => options.value.find((opt) => opt.id === props.value),
			set: (opt) => emit("change", opt?.id ?? "")
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarListbox), {
				modelValue: selected.value,
				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
				options: options.value
			}, {
				default: withCtx(() => [createVNode(unref(ScalarButton), {
					"aria-controls": __props.controls,
					class: "group/button h-8 gap-1.5 p-1.5 text-base font-normal",
					variant: "ghost"
				}, {
					default: withCtx(() => [createElementVNode("span", { class: normalizeClass({ "text-c-1": __props.value }) }, [__props.value ? (openBlock(), createElementBlock("span", _hoisted_1$1, " Selected: ")) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(__props.value || "Select value"), 1)], 2), createVNode(unref(ScalarIconCaretDown), {
						weight: "bold",
						class: "mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180"
					})]),
					_: 1
				}, 8, ["aria-controls"])]),
				_: 1
			}, 8, ["modelValue", "options"]);
		};
	}
});
//#endregion
//#region src/components/Server/ServerVariablesTextbox.vue
var ServerVariablesTextbox_default = /* @__PURE__ */ defineComponent({
	__name: "ServerVariablesTextbox",
	props: {
		value: {},
		controls: {}
	},
	emits: ["change"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const model = computed({
			get: () => props.value,
			set: (v) => emit("change", v)
		});
		return (_ctx, _cache) => {
			return withDirectives((openBlock(), createElementBlock("input", mergeProps({ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event) }, __props.controls ? {
				..._ctx.$attrs,
				"aria-controls": __props.controls
			} : {}, {
				autocomplete: "off",
				class: "text-c-1 w-full border-transparent px-1.5 py-1.25 -outline-offset-1 group-last/label:rounded-br-lg",
				placeholder: "value",
				spellcheck: "false",
				type: "text"
			}), null, 16)), [[vModelText, model.value]]);
		};
	}
});
//#endregion
//#region src/components/Server/ServerVariablesForm.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["for"];
//#endregion
//#region src/components/Server/ServerVariablesForm.vue
var ServerVariablesForm_default = /* @__PURE__ */ defineComponent({
	__name: "ServerVariablesForm",
	props: {
		variables: {},
		values: {},
		controls: {},
		layout: { default: "client" }
	},
	emits: ["update:variable"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const id = useId();
		function setVariable(name, value) {
			emit("update:variable", name, value);
		}
		const getVariable = (name) => {
			return (__props.values?.[name] ?? __props.variables?.[name]?.default ?? "").toString();
		};
		return (_ctx, _cache) => {
			return __props.variables && Object.keys(__props.variables ?? {}).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(Object.keys(__props.variables), (name) => {
				return openBlock(), createElementBlock("div", {
					key: name,
					class: normalizeClass(["group/label flex h-8 w-full", __props.layout === "reference" && "items-center border-x border-b last:rounded-b-lg"])
				}, [createElementVNode("label", {
					class: "flex items-center py-2 pl-3 group-has-[input]/label:mr-0 after:content-[':']",
					for: `${unref(id)}-${name}`
				}, toDisplayString(name), 9, _hoisted_1), __props.variables?.[name]?.enum?.length ? (openBlock(), createBlock(ServerVariablesSelect_default, {
					key: 0,
					id: `${unref(id)}-${name}`,
					controls: __props.controls,
					enum: __props.variables[name]?.enum?.map((v) => `${v}`) ?? [],
					value: getVariable(name),
					onChange: (s) => setVariable(name, s)
				}, null, 8, [
					"id",
					"controls",
					"enum",
					"value",
					"onChange"
				])) : (openBlock(), createBlock(ServerVariablesTextbox_default, {
					key: 1,
					id: `${unref(id)}-${name}`,
					controls: __props.controls,
					value: getVariable(name),
					onChange: (s) => setVariable(name, s)
				}, null, 8, [
					"id",
					"controls",
					"value",
					"onChange"
				]))], 2);
			}), 128)) : createCommentVNode("", true);
		};
	}
});
//#endregion
export { ServerVariablesForm_default as t };

//# sourceMappingURL=ServerVariablesForm-BRZ9XC8o.js.map