primevue/button/button.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue = this.primevue || {};
this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);

    var script = {
        name: 'Button',
        props: {
            label: {
                type: String,
                default: null
            },
            icon: {
                type: String,
                default: null
            },
            iconPos: {
                type: String,
                default: 'left'
            },
            iconClass: {
                type: String,
                default: null
            },
            badge: {
                type: String,
                default: null
            },
            badgeClass: {
                type: String,
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            },
            loadingIcon: {
                type: String,
                default: undefined
            },
            link: {
                type: Boolean,
                default: false
            },
            severity: {
                type: String,
                default: null
            },
            raised: {
                type: Boolean,
                default: false
            },
            rounded: {
                type: Boolean,
                default: false
            },
            text: {
                type: Boolean,
                default: false
            },
            outlined: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: null
            },
            plain: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            buttonClass() {
                return [
                    'p-button p-component',
                    {
                        'p-button-icon-only': this.hasIcon && !this.label,
                        'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                        'p-disabled': this.$attrs.disabled || this.loading,
                        'p-button-loading': this.loading,
                        'p-button-loading-label-only': this.loading && !this.hasIcon && this.label,
                        'p-button-link': this.link,
                        [`p-button-${this.severity}`]: this.severity,
                        'p-button-raised': this.raised,
                        'p-button-rounded': this.rounded,
                        'p-button-text': this.text,
                        'p-button-outlined': this.outlined,
                        'p-button-sm': this.size === 'small',
                        'p-button-lg': this.size === 'large',
                        'p-button-plain': this.plain
                    }
                ];
            },
            iconStyleClass() {
                return [
                    'p-button-icon',
                    this.iconClass,
                    {
                        'p-button-icon-left': this.iconPos === 'left' && this.label,
                        'p-button-icon-right': this.iconPos === 'right' && this.label,
                        'p-button-icon-top': this.iconPos === 'top' && this.label,
                        'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
                    }
                ];
            },
            loadingIconStyleClass() {
                return ['p-button-loading-icon pi-spin', this.iconStyleClass];
            },
            badgeStyleClass() {
                return [
                    'p-badge p-component',
                    this.badgeClass,
                    {
                        'p-badge-no-gutter': this.badge && String(this.badge).length === 1
                    }
                ];
            },
            disabled() {
                return this.$attrs.disabled || this.loading;
            },
            defaultAriaLabel() {
                return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
            },
            hasIcon() {
                return this.icon || this.$slots.icon;
            }
        },
        components: {
            SpinnerIcon: SpinnerIcon__default["default"]
        },
        directives: {
            ripple: Ripple__default["default"]
        }
    };

    const _hoisted_1 = ["aria-label", "disabled"];
    const _hoisted_2 = { class: "p-button-label" };

    function render(_ctx, _cache, $props, $setup, $data, $options) {
      const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
      const _directive_ripple = vue.resolveDirective("ripple");

      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
        class: vue.normalizeClass($options.buttonClass),
        type: "button",
        "aria-label": $options.defaultAriaLabel,
        disabled: $options.disabled
      }, [
        vue.renderSlot(_ctx.$slots, "default"),
        (!_ctx.$slots.default)
          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
              ($props.loading)
                ? vue.renderSlot(_ctx.$slots, "loadingicon", {
                    key: 0,
                    class: vue.normalizeClass($options.loadingIconStyleClass)
                  }, () => [
                    ($props.loadingIcon)
                      ? (vue.openBlock(), vue.createElementBlock("span", {
                          key: 0,
                          class: vue.normalizeClass([$options.loadingIconStyleClass, $props.loadingIcon])
                        }, null, 2))
                      : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
                          key: 1,
                          class: vue.normalizeClass($options.loadingIconStyleClass),
                          spin: ""
                        }, null, 8, ["class"]))
                  ])
                : vue.renderSlot(_ctx.$slots, "icon", {
                    key: 1,
                    class: vue.normalizeClass($options.iconStyleClass)
                  }, () => [
                    ($props.icon)
                      ? (vue.openBlock(), vue.createElementBlock("span", {
                          key: 0,
                          class: vue.normalizeClass([$options.iconStyleClass, $props.icon])
                        }, null, 2))
                      : vue.createCommentVNode("", true)
                  ]),
              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
              ($props.badge)
                ? (vue.openBlock(), vue.createElementBlock("span", {
                    key: 2,
                    class: vue.normalizeClass($options.badgeStyleClass)
                  }, vue.toDisplayString($props.badge), 3))
                : vue.createCommentVNode("", true)
            ], 64))
          : vue.createCommentVNode("", true)
      ], 10, _hoisted_1)), [
        [_directive_ripple]
      ])
    }

    script.render = render;

    return script;

})(primevue.icons.spinner, primevue.ripple, Vue);