buefy
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
451 lines (437 loc) • 15.2 kB
JavaScript
/*! Buefy v3.0.7 | MIT License | github.com/buefy/buefy */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Button = {}, global.Vue));
})(this, (function (exports, vue) { 'use strict';
let config = {
defaultIconPack: "mdi",
defaultIconComponent: null,
defaultButtonRounded: false,
defaultLinkTags: [
"a",
"button",
"input",
"router-link",
"nuxt-link",
"n-link",
"RouterLink",
"NuxtLink",
"NLink"
]};
const mdiIcons = {
sizes: {
default: "mdi-24px",
"is-small": null,
"is-medium": "mdi-36px",
"is-large": "mdi-48px"
},
iconPrefix: "mdi-"
};
const faIcons = () => {
const faIconPrefix = "fa-";
return {
sizes: {
default: null,
"is-small": null,
"is-medium": faIconPrefix + "lg",
"is-large": faIconPrefix + "2x"
},
iconPrefix: faIconPrefix,
internalIcons: {
information: "info-circle",
alert: "exclamation-triangle",
"alert-circle": "exclamation-circle",
"chevron-right": "angle-right",
"chevron-left": "angle-left",
"chevron-down": "angle-down",
"eye-off": "eye-slash",
"menu-down": "caret-down",
"menu-up": "caret-up",
"close-circle": "times-circle"
}
};
};
const getIcons = () => {
let icons = {
mdi: mdiIcons,
fa: faIcons(),
fas: faIcons(),
far: faIcons(),
fad: faIcons(),
fab: faIcons(),
fal: faIcons(),
"fa-solid": faIcons(),
"fa-regular": faIcons(),
"fa-light": faIcons(),
"fa-thin": faIcons(),
"fa-duotone": faIcons(),
"fa-brands": faIcons()
};
return icons;
};
const defaultIconAliases = {
checkboxOn: {
type: "svg",
viewBox: "0 0 1 1",
path: "M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z"
},
checkboxIndeterminate: {
type: "svg",
viewBox: "0 0 1 1",
path: "M 0.15,0.4 L 0.85,0.4 L 0.85,0.6 L 0.15,0.6 Z"
},
chevronLeft: {
type: "svg",
path: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
},
chevronRight: {
type: "svg",
path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
},
chevronDown: {
type: "svg",
path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
},
chevronUp: {
type: "svg",
path: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
},
menuDown: {
type: "svg",
path: "M7,10L12,15L17,10H7Z"
},
menuUp: {
type: "svg",
path: "M7,14L12,9L17,14H7Z"
},
check: {
type: "svg",
path: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
},
alertCircle: {
type: "svg",
path: "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
},
alert: {
type: "svg",
path: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
},
information: {
type: "svg",
path: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
},
close: {
type: "svg",
path: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
},
closeCircle: {
type: "svg",
path: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
},
eye: {
type: "svg",
path: "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
},
eyeOff: {
type: "svg",
path: "M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.18 16.38,18.6L16.81,19L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
}
};
function getIconAliases() {
return defaultIconAliases;
}
function resolveAlias(name) {
return getIconAliases()[name];
}
var _sfc_main$1 = vue.defineComponent({
name: "BIcon",
props: {
type: [String, Object],
component: String,
pack: String,
icon: {
type: String,
required: false,
default: void 0
},
/** Key into IconAliases (e.g. "chevronLeft"). Takes precedence over icon/pack. */
alias: String,
size: String,
customSize: String,
customClass: String,
both: Boolean
// This is used internally to show both MDI and FA icon
},
computed: {
resolvedAlias() {
var _a;
if (!this.alias) return null;
return (_a = resolveAlias(this.alias)) != null ? _a : null;
},
isSvgAlias() {
var _a;
return ((_a = this.resolvedAlias) == null ? void 0 : _a.type) === "svg";
},
isComponentAlias() {
var _a;
return ((_a = this.resolvedAlias) == null ? void 0 : _a.type) === "component";
},
// Typed accessors used in the template
resolvedAliasSvg() {
return this.resolvedAlias;
},
resolvedAliasComponent() {
return this.resolvedAlias;
},
iconConfig() {
const allIcons = getIcons();
return allIcons[this.newPack];
},
iconPrefix() {
if (this.iconConfig && this.iconConfig.iconPrefix) {
return this.iconConfig.iconPrefix;
}
return "";
},
/*
* Internal icon name based on the pack.
* If pack is 'fa', gets the equivalent FA icon name of the MDI,
* internal icons are always MDI.
*/
newIcon() {
var _a;
return `${this.iconPrefix}${this.getEquivalentIconOf((_a = this.icon) != null ? _a : "")}`;
},
newPack() {
return this.pack || config.defaultIconPack;
},
newType() {
if (!this.type) return;
let splitType = [];
if (typeof this.type === "string") {
splitType = this.type.split("-");
} else {
for (const key in this.type) {
if (this.type[key]) {
splitType = key.split("-");
break;
}
}
}
if (splitType.length <= 1) return;
const [, ...type] = splitType;
return `has-text-${type.join("-")}`;
},
newCustomSize() {
return this.customSize || this.customSizeByPack;
},
customSizeByPack() {
if (this.iconConfig && this.iconConfig.sizes) {
if (this.size && this.iconConfig.sizes[this.size] !== void 0) {
return this.iconConfig.sizes[this.size];
} else if (this.iconConfig.sizes.default) {
return this.iconConfig.sizes.default;
}
}
return null;
},
useIconComponent() {
return this.component || config.defaultIconComponent;
}
},
methods: {
/*
* Equivalent icon name of the MDI.
*/
getEquivalentIconOf(value) {
if (!this.both) {
return value;
}
if (this.iconConfig == null) {
return value;
}
const maybeInternal = this.iconConfig;
if (maybeInternal && maybeInternal.internalIcons && maybeInternal.internalIcons[value]) {
return maybeInternal.internalIcons[value];
}
return value;
}
}
});
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1$1 = ["viewBox"];
const _hoisted_2$1 = ["d"];
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"span",
{
class: vue.normalizeClass(["icon", [_ctx.newType, _ctx.size]])
},
[
_ctx.isSvgAlias ? (vue.openBlock(), vue.createElementBlock("svg", {
key: 0,
viewBox: _ctx.resolvedAliasSvg.viewBox || "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
class: vue.normalizeClass(_ctx.customClass),
"aria-hidden": "true"
}, [
vue.createElementVNode("path", {
fill: "currentColor",
d: _ctx.resolvedAliasSvg.path
}, null, 8, _hoisted_2$1)
], 10, _hoisted_1$1)) : _ctx.isComponentAlias ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.resolvedAliasComponent.component), {
key: 1,
icon: _ctx.resolvedAliasComponent.icon,
class: vue.normalizeClass(_ctx.customClass)
}, null, 8, ["icon", "class"])) : !_ctx.useIconComponent ? (vue.openBlock(), vue.createElementBlock(
"i",
{
key: 2,
class: vue.normalizeClass([_ctx.newPack, _ctx.newIcon, _ctx.newCustomSize, _ctx.customClass])
},
null,
2
/* CLASS */
)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.useIconComponent), {
key: 3,
icon: [_ctx.newPack, _ctx.newIcon],
size: _ctx.newCustomSize,
class: vue.normalizeClass([_ctx.customClass])
}, null, 8, ["icon", "size", "class"]))
],
2
/* CLASS */
);
}
var BIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
const NATIVE_TYPES = [
"button",
"submit",
"reset"
];
var _sfc_main = vue.defineComponent({
name: "BButton",
components: { BIcon },
inheritAttrs: false,
props: {
type: [String, Object],
size: String,
label: String,
iconPack: String,
iconLeft: String,
iconRight: String,
rounded: {
type: Boolean,
default: () => {
return config.defaultButtonRounded;
}
},
loading: Boolean,
outlined: Boolean,
expanded: Boolean,
inverted: Boolean,
focused: Boolean,
active: Boolean,
hovered: Boolean,
selected: Boolean,
nativeType: {
type: String,
default: "button",
validator: (value) => {
return NATIVE_TYPES.indexOf(value) >= 0;
}
},
tag: {
type: [String, Object],
default: "button",
validator: (value) => {
return typeof value === "object" || config.defaultLinkTags.indexOf(value) >= 0;
}
}
},
computed: {
computedTag() {
if (this.$attrs.disabled !== void 0 && this.$attrs.disabled !== false) {
return "button";
}
return this.tag;
},
iconSize() {
if (!this.size || this.size === "is-medium") {
return "is-small";
} else if (this.size === "is-large") {
return "is-medium";
}
return this.size;
}
}
});
const _hoisted_1 = { key: 1 };
const _hoisted_2 = { key: 2 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_b_icon = vue.resolveComponent("b-icon");
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.computedTag), vue.mergeProps({ class: "button" }, _ctx.$attrs, {
type: typeof _ctx.computedTag === "string" && ["button", "input"].includes(_ctx.computedTag) ? _ctx.nativeType : void 0,
class: [_ctx.size, _ctx.type, {
"is-rounded": _ctx.rounded,
"is-loading": _ctx.loading,
"is-outlined": _ctx.outlined,
"is-fullwidth": _ctx.expanded,
"is-inverted": _ctx.inverted,
"is-focused": _ctx.focused,
"is-active": _ctx.active,
"is-hovered": _ctx.hovered,
"is-selected": _ctx.selected
}]
}), {
default: vue.withCtx(() => [
_ctx.iconLeft ? (vue.openBlock(), vue.createBlock(_component_b_icon, {
key: 0,
pack: _ctx.iconPack,
icon: _ctx.iconLeft,
size: _ctx.iconSize
}, null, 8, ["pack", "icon", "size"])) : vue.createCommentVNode("v-if", true),
_ctx.label ? (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_1,
vue.toDisplayString(_ctx.label),
1
/* TEXT */
)) : _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "default")
])) : vue.createCommentVNode("v-if", true),
_ctx.iconRight ? (vue.openBlock(), vue.createBlock(_component_b_icon, {
key: 3,
pack: _ctx.iconPack,
icon: _ctx.iconRight,
size: _ctx.iconSize
}, null, 8, ["pack", "icon", "size"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["type", "class"]);
}
var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
const registerComponent = (Vue, component, name) => {
const componentName = component.name;
if (componentName == null) {
throw new Error("Buefy.registerComponent: missing component name");
}
Vue.component(componentName, component);
};
const Plugin = {
install(Vue) {
registerComponent(Vue, Button);
}
};
exports.BButton = Button;
exports.default = Plugin;
Object.defineProperty(exports, '__esModule', { value: true });
}));