yuang-framework-ui-pc/lib/ele-segmented/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const util = require("../ele-basic-select/util");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleSegmented",
  components: { ElIcon: elementPlus.ElIcon, ElTabs: elementPlus.ElTabs, ElTabPane: elementPlus.ElTabPane },
  props: props.segmentedProps,
  emits: props.segmentedEmits,
  setup(props2, { emit }) {
    const { validateChange } = util.useFormValidate();
    const tabRef = vue.ref(null);
    const isEmptyActive = vue.computed(() => {
      return props2.modelValue == null || !props2.items || !props2.items.some((d) => d.value === props2.modelValue);
    });
    const handleUpdateModelValue = (value) => {
      if (props2.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, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    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 = vue.resolveComponent("ElIcon");
  const _component_ElTabPane = vue.resolveComponent("ElTabPane");
  const _component_ElTabs = vue.resolveComponent("ElTabs");
  return vue.openBlock(), vue.createBlock(_component_ElTabs, {
    ref: "tabRef",
    modelValue: _ctx.modelValue,
    stretch: _ctx.block,
    class: vue.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: vue.withCtx(() => [
      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
        return vue.openBlock(), vue.createBlock(_component_ElTabPane, {
          key: index2 + "-" + item.value + "-" + item.label,
          name: item.value,
          disabled: _ctx.disabled || item.disabled
        }, {
          label: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "label", { item }, () => [
              item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.mergeProps({
                key: 0,
                ref_for: true
              }, item.iconProps || {}, { class: "ele-segmented-item-icon" }), {
                default: vue.withCtx(() => [
                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), {
                    style: vue.normalizeStyle(item.iconStyle)
                  }, null, 8, ["style"]))
                ]),
                _: 2
              }, 1040)) : vue.createCommentVNode("", true),
              item.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("", true)
            ])
          ]),
          _: 2
        }, 1032, ["name", "disabled"]);
      }), 128))
    ]),
    _: 3
  }, 8, ["modelValue", "stretch", "class", "onUpdate:modelValue"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;