dm-vue3-ui/es/button/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withKeys, withModifiers, withCtx, createElementBlock, createCommentVNode, renderSlot, unref, nextTick, pushScopeId, popScopeId, createElementVNode } from "vue";
import { useSlotsExist, store } from "../utils";
import { themeManager } from "../utils/theme";
const _withScopeId = (n) => (pushScopeId("data-v-f3049a46"), n = n(), popScopeId(), n);
const _hoisted_1 = {
  key: 0,
  class: "btn-loading"
};
const _hoisted_2 = {
  key: 0,
  class: "m-static-circle"
};
const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
  class: "circle",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  viewBox: "0 0 100 100"
}, [
  /* @__PURE__ */ createElementVNode("path", {
    d: "M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90",
    "stroke-linecap": "round",
    class: "path",
    "fill-opacity": "0"
  })
], -1));
const _hoisted_4 = [
  _hoisted_3
];
const _hoisted_5 = {
  key: 1,
  class: "m-dynamic-circle"
};
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
  class: "circle",
  viewBox: "0 0 50 50",
  width: "1em",
  height: "1em",
  fill: "currentColor"
}, [
  /* @__PURE__ */ createElementVNode("circle", {
    class: "path",
    cx: "25",
    cy: "25",
    r: "20",
    fill: "none"
  })
], -1));
const _hoisted_7 = [
  _hoisted_6
];
const _hoisted_8 = {
  key: 1,
  class: "btn-icon"
};
const _hoisted_9 = {
  key: 2,
  class: "btn-content"
};
const primaryColor = "#1677ff";
const dangerColor = "#ff4d4f";
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-button"
  },
  __name: "index",
  props: {
    type: { default: "default" },
    shape: { default: "default" },
    icon: { default: void 0 },
    size: { default: "middle" },
    ghost: { type: Boolean, default: false },
    customClass: { default: void 0 },
    href: { default: void 0 },
    target: { default: "_self" },
    keyboard: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    loadingType: { default: "dynamic" },
    block: { type: Boolean, default: false }
  },
  emits: ["click"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const wave = ref(false);
    const emit = __emit;
    const slotsExist = useSlotsExist(["icon", "default"]);
    const showIcon = computed(() => {
      return slotsExist.icon || props.icon;
    });
    const showIconOnly = computed(() => {
      return showIcon.value && !slotsExist.default;
    });
    const platformConfig = store("platformConfig") || {};
    const themeType = (platformConfig == null ? void 0 : platformConfig.themeColor) || "default";
    themeManager.initializeTheme();
    themeManager.applyThemeByType(themeType);
    function onClick(e) {
      if (props.disabled || props.loading) {
        return;
      }
      if (wave.value) {
        wave.value = false;
        nextTick(() => {
          wave.value = true;
        });
      } else {
        wave.value = true;
      }
      emit("click", e);
    }
    function onKeyboard(e) {
      onClick(e);
    }
    function onWaveEnd() {
      wave.value = false;
    }
    computed(() => {
      switch (props.type) {
        case "primary":
          return primaryColor;
        case "danger":
          return dangerColor;
        default:
          return primaryColor;
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(_ctx.href ? "a" : "div"), {
        tabindex: "0",
        class: normalizeClass(["dm-button", [
          `btn-${_ctx.type} btn-${_ctx.size}`,
          {
            [`loading-${_ctx.size}`]: !_ctx.href && _ctx.loading,
            "btn-icon-only": showIconOnly.value,
            "btn-circle": _ctx.shape === "circle",
            "btn-round": _ctx.shape === "round",
            "btn-loading-blur": !_ctx.href && _ctx.loading,
            "btn-ghost": _ctx.ghost,
            "btn-block": _ctx.block,
            "btn-disabled": _ctx.disabled
          },
          _ctx.customClass
        ]]),
        href: _ctx.href,
        target: _ctx.target,
        onClick: _cache[0] || (_cache[0] = ($event) => onClick($event)),
        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.keyboard ? onKeyboard($event) : void 0, ["prevent"]), ["enter"]))
      }, {
        default: withCtx(() => [
          _ctx.loading || !showIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
            !_ctx.href && _ctx.loadingType === "static" ? (openBlock(), createElementBlock("div", _hoisted_2, _hoisted_4)) : createCommentVNode("", true),
            !_ctx.href && _ctx.loadingType === "dynamic" ? (openBlock(), createElementBlock("div", _hoisted_5, _hoisted_7)) : createCommentVNode("", true)
          ])) : createCommentVNode("", true),
          !_ctx.loading && showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_8, [
            renderSlot(_ctx.$slots, "icon", {}, () => [
              _ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : createCommentVNode("", true)
            ], true)
          ])) : createCommentVNode("", true),
          unref(slotsExist).default ? (openBlock(), createElementBlock("span", _hoisted_9, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ])) : createCommentVNode("", true),
          !_ctx.disabled ? (openBlock(), createElementBlock("div", {
            key: 3,
            class: normalizeClass(["button-wave", { "wave-active": wave.value }]),
            onAnimationend: onWaveEnd
          }, null, 34)) : createCommentVNode("", true)
        ]),
        _: 3
      }, 40, ["class", "href", "target"]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_f3049a46_lang = "";
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f3049a46"]]);
export {
  index as default
};