@ntohq/buefy-next
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
1,520 lines (1,498 loc) • 163 kB
JavaScript
/*! Buefy v0.2.0 | 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.Table = {}, global.Vue));
})(this, (function (exports, vue) { 'use strict';
var __defProp$1 = Object.defineProperty;
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$1 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$2.call(b, prop))
__defNormalProp$1(a, prop, b[prop]);
if (__getOwnPropSymbols$2)
for (var prop of __getOwnPropSymbols$2(b)) {
if (__propIsEnum$2.call(b, prop))
__defNormalProp$1(a, prop, b[prop]);
}
return a;
};
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$1(__spreadValues$1({}, a), b),
// eslint-disable-next-line no-use-before-define
{}
);
return __spreadValues$1(__spreadValues$1({}, target), replaced);
} else {
return Object.assign(target, source);
}
};
const merge = mergeFn;
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 toCssWidth(width) {
return width === void 0 ? null : isNaN(+width) ? `${width}` : width + "px";
}
const isNil = (value) => value === null || value === void 0;
function isFragment(vnode) {
return vnode.type === vue.Fragment;
}
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
});
};
function debounce(func, wait, immediate) {
let timeout;
return function(...args) {
const context = this;
const later = function() {
timeout = void 0;
if (!immediate)
func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow)
func.apply(context, args);
};
}
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
};
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1)
for (var prop of __getOwnPropSymbols$1(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var CompatFallthroughMixin = vue.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, rest = __objRest(_a, ["style", "class", "id"]);
return rest;
} else {
return this.$attrs;
}
}
}
});
var CheckRadioMixin = vue.defineComponent({
props: {
modelValue: [String, Number, Boolean, Function, Object, Array],
nativeValue: [String, Number, Boolean, Function, Object, Array],
type: String,
disabled: Boolean,
required: Boolean,
name: String,
size: String
},
emits: {
// eslint-disable-next-line max-len
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
"update:modelValue": (value) => true
},
data() {
return {
newValue: this.modelValue
};
},
computed: {
computedValue: {
get() {
return this.newValue;
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
set(value) {
this.newValue = value;
this.$emit("update:modelValue", value);
}
},
disabledOrUndefined() {
return this.disabled || void 0;
},
requiredOrUndefined() {
return this.required || void 0;
}
},
watch: {
/*
* When v-model change, set internal value.
*/
modelValue(value) {
this.newValue = value;
}
},
methods: {
focus() {
this.$refs.input.focus();
}
}
});
var _sfc_main$a = vue.defineComponent({
name: "BCheckbox",
mixins: [CheckRadioMixin],
props: {
indeterminate: Boolean,
ariaLabelledby: String,
trueValue: {
type: [String, Number, Boolean, Function, Object, Array],
default: true
},
falseValue: {
type: [String, Number, Boolean, Function, Object, Array],
default: false
},
autocomplete: {
type: String,
default: "on"
},
inputId: {
type: String,
default: ""
}
}
});
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1$7 = ["disabled"];
const _hoisted_2$6 = ["id", ".indeterminate", "autocomplete", "disabled", "required", "name", "value", "true-value", "false-value", "aria-labelledby"];
const _hoisted_3$4 = ["id"];
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["b-checkbox checkbox", [_ctx.size, { "is-disabled": _ctx.disabled }]]),
ref: "label",
disabled: _ctx.disabledOrUndefined,
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args)),
onKeydown: [
_cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => _ctx.$refs.label.click(), ["prevent"]), ["enter"])),
_cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.$refs.label.click(), ["prevent"]), ["space"]))
]
}, [
vue.createCommentVNode(" Checkbox needs to listen for a space event instead of a just a\n click and enter event so that that using the keyboard spacebar will also\n trigger the checkbox change in the b-table "),
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedValue = $event),
id: _ctx.inputId,
".indeterminate": _ctx.indeterminate,
type: "checkbox",
ref: "input",
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["stop"])),
autocomplete: _ctx.autocomplete,
disabled: _ctx.disabledOrUndefined,
required: _ctx.requiredOrUndefined,
name: _ctx.name,
value: _ctx.nativeValue,
"true-value": _ctx.trueValue,
"false-value": _ctx.falseValue,
"aria-labelledby": _ctx.ariaLabelledby
}, null, 40, _hoisted_2$6), [
[vue.vModelCheckbox, _ctx.computedValue]
]),
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["check", _ctx.type])
},
null,
2
/* CLASS */
),
vue.createElementVNode("span", {
id: _ctx.ariaLabelledby,
class: "control-label"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 8, _hoisted_3$4)
], 42, _hoisted_1$7);
}
var BCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/checkbox/Checkbox.vue"]]);
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 getIcons$1 = getIcons;
var _sfc_main$9 = vue.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$1();
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$8(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"span",
{
class: vue.normalizeClass(["icon", [_ctx.newType, _ctx.size]])
},
[
!_ctx.useIconComponent ? (vue.openBlock(), vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([_ctx.newPack, _ctx.newIcon, _ctx.newCustomSize, _ctx.customClass])
},
null,
2
/* CLASS */
)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.useIconComponent), {
key: 1,
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$9, [["render", _sfc_render$8], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/icon/Icon.vue"]]);
const FormElementMixin = vue.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;
}
}
});
var FormElementMixin$1 = FormElementMixin;
var _sfc_main$8 = vue.defineComponent({
name: "BInput",
components: { BIcon },
mixins: [CompatFallthroughMixin, FormElementMixin$1],
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: {
/*
* Toggle the visibility of a password-reveal input
* by changing the type and focus the input right away.
*/
togglePasswordVisibility() {
this.isPasswordVisible = !this.isPasswordVisible;
this.newType = this.isPasswordVisible ? "text" : "password";
this.$nextTick(() => {
this.focus();
});
},
iconClick(emit, event) {
this.$emit(emit, event);
this.$nextTick(() => {
this.focus();
});
},
rightIconClick(event) {
if (this.passwordReveal) {
this.togglePasswordVisibility();
} else if (this.iconRightClickable) {
this.iconClick("icon-right-click", event);
}
},
onInput(event) {
if (!this.lazy) {
const value = event.target.value;
this.updateValue(value);
}
},
onChange(event) {
if (this.lazy) {
const value = event.target.value;
this.updateValue(value);
}
},
updateValue(value) {
this.computedValue = value;
!this.isValid && this.checkHtml5Validity();
}
}
});
const _hoisted_1$6 = ["type", "autocomplete", "maxlength", "value"];
const _hoisted_2$5 = ["maxlength", "value"];
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
const _component_b_icon = vue.resolveComponent("b-icon");
return vue.openBlock(), vue.createElementBlock(
"div",
vue.mergeProps({
class: ["control", _ctx.rootClasses]
}, _ctx.rootAttrs),
[
_ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
key: 0,
ref: "input",
class: ["input", [_ctx.inputClasses, _ctx.customClass]],
type: _ctx.newType,
autocomplete: _ctx.newAutocomplete,
maxlength: _ctx.maxlength,
value: _ctx.computedValue
}, _ctx.fallthroughAttrs, {
onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args))
}), null, 16, _hoisted_1$6)) : (vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
key: 1,
ref: "textarea",
class: ["textarea", [_ctx.inputClasses, _ctx.customClass]],
maxlength: _ctx.maxlength,
value: _ctx.computedValue === null ? void 0 : _ctx.computedValue
}, _ctx.fallthroughAttrs, {
onInput: _cache[4] || (_cache[4] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[5] || (_cache[5] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
onBlur: _cache[6] || (_cache[6] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
onFocus: _cache[7] || (_cache[7] = (...args) => _ctx.onFocus && _ctx.onFocus(...args))
}), null, 16, _hoisted_2$5)),
_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_b_icon, {
key: 2,
class: vue.normalizeClass(["is-left", { "is-clickable": _ctx.iconClickable }]),
icon: _ctx.icon,
pack: _ctx.iconPack,
size: _ctx.iconSize,
onClick: _cache[8] || (_cache[8] = ($event) => _ctx.iconClick("icon-click", $event))
}, null, 8, ["class", "icon", "pack", "size"])) : vue.createCommentVNode("v-if", true),
!_ctx.loading && _ctx.hasIconRight && _ctx.rightIcon ? (vue.openBlock(), vue.createBlock(_component_b_icon, {
key: 3,
class: vue.normalizeClass(["is-right", { "is-clickable": _ctx.passwordReveal || _ctx.iconRightClickable }]),
icon: _ctx.rightIcon,
pack: _ctx.iconPack,
size: _ctx.iconSize,
type: _ctx.rightIconType,
both: "",
onClick: _ctx.rightIconClick
}, null, 8, ["class", "icon", "pack", "size", "type", "onClick"])) : vue.createCommentVNode("v-if", true),
_ctx.maxlength && _ctx.hasCounter && _ctx.type !== "number" ? (vue.openBlock(), vue.createElementBlock(
"small",
{
key: 4,
class: vue.normalizeClass(["help counter", { "is-invisible": !_ctx.isFocused }])
},
vue.toDisplayString(_ctx.valueLength) + " / " + vue.toDisplayString(_ctx.maxlength),
3
/* TEXT, CLASS */
)) : vue.createCommentVNode("v-if", true)
],
16
/* FULL_PROPS */
);
}
var BInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/input/Input.vue"]]);
const isSSR = typeof window === "undefined";
const HTMLElement = isSSR ? Object : window.HTMLElement;
const Loading = vue.defineComponent({
name: "BLoading",
props: {
modelValue: Boolean,
programmatic: Boolean,
container: [Object, Function, HTMLElement],
isFullPage: {
type: Boolean,
default: true
},
animation: {
type: String,
default: "fade"
},
canCancel: {
type: Boolean,
default: false
},
onCancel: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type: Function,
default: () => {
}
}
},
emits: {
/* eslint-disable @typescript-eslint/no-unused-vars */
close: () => true,
"update:is-full-page": (_flag) => true,
"update:modelValue": (_flag) => true
/* eslint-enable @typescript-eslint/no-unused-vars */
},
data() {
return {
isActive: this.modelValue || false,
displayInFullPage: this.isFullPage
};
},
watch: {
modelValue(value) {
this.isActive = value;
},
isFullPage(value) {
this.displayInFullPage = value;
}
},
methods: {
/*
* Close the Modal if canCancel.
*/
cancel() {
if (!this.canCancel || !this.isActive)
return;
this.close();
},
/*
* Emit events, and destroy modal if it's programmatic.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
close(...args) {
this.onCancel.apply(null, args);
this.$emit("close");
this.$emit("update:modelValue", false);
if (this.programmatic) {
this.isActive = false;
setTimeout(() => {
removeElement(this.$el);
}, 150);
}
},
/*
* Keypress event that is bound to the document.
*/
keyPress({ key }) {
if (key === "Escape" || key === "Esc")
this.cancel();
}
},
created() {
if (typeof window !== "undefined") {
document.addEventListener("keyup", this.keyPress);
}
},
mounted() {
if (this.programmatic) {
if (!this.container) {
document.body.appendChild(this.$el);
} else {
this.displayInFullPage = false;
this.$emit("update:is-full-page", false);
this.container.appendChild(this.$el);
}
this.isActive = true;
}
},
beforeUnmount() {
if (typeof window !== "undefined") {
document.removeEventListener("keyup", this.keyPress);
}
}
});
var _sfc_main$7 = Loading;
const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode(
"div",
{ class: "loading-icon" },
null,
-1
/* HOISTED */
);
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.animation }, {
default: vue.withCtx(() => [
_ctx.isActive ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["loading-overlay is-active", { "is-full-page": _ctx.displayInFullPage }])
},
[
vue.createElementVNode("div", {
class: "loading-background",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancel && _ctx.cancel(...args))
}),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
_hoisted_1$5
])
],
2
/* CLASS */
)), [
[vue.vShow, _ctx.isActive]
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["name"]);
}
var BLoading = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/loading/Loading.vue"]]);
!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
const cacheStringFunction = (fn) => {
const cache = /* @__PURE__ */ Object.create(null);
return (str) => {
const hit = cache[str];
return hit || (cache[str] = fn(str));
};
};
const camelizeRE = /-(\w)/g;
const camelize = cacheStringFunction((str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
});
const hyphenateRE = /\B([A-Z])/g;
const hyphenate = cacheStringFunction(
(str) => str.replace(hyphenateRE, "-$1").toLowerCase()
);
const capitalize = cacheStringFunction((str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
});
const toHandlerKey = cacheStringFunction((str) => {
const s = str ? `on${capitalize(str)}` : ``;
return s;
});
var BSlotComponent = vue.defineComponent({
name: "BSlotComponent",
props: {
component: {
type: Object,
required: true
},
name: {
type: String,
default: "default"
},
scoped: {
type: Boolean
},
props: {
type: Object
},
tag: {
type: String,
default: "div"
},
event: {
type: String,
default: "vue:updated"
}
},
data: () => ({
// see: https://github.com/vuejs/core/blob/7976f7044e66b3b7adac4c72a392935704658b10/packages/runtime-core/src/apiLifecycle.ts#L69-L74
// eslint-disable-next-line @typescript-eslint/ban-types
updatedHook: void 0,
handlerKey: void 0
}),
methods: {
refresh() {
this.$forceUpdate();
}
},
created() {
if (isVueComponent(this.component)) {
if (this.event === "vue:updated") {
this.updatedHook = vue.onUpdated(this.refresh, this.component.$);
} else {
const { vnode } = this.component.$;
let handlerKey = toHandlerKey(this.event);
if (vnode.props == null) {
vnode.props = { [handlerKey]: this.refresh };
} else {
const { props } = vnode;
if (props[this.handlerKey] == null) {
handlerKey = toHandlerKey(camelize(this.event));
if (props[handlerKey] == null) {
handlerKey = toHandlerKey(hyphenate(this.event));
}
}
if (props[handlerKey] == null) {
handlerKey = toHandlerKey(this.event);
props[handlerKey] = this.refresh;
} else {
if (Array.isArray(props[handlerKey])) {
props[handlerKey].push(this.refresh);
} else {
props[handlerKey] = [props[handlerKey], this.refresh];
}
}
}
this.handlerKey = handlerKey;
}
}
},
beforeUnmount() {
if (isVueComponent(this.component)) {
if (this.updatedHook != null) {
const index = this.component.$.u.indexOf(this.updatedHook);
if (index !== -1) {
this.component.$.u.splice(index, 1);
}
} else if (this.handlerKey != null) {
const { props } = this.component.$.vnode;
if (props != null) {
if (Array.isArray(props[this.handlerKey])) {
const index = props[this.handlerKey].indexOf(this.refresh);
if (index > -1) {
props[this.handlerKey].splice(index, 1);
if (props[this.handlerKey].length === 1) {
props[this.handlerKey] = props[this.handlerKey][0];
}
}
} else {
delete props[this.handlerKey];
}
}
}
}
},
render() {
return vue.h(
this.tag,
{},
this.component.$slots ? this.scoped ? this.component.$slots[this.name](this.props) : this.component.$slots[this.name]() : void 0
);
}
});
var _sfc_main$6 = vue.defineComponent({
name: "BSelect",
components: {
BIcon
},
mixins: [CompatFallthroughMixin, FormElementMixin$1],
props: {
modelValue: {
type: [
String,
Number,
Boolean,
Object,
Array,
Function,
Date,
null
],
default: null
},
placeholder: String,
multiple: Boolean,
nativeSize: [String, Number]
},
emits: {
/* eslint-disable @typescript-eslint/no-unused-vars */
blur: (_event) => true,
focus: (_event) => true,
"update:modelValue": (_value) => true
/* eslint-enable @typescript-eslint/no-unused-vars */
},
data() {
return {
selected: this.modelValue,
_elementRef: "select"
};
},
computed: {
computedValue: {
get() {
return this.selected;
},
set(value) {
this.selected = value;
this.$emit("update:modelValue", value);
!this.isValid && this.checkHtml5Validity();
}
},
spanClasses() {
return [this.size, this.statusType, {
"is-fullwidth": this.expanded,
"is-loading": this.loading,
"is-multiple": this.multiple,
"is-rounded": this.rounded,
"is-empty": this.selected === null
}];
}
},
watch: {
/*
* When v-model is changed:
* 1. Set the selected option.
* 2. If it's invalid, validate again.
*/
modelValue(value) {
this.selected = value;
!this.isValid && this.checkHtml5Validity();
}
}
});
const _hoisted_1$4 = ["multiple", "size"];
const _hoisted_2$4 = {
key: 0,
value: null,
disabled: "",
hidden: ""
};
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
const _component_b_icon = vue.resolveComponent("b-icon");
return vue.openBlock(), vue.createElementBlock(
"div",
vue.mergeProps({
class: ["control", { "is-expanded": _ctx.expanded, "has-icons-left": _ctx.icon }]
}, _ctx.rootAttrs),
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["select", _ctx.spanClasses])
},
[
vue.withDirectives(vue.createElementVNode("select", vue.mergeProps({
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedValue = $event),
ref: "select",
multiple: _ctx.multiple,
size: _ctx.nativeSize
}, _ctx.fallthroughAttrs, {
onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus", $event))
}), [
_ctx.placeholder ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_ctx.computedValue == null ? (vue.openBlock(), vue.createElementBlock(
"option",
_hoisted_2$4,
vue.toDisplayString(_ctx.placeholder),
1
/* TEXT */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
], 16, _hoisted_1$4), [
[vue.vModelSelect, _ctx.computedValue]
])
],
2
/* CLASS */
),
_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_b_icon, {
key: 0,
class: "is-left",
icon: _ctx.icon,
pack: _ctx.iconPack,
size: _ctx.iconSize
}, null, 8, ["icon", "pack", "size"])) : vue.createCommentVNode("v-if", true)
],
16
/* FULL_PROPS */
);
}
var BSelect = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/select/Select.vue"]]);
var _sfc_main$5 = vue.defineComponent({
name: "BTableMobileSort",
components: {
BSelect,
BIcon
},
props: {
currentSortColumn: Object,
sortMultipleData: Array,
isAsc: Boolean,
columns: Array,
placeholder: String,
iconPack: String,
sortIcon: {
type: String,
default: "arrow-up"
},
sortIconSize: {
type: String,
default: "is-small"
},
sortMultiple: {
type: Boolean,
default: false
}
},
emits: {
/* eslint-disable @typescript-eslint/no-unused-vars */
removePriority: (_column) => true,
sort: (_column, _event) => true
/* eslint-enable @typescript-eslint/no-unused-vars */
},
data() {
return {
sortMultipleSelect: null,
sortMultipleSelectIndex: -1,
mobileSort: this.currentSortColumn,
mobileSortIndex: this.columns ? this.columns.indexOf(this.currentSortColumn) : -1,
defaultEvent: {
shiftKey: true,
altKey: true,
ctrlKey: true
},
ignoreSort: false
};
},
computed: {
showPlaceholder() {
return !this.columns || !this.columns.some((column) => column === this.mobileSort);
},
sortableColumns() {
return this.columns && this.columns.filter((column) => column.sortable);
}
},
watch: {
sortMultipleSelect(column) {
if (this.ignoreSort) {
this.ignoreSort = false;
} else {
this.$emit(