@ntohq/buefy-next
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
368 lines (356 loc) • 11.5 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.Progress = {}, global.Vue));
})(this, (function (exports, vue) { 'use strict';
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 PROGRESS_INJECTION_KEY = Symbol("bprogress");
const Progress$1 = vue.defineComponent({
name: "BProgress",
provide() {
return {
[PROGRESS_INJECTION_KEY]: this
};
},
props: {
type: {
type: [String, Object],
default: "is-darkgrey"
},
size: {
type: String
},
rounded: {
type: Boolean,
default: true
},
value: {
type: Number,
default: void 0
},
max: {
type: Number,
default: 100
},
showValue: {
type: Boolean,
default: false
},
format: {
type: String,
default: "raw",
validator: (value) => {
return [
"raw",
"percent"
].indexOf(value) >= 0;
}
},
precision: {
type: Number,
default: 2
},
keepTrailingZeroes: {
type: Boolean,
default: false
},
locale: {
type: [String, Array],
default: () => {
return config.defaultLocale;
},
validator: (value) => {
if (Array.isArray(value)) {
return value.every((item) => typeof item === "string");
}
return typeof value === "string";
}
}
},
computed: {
isIndeterminate() {
return this.value === void 0 || this.value === null;
},
newType() {
return [
this.size,
this.type,
{
"is-more-than-half": this.value && this.value > this.max / 2
}
];
},
newValue() {
return this.calculateValue(this.value);
},
isNative() {
return this.$slots.bar === void 0;
},
wrapperClasses() {
return {
"is-not-native": !this.isNative,
[this.size === void 0 ? "" : this.size]: typeof this.size === "string" && !this.isNative
};
}
},
watch: {
/**
* When value is changed back to undefined, value of native progress get reset to 0.
* Need to add and remove the value attribute to have the indeterminate or not.
*/
isIndeterminate(indeterminate) {
this.$nextTick(() => {
if (this.$refs.progress) {
if (indeterminate) {
this.$refs.progress.removeAttribute("value");
} else {
this.$refs.progress.setAttribute("value", this.value.toString());
}
}
});
}
},
methods: {
calculateValue(value) {
if (value === void 0 || value === null || isNaN(value)) {
return void 0;
}
const minimumFractionDigits = this.keepTrailingZeroes ? this.precision : 0;
const maximumFractionDigits = this.precision;
if (this.format === "percent") {
return new Intl.NumberFormat(
this.locale,
{
style: "percent",
minimumFractionDigits,
maximumFractionDigits
}
).format(value / this.max);
}
return new Intl.NumberFormat(
this.locale,
{
minimumFractionDigits,
maximumFractionDigits
}
).format(value);
}
}
});
var _sfc_main$1 = Progress$1;
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 = ["max", "value"];
const _hoisted_2$1 = {
key: 2,
class: "progress-value"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["progress-wrapper", [_ctx.wrapperClasses, { "is-squared": !_ctx.rounded }]])
},
[
_ctx.isNative ? (vue.openBlock(), vue.createElementBlock("progress", {
key: 0,
ref: "progress",
class: vue.normalizeClass(["progress", [_ctx.newType, { "is-squared": !_ctx.rounded }]]),
max: _ctx.max,
value: _ctx.value
}, vue.toDisplayString(_ctx.newValue), 11, _hoisted_1$1)) : vue.renderSlot(_ctx.$slots, "bar", { key: 1 }),
_ctx.isNative && _ctx.showValue ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$1, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.newValue),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/progress/Progress.vue"]]);
const ProgressBar$1 = vue.defineComponent({
name: "BProgressBar",
inject: {
parent: {
from: PROGRESS_INJECTION_KEY,
default: void 0
}
},
props: {
type: {
type: [String],
default: void 0
},
value: {
type: Number,
default: void 0
},
showValue: {
type: Boolean,
default: false
}
},
computed: {
parentProgress() {
return this.parent;
},
newType() {
return [
this.parentProgress.size,
this.type || this.parentProgress.type
];
},
newShowValue() {
return this.showValue || this.parentProgress.showValue;
},
newValue() {
return this.parentProgress.calculateValue(this.value);
},
barWidth() {
return `${(this.value === void 0 ? 0 : this.value) * 100 / this.parentProgress.max}%`;
}
}
});
var _sfc_main = ProgressBar$1;
const _hoisted_1 = ["aria-valuenow", "aria-valuemax"];
const _hoisted_2 = {
key: 0,
class: "progress-value"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["progress-bar", _ctx.newType]),
role: "progressbar",
"aria-valuenow": _ctx.value,
"aria-valuemax": _ctx.parentProgress.max,
"aria-valuemin": "0",
style: vue.normalizeStyle({ width: _ctx.barWidth })
}, [
_ctx.newShowValue ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.newValue),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1);
}
var ProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/progress/ProgressBar.vue"]]);
const registerComponent = (Vue, component, name) => {
const componentName = name || component.name;
if (componentName == null) {
throw new Error("Buefy.registerComponent: missing component name");
}
Vue.component(componentName, component);
};
const Plugin = {
install(Vue) {
registerComponent(Vue, Progress);
registerComponent(Vue, ProgressBar);
}
};
exports.BProgress = Progress;
exports.BProgressBar = ProgressBar;
exports.default = Plugin;
Object.defineProperty(exports, '__esModule', { value: true });
}));