yuang-framework-ui-pc/es/ele-segmented/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, resolveDynamicComponent, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
import { ElIcon, ElTabs, ElTabPane } from "element-plus";
import { useFormValidate } from "../ele-basic-select/util";
import { segmentedProps, segmentedEmits } from "./props";
const _sfc_main = defineComponent({
  name: "EleSegmented",
  components: { ElIcon, ElTabs, ElTabPane },
  props: segmentedProps,
  emits: segmentedEmits,
  setup(props, { emit }) {
    const { validateChange } = useFormValidate();
    const tabRef = ref(null);
    const isEmptyActive = computed(() => {
      return props.modelValue == null || !props.items || !props.items.some((d) => d.value === props.modelValue);
    });
    const handleUpdateModelValue = (value) => {
      if (props.modelValue !== value) {
        emit("update:modelValue", value);
        validateChange();
        emit("change", value);
      }
    };
    const getWrapEl = () => {
      const tabEl = tabRef.value ? tabRef.value.$el : void 0;
      const headerEl = tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
      return headerEl ? headerEl.querySelector(".el-tabs__nav") : void 0;
    };
    const updateActiveBar = () => {
      const el = getWrapEl();
      if (el) {
        const bar = el.querySelector(".el-tabs__active-bar");
        if (bar) {
          bar.style.width = "0px";
        }
      }
    };
    return {
      tabRef,
      isEmptyActive,
      handleUpdateModelValue,
      updateActiveBar
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 1,
  class: "ele-segmented-item-label"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_ElTabPane = resolveComponent("ElTabPane");
  const _component_ElTabs = resolveComponent("ElTabs");
  return openBlock(), createBlock(_component_ElTabs, {
    ref: "tabRef",
    modelValue: _ctx.modelValue,
    stretch: _ctx.block,
    class: normalizeClass([
      "ele-segmented",
      { "is-block": _ctx.block },
      { "is-large": _ctx.size === "large" },
      { "is-small": _ctx.size === "small" },
      { "is-disabled": _ctx.disabled },
      { "is-single": _ctx.items && _ctx.items.length === 1 },
      { "is-empty": _ctx.isEmptyActive }
    ]),
    "onUpdate:modelValue": _ctx.handleUpdateModelValue
  }, {
    default: withCtx(() => [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
        return openBlock(), createBlock(_component_ElTabPane, {
          key: index2 + "-" + item.value + "-" + item.label,
          name: item.value,
          disabled: _ctx.disabled || item.disabled
        }, {
          label: withCtx(() => [
            renderSlot(_ctx.$slots, "label", { item }, () => [
              item.icon ? (openBlock(), createBlock(_component_ElIcon, mergeProps({
                key: 0,
                ref_for: true
              }, item.iconProps || {}, { class: "ele-segmented-item-icon" }), {
                default: withCtx(() => [
                  (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
                    style: normalizeStyle(item.iconStyle)
                  }, null, 8, ["style"]))
                ]),
                _: 2
              }, 1040)) : createCommentVNode("", true),
              item.label ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(item.label), 1)) : createCommentVNode("", true)
            ])
          ]),
          _: 2
        }, 1032, ["name", "disabled"]);
      }), 128))
    ]),
    _: 3
  }, 8, ["modelValue", "stretch", "class", "onUpdate:modelValue"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};