buefy
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
339 lines (326 loc) • 12.5 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.Checkbox = {}, global.Vue));
})(this, (function (exports, vue) { 'use strict';
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();
}
}
});
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: "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: ""
}
},
computed: {
isChecked() {
const val = this.computedValue;
if (Array.isArray(val)) {
return val.includes(this.nativeValue);
}
return val === this.trueValue;
},
checkmarkAlias() {
const key = this.indeterminate ? "checkboxIndeterminate" : "checkboxOn";
return resolveAlias(key);
}
}
});
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 = ["disabled"];
const _hoisted_2$1 = ["id", ".indeterminate", "autocomplete", "disabled", "required", "name", "value", "true-value", "false-value", "aria-labelledby"];
const _hoisted_3 = ["viewBox"];
const _hoisted_4 = ["d"];
const _hoisted_5 = ["id"];
function _sfc_render$1(_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$1), [
[vue.vModelCheckbox, _ctx.computedValue]
]),
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["check", _ctx.type])
},
[
_ctx.isChecked || _ctx.indeterminate ? (vue.openBlock(), vue.createElementBlock("svg", {
key: 0,
viewBox: _ctx.checkmarkAlias.viewBox || "0 0 1 1",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true"
}, [
vue.createElementVNode("path", {
fill: "currentColor",
d: _ctx.checkmarkAlias.path
}, null, 8, _hoisted_4)
], 8, _hoisted_3)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
vue.createElementVNode("span", {
id: _ctx.ariaLabelledby,
class: "control-label"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 8, _hoisted_5)
], 42, _hoisted_1$1);
}
var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
var _sfc_main = vue.defineComponent({
name: "BCheckboxButton",
mixins: [CheckRadioMixin],
props: {
type: {
type: String,
default: "is-primary"
},
expanded: Boolean
},
data() {
return {
isFocused: false
};
},
computed: {
checked() {
if (Array.isArray(this.newValue)) {
return this.newValue.indexOf(this.nativeValue) >= 0;
}
return this.newValue === this.nativeValue;
}
}
});
const _hoisted_1 = ["disabled"];
const _hoisted_2 = ["disabled", "required", "name", "value"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["control", { "is-expanded": _ctx.expanded }])
},
[
vue.createElementVNode("label", {
class: vue.normalizeClass(["b-checkbox checkbox button", [_ctx.checked ? _ctx.type : null, _ctx.size, {
"is-disabled": _ctx.disabled,
"is-focused": _ctx.isFocused
}]]),
ref: "label",
disabled: _ctx.disabledOrUndefined,
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.focus && _ctx.focus(...args)),
onKeydown: _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers(($event) => _ctx.$refs.label.click(), ["prevent"]), ["enter"]))
}, [
vue.renderSlot(_ctx.$slots, "default"),
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedValue = $event),
type: "checkbox",
ref: "input",
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["stop"])),
disabled: _ctx.disabledOrUndefined,
required: _ctx.requiredOrUndefined,
name: _ctx.name,
value: _ctx.nativeValue,
onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocused = true),
onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocused = false)
}, null, 40, _hoisted_2), [
[vue.vModelCheckbox, _ctx.computedValue]
])
], 42, _hoisted_1)
],
2
/* CLASS */
);
}
var CheckboxButton = /* @__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, Checkbox);
registerComponent(Vue, CheckboxButton);
}
};
exports.BCheckbox = Checkbox;
exports.BCheckboxButton = CheckboxButton;
exports.default = Plugin;
Object.defineProperty(exports, '__esModule', { value: true });
}));