digivue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
508 lines (502 loc) • 15.8 kB
JavaScript
import { isEmpty } from '@digivue/utils/object';
import SpinnerIcon from '@digivue/icons/spinner';
import Badge from 'digivue/badge';
import Ripple from 'digivue/ripple';
import { mergeProps, resolveComponent, resolveDirective, withDirectives, renderSlot, createBlock, openBlock, resolveDynamicComponent, withCtx, createElementBlock, createCommentVNode, createVNode, toDisplayString, normalizeClass } from 'vue';
import BaseComponent from '@digivue/core/basecomponent';
import ButtonStyle from 'digivue/button/style';
import { mergeDataIntoQueryString } from '@inertiajs/core';
import { router } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import Icon from 'digivue/icon';
var script$1 = {
name: 'BaseButton',
"extends": BaseComponent,
props: {
label: {
type: String,
"default": null
},
icon: {
type: String,
"default": null
},
iconPos: {
type: String,
"default": 'left'
},
iconClass: {
type: [String, Object],
"default": null
},
badge: {
type: String,
"default": null
},
badgeClass: {
type: [String, Object],
"default": null
},
badgeSeverity: {
type: String,
"default": 'secondary'
},
loading: {
type: Boolean,
"default": false
},
loadingIcon: {
type: String,
"default": undefined
},
as: {
type: [String, Object],
"default": 'BUTTON'
},
asChild: {
type: Boolean,
"default": false
},
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
},
variant: {
type: String,
"default": null
},
plain: {
type: Boolean,
"default": false
},
fluid: {
type: Boolean,
"default": null
},
// Custom
buttonStyle: {
type: String,
"default": null
},
data: {
type: Object,
"default": function _default() {
return {};
}
},
except: {
type: Object,
"default": function _default() {
return {};
}
},
headers: {
type: Object,
"default": function _default() {
return {};
}
},
hide: {
type: Boolean,
"default": false
},
hideLabelMobile: {
type: Boolean,
"default": false
},
href: {
type: String,
"default": undefined
},
iconAnimation: {
type: String,
"default": undefined
},
iconBorder: {
type: Boolean,
"default": false
},
iconFixedWidth: {
type: Boolean,
"default": true
},
iconFlip: {
type: String,
"default": undefined
},
iconInverse: {
type: Boolean,
"default": false
},
iconMask: {
type: String,
"default": undefined
},
iconOnly: {
type: Boolean,
"default": false
},
iconPull: {
type: String,
"default": undefined
},
iconRotation: {
type: String,
"default": undefined
},
iconSize: {
type: String,
"default": undefined
},
iconStyle: {
type: String,
"default": 'fas'
},
iconSwapOpacity: {
type: Boolean,
"default": false
},
iconTransform: {
type: String,
"default": undefined
},
labelSize: {
type: String,
"default": undefined
},
loadingIconAnimation: {
type: String,
"default": undefined
},
loadingIconBorder: {
type: Boolean,
"default": false
},
loadingIconClass: {
type: [String, Object],
"default": null
},
loadingIconFixedWidth: {
type: Boolean,
"default": true
},
loadingIconFlip: {
type: String,
"default": undefined
},
loadingIconInverse: {
type: Boolean,
"default": false
},
loadingIconMask: {
type: String,
"default": undefined
},
loadingIconOnly: {
type: Boolean,
"default": false
},
loadingIconPull: {
type: String,
"default": undefined
},
loadingIconRotation: {
type: String,
"default": undefined
},
loadingIconSize: {
type: String,
"default": undefined
},
loadingIconStyle: {
type: String,
"default": 'fas'
},
loadingIconSwapOpacity: {
type: Boolean,
"default": false
},
loadingIconTransform: {
type: String,
"default": undefined
},
method: {
type: String,
"default": 'get'
},
module: {
type: String,
"default": undefined
},
only: {
type: Array,
"default": function _default() {
return [];
}
},
preserveScroll: {
type: Boolean,
"default": false
},
preserveState: {
type: Boolean,
"default": false
},
queryStringArrayFormat: {
type: String,
"default": 'brackets'
},
replace: {
type: Boolean,
"default": false
},
target: {
type: String,
"default": undefined
},
to: {
type: String,
"default": undefined
},
uppercase: {
type: Boolean,
"default": false
},
square: {
type: Boolean,
"default": false
}
},
style: ButtonStyle,
provide: function provide() {
return {
$pcButton: this,
$parentInstance: this
};
}
};
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var script = {
name: 'Button',
"extends": script$1,
inheritAttrs: false,
inject: {
$pcFluid: {
"default": null
}
},
methods: {
getPTOptions: function getPTOptions(key) {
var _ptm = key === 'root' ? this.ptmi : this.ptm;
return _ptm(key, {
context: {
disabled: this.disabled
}
});
},
onClick: function onClick(event) {
if (this.to) {
var _this$$attrs, _this$$attrs2, _this$$attrs3, _this$$attrs4, _this$$attrs5, _this$$attrs6, _this$$attrs7, _this$$attrs8;
event.preventDefault();
var routeUrl = route(this.to);
var method = this.method.toLowerCase();
var _mergeDataIntoQuerySt = mergeDataIntoQueryString(method, routeUrl || '', this.data, this.queryStringArrayFormat),
_mergeDataIntoQuerySt2 = _slicedToArray(_mergeDataIntoQuerySt, 2),
href = _mergeDataIntoQuerySt2[0],
data = _mergeDataIntoQuerySt2[1];
router.visit(href, {
data: data,
method: method,
replace: this.replace,
preserveScroll: this.preserveScroll,
preserveState: this.preserveState,
only: this.only,
except: this.except,
headers: this.headers,
onCancelToken: ((_this$$attrs = this.$attrs) === null || _this$$attrs === void 0 ? void 0 : _this$$attrs.onCancelToken) || function () {
return {};
},
onBefore: ((_this$$attrs2 = this.$attrs) === null || _this$$attrs2 === void 0 ? void 0 : _this$$attrs2.onBefore) || function () {
return {};
},
onStart: ((_this$$attrs3 = this.$attrs) === null || _this$$attrs3 === void 0 ? void 0 : _this$$attrs3.onStart) || function () {
return {};
},
onProgress: ((_this$$attrs4 = this.$attrs) === null || _this$$attrs4 === void 0 ? void 0 : _this$$attrs4.onProgress) || function () {
return {};
},
onFinish: ((_this$$attrs5 = this.$attrs) === null || _this$$attrs5 === void 0 ? void 0 : _this$$attrs5.onFinish) || function () {
return {};
},
onCancel: ((_this$$attrs6 = this.$attrs) === null || _this$$attrs6 === void 0 ? void 0 : _this$$attrs6.onCancel) || function () {
return {};
},
onSuccess: ((_this$$attrs7 = this.$attrs) === null || _this$$attrs7 === void 0 ? void 0 : _this$$attrs7.onSuccess) || function () {
return {};
},
onError: ((_this$$attrs8 = this.$attrs) === null || _this$$attrs8 === void 0 ? void 0 : _this$$attrs8.onError) || function () {
return {};
}
});
}
}
},
computed: {
disabled: function disabled() {
return this.$attrs.disabled || this.$attrs.disabled === '' || this.loading;
},
defaultAriaLabel: function defaultAriaLabel() {
return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs.ariaLabel;
},
hasIcon: function hasIcon() {
return this.icon || this.$slots.icon;
},
attrs: function attrs() {
return mergeProps(this.asAttrs, this.a11yAttrs, this.getPTOptions('root'));
},
asAttrs: function asAttrs() {
return this.as === 'BUTTON' ? {
type: 'button',
disabled: this.disabled
} : undefined;
},
a11yAttrs: function a11yAttrs() {
return {
'aria-label': this.defaultAriaLabel,
'data-pc-name': 'button',
'data-p-disabled': this.disabled,
'data-p-severity': this.severity
};
},
hasFluid: function hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
}
},
components: {
Icon: Icon,
SpinnerIcon: SpinnerIcon,
Badge: Badge
},
directives: {
ripple: Ripple
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_Icon = resolveComponent("Icon");
var _component_Badge = resolveComponent("Badge");
var _directive_ripple = resolveDirective("ripple");
return !_ctx.asChild ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
key: 0,
"class": _ctx.cx('root')
}, $options.attrs, {
onClick: $options.onClick
}), {
"default": withCtx(function () {
return [renderSlot(_ctx.$slots, "default", {}, function () {
return [_ctx.loading ? renderSlot(_ctx.$slots, "loadingicon", mergeProps({
key: 0,
"class": [_ctx.cx('loadingIcon'), _ctx.cx('icon')]
}, _ctx.ptm('loadingIcon')), function () {
return [createVNode(_component_Icon, mergeProps({
beat: _ctx.loadingIconAnimation === 'beat',
"beat-fade": _ctx.loadingIconAnimation === 'beat-fade',
border: _ctx.loadingIconBorder,
bounce: _ctx.loadingIconAnimation === 'bounce',
"class": [_ctx.cx('icon'), _ctx.loadingIconClass],
fade: _ctx.loadingIconAnimation === 'fade',
"fixed-width": _ctx.loadingIconFixedWidth,
flip: _ctx.loadingIconFlip === 'flip',
icon: _ctx.loadingIcon,
"icon-style": _ctx.loadingIconStyle,
inverse: _ctx.loadingIconInverse,
mask: _ctx.loadingIconMask,
pull: _ctx.loadingIconPull,
rotation: _ctx.loadingIconRotation,
shake: _ctx.loadingIconAnimation === 'shake',
size: _ctx.loadingIconSize,
spin: _ctx.loadingIconAnimation === 'spin' || _ctx.loadingIconAnimation === 'spin-reverse',
"spin-pulse": _ctx.loadingIconAnimation === 'spin-pulse',
"spin-reverse": _ctx.loadingIconAnimation === 'spin-reverse',
"swap-opacity": _ctx.loadingIconSwapOpacity,
transform: _ctx.loadingIconTransform
}, _ctx.ptm('icon')), null, 16, ["beat", "beat-fade", "border", "bounce", "class", "fade", "fixed-width", "flip", "icon", "icon-style", "inverse", "mask", "pull", "rotation", "shake", "size", "spin", "spin-pulse", "spin-reverse", "swap-opacity", "transform"])];
}) : renderSlot(_ctx.$slots, "icon", mergeProps({
key: 1,
"class": [_ctx.cx('icon')]
}, _ctx.ptm('icon')), function () {
return [_ctx.icon ? (openBlock(), createBlock(_component_Icon, mergeProps({
key: 0,
beat: _ctx.iconAnimation === 'beat',
"beat-fade": _ctx.iconAnimation === 'beat-fade',
border: _ctx.iconBorder,
bounce: _ctx.iconAnimation === 'bounce',
"class": [_ctx.cx('icon'), _ctx.iconClass],
fade: _ctx.iconAnimation === 'fade',
"fixed-width": _ctx.iconFixedWidth,
flip: _ctx.iconAnimation === 'flip',
icon: _ctx.icon,
"icon-style": _ctx.iconStyle,
inverse: _ctx.iconInverse,
mask: _ctx.iconMask,
pull: _ctx.iconPull,
rotation: _ctx.iconRotation,
shake: _ctx.iconAnimation === 'shake',
size: _ctx.iconSize,
spin: _ctx.iconAnimation === 'spin' || _ctx.iconAnimation === 'spin-reverse',
"spin-pulse": _ctx.iconAnimation === 'spin-pulse',
"spin-reverse": _ctx.iconAnimation === 'spin-reverse',
"swap-opacity": _ctx.iconSwapOpacity,
transform: _ctx.iconTransform
}, _ctx.ptm('icon')), null, 16, ["beat", "beat-fade", "border", "bounce", "class", "fade", "fixed-width", "flip", "icon", "icon-style", "inverse", "mask", "pull", "rotation", "shake", "size", "spin", "spin-pulse", "spin-reverse", "swap-opacity", "transform"])) : createCommentVNode("", true)];
}), _ctx.label ? (openBlock(), createElementBlock("span", mergeProps({
key: 2,
"class": _ctx.cx('label')
}, _ctx.ptm('label')), toDisplayString(_ctx.label || ' '), 17)) : createCommentVNode("", true), _ctx.badge ? (openBlock(), createBlock(_component_Badge, {
key: 3,
value: _ctx.badge,
"class": normalizeClass(_ctx.badgeClass),
severity: _ctx.badgeSeverity,
unstyled: _ctx.unstyled,
pt: _ctx.ptm('pcBadge')
}, null, 8, ["value", "class", "severity", "unstyled", "pt"])) : createCommentVNode("", true)];
})];
}),
_: 3
}, 16, ["class", "onClick"])), [[_directive_ripple]]) : renderSlot(_ctx.$slots, "default", {
key: 1,
"class": normalizeClass(_ctx.cx('root')),
a11yAttrs: $options.a11yAttrs
});
}
script.render = render;
export { script as default };
//# sourceMappingURL=index.mjs.map