import { defineComponent as W, ref as f, computed as l, watch as O, resolveDirective as q, openBlock as n, createElementBlock as r, withDirectives as F, normalizeClass as h, createElementVNode as m, normalizeStyle as J, createCommentVNode as u, toDisplayString as B, createVNode as w, Fragment as K, nextTick as M } from "vue";
import { C as a } from "../Shared/base-PQGakkrl.js";
import { _ } from "../Shared/Index.vue_vue_type_script_setup_true_lang-Cuv5NgcY.js";
import { wavesBind as j } from "../Web/__directive__/Waves.js";
import { _ as A } from "../Shared/_plugin-vue_export-helper-CHgC5LLL.js";
const G = { class: "panel-btn-parent" }, H = ["disabled"], Q = {
  key: 1,
  class: "btn-label"
}, U = {
  key: 0,
  class: "btn-loading"
}, X = { class: "btn-body-backdrop-container" }, Y = { class: "btn-body-backdrop-text" }, Z = /* @__PURE__ */ W({
  name: "ClButton",
  directives: {
    clwaves: j
  },
  __name: "Index",
  props: {
    className: {
      type: String,
      default: ""
      // desc: 自定义CSS类名
    },
    label: {
      type: String,
      default: ""
      // desc: 按钮文本标签
    },
    icon: {
      type: String,
      default: ""
      // desc: 按钮图标类名
    },
    color: {
      type: String,
      default: "default"
      // desc: 按钮颜色主题 | enum: default, green, red, yellow, white, grayLight, transparent
    },
    size: {
      type: String,
      default: ""
      // desc: 按钮尺寸 | enum: large, small, xl
    },
    disabled: {
      type: Boolean,
      default: !1
      // desc: 是否禁用按钮
    },
    isShowLoad: {
      type: Boolean,
      default: !1
      // desc: 是否显示加载动画
    },
    loadPos: {
      type: String,
      default: "right",
      // desc: 加载动画位置 | enum: right, zoom-out, fixedCenter
      validator: (i) => ["right", "zoom-out", "fixedCenter"].indexOf(i) !== -1
    },
    loadTheme: {
      type: String,
      default: "rotaryLine"
      // desc: 加载动画主题 | enum: rotaryLine, circleNotch, circleBubble
    },
    loadDrift: {
      type: Boolean,
      default: !0
      // desc: 加载时是否漂移
    },
    loadText: {
      type: String,
      default: ""
      // desc: 加载提示文本
    },
    isShowBackDrop: {
      type: Boolean,
      default: !1
      // desc: 是否显示遮罩层
    },
    isShowWaves: {
      type: Boolean,
      default: !0
      // desc: 是否显示点击波纹效果
    },
    wavesColor: {
      type: String,
      default: "white"
      // desc: 波纹颜色 | enum: white, black
    },
    loadStatusIsIng: {
      type: [Boolean, null],
      default: null
      // desc: 加载状态控制（true开始，false结束，null忽略）
    }
  },
  emits: ["onClick"],
  setup(i, { expose: x, emit: C }) {
    const t = i;
    a.isEmpty(t.label) && a.isEmpty(t.icon) && console.warn('[ClButton] Warning: Either "label" or "icon" prop is required.');
    const z = C, d = f(null), s = f(!1), p = f(!1), v = f(!1), g = l(() => !a.isEmpty(t.label)), b = l(() => !a.isEmpty(t.icon)), I = l(() => t.disabled ? !0 : s.value), c = l(() => t.loadPos === "fixedCenter"), L = l(() => {
      let e = t.wavesColor || "white";
      return (a.isExistValue(t.color, "white") || a.isExistValue(t.color, "grayLight")) && (e = "black"), e;
    }), k = l(() => {
      let e = t.loadPos || "right";
      return a.isExistValue(t.className, "btn-circle") && a.isExistValue(e, "right") && (e = "zoom-out"), e;
    }), S = l(() => {
      let e = "large";
      switch (t.loadTheme) {
        case "rotaryLine":
          e = t.size === "small" ? "small" : "large", a.isExistValue(t.className, "btn-circle") && (e = "small");
          break;
        case "circleNotch":
          e = "large";
          break;
        case "circleBubble":
          e = "small";
          break;
      }
      return e;
    }), D = l(() => {
      const e = {
        "btn-parent": !0,
        btn: !0
      };
      return a.isEmpty(t.color) || (e[`btn-${t.color}`] = !0), a.isEmpty(t.className) || t.className?.split(" ").forEach((o) => {
        a.isEmpty(o) || (e[o] = !0);
      }), a.isEmpty(t.size) || (e[`btn-${t.size}`] = !0), e["btn-load-ing"] = s.value, s.value && (e[`btn-load-${k.value}`] = !0, e[`btn-load-${t.loadTheme}`] = !0, e["btn-load-nodrift"] = !t.loadDrift), d.value && d.value.className && d.value.className.split(" ").forEach((o) => {
        a.isEmpty(o) || a.isExistJsonKey(e, o) || (e[o] = !0);
      }), e;
    }), N = l(() => {
      const e = {
        "btn-icon": !0
      };
      return b.value && t.icon?.split(" ").forEach((o) => {
        a.isEmpty(o) || (e[o] = !0);
      }), e;
    }), T = l(() => {
      const e = s.value && c.value;
      return {
        "btn-body-backdrop-main": !0,
        animated: !0,
        zoomIn: e,
        zoomOut: !e
      };
    }), P = l(() => {
      const e = {};
      return (g.value || b.value) && k.value === "zoom-out" && s.value && !c.value && (e.opacity = 0), e;
    }), y = () => {
      s.value || (t.isShowBackDrop && (p.value = !0, v.value = !0), s.value = !0);
    }, E = () => {
      t.isShowBackDrop && (c.value ? M(() => {
        setTimeout(() => {
          p.value = !1, v.value = !1;
        }, 200);
      }) : p.value = !1), s.value = !1;
    };
    O(
      () => t.loadStatusIsIng,
      (e) => {
        a.isBoolean(e) && (e ? y() : E());
      }
    );
    const V = () => {
      z("onClick");
    }, $ = () => {
      t.disabled || (t.isShowLoad && y(), V());
    };
    return x({
      loadStart: () => {
        y();
      },
      loadStop: () => {
        E();
      }
    }), (e, o) => {
      const R = q("clwaves");
      return n(), r("span", G, [
        F((n(), r("button", {
          ref_key: "refElTopParent",
          ref: d,
          type: "button",
          class: h(D.value),
          disabled: I.value,
          onClick: $
        }, [
          m("span", {
            style: J(P.value)
          }, [
            b.value ? (n(), r("i", {
              key: 0,
              class: h(N.value)
            }, null, 2)) : u("", !0),
            g.value ? (n(), r("span", Q, B(i.label), 1)) : u("", !0)
          ], 4),
          s.value && !c.value ? (n(), r("span", U, [
            w(_, {
              theme: i.loadTheme,
              size: S.value
            }, null, 8, ["theme", "size"])
          ])) : u("", !0)
        ], 10, H)), [
          [R, { color: L.value }]
        ]),
        p.value ? (n(), r(K, { key: 0 }, [
          o[0] || (o[0] = m("div", { class: "btn-body-backdrop" }, null, -1)),
          c.value && v.value ? (n(), r("div", {
            key: 0,
            class: h(T.value)
          }, [
            m("div", X, [
              w(_, {
                theme: i.loadTheme,
                size: S.value
              }, null, 8, ["theme", "size"]),
              m("div", Y, B(i.loadText || "加载中"), 1)
            ])
          ], 2)) : u("", !0)
        ], 64)) : u("", !0)
      ]);
    };
  }
}), ne = /* @__PURE__ */ A(Z, [["__scopeId", "data-v-3215c07e"]]);
export {
  ne as default
};
//# sourceMappingURL=ClButton.js.map
