@tuoyuan/web/es/src/button/button-storage.vue.js

拓源前端组件库

import { defineComponent as V, getCurrentInstance as $, useSlots as N, ref as c, computed as k, onMounted as D, openBlock as e, createElementBlock as r, normalizeClass as S, Fragment as i, renderList as w, createBlock as f, resolveDynamicComponent as b, createCommentVNode as d, unref as u, withCtx as g, createElementVNode as M, renderSlot as E, createVNode as L, createTextVNode as O, toDisplayString as z } from "vue";
import { getPrefixCls as A } from "@tuoyuan/arco/es/_utils/global-config";
import { Trigger as F } from "../trigger/index.js";
import { Button as I } from "./index.js";
const q = /* @__PURE__ */ V({
  name: "ButtonStorage",
  __name: "button-storage",
  props: {
    // 显示按钮的数量
    limit: {
      type: Number,
      default: 4
    },
    // 触发方式
    trigger: {
      type: [String, Array],
      default: "click"
    },
    // 是否在用户点击后隐藏弹出框
    hideOnClick: {
      type: Boolean,
      default: !0
    },
    // 更多按钮的显示文本
    moreText: {
      type: String,
      default: "更多"
    },
    // 更多按钮的类型
    moreType: {
      type: String,
      default: "text"
    },
    // 更多按钮的状态
    moreStatus: {
      type: String,
      default: "normal"
    }
  },
  setup(y) {
    const l = A("btn-storage"), t = y;
    $();
    const n = N(), a = c(0), v = c(!1), p = c(!1), h = k(() => [l]), x = k(() => [`${l}-popup-arrow`]);
    D(() => {
      B();
    });
    const B = () => {
      if (!n.default) return;
      n.default().length > t.limit ? (a.value = t.limit - 1, v.value = !0) : a.value = t.limit;
    }, T = () => {
      t.hideOnClick && (p.value = !1);
    };
    return (s, C) => (e(), r("div", {
      class: S(h.value)
    }, [
      (e(!0), r(i, null, w(n.default ? n.default() : [], (o, m) => (e(), r(i, null, [
        m < a.value ? (e(), f(b(o), { key: 0 })) : d("", !0)
      ], 64))), 256)),
      v.value ? (e(), f(u(F), {
        key: 0,
        "popup-visible": p.value,
        "onUpdate:popupVisible": C[0] || (C[0] = (o) => p.value = o),
        trigger: y.trigger,
        position: "bottom",
        "show-arrow": "",
        "popup-offset": 4,
        "opened-class": `${u(l)}-open`,
        "animation-name": "slide-dynamic-origin",
        "auto-fit-transform-origin": "",
        "arrow-class": x.value
      }, {
        content: g(() => [
          M("div", {
            class: S(`${u(l)}-more-content`),
            onClick: T
          }, [
            (e(!0), r(i, null, w(s.$slots.default ? s.$slots.default() : [], (o, m) => (e(), r(i, null, [
              m >= a.value ? (e(), f(b(o), { key: 0 })) : d("", !0)
            ], 64))), 256))
          ], 2)
        ]),
        default: g(() => [
          E(s.$slots, "more", {}, () => [
            L(u(I), {
              type: t.moreType,
              status: t.moreStatus
            }, {
              default: g(() => [
                O(z(t.moreText), 1)
              ]),
              _: 1
            }, 8, ["type", "status"])
          ])
        ]),
        _: 3
      }, 8, ["popup-visible", "trigger", "opened-class", "arrow-class"])) : d("", !0)
    ], 2));
  }
});
export {
  q as default
};