import { defineComponent, ref, computed, mergeProps, unref, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderClass, ssrInterpolate, ssrRenderList } from 'vue/server-renderer';
import { _ as _export_sfc } from './server.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "SelectField",
  __ssrInlineRender: true,
  props: {
    modelValue: {},
    options: {},
    placeholder: { default: "Select option" }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const open = ref(false);
    const rootRef = ref(null);
    const selectedLabel = computed(() => {
      var _a;
      return ((_a = props.options.find((o) => o.value === props.modelValue)) == null ? void 0 : _a.label) || props.placeholder;
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref_key: "rootRef",
        ref: rootRef,
        class: "relative"
      }, _attrs))} data-v-6786f4a6><button type="button" class="${ssrRenderClass([unref(open) ? "border-brand-500 shadow-glow" : "", "input flex items-center justify-between gap-3 text-left"])}" data-v-6786f4a6><span class="truncate" data-v-6786f4a6>${ssrInterpolate(unref(selectedLabel))}</span><svg viewBox="0 0 20 20" class="${ssrRenderClass([unref(open) ? "rotate-180" : "", "h-4 w-4 transition"])}" fill="none" stroke="currentColor" stroke-width="1.8" data-v-6786f4a6><path d="M5 7.5L10 12.5L15 7.5" data-v-6786f4a6></path></svg></button>`);
      if (unref(open)) {
        _push(`<ul class="absolute z-40 mt-2 max-h-64 w-full overflow-auto rounded-xl border border-surface-border bg-white p-1 shadow-soft dark:bg-slate-900" data-v-6786f4a6><!--[-->`);
        ssrRenderList(__props.options, (option) => {
          _push(`<li class="${ssrRenderClass([__props.modelValue === option.value ? "bg-brand-500 text-white" : "text-text-primary hover:bg-brand-50 dark:hover:bg-slate-800", "cursor-pointer rounded-lg px-3 py-2 text-sm transition"])}" data-v-6786f4a6>${ssrInterpolate(option.label)}</li>`);
        });
        _push(`<!--]--></ul>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ui/SelectField.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const __nuxt_component_0 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6786f4a6"]]);

export { __nuxt_component_0 as _ };
//# sourceMappingURL=SelectField-Cu-FGEiZ.mjs.map
