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, createElementVNode, createCommentVNode, renderSlot, unref, nextTick } from "vue";
import { useSlotsExist } from "../utils";
const _hoisted_1 = {
  key: 0,
  class: "btn-loading"
};
const _hoisted_2 = {
  key: 0,
  class: "m-static-circle"
};
const _hoisted_3 = {
  key: 1,
  class: "m-dynamic-circle"
};
const _hoisted_4 = {
  key: 1,
  class: "btn-icon"
};
const _hoisted_5 = {
  key: 2,
  class: "btn-content"
};
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;
    });
    function onClick(e) {
      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;
    }
    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) => _ctx.disabled || _ctx.loading ? () => false : onClick($event)),
        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.keyboard && !_ctx.disabled && !_ctx.loading ? onKeyboard($event) : () => false, ["prevent"]), ["enter"]))
      }, {
        default: withCtx(() => [
          _ctx.loading || !showIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
            !_ctx.href && _ctx.loadingType === "static" ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[2] || (_cache[2] = [
              createElementVNode("svg", {
                class: "circle",
                width: "1em",
                height: "1em",
                fill: "currentColor",
                viewBox: "0 0 100 100"
              }, [
                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)
            ]))) : createCommentVNode("", true),
            !_ctx.href && _ctx.loadingType === "dynamic" ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[3] || (_cache[3] = [
              createElementVNode("svg", {
                class: "circle",
                viewBox: "0 0 50 50",
                width: "1em",
                height: "1em",
                fill: "currentColor"
              }, [
                createElementVNode("circle", {
                  class: "path",
                  cx: "25",
                  cy: "25",
                  r: "20",
                  fill: "none"
                })
              ], -1)
            ]))) : createCommentVNode("", true)
          ])) : createCommentVNode("", true),
          !_ctx.loading && showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_4, [
            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_5, [
            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_bdc2e67b_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-bdc2e67b"]]);
export {
  index as default
};