@arco-design/web-vue/lib/button/button.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var is = require("../_utils/is.js");
var index = require("../icon/icon-loading/index.js");
var useSize = require("../_hooks/use-size.js");
var useFormItem = require("../_hooks/use-form-item.js");
var context = require("./context.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const _sfc_main = vue.defineComponent({
  name: "Button",
  components: {
    IconLoading: index
  },
  props: {
    type: {
      type: String
    },
    shape: {
      type: String
    },
    status: {
      type: String
    },
    size: {
      type: String
    },
    long: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean
    },
    htmlType: {
      type: String,
      default: "button"
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    href: String
  },
  emits: {
    click: (ev) => true
  },
  setup(props, { emit }) {
    const { size, disabled } = vue.toRefs(props);
    const prefixCls = globalConfig.getPrefixCls("btn");
    const groupContext = vue.inject(context.buttonGroupInjectionKey, void 0);
    const _size = vue.computed(() => {
      var _a;
      return (_a = size.value) != null ? _a : groupContext == null ? void 0 : groupContext.size;
    });
    const _disabled = vue.computed(
      () => Boolean(disabled.value || (groupContext == null ? void 0 : groupContext.disabled))
    );
    const { mergedSize: _mergedSize, mergedDisabled } = useFormItem.useFormItem({
      size: _size,
      disabled: _disabled
    });
    const { mergedSize } = useSize.useSize(_mergedSize);
    const cls = vue.computed(() => {
      var _a, _b, _c, _d, _e, _f;
      return [
        prefixCls,
        `${prefixCls}-${(_b = (_a = props.type) != null ? _a : groupContext == null ? void 0 : groupContext.type) != null ? _b : "secondary"}`,
        `${prefixCls}-shape-${(_d = (_c = props.shape) != null ? _c : groupContext == null ? void 0 : groupContext.shape) != null ? _d : "square"}`,
        `${prefixCls}-size-${mergedSize.value}`,
        `${prefixCls}-status-${(_f = (_e = props.status) != null ? _e : groupContext == null ? void 0 : groupContext.status) != null ? _f : "normal"}`,
        {
          [`${prefixCls}-long`]: props.long,
          [`${prefixCls}-loading`]: props.loading,
          [`${prefixCls}-disabled`]: mergedDisabled.value,
          [`${prefixCls}-link`]: is.isString(props.href)
        }
      ];
    });
    const handleClick = (ev) => {
      if (props.disabled || props.loading) {
        ev.preventDefault();
        return;
      }
      emit("click", ev);
    };
    return {
      prefixCls,
      cls,
      mergedDisabled,
      handleClick
    };
  }
});
const _hoisted_1 = ["href"];
const _hoisted_2 = ["type", "disabled", "autofocus"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_icon_loading = vue.resolveComponent("icon-loading");
  return _ctx.href ? (vue.openBlock(), vue.createElementBlock("a", {
    key: 0,
    class: vue.normalizeClass([
      _ctx.cls,
      { [`${_ctx.prefixCls}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }
    ]),
    href: _ctx.mergedDisabled || _ctx.loading ? void 0 : _ctx.href,
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
  }, [
    _ctx.loading || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 0,
      class: vue.normalizeClass(`${_ctx.prefixCls}-icon`)
    }, [
      _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_icon_loading, {
        key: 0,
        spin: "true"
      })) : vue.renderSlot(_ctx.$slots, "icon", { key: 1 })
    ], 2)) : vue.createCommentVNode("v-if", true),
    vue.renderSlot(_ctx.$slots, "default")
  ], 10, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("button", {
    key: 1,
    class: vue.normalizeClass([
      _ctx.cls,
      { [`${_ctx.prefixCls}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }
    ]),
    type: _ctx.htmlType,
    disabled: _ctx.mergedDisabled,
    autofocus: _ctx.autofocus,
    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
  }, [
    _ctx.loading || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 0,
      class: vue.normalizeClass(`${_ctx.prefixCls}-icon`)
    }, [
      _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_icon_loading, {
        key: 0,
        spin: true
      })) : vue.renderSlot(_ctx.$slots, "icon", { key: 1 })
    ], 2)) : vue.createCommentVNode("v-if", true),
    vue.renderSlot(_ctx.$slots, "default")
  ], 10, _hoisted_2));
}
var _Button = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Button;