tav-ui/es/packages/components/button-group/src/button-group2.mjs

Tav UI

import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, withModifiers, createElementVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
import { TaButton } from '../../button/index2.mjs';
import '../../../hooks/index2.mjs';
import '../../../utils/index2.mjs';
import { buttonGroupProps } from './types2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { useScrollToCenter } from '../../../hooks/event/useScrollToCenter2.mjs';
import { isNullOrUnDef } from '../../../utils/is2.mjs';

const _sfc_main = defineComponent({
  name: "TaButtonGroup",
  components: { Button: TaButton },
  props: buttonGroupProps,
  emits: ["btnClick", "update:active"],
  setup(props, { emit }) {
    const scrollRef = ref(null);
    const clickHandle = (data, index, event) => {
      if (data.value == props.active)
        return;
      emit("update:active", data.value);
      emit("btnClick", data);
    };
    const { scrollToCenter } = useScrollToCenter(scrollRef);
    watch(() => props.active, (v) => {
      const buttonIndex = props.buttons.findIndex((btn) => btn.value === v);
      const buttonEl = scrollRef.value?.querySelectorAll("button")[buttonIndex];
      buttonEl && scrollToCenter(buttonEl);
    }, {
      immediate: true
    });
    const getNumber = (num, item) => {
      if (isNullOrUnDef(num)) {
        return 0;
      }
      const badgeMax = item.badgeMax || props.badgeMax;
      if (props.badgeMax) {
        return num > badgeMax ? `${badgeMax}+` : num;
      } else {
        return num;
      }
    };
    return {
      scrollRef,
      getNumber,
      clickHandle
    };
  }
});
const _hoisted_1 = {
  ref: "scrollRef",
  class: "ta-button-group-inner"
};
const _hoisted_2 = { key: 0 };
const _hoisted_3 = {
  key: 1,
  class: "badge-count"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Button = resolveComponent("Button");
  return openBlock(), createElementBlock("div", {
    class: "ta-button-group",
    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
    }, ["stop"]))
  }, [
    createElementVNode("div", _hoisted_1, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttons, (item, index) => {
        return openBlock(), createBlock(_component_Button, {
          key: item.value,
          type: _ctx.active == item.value ? "primary" : "default",
          disabled: item.disabled,
          loading: item.loading,
          permission: item.permission,
          "permission-code": item.permissionCode,
          "use-permission": item.usePermission,
          onClick: ($event) => _ctx.clickHandle(item, index, $event)
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(item.label) + " ", 1),
            item.number != null ? (openBlock(), createElementBlock("span", _hoisted_2, "\uFF08" + toDisplayString(item.number) + "\uFF09", 1)) : createCommentVNode("v-if", true),
            item.badge != null ? (openBlock(), createElementBlock("sup", _hoisted_3, [
              item.badge !== true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                createTextVNode(toDisplayString(_ctx.getNumber(item.badge, item)), 1)
              ], 2112)) : item.number != null ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                createTextVNode(toDisplayString(_ctx.getNumber(item.number, item)), 1)
              ], 2112)) : createCommentVNode("v-if", true)
            ])) : createCommentVNode("v-if", true)
          ]),
          _: 2
        }, 1032, ["type", "disabled", "loading", "permission", "permission-code", "use-permission", "onClick"]);
      }), 128))
    ], 512),
    renderSlot(_ctx.$slots, "default")
  ]);
}
var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/button-group/src/button-group.vue"]]);

export { ButtonGroup as default };
//# sourceMappingURL=button-group2.mjs.map