"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const event = require("../../../constants/event.js");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$1 = require("../../../hooks/use-id/index.js");
const useFormCommonProps = require("../../form/src/hooks/use-form-common-props.js");
const useFormItem = require("../../form/src/hooks/use-form-item.js");
const segmented = require("./segmented.js");
const index$2 = require("../../../../node_modules/@vueuse/core/index.js");
const Vue = require("vue");
const _hoisted_1 = [
  "id",
  "aria-label",
  "aria-labelledby"
];
const _hoisted_2 = [
  "name",
  "disabled",
  "checked",
  "onChange"
];
var segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElSegmented",
  __name: "segmented",
  props: {
    direction: {
      type: String,
      required: false,
      default: "horizontal"
    },
    options: {
      type: Array,
      required: false,
      default: () => []
    },
    modelValue: {
      type: [
        String,
        Number,
        Boolean
      ],
      required: false,
      default: void 0
    },
    props: {
      type: Object,
      required: false,
      default: () => segmented.defaultProps
    },
    block: {
      type: Boolean,
      required: false
    },
    size: {
      type: null,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: void 0
    },
    validateEvent: {
      type: Boolean,
      required: false,
      default: true
    },
    id: {
      type: String,
      required: false
    },
    name: {
      type: String,
      required: false
    },
    ariaLabel: {
      type: String,
      required: false
    }
  },
  emits: segmented.segmentedEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const ns = index.useNamespace("segmented");
    const segmentedId = index$1.useId();
    const segmentedSize = useFormCommonProps.useFormSize();
    const _disabled = useFormCommonProps.useFormDisabled();
    const { formItem } = useFormItem.useFormItem();
    const { inputId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, { formItemContext: formItem });
    const segmentedRef = Vue.ref(null);
    const activeElement = index$2.useActiveElement();
    const state = Vue.reactive({
      isInit: false,
      width: 0,
      height: 0,
      translateX: 0,
      translateY: 0,
      focusVisible: false
    });
    const handleChange = (evt, item) => {
      const value = getValue(item);
      emit(event.UPDATE_MODEL_EVENT, value);
      emit(event.CHANGE_EVENT, value);
      evt.target.checked = value === props.modelValue;
    };
    const aliasProps = Vue.computed(() => ({
      ...segmented.defaultProps,
      ...props.props
    }));
    const getValue = (item) => {
      return shared_esmBundler.isObject(item) ? item[aliasProps.value.value] : item;
    };
    const getLabel = (item) => {
      return shared_esmBundler.isObject(item) ? item[aliasProps.value.label] : item;
    };
    const getDisabled = (item) => {
      return !!(_disabled.value || (shared_esmBundler.isObject(item) ? item[aliasProps.value.disabled] : false));
    };
    const getSelected = (item) => {
      return props.modelValue === getValue(item);
    };
    const getOption = (value) => {
      return props.options.find((item) => getValue(item) === value);
    };
    const getItemCls = (item) => {
      return [
        ns.e("item"),
        ns.is("selected", getSelected(item)),
        ns.is("disabled", getDisabled(item))
      ];
    };
    const updateSelect = () => {
      if (!segmentedRef.value) return;
      const selectedItem = segmentedRef.value.querySelector(".is-selected");
      const selectedItemInput = segmentedRef.value.querySelector(".is-selected input");
      if (!selectedItem || !selectedItemInput) {
        state.width = 0;
        state.height = 0;
        state.translateX = 0;
        state.translateY = 0;
        state.focusVisible = false;
        return;
      }
      state.isInit = true;
      if (props.direction === "vertical") {
        state.height = selectedItem.offsetHeight;
        state.translateY = selectedItem.offsetTop;
      } else {
        state.width = selectedItem.offsetWidth;
        state.translateX = selectedItem.offsetLeft;
      }
      try {
        state.focusVisible = selectedItemInput.matches(":focus-visible");
      } catch {
      }
    };
    const segmentedCls = Vue.computed(() => [
      ns.b(),
      ns.m(segmentedSize.value),
      ns.is("block", props.block)
    ]);
    const selectedStyle = Vue.computed(() => ({
      width: props.direction === "vertical" ? "100%" : `${state.width}px`,
      height: props.direction === "vertical" ? `${state.height}px` : "100%",
      transform: props.direction === "vertical" ? `translateY(${state.translateY}px)` : `translateX(${state.translateX}px)`,
      display: state.isInit ? "block" : "none"
    }));
    const selectedCls = Vue.computed(() => [
      ns.e("item-selected"),
      ns.is("disabled", getDisabled(getOption(props.modelValue))),
      ns.is("focus-visible", state.focusVisible)
    ]);
    const name = Vue.computed(() => {
      return props.name || segmentedId.value;
    });
    index$2.useResizeObserver(segmentedRef, updateSelect);
    Vue.watch(activeElement, updateSelect);
    Vue.watch(() => props.modelValue, () => {
      var _a;
      updateSelect();
      if (props.validateEvent) (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
    }, { flush: "post" });
    return (_ctx, _cache) => {
      return __props.options.length ? (Vue.openBlock(), Vue.createElementBlock("div", {
        key: 0,
        id: Vue.unref(inputId),
        ref_key: "segmentedRef",
        ref: segmentedRef,
        class: Vue.normalizeClass(segmentedCls.value),
        role: "radiogroup",
        "aria-label": !Vue.unref(isLabeledByFormItem) ? __props.ariaLabel || "segmented" : void 0,
        "aria-labelledby": Vue.unref(isLabeledByFormItem) ? Vue.unref(formItem).labelId : void 0
      }, [Vue.createElementVNode("div", { class: Vue.normalizeClass([Vue.unref(ns).e("group"), Vue.unref(ns).m(__props.direction)]) }, [Vue.createElementVNode("div", {
        style: Vue.normalizeStyle(selectedStyle.value),
        class: Vue.normalizeClass(selectedCls.value)
      }, null, 6), (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(__props.options, (item, index2) => {
        return Vue.openBlock(), Vue.createElementBlock("label", {
          key: index2,
          class: Vue.normalizeClass(getItemCls(item))
        }, [Vue.createElementVNode("input", {
          class: Vue.normalizeClass(Vue.unref(ns).e("item-input")),
          type: "radio",
          name: name.value,
          disabled: getDisabled(item),
          checked: getSelected(item),
          onChange: ($event) => handleChange($event, item)
        }, null, 42, _hoisted_2), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("item-label")) }, [Vue.renderSlot(_ctx.$slots, "default", { item }, () => [Vue.createTextVNode(Vue.toDisplayString(getLabel(item)), 1)])], 2)], 2);
      }), 128))], 2)], 10, _hoisted_1)) : Vue.createCommentVNode("v-if", true);
    };
  }
});
exports.default = segmented_vue_vue_type_script_setup_true_lang_default;
