buefy
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
1,721 lines (1,707 loc) • 669 kB
JavaScript
/*! Buefy v3.0.2 | MIT License | github.com/buefy/buefy */
import { Fragment, Comment, Text, Static, defineComponent, h, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString, withCtx, createVNode, renderList, resolveDynamicComponent, mergeProps, withDirectives, vModelDynamic, vModelText, withKeys, withModifiers, Transition, createElementVNode, normalizeStyle, vShow, normalizeProps, guardReactiveProps, vModelCheckbox, resolveDirective, createSlots, vModelSelect, toHandlers, createApp, vModelRadio, toHandlerKey, camelize, toRaw } from 'vue';
var __defProp$d = Object.defineProperty;
var __pow = Math.pow;
var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField$6 = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
const colorChannels = ["red", "green", "blue", "alpha"];
const colorsNammed = {
transparent: "#00000000",
black: "#000000",
silver: "#c0c0c0",
gray: "#808080",
white: "#ffffff",
maroon: "#800000",
red: "#ff0000",
purple: "#800080",
fuchsia: "#ff00ff",
green: "#008000",
lime: "#00ff00",
olive: "#808000",
yellow: "#ffff00",
navy: "#000080",
blue: "#0000ff",
teal: "#008080",
aqua: "#00ffff",
orange: "#ffa500",
aliceblue: "#f0f8ff",
antiquewhite: "#faebd7",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
bisque: "#ffe4c4",
blanchedalmond: "#ffebcd",
blueviolet: "#8a2be2",
brown: "#a52a2a",
burlywood: "#deb887",
cadetblue: "#5f9ea0",
chartreuse: "#7fff00",
chocolate: "#d2691e",
coral: "#ff7f50",
cornflowerblue: "#6495ed",
cornsilk: "#fff8dc",
crimson: "#dc143c",
cyan: "#00ffff",
darkblue: "#00008b",
darkcyan: "#008b8b",
darkgoldenrod: "#b8860b",
darkgray: "#a9a9a9",
darkgreen: "#006400",
darkgrey: "#a9a9a9",
darkkhaki: "#bdb76b",
darkmagenta: "#8b008b",
darkolivegreen: "#556b2f",
darkorange: "#ff8c00",
darkorchid: "#9932cc",
darkred: "#8b0000",
darksalmon: "#e9967a",
darkseagreen: "#8fbc8f",
darkslateblue: "#483d8b",
darkslategray: "#2f4f4f",
darkslategrey: "#2f4f4f",
darkturquoise: "#00ced1",
darkviolet: "#9400d3",
deeppink: "#ff1493",
deepskyblue: "#00bfff",
dimgray: "#696969",
dimgrey: "#696969",
dodgerblue: "#1e90ff",
firebrick: "#b22222",
floralwhite: "#fffaf0",
forestgreen: "#228b22",
gainsboro: "#dcdcdc",
ghostwhite: "#f8f8ff",
gold: "#ffd700",
goldenrod: "#daa520",
greenyellow: "#adff2f",
grey: "#808080",
honeydew: "#f0fff0",
hotpink: "#ff69b4",
indianred: "#cd5c5c",
indigo: "#4b0082",
ivory: "#fffff0",
khaki: "#f0e68c",
lavender: "#e6e6fa",
lavenderblush: "#fff0f5",
lawngreen: "#7cfc00",
lemonchiffon: "#fffacd",
lightblue: "#add8e6",
lightcoral: "#f08080",
lightcyan: "#e0ffff",
lightgoldenrodyellow: "#fafad2",
lightgray: "#d3d3d3",
lightgreen: "#90ee90",
lightgrey: "#d3d3d3",
lightpink: "#ffb6c1",
lightsalmon: "#ffa07a",
lightseagreen: "#20b2aa",
lightskyblue: "#87cefa",
lightslategray: "#778899",
lightslategrey: "#778899",
lightsteelblue: "#b0c4de",
lightyellow: "#ffffe0",
limegreen: "#32cd32",
linen: "#faf0e6",
magenta: "#ff00ff",
mediumaquamarine: "#66cdaa",
mediumblue: "#0000cd",
mediumorchid: "#ba55d3",
mediumpurple: "#9370db",
mediumseagreen: "#3cb371",
mediumslateblue: "#7b68ee",
mediumspringgreen: "#00fa9a",
mediumturquoise: "#48d1cc",
mediumvioletred: "#c71585",
midnightblue: "#191970",
mintcream: "#f5fffa",
mistyrose: "#ffe4e1",
moccasin: "#ffe4b5",
navajowhite: "#ffdead",
oldlace: "#fdf5e6",
olivedrab: "#6b8e23",
orangered: "#ff4500",
orchid: "#da70d6",
palegoldenrod: "#eee8aa",
palegreen: "#98fb98",
paleturquoise: "#afeeee",
palevioletred: "#db7093",
papayawhip: "#ffefd5",
peachpuff: "#ffdab9",
peru: "#cd853f",
pink: "#ffc0cb",
plum: "#dda0dd",
powderblue: "#b0e0e6",
rosybrown: "#bc8f8f",
royalblue: "#4169e1",
saddlebrown: "#8b4513",
salmon: "#fa8072",
sandybrown: "#f4a460",
seagreen: "#2e8b57",
seashell: "#fff5ee",
sienna: "#a0522d",
skyblue: "#87ceeb",
slateblue: "#6a5acd",
slategray: "#708090",
slategrey: "#708090",
snow: "#fffafa",
springgreen: "#00ff7f",
steelblue: "#4682b4",
tan: "#d2b48c",
thistle: "#d8bfd8",
tomato: "#ff6347",
turquoise: "#40e0d0",
violet: "#ee82ee",
wheat: "#f5deb3",
whitesmoke: "#f5f5f5",
yellowgreen: "#9acd32",
rebeccapurple: "#663399"
};
class ColorTypeError extends Error {
constructor() {
super("ColorTypeError: type must be hex(a), rgb(a) or hsl(a)");
}
}
class Color {
// Since getters and setters for the color channels, e.g., "alpha", are
// dynamically defined with `Object.defineProperty` in the constructor, we
// cannot write property declarations inside the class body. Instead, we
// augment the `Color` class with an ambient module declared in `color.ts`.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(...args) {
// @ts-expect-error - TypeScript failed to inter the initialization of this property
__publicField$6(this, "$channels");
if (args.length > 0) {
return Color.parse(...args);
}
this.$channels = new Uint8Array(colorChannels.length);
}
get red() {
return this.$channels[0];
}
set red(byte) {
if (!Number.isNaN(byte / 1)) {
this.$channels[0] = Math.min(255, Math.max(0, byte));
}
}
get green() {
return this.$channels[1];
}
set green(byte) {
if (!Number.isNaN(byte / 1)) {
this.$channels[1] = Math.min(255, Math.max(0, byte));
}
}
get blue() {
return this.$channels[2];
}
set blue(byte) {
if (!Number.isNaN(byte / 1)) {
this.$channels[2] = Math.min(255, Math.max(0, byte));
}
}
get alpha() {
return this.$channels[3];
}
set alpha(byte) {
if (!Number.isNaN(byte / 1)) {
this.$channels[3] = Math.min(255, Math.max(0, byte));
}
}
get hue() {
return this.getHue();
}
set hue(value) {
if (!Number.isNaN(value / 1)) {
this.setHue(value);
}
}
get saturation() {
return this.getSaturation();
}
set saturation(value) {
if (!Number.isNaN(value / 1)) {
this.setSaturation(value);
}
}
get lightness() {
return this.getLightness();
}
set lightness(value) {
if (!Number.isNaN(value / 1)) {
this.setLightness(value);
}
}
getHue() {
const [red, green, blue] = Array.from(this.$channels).map((c) => c / 255);
const [min, max] = [Math.min(red, green, blue), Math.max(red, green, blue)];
const delta = max - min;
let hue = 0;
if (delta === 0) {
return hue;
}
if (red === max) {
hue = (green - blue) / delta % 6;
} else if (green === max) {
hue = (blue - red) / delta + 2;
} else {
hue = (red - green) / delta + 4;
}
hue *= 60;
while (hue !== -Infinity && hue < 0) hue += 360;
return Math.round(hue % 360);
}
setHue(value) {
const color = Color.fromHSL(value, this.saturation, this.lightness, this.alpha / 255);
for (let i = 0; i < this.$channels.length; i++) {
this.$channels[i] = Number(color.$channels[i]);
}
}
getSaturation() {
const [red, green, blue] = Array.from(this.$channels).map((c) => c / 255);
const [min, max] = [Math.min(red, green, blue), Math.max(red, green, blue)];
const delta = max - min;
return delta !== 0 ? Math.round(delta / (1 - Math.abs(2 * this.lightness - 1)) * 100) / 100 : 0;
}
setSaturation(value) {
const color = Color.fromHSL(this.hue, value, this.lightness, this.alpha / 255);
colorChannels.forEach((_, i) => this.$channels[i] = color.$channels[i]);
}
getLightness() {
const [red, green, blue] = Array.from(this.$channels).map((c) => c / 255);
const [min, max] = [Math.min(red, green, blue), Math.max(red, green, blue)];
return Math.round((max + min) / 2 * 100) / 100;
}
setLightness(value) {
const color = Color.fromHSL(this.hue, this.lightness, value, this.alpha / 255);
colorChannels.forEach((_, i) => this.$channels[i] = color.$channels[i]);
}
clone() {
const color = new Color();
colorChannels.forEach((_, i) => color.$channels[i] = this.$channels[i]);
return color;
}
toString(type = "hex") {
switch (String(type).toLowerCase()) {
case "hex":
return "#" + colorChannels.slice(0, 3).map((channel) => this[channel].toString(16).padStart(2, "0")).join("");
case "hexa":
return "#" + colorChannels.map((channel) => this[channel].toString(16).padStart(2, "0")).join("");
case "rgb":
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
case "rgba":
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${Math.round(this.alpha / 2.55) / 100})`;
case "hsl":
return `hsl(${Math.round(this.hue)}deg, ${Math.round(this.saturation * 100)}%, ${Math.round(this.lightness * 100)}%)`;
case "hsla":
return `hsla(${Math.round(this.hue)}deg, ${Math.round(this.saturation * 100)}%, ${Math.round(this.lightness * 100)}%, ${Math.round(this.alpha / 2.55) / 100})`;
default:
throw new ColorTypeError();
}
}
get [Symbol.toStringTag]() {
return this.toString("hex");
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
static parse(...args) {
if (typeof args[0] === "object") {
return Color.parseObject(args[0]);
} else if (args.every((arg) => !Number.isNaN(arg / 1))) {
const color = new Color();
if (args.length > 3) {
color.red = args[0];
color.green = args[1];
color.blue = args[2];
if (args[3]) {
color.alpha = args[3];
}
} else if (args.length === 1) {
const index = Number(args[0]);
return Color.parseIndex(index, index > __pow(2, 24) ? 3 : 4);
}
} else if (typeof args[0] === "string") {
let match = null;
if (typeof colorsNammed[args[0].toLowerCase()] === "string") {
return Color.parseHex(colorsNammed[args[0].toLowerCase()]);
} else if ((match = args[0].match(/^(#|&h|0x)?(([a-f0-9]{3,4}){1,2})$/i)) !== null) {
return Color.parseHex(match[2]);
} else if ((match = args[0].match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(\s*,\s*(\d*\.?\d+))?\s*\)$/i)) !== null) {
const channels = [
match[1],
match[2],
match[3],
typeof match[5] !== "undefined" ? match[5] : 1
];
return Color.fromRGB(...channels.map((value) => Number(value)));
} else if (args[0].match(/^(h(sl|wb)a?|lab|color|cmyk)\(/i)) {
throw new Error("Color expression not implemented yet");
}
}
throw new Error("Invalid color expression");
}
static parseObject(object) {
const color = new Color();
if (object === null || typeof object !== "object") {
return color;
}
if (Color.isColor(object)) {
return object.clone();
}
colorChannels.forEach((channel) => {
if (!Number.isNaN(object[channel])) {
color[channel] = object[channel];
}
});
return color;
}
static parseHex(hex) {
if (typeof hex !== "string") {
throw new Error("Hex expression must be a string");
}
hex = hex.trim().replace(/^(0x|&h|#)/i, "");
if (hex.length === 3 || hex.length === 4) {
hex = hex.split("").map((c) => c.repeat(2)).join("");
}
if (!(hex.length === 6 || hex.length === 8)) {
throw new Error("Incorrect Hex expression length");
}
const chans = hex.split(/(..)/).filter((value) => value).map((value) => Number.parseInt(value, 16));
if (typeof chans[3] === "number") {
chans[3] /= 255;
}
return Color.fromRGB(...chans);
}
static parseIndex(value, channels = 3) {
const color = new Color();
for (let i = 0; i < 4; i++) {
color[colorChannels[i]] = value >> (channels - i) * 8 && 255;
}
return color;
}
static fromRGB(red, green, blue, alpha = 1) {
if ([red, green, blue, alpha].some((arg) => Number.isNaN(arg / 1))) {
throw new Error("Invalid arguments");
}
alpha *= 255;
const color = new Color();
[red, green, blue, alpha].forEach((value, index) => {
color[colorChannels[index]] = value;
});
return color;
}
static fromHSL(hue, saturation, lightness, alpha = 1) {
if ([hue, saturation, lightness, alpha].some((arg) => Number.isNaN(arg))) {
throw new Error("Invalid arguments");
}
while (hue < 0 && hue !== -Infinity) hue += 360;
hue = hue % 360;
saturation = Math.max(0, Math.min(1, saturation));
lightness = Math.max(0, Math.min(1, lightness));
alpha = Math.max(0, Math.min(1, alpha));
const c = (1 - Math.abs(2 * lightness - 1)) * saturation;
const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
const m = lightness - c / 2;
const [r, g, b] = hue < 60 ? [c, x, 0] : hue < 120 ? [x, c, 0] : hue < 180 ? [0, c, x] : hue < 240 ? [0, x, c] : hue < 300 ? [x, 0, c] : [c, 0, x];
return Color.fromRGB((r + m) * 255, (g + m) * 255, (b + m) * 255, alpha);
}
static isColor(arg) {
return arg instanceof Color;
}
}
const NOTICE_POSITIONS = [
"is-top-right",
"is-top",
"is-top-left",
"is-bottom-right",
"is-bottom",
"is-bottom-left"
];
let config = {
defaultContainerElement: null,
defaultIconPack: "mdi",
defaultIconComponent: null,
defaultIconPrev: "chevron-left",
defaultIconNext: "chevron-right",
defaultLocale: void 0,
defaultDialogConfirmText: null,
defaultDialogCancelText: null,
defaultSnackbarDuration: 3500,
defaultSnackbarPosition: null,
defaultToastDuration: 2e3,
defaultToastPosition: null,
defaultNotificationDuration: 2e3,
defaultNotificationPosition: null,
defaultTooltipType: "is-primary",
defaultTooltipDelay: null,
defaultTooltipCloseDelay: null,
defaultSidebarDelay: null,
defaultInputAutocomplete: "on",
defaultDateFormatter: null,
defaultDateParser: null,
defaultDateCreator: null,
defaultTimeCreator: null,
defaultDayNames: null,
defaultMonthNames: null,
defaultFirstDayOfWeek: null,
defaultUnselectableDaysOfWeek: null,
defaultTimeFormatter: null,
defaultTimeParser: null,
defaultDatetimeFormatter: null,
defaultDatetimeParser: null,
defaultDatetimeCreator: null,
defaultClockpickerHoursLabel: null,
defaultClockpickerMinutesLabel: null,
defaultColorFormatter: null,
defaultColorParser: null,
defaultModalCanCancel: ["escape", "x", "outside", "button"],
defaultModalScroll: null,
defaultDatepickerMobileNative: true,
defaultTimepickerMobileNative: true,
defaultTimepickerMobileModal: true,
defaultNoticeQueue: true,
defaultInputHasCounter: true,
defaultCompatFallthrough: true,
defaultTaginputHasCounter: true,
defaultUseHtml5Validation: true,
defaultDropdownMobileModal: true,
defaultFieldLabelPosition: null,
defaultDatepickerYearsRange: [-100, 10],
defaultDatepickerNearbyMonthDays: true,
defaultDatepickerNearbySelectableMonthDays: false,
defaultDatepickerShowWeekNumber: false,
defaultDatepickerWeekNumberClickable: false,
defaultDatepickerMobileModal: true,
defaultTrapFocus: true,
defaultAutoFocus: true,
defaultButtonRounded: false,
defaultSwitchRounded: true,
defaultCarouselInterval: 3500,
defaultTabsExpanded: false,
defaultTabsAnimated: true,
defaultTabsType: null,
defaultStatusIcon: true,
defaultProgrammaticPromise: false,
defaultLinkTags: [
"a",
"button",
"input",
"router-link",
"nuxt-link",
"n-link",
"RouterLink",
"NuxtLink",
"NLink"
],
defaultImageWebpFallback: null,
defaultImageLazy: true,
defaultImageResponsive: true,
defaultImageRatio: null,
defaultImageSrcsetFormatter: null,
defaultBreadcrumbTag: "a",
defaultBreadcrumbAlign: "is-left",
defaultBreadcrumbSeparator: "",
defaultBreadcrumbSize: "is-medium",
customIconPacks: null
};
const setOptions = (options) => {
config = options;
};
var __defProp$c = Object.defineProperty;
var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
var __hasOwnProp$d = Object.prototype.hasOwnProperty;
var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$c = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$d.call(b, prop))
__defNormalProp$c(a, prop, b[prop]);
if (__getOwnPropSymbols$d)
for (var prop of __getOwnPropSymbols$d(b)) {
if (__propIsEnum$d.call(b, prop))
__defNormalProp$c(a, prop, b[prop]);
}
return a;
};
function signPoly(value) {
if (value < 0) return -1;
return value > 0 ? 1 : 0;
}
const sign = Math.sign || signPoly;
function hasFlag(val, flag) {
return (val & flag) === flag;
}
function mod(n, mod2) {
return (n % mod2 + mod2) % mod2;
}
function bound(val, min, max) {
return Math.max(min, Math.min(max, val));
}
function getValueByPath(obj, path) {
return path.split(".").reduce((o, i) => o ? o[i] : null, obj);
}
function indexOf(array, obj, fn) {
if (!array) return -1;
if (!fn || typeof fn !== "function") return array.indexOf(obj);
for (let i = 0; i < array.length; i++) {
if (fn(array[i], obj)) {
return i;
}
}
return -1;
}
const isObject = (item) => typeof item === "object" && !Array.isArray(item);
const mergeFn = (target, source, deep = false) => {
if (deep || !Object.assign) {
const isDeep = (prop) => isObject(source[prop]) && target !== null && Object.prototype.hasOwnProperty.call(target, prop) && isObject(target[prop]);
const replaced = Object.getOwnPropertyNames(source).map((prop) => ({
[prop]: isDeep(prop) ? mergeFn(target[prop], source[prop] || {}, deep) : source[prop]
})).reduce(
(a, b) => __spreadValues$c(__spreadValues$c({}, a), b),
// eslint-disable-next-line no-use-before-define
{}
);
return __spreadValues$c(__spreadValues$c({}, target), replaced);
} else {
return Object.assign(target, source);
}
};
const merge = mergeFn;
const isMobile = {
Android: function() {
return typeof window !== "undefined" && window.navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return typeof window !== "undefined" && window.navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return typeof window !== "undefined" && (window.navigator.userAgent.match(/iPhone|iPad|iPod/i) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1);
},
Opera: function() {
return typeof window !== "undefined" && window.navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return typeof window !== "undefined" && window.navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows();
}
};
function removeElement(el) {
if (typeof el.remove !== "undefined") {
el.remove();
} else if (typeof el.parentNode !== "undefined" && el.parentNode !== null) {
el.parentNode.removeChild(el);
}
}
function createAbsoluteElement(el) {
const root = document.createElement("div");
root.style.position = "absolute";
root.style.left = "0px";
root.style.top = "0px";
root.style.width = "100%";
const wrapper = document.createElement("div");
root.appendChild(wrapper);
wrapper.appendChild(el);
document.body.appendChild(root);
return root;
}
function isVueComponent(c) {
return c != null && c.$ != null && c.$.vnode != null;
}
function escapeRegExpChars(value) {
if (!value) return value;
return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function removeDiacriticsFromString(value) {
if (!value) return value;
return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
function multiColumnSort(inputArray, sortingPriority) {
const array = JSON.parse(JSON.stringify(inputArray));
const fieldSorter = (fields) => (a, b) => fields.map((o) => {
const { field, order, customSort } = o;
if (typeof customSort === "function") {
return customSort(a, b, order !== "desc");
} else {
const aValue = getValueByPath(a, field);
const bValue = getValueByPath(b, field);
const ord = aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
return order === "desc" ? -ord : ord;
}
}).reduce((p, n) => p || n, 0);
return array.sort(fieldSorter(sortingPriority));
}
function createNewEvent(eventName) {
let event;
if (typeof Event === "function") {
event = new Event(eventName);
} else {
event = document.createEvent("Event");
event.initEvent(eventName, true, true);
}
return event;
}
function toCssWidth(width) {
return width === void 0 ? null : isNaN(+width) ? `${width}` : width + "px";
}
function getMonthNames(locale, format = "long") {
const dates = [];
for (let i = 0; i < 12; i++) {
dates.push(new Date(2e3, i, 15));
}
const dtf = new Intl.DateTimeFormat(locale, {
month: format
});
return dates.map((d) => dtf.format(d));
}
function getWeekdayNames(locale, format = "narrow") {
const dates = [];
for (let i = 0; i < 7; i++) {
const dt = new Date(2e3, 0, i + 1);
dates[dt.getDay()] = dt;
}
const dtf = new Intl.DateTimeFormat(locale, { weekday: format });
return dates.map((d) => dtf.format(d));
}
function matchWithGroups(pattern, str) {
const matches = str.match(pattern);
const groupNames = pattern.toString().match(/<(.+?)>/g);
if (groupNames == null) {
throw new RangeError("pattern must contain at least one group");
}
return groupNames.map((group) => {
const groupMatches = group.match(/<(.+)>/);
return groupMatches[1];
}).reduce((acc, curr, index) => {
if (matches && matches.length > index) {
acc[curr] = matches[index + 1];
} else {
acc[curr] = null;
}
return acc;
}, {});
}
function isWebpSupported() {
return new Promise((resolve) => {
const image = new Image();
image.onerror = () => resolve(false);
image.onload = () => resolve(image.width === 1);
image.src = "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
}).catch(() => false);
}
function isCustomElement(vm) {
return vm.$root != null && "shadowRoot" in vm.$root.$options;
}
const isDefined = (d) => d !== void 0;
const isNil = (value) => value === null || value === void 0;
function isFragment(vnode) {
return vnode.type === Fragment;
}
function isTag(vnode) {
return vnode.type !== Comment && vnode.type !== Text && vnode.type !== Static;
}
function getComponentFromVNode(vnode) {
if (!vnode) {
return void 0;
}
const { component } = vnode;
if (!component) {
return void 0;
}
return component.exposed && component.exposeProxy || component.proxy;
}
function copyAppContext(src, dest) {
const { _context: srcContext } = src;
const { _context: destContext } = dest;
destContext.config = srcContext.config;
destContext.mixins = srcContext.mixins;
destContext.components = srcContext.components;
destContext.directives = srcContext.directives;
destContext.provides = srcContext.provides;
destContext.optionsCache = srcContext.optionsCache;
destContext.propsCache = srcContext.propsCache;
destContext.emitsCache = srcContext.emitsCache;
if ("__VUE_I18N_SYMBOL__" in src) {
dest.__VUE_I18N_SYMBOL__ = src.__VUE_I18N_SYMBOL__;
}
}
const translateTouchAsDragEvent = (event, options) => {
const { type, target } = options;
let translateX = 0;
let translateY = 0;
if (target != null && target !== event.target) {
const baseRect = event.target.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
translateX = targetRect.left - baseRect.left;
translateY = targetRect.top - baseRect.top;
}
const touch = event.touches[0] || event.changedTouches[0];
return new DragEvent(type, {
dataTransfer: new DataTransfer(),
bubbles: true,
screenX: touch.screenX,
screenY: touch.screenY,
clientX: touch.clientX + translateX,
clientY: touch.clientY + translateY,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey
});
};
var ConfigComponent = {
getOptions() {
return config;
},
setOptions(options) {
setOptions(merge(config, options, true));
}
};
var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
var __hasOwnProp$c = Object.prototype.hasOwnProperty;
var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
var __objRest$3 = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$c)
for (var prop of __getOwnPropSymbols$c(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var CompatFallthroughMixin = defineComponent({
inheritAttrs: false,
props: {
compatFallthrough: {
type: Boolean,
default: () => config.defaultCompatFallthrough
}
},
computed: {
rootAttrs() {
return this.compatFallthrough ? {
class: this.$attrs.class,
style: this.$attrs.style,
id: this.$attrs.id
} : {};
},
fallthroughAttrs() {
if (this.compatFallthrough) {
const _a = this.$attrs, { style: _1, class: _2, id: _3 } = _a, rest = __objRest$3(_a, ["style", "class", "id"]);
return rest;
} else {
return this.$attrs;
}
}
}
});
var _sfc_main$S = defineComponent({
name: "BFieldBody",
inject: {
parent: {
from: "BField",
default: null
}
},
props: {
message: {
type: [String, Array]
},
type: {
type: [String, Object]
}
},
render() {
let first = true;
let children = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
if (children != null && children.length === 1 && children[0].type === Fragment) {
children = children[0].children;
}
return h(
"div",
{ class: "field-body" },
{
default: () => {
return children != null && children.map((element) => {
if (element.type === Comment || element.type === Text) {
return element;
}
let message;
if (first) {
message = this.message;
first = false;
}
const parentField = this.parent;
return h(
// parentField.$.type is supposed to be BField
// it falls back to `resolveComponent('b-field')`
// but won't work unless `BField` is globally registered
// should not be a problem as long as `BFieldBody` is properly used
parentField ? parentField.$.type : resolveComponent("b-field"),
{
type: this.type,
message
},
() => element
);
});
}
}
);
}
});
const Field$1 = defineComponent({
name: "BField",
components: { BFieldBody: _sfc_main$S },
provide() {
return {
BField: this
};
},
inject: {
parent: {
from: "BField",
default: false
}
},
// Used internally only when using Field in Field
props: {
type: {
type: [String, Object],
default: void 0
},
label: String,
labelFor: String,
message: {
type: [String, Array, Object],
default: void 0
},
grouped: Boolean,
groupMultiline: Boolean,
position: String,
expanded: Boolean,
horizontal: Boolean,
addons: {
type: Boolean,
default: true
},
customClass: String,
labelPosition: {
type: String,
default: () => {
return config.defaultFieldLabelPosition;
}
}
},
data() {
return {
newType: this.type,
newMessage: this.message,
fieldLabelSize: null,
numberInputClasses: [],
_isField: true
// Used internally by Input and Select
};
},
computed: {
rootClasses() {
return [
{
"is-expanded": this.expanded,
"is-horizontal": this.horizontal,
"is-floating-in-label": this.hasLabel && !this.horizontal && this.labelPosition === "inside",
"is-floating-label": this.hasLabel && !this.horizontal && this.labelPosition === "on-border"
},
this.numberInputClasses
];
},
innerFieldClasses() {
return [
this.fieldType(),
this.newPosition,
{
"is-grouped-multiline": this.groupMultiline
}
];
},
hasInnerField() {
return this.grouped || this.groupMultiline || this.hasAddons();
},
/*
* Correct Bulma class for the side of the addon or group.
*
* This is not kept like the others (is-small, etc.),
* because since 'has-addons' is set automatically it
* doesn't make sense to teach users what addons are exactly.
*/
newPosition() {
if (this.position === void 0) return;
const position = this.position.split("-");
if (position.length < 1) return;
const prefix = this.grouped ? "is-grouped-" : "has-addons-";
if (this.position) return prefix + position[1];
return void 0;
},
/*
* Formatted message in case it's an array
* (each element is separated by <br> tag)
*/
formattedMessage() {
const parentField = this.parent;
if (parentField && parentField.hasInnerField) {
return "";
}
if (typeof this.newMessage === "string") {
return [this.newMessage];
}
const messages = [];
if (Array.isArray(this.newMessage)) {
this.newMessage.forEach((message) => {
if (typeof message === "string") {
messages.push(message);
} else {
for (const key in message) {
if (message[key]) {
messages.push(key);
}
}
}
});
} else {
for (const key in this.newMessage) {
if (this.newMessage[key]) {
messages.push(key);
}
}
}
return messages.filter((m) => !!m);
},
hasLabel() {
return this.label || this.$slots.label;
},
hasMessage() {
const parentField = this.parent;
return (!parentField || !parentField.hasInnerField) && this.newMessage || this.$slots.message;
}
},
watch: {
/*
* Set internal type when prop change.
*/
type(value) {
this.newType = value;
},
/*
* Set internal message when prop change.
*/
message(value) {
if (JSON.stringify(value) !== JSON.stringify(this.newMessage)) {
this.newMessage = value;
}
},
/*
* Set parent message if we use Field in Field.
*/
newMessage(value) {
const parentField = this.parent;
if (parentField && parentField.hasInnerField) {
if (!parentField.type) {
parentField.newType = this.newType;
}
if (!parentField.message) {
parentField.newMessage = value;
}
}
}
},
methods: {
/*
* Field has addons if there are more than one slot
* (element / component) in the Field.
* Or is grouped when prop is set.
* Is a method to be called when component re-render.
*/
fieldType() {
if (this.grouped) return "is-grouped";
if (this.hasAddons()) return "has-addons";
},
hasAddons() {
let renderedNode = 0;
if (this.$slots.default) {
renderedNode = this.$slots.default().reduce((i, node) => isTag(node) ? i + 1 : i, 0);
}
return renderedNode > 1 && this.addons && !this.horizontal;
},
// called by a number input if it is a direct child.
wrapNumberinput({ controlsPosition, size }) {
const classes = ["has-numberinput"];
if (controlsPosition) {
classes.push(`has-numberinput-${controlsPosition}`);
}
if (size) {
classes.push(`has-numberinput-${size}`);
}
this.numberInputClasses = classes;
}
},
mounted() {
if (this.horizontal) {
const elements = this.$el.querySelectorAll(".input, .select, .button, .textarea, .b-slider");
if (elements.length > 0) {
this.fieldLabelSize = "is-normal";
}
}
}
});
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1$T = ["for"];
const _hoisted_2$J = ["for"];
const _hoisted_3$u = {
key: 3,
class: "field-body"
};
function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
const _component_b_field_body = resolveComponent("b-field-body");
const _component_b_field = resolveComponent("b-field");
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["field", _ctx.rootClasses])
},
[
_ctx.horizontal ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(["field-label", [_ctx.customClass, _ctx.fieldLabelSize]])
},
[
_ctx.hasLabel ? (openBlock(), createElementBlock("label", {
key: 0,
for: _ctx.labelFor,
class: normalizeClass([_ctx.customClass, "label"])
}, [
_ctx.$slots.label ? renderSlot(_ctx.$slots, "label", { key: 0 }) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createTextVNode(
toDisplayString(_ctx.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
], 10, _hoisted_1$T)) : createCommentVNode("v-if", true)
],
2
/* CLASS */
)) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
_ctx.hasLabel ? (openBlock(), createElementBlock("label", {
key: 0,
for: _ctx.labelFor,
class: normalizeClass([_ctx.customClass, "label"])
}, [
_ctx.$slots.label ? renderSlot(_ctx.$slots, "label", { key: 0 }) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createTextVNode(
toDisplayString(_ctx.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
], 10, _hoisted_2$J)) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)),
_ctx.horizontal ? (openBlock(), createBlock(_component_b_field_body, {
key: 2,
message: _ctx.newMessage ? _ctx.formattedMessage : "",
type: _ctx.newType
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 8, ["message", "type"])) : _ctx.hasInnerField ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
createVNode(_component_b_field, {
addons: false,
type: _ctx.type,
class: normalizeClass(_ctx.innerFieldClasses)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 8, ["type", "class"])
])) : renderSlot(_ctx.$slots, "default", { key: 4 }),
_ctx.hasMessage && !_ctx.horizontal ? (openBlock(), createElementBlock(
"p",
{
key: 5,
class: normalizeClass(["help", _ctx.newType])
},
[
_ctx.$slots.message ? renderSlot(_ctx.$slots, "message", {
key: 0,
messages: _ctx.formattedMessage
}) : (openBlock(true), createElementBlock(
Fragment,
{ key: 1 },
renderList(_ctx.formattedMessage, (mess, i) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
createTextVNode(
toDisplayString(mess) + " ",
1
/* TEXT */
),
i + 1 < _ctx.formattedMessage.length ? (openBlock(), createElementBlock("br", { key: i })) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
256
/* UNKEYED_FRAGMENT */
))
],
2
/* CLASS */
)) : createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
var Field = /* @__PURE__ */ _export_sfc(Field$1, [["render", _sfc_render$10]]);
const FormElementMixin = defineComponent({
props: {
size: String,
expanded: Boolean,
loading: Boolean,
rounded: Boolean,
icon: String,
iconPack: String,
maxlength: [Number, String],
useHtml5Validation: {
type: Boolean,
default: () => config.defaultUseHtml5Validation
},
validationMessage: String,
locale: {
type: [String, Array],
default: () => {
return config.defaultLocale;
}
},
statusIcon: {
type: Boolean,
default: () => {
return config.defaultStatusIcon;
}
}
},
emits: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
blur: (event) => true,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
focus: (event) => true
},
data() {
return {
isValid: true,
isFocused: false,
newIconPack: this.iconPack || config.defaultIconPack,
// host component must override this
_elementRef: ""
};
},
computed: {
/*
* Find parent Field, max 3 levels deep.
*/
parentField() {
let parent = this.$parent;
for (let i = 0; i < 3; i++) {
if (parent && !parent.$data._isField) {
parent = parent.$parent;
}
}
return parent;
},
/*
* Get the type prop from parent if it's a Field.
*/
statusType() {
const { newType } = this.parentField || {};
if (!newType) return;
if (typeof newType === "string") {
return newType;
} else {
for (const key in newType) {
if (newType[key]) {
return key;
}
}
}
return void 0;
},
/*
* Get the message prop from parent if it's a Field.
*/
statusMessage() {
if (!this.parentField) return;
return this.parentField.newMessage || this.parentField.$slots.message;
},
/*
* Fix icon size for inputs, large was too big
*/
iconSize() {
switch (this.size) {
case "is-small":
return this.size;
case "is-medium":
return;
case "is-large":
return this.newIconPack === "mdi" ? "is-medium" : "";
}
return void 0;
}
},
methods: {
/*
* Focus method that work dynamically depending on the component.
*/
focus() {
const el = this.getElement();
if (el === void 0) return;
this.$nextTick(() => {
if (el) el.focus();
});
},
onBlur($event) {
this.isFocused = false;
this.$emit("blur", $event);
this.checkHtml5Validity();
},
onFocus($event) {
this.isFocused = true;
this.$emit("focus", $event);
},
getElement() {
let el = this.$refs[this.$data._elementRef];
while (el != null && typeof el === "object" && "$refs" in el) {
const form = el;
el = form.$refs[form.$data._elementRef];
}
return el;
},
setInvalid() {
const type = "is-danger";
const message = this.validationMessage || this.getElement().validationMessage;
this.setValidity(type, message);
},
setValidity(type, message) {
this.$nextTick(() => {
if (this.parentField) {
if (!this.parentField.type) {
this.parentField.newType = type;
}
if (!this.parentField.message) {
this.parentField.newMessage = message;
}
}
});
},
/*
* Check HTML5 validation, set isValid property.
* If validation fail, send 'is-danger' type,
* and error message to parent if it's a Field.
*/
checkHtml5Validity() {
if (!this.useHtml5Validation) {
return false;
}
const el = this.getElement();
if (el == null) {
return false;
}
if (!el.checkValidity()) {
this.setInvalid();
this.isValid = false;
} else {
this.setValidity(null, null);
this.isValid = true;
}
return this.isValid;
}
}
});
const mdiIcons = {
sizes: {
default: "mdi-24px",
"is-small": null,
"is-medium": "mdi-36px",
"is-large": "mdi-48px"
},
iconPrefix: "mdi-"
};
const faIcons = () => {
const faIconPrefix = config && config.defaultIconComponent ? "" : "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()
};
if (config && config.customIconPacks) {
icons = merge(icons, config.customIconPacks, true);
}
return icons;
};
var _sfc_main$R = defineComponent({
name: "BIcon",
props: {
type: [String, Object],
component: String,
pack: String,
icon: {
type: String,
required: true
},
size: String,
customSize: String,
customClass: String,
both: Boolean
// This is used internally to show both MDI and FA icon
},
computed: {
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() {
return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon)}`;
},
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;
}
}
});
function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"span",
{
class: normalizeClass(["icon", [_ctx.newType, _ctx.size]])
},
[
!_ctx.useIconComponent ? (openBlock(), createElementBlock(
"i",
{
key: 0,
class: normalizeClass([_ctx.newPack, _ctx.newIcon, _ctx.newCustomSize, _ctx.customClass])
},
null,
2
/* CLASS */
)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.useIconComponent), {
key: 1,
icon: [_ctx.newPack, _ctx.newIcon],
size: _ctx.newCustomSize,
class: normalizeClass([_ctx.customClass])
}, null, 8, ["icon", "size", "class"]))
],
2
/* CLASS */
);
}
var BIcon = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$$]]);
var _sfc_main$Q = defineComponent({
name: "BInput",
components: { BIcon },
mixins: [CompatFallthroughMixin, FormElementMixin],
props: {
modelValue: {
type: [Number, String]
},
type: {
type: String,
default: "text"
},
lazy: {
type: Boolean,
default: false
},
passwordReveal: Boolean,
iconClickable: Boolean,
hasCounter: {
type: Boolean,
default: () => config.defaultInputHasCounter
},
customClass: {
type: String,
default: ""
},
iconRight: String,
iconRightClickable: Boolean,
iconRightType: String,
// Native options to use in HTML5 validation
autocomplete: String
},
emits: {
/* eslint-disable @typescript-eslint/no-unused-vars */
"icon-click": (event) => true,
"icon-right-click": (event) => true,
"update:modelValue": (value) => true
/* eslint-enable @typescript-eslint/no-unused-vars */
},
data() {
return {
newValue: this.modelValue,
newType: this.type,
newAutocomplete: this.autocomplete || config.defaultInputAutocomplete,
isPasswordVisible: false,
_elementRef: this.type === "textarea" ? "textarea" : "input"
};
},
computed: {
computedValue: {
get() {
return this.newValue;
},
set(value) {
this.newValue = value;
this.$emit("update:modelValue", value);
}
},
rootClasses() {
return [
this.iconPosition,
this.size,
{
"is-expanded": this.expanded,
"is-loading": this.loading,
"is-clearfix": !this.hasMessage
}
];
},
inputClasses() {
return [
this.statusType,
this.size,
{ "is-rounded": this.rounded }
];
},
hasIconRight() {
return this.passwordReveal || this.loading || this.statusIcon && this.statusTypeIcon || this.iconRight;
},
rightIcon() {
if (this.passwordReveal) {
return this.passwordVisibleIcon;
} else if (this.iconRight) {
return this.iconRight;
}
return this.statusTypeIcon;
},
rightIconType() {
if (this.passwordReveal) {
return "is-primary";
} else if (this.iconRight) {
return this.iconRightType || void 0;
}
return this.statusType;
},
/*
* Position of the icon or if it's both sides.
*/
iconPosition() {
let iconClasses = "";
if (this.icon) {
iconClasses += "has-icons-left ";
}
if (this.hasIconRight) {
iconClasses += "has-icons-right";
}
return iconClasses;
},
/*
* Icon name (MDI) based on the type.
*/
statusTypeIcon() {
switch (this.statusType) {
case "is-success":
return "check";
case "is-danger":
return "alert-circle";
case "is-info":
return "information";
case "is-warning":
return "alert";
default:
return void 0;
}
},
/*
* Check if have any message prop from parent if it's a Field.
*/
hasMessage() {
return !!this.statusMessage;
},
/*
* Current password-reveal icon name.
*/
passwordVisibleIcon() {
return !this.isPasswordVisible ? "eye" : "eye-off";
},
/*
* Get value length
*/
valueLength() {
if (typeof this.computedValue === "string") {
return Array.from(this.computedValue).length;
} else if (typeof this.computedValue === "number") {
return this.computedValue.toString().length;
}
return 0;
}
},
watch: {
/*
* When v-model is changed:
* 1. Set internal value.
* 2. Validate it if the value came from outside;
* i.e., not equal to computedValue
*/
modelValue(value) {
const fromOutside = this.computedValue != value;
this.newValue = value;
if (fromOutside) {
this.$nextTick(() => {
!this.isValid && this.checkHtml5Validity();
});
}
},
type(type) {
this.newType = type;
}
},
methods: {
/