import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
import { ScalarButton, ScalarListbox } from "@scalar/components";
import { ScalarIconCaretDown } from "@scalar/icons";
//#region src/v2/blocks/operation-code-sample/components/ExamplePicker.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "min-w-0 flex-1 truncate" };
var ExamplePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	inheritAttrs: false,
	__name: "ExamplePicker",
	props: /* @__PURE__ */ mergeModels({ examples: { default: () => ({}) } }, {
		"modelValue": { required: true },
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		const selectedExampleKey = useModel(__props, "modelValue");
		const exampleOptions = computed(() => Object.entries(__props.examples).map(([key, example]) => ({
			id: key,
			label: example?.summary ?? key
		})));
		const selectedExample = computed({
			get: () => exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),
			set: (v) => selectedExampleKey.value = v?.id ?? ""
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(ScalarListbox), {
				modelValue: selectedExample.value,
				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedExample.value = $event),
				class: "w-fit min-w-32",
				options: exampleOptions.value,
				placement: "bottom-start",
				teleport: ""
			}, {
				default: withCtx(() => [createVNode(unref(ScalarButton), mergeProps({
					class: "text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal",
					"data-testid": "example-picker",
					variant: "ghost"
				}, _ctx.$attrs), {
					default: withCtx(() => [createElementVNode("div", _hoisted_1, toDisplayString(selectedExample.value?.label ?? "Select an example"), 1), createVNode(unref(ScalarIconCaretDown), {
						class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
						weight: "bold"
					})]),
					_: 1
				}, 16)]),
				_: 1
			}, 8, ["modelValue", "options"]);
		};
	}
});
//#endregion
export { ExamplePicker_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=ExamplePicker.vue.script.js.map