@vectrejs/vectre
Version:
Complete implementation of Spectre.css on Vue 2.x
2,004 lines (1,772 loc) • 114 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var Vue = require('vue');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}var normalMerge=["attrs","props","domProps"],toArrayMerge=["class","style","directives"],functionalMerge=["on","nativeOn"],mergeJsxProps=function(a){return a.reduce(function(c,a){for(var b in a)if(!c[b])c[b]=a[b];else if(-1!==normalMerge.indexOf(b))c[b]=_extends({},c[b],a[b]);else if(-1!==toArrayMerge.indexOf(b)){var d=c[b]instanceof Array?c[b]:[c[b]],e=a[b]instanceof Array?a[b]:[a[b]];c[b]=d.concat(e);}else if(-1!==functionalMerge.indexOf(b)){for(var f in a[b])if(c[b][f]){var g=c[b][f]instanceof Array?c[b][f]:[c[b][f]],h=a[b][f]instanceof Array?a[b][f]:[a[b][f]];c[b][f]=g.concat(h);}else c[b][f]=a[b][f];}else if("hook"==b)for(var i in a[b])c[b][i]=c[b][i]?mergeFn(c[b][i],a[b][i]):a[b][i];else c[b]=a[b];return c},{})},mergeFn=function(a,b){return function(){a&&a.apply(this,arguments),b&&b.apply(this,arguments);}};var helper=mergeJsxProps;
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function unwrapExports (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function createCommonjsModule(fn, basedir, module) {
return module = {
path: basedir,
exports: {},
require: function (path, base) {
return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
}
}, fn(module, module.exports), module.exports;
}
function commonjsRequire () {
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
}
var api = createCommonjsModule(function (module, exports) {
var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var vue_1 = __importDefault(Vue__default['default']);
var Component = /** @class */ (function (_super) {
__extends(Component, _super);
function Component() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Component;
}(vue_1.default));
exports.Component = Component;
/**
* Create component from component options (Compatible with Vue.extend)
*/
function createComponent(opts) {
return vue_1.default.extend(opts);
}
exports.createComponent = createComponent;
var factoryImpl = {
convert: function (c) { return c; },
extendFrom: function (c) { return c; }
};
/**
* Specify Props and Event types of component
*
* Usage:
* // Get TSX-supported component with props(`name`, `value`) and event(`onInput`)
* const NewComponent = tsx.ofType<{ name: string, value: string }, { onInput: string }>.convert(Component);
*/
function ofType() {
return factoryImpl;
}
exports.ofType = ofType;
function withNativeOn(componentType) {
return componentType;
}
exports.withNativeOn = withNativeOn;
function withHtmlAttrs(componentType) {
return componentType;
}
exports.withHtmlAttrs = withHtmlAttrs;
function withUnknownProps(componentType) {
return componentType;
}
exports.withUnknownProps = withUnknownProps;
function createComponentFactory(base, mixins) {
return {
create: function (options) {
var mergedMixins = options.mixins
? options.mixins.concat(mixins) : mixins;
return base.extend(__assign({}, options, { mixins: mergedMixins }));
},
mixin: function (mixinObject) {
return createComponentFactory(base, mixins.concat([mixinObject]));
}
};
}
function createExtendableComponentFactory() {
return {
create: function (options) {
return vue_1.default.extend(options);
},
extendFrom: function (base) {
return createComponentFactory(base, []);
},
mixin: function (mixinObject) {
return createComponentFactory(vue_1.default, [mixinObject]);
}
};
}
exports.componentFactory = createExtendableComponentFactory();
function componentFactoryOf() {
return exports.componentFactory;
}
exports.componentFactoryOf = componentFactoryOf;
/**
* Shorthand of `componentFactory.create`
*/
exports.component = exports.componentFactory.create;
exports.extendFrom = exports.componentFactory.extendFrom;
});
var modifiers = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
function handleEvent(event, filters, handler) {
for (var _i = 0, filters_1 = filters; _i < filters_1.length; _i++) {
var filter = filters_1[_i];
if (!filter(event)) {
return;
}
}
if (handler) {
handler(event);
}
}
var keyCodes = {
esc: 27,
tab: 9,
enter: 13,
space: 32,
up: 38,
down: 40,
del: [8, 46],
left: 37,
right: 39
};
function createKeyFilter(keys) {
var codes = [];
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
if (typeof key === "number") {
codes.push(key);
}
else {
var code = keyCodes[key];
if (typeof code === "number") {
codes.push(code);
}
else {
codes.push.apply(codes, code);
}
}
}
switch (codes.length) {
case 0:
return function (_) { return false; };
case 1:
var code_1 = codes[0];
return function (e) { return e.keyCode === code_1; };
default:
return function (e) { return codes.indexOf(e.keyCode) >= 0; };
}
}
function defineChildModifier(target, currentFilters, name, filter, children) {
Object.defineProperty(target, name, {
get: function () {
// call this getter at most once.
// reuse created instance after next time.
var ret = createModifier(currentFilters.concat([filter]), children);
Object.defineProperty(target, name, {
value: ret,
enumerable: true
});
return ret;
},
enumerable: true,
configurable: true
});
}
function defineKeyCodeModifiers(target, filters, children) {
var _loop_1 = function (name_1) {
var keyName = name_1;
if (keyName === "left" || keyName === "right") {
return "continue";
}
var code = keyCodes[keyName];
if (typeof code === "number") {
defineChildModifier(target, filters, keyName, function (e) { return e.keyCode === code; }, children);
}
else {
var c1_1 = code[0], c2_1 = code[1];
defineChildModifier(target, filters, keyName, function (e) { return e.keyCode === c1_1 || e.keyCode === c2_1; }, children);
}
};
for (var name_1 in keyCodes) {
_loop_1(name_1);
}
}
function defineKeys(target, filters, children) {
Object.defineProperty(target, "keys", {
get: function () {
var _this = this;
var keysFunction = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var propName = "keys:" + args.toString();
var modifier = _this[propName];
if (modifier !== undefined) {
return modifier;
}
var filter = createKeyFilter(args);
defineChildModifier(_this, filters, propName, filter, children);
return _this[propName];
};
Object.defineProperty(this, "keys", {
value: keysFunction,
enumerable: true
});
return keysFunction;
},
enumerable: true,
configurable: true
});
}
function defineExact(target, filters, children) {
Object.defineProperty(target, "exact", {
get: function () {
var _this = this;
var exactFunction = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var propName = "exact:" + args.toString();
var modifier = _this[propName];
if (modifier !== undefined) {
return modifier;
}
var expected = {
ctrl: false,
shift: false,
alt: false,
meta: false
};
args.forEach(function (arg) { return (expected[arg] = true); });
var filter = function (e) {
return !!e.ctrlKey === expected.ctrl &&
!!e.shiftKey === expected.shift &&
!!e.altKey === expected.alt &&
!!e.metaKey === expected.meta;
};
defineChildModifier(_this, filters, propName, filter, children);
return _this[propName];
};
Object.defineProperty(this, "exact", {
value: exactFunction,
enumerable: true
});
return exactFunction;
},
enumerable: true,
configurable: true
});
}
function createModifier(filters, children) {
function m(arg) {
if (arg instanceof Function) {
// EventHandler => EventHandler
return function (event) { return handleEvent(event, filters, arg); };
}
else {
// Event => void
handleEvent(arg, filters);
return;
}
}
if (children.keyboard || children.mouse) {
var nextChildren = __assign({}, children, { keyboard: false, mouse: false });
if (children.keyboard) {
defineKeyCodeModifiers(m, filters, nextChildren);
defineKeys(m, filters, nextChildren);
}
if (children.mouse) {
defineChildModifier(m, filters, "middle", function (e) { return e.button === 1; }, nextChildren);
}
defineChildModifier(m, filters, "left", function (e) { return e.keyCode === 37 || e.button === 0; }, nextChildren);
defineChildModifier(m, filters, "right", function (e) { return e.keyCode === 39 || e.button === 2; }, nextChildren);
}
if (children.exact) {
var nextChildren = __assign({}, children, { exact: false, modkey: false });
defineExact(m, filters, nextChildren);
}
if (children.modkey) {
var nextChildren = __assign({}, children, { exact: false });
defineChildModifier(m, filters, "ctrl", function (e) { return e.ctrlKey; }, nextChildren);
defineChildModifier(m, filters, "shift", function (e) { return e.shiftKey; }, nextChildren);
defineChildModifier(m, filters, "alt", function (e) { return e.altKey; }, nextChildren);
defineChildModifier(m, filters, "meta", function (e) { return e.metaKey; }, nextChildren);
defineChildModifier(m, filters, "noctrl", function (e) { return !e.ctrlKey; }, nextChildren);
defineChildModifier(m, filters, "noshift", function (e) { return !e.shiftKey; }, nextChildren);
defineChildModifier(m, filters, "noalt", function (e) { return !e.altKey; }, nextChildren);
defineChildModifier(m, filters, "nometa", function (e) { return !e.metaKey; }, nextChildren);
}
defineChildModifier(m, filters, "stop", function (e) {
e.stopPropagation();
return true;
}, children);
defineChildModifier(m, filters, "prevent", function (e) {
e.preventDefault();
return true;
}, children);
defineChildModifier(m, filters, "self", function (e) { return e.target === e.currentTarget; }, children);
return m;
}
exports.modifiers = createModifier([], {
keyboard: true,
mouse: true,
modkey: true,
exact: true
});
});
var lib = createCommonjsModule(function (module, exports) {
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(api);
exports.modifiers = modifiers.modifiers;
});
var index = /*@__PURE__*/unwrapExports(lib);
const AvatarSizes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let AvatarSizes;
(function (AvatarSizes) {
AvatarSizes["xl"] = "avatar-xl";
AvatarSizes["lg"] = "avatar-lg";
AvatarSizes["sm"] = "avatar-sm";
AvatarSizes["xs"] = "avatar-xs";
})(AvatarSizes || (AvatarSizes = {}));
return AvatarSizes;
}();
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "figure.avatar + figure.avatar {\n margin-left: 0.4rem; }\n";
styleInject(css_248z);
const Avatar = /*#__PURE__*/index.component({
name: 'Avatar',
functional: true,
props: {
size: {
type: String,
default: undefined
},
src: {
type: String,
default: undefined
},
initials: {
type: String,
default: undefined
},
background: {
type: String,
default: undefined
},
color: {
type: String,
default: undefined
},
alt: {
type: String,
default: undefined
},
presence: {
type: String,
default: undefined
},
icon: {
type: String,
default: undefined
}
},
render(h, {
props,
data
}) {
const cssClass = ['avatar', AvatarSizes[props.size] || props.size];
const cssStyles = {
color: props.color,
background: props.background
};
const initials = props.initials && props.initials.trim().substring(0, 2);
return h("figure", /*#__PURE__*/helper([{}, data, {
"class": cssClass,
"style": cssStyles,
"attrs": {
"data-initial": initials
}
}]), [props.src && h("img", {
"attrs": {
"src": props.src,
"alt": props.alt
}
}), props.icon && h("img", {
"attrs": {
"src": props.icon
},
"staticClass": "avatar-icon"
}), props.presence && !props.icon && h("i", {
"class": props.presence,
"staticClass": "avatar-presence"
})]);
}
});
const addPrefix = (source, prefix = '', suffix = '') => {
const prefixWithSuffix = prefix ? prefix + suffix : prefix;
return prefixWithSuffix + source;
};
const capitalize = s => {
if (typeof s !== 'string') {
throw new TypeError(`Argument should be a string. Given: ${typeof s}`);
}
return s.charAt(0).toUpperCase() + s.slice(1);
};
const uncapitalize = s => {
if (typeof s !== 'string') {
throw new TypeError(`Argument should be a string. Given: ${typeof s}`);
}
return s.charAt(0).toLowerCase() + s.slice(1);
};
const makePluggableComponents = /*#__PURE__*/(components = {}) => {
return (vue, options = {
prefix: ''
}) => {
Object.keys(components).forEach(name => vue.component( /*#__PURE__*/addPrefix( /*#__PURE__*/capitalize(name), options.prefix), components[name]));
};
};
const makePluggableDirectives = /*#__PURE__*/(directives = {}) => {
return (vue, options = {
prefix: ''
}) => {
Object.keys(directives).forEach(name => vue.directive( /*#__PURE__*/addPrefix( /*#__PURE__*/uncapitalize(name), options.prefix, '-'), directives[name]));
};
};
const AvatarPresences = /*#__PURE__*/function () {
//__IIFE_ENUM__
let AvatarPresences;
(function (AvatarPresences) {
AvatarPresences["online"] = "online";
AvatarPresences["busy"] = "busy";
AvatarPresences["away"] = "away";
AvatarPresences["offline"] = "offline";
})(AvatarPresences || (AvatarPresences = {}));
return AvatarPresences;
}();
var AvatarComponents = makePluggableComponents({
Avatar
});
const uids = new WeakMap();
const uid = component => {
if (uids.has(component)) {
return uids.get(component);
}
uids.set(component, /*#__PURE__*/String(~~(Math.random() * 1000000000)));
return uid(component);
};
const IconSizes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let IconSizes;
(function (IconSizes) {
IconSizes["x2"] = "icon-2x";
IconSizes["x3"] = "icon-3x";
IconSizes["x4"] = "icon-4x";
})(IconSizes || (IconSizes = {}));
return IconSizes;
}();
const IconNavigation = /*#__PURE__*/function () {
//__IIFE_ENUM__
let IconNavigation;
(function (IconNavigation) {
IconNavigation["up"] = "icon-arrow-up";
IconNavigation["down"] = "icon-arrow-down";
IconNavigation["right"] = "icon-arrow-right";
IconNavigation["left"] = "icon-arrow-left";
IconNavigation["upward"] = "icon-upward";
IconNavigation["forward"] = "icon-forward";
IconNavigation["downward"] = "icon-downward";
IconNavigation["back"] = "icon-back";
IconNavigation["caret"] = "icon-caret";
IconNavigation["menu"] = "icon-menu";
IconNavigation["apps"] = "icon-apps";
IconNavigation["hMore"] = "icon-more-horiz";
IconNavigation["vMore"] = "icon-more-vert";
})(IconNavigation || (IconNavigation = {}));
return IconNavigation;
}();
const IconAction = /*#__PURE__*/function () {
//__IIFE_ENUM__
let IconAction;
(function (IconAction) {
IconAction["hResize"] = "icon-resize-horiz";
IconAction["vResize"] = "icon-resize-vert";
IconAction["plus"] = "icon-plus";
IconAction["minus"] = "icon-minus";
IconAction["cross"] = "icon-cross";
IconAction["check"] = "icon-check";
IconAction["stop"] = "icon-stop";
IconAction["shutdown"] = "icon-shutdown";
IconAction["refresh"] = "icon-refresh";
IconAction["search"] = "icon-search";
IconAction["flag"] = "icon-flag";
IconAction["bookmark"] = "icon-bookmark";
IconAction["edit"] = "icon-edit";
IconAction["delete"] = "icon-delete";
IconAction["share"] = "icon-share";
IconAction["download"] = "icon-download";
IconAction["upload"] = "icon-upload";
})(IconAction || (IconAction = {}));
return IconAction;
}();
const IconObject = /*#__PURE__*/function () {
//__IIFE_ENUM__
let IconObject;
(function (IconObject) {
IconObject["mail"] = "icon-mail";
IconObject["people"] = "icon-people";
IconObject["message"] = "icon-message";
IconObject["photo"] = "icon-photo";
IconObject["time"] = "icon-time";
IconObject["location"] = "icon-location";
IconObject["link"] = "icon-link";
IconObject["emoji"] = "icon-emoji";
})(IconObject || (IconObject = {}));
return IconObject;
}();
const Icons = { ...IconNavigation,
...IconObject,
...IconAction
};
const Icon = /*#__PURE__*/index.component({
name: 'Icon',
functional: true,
props: {
name: {
type: String,
required: true
},
size: {
type: String,
default: undefined
}
},
render(h, {
props,
data
}) {
const styles = {
'font-size': IconSizes[props.size] || props.size
};
const classes = ['icon', IconSizes[props.size], Icons[props.name] || props.name];
return h("i", /*#__PURE__*/helper([{
"class": classes,
"style": styles
}, data]));
}
});
var IconComponents = makePluggableComponents({
Icon
});
const Accordion = /*#__PURE__*/index.componentFactoryOf().create({
name: 'Accordion',
props: {
items: {
required: true,
type: [Object, Array]
},
checked: {
type: [String, Number, Array],
default: undefined
},
name: {
type: String,
default: undefined
},
multiple: {
type: Boolean
},
icon: {
type: String,
default: undefined
}
},
computed: {
$_name() {
return this.name || 'accordion-' + uid(this);
}
},
methods: {
isChecked(key, index) {
if (!Array.isArray(this.checked)) {
return !!this.checked && (this.checked === key || this.checked.toString() === index.toString());
}
return this.checked.indexOf(index) !== -1 || this.checked.indexOf(key) !== -1;
},
toggle(event, key, index) {
if (!this.$listeners.check) return;
if (!this.multiple) {
this.$emit('check', key || index || 0);
return;
}
let checked = Array.isArray(this.checked) ? [...this.checked] : this.checked !== undefined ? [this.checked] : [];
if (event.target.checked) {
checked.push(key || index || 0);
} else {
checked = /*#__PURE__*/checked.filter(item => item !== index && item !== key);
}
this.$emit('check', checked);
}
},
render(h) {
const items = Array.isArray(this.items) ? { ...this.items
} : this.items;
const accordionItems = Object.keys(items).map((key, index) => {
const id = `${this.$_name}-${key}`;
const type = this.multiple ? 'checkbox' : 'radio';
const headerSlot = this.$scopedSlots['header'];
const bodySlot = this.$scopedSlots['body'] || this.$scopedSlots['default'];
return h("div", {
"staticClass": "accordion"
}, [h("input", {
"attrs": {
"id": id,
"name": this.$_name,
"type": type,
"hidden": true
},
"domProps": {
"checked": this.isChecked(key, index)
},
"on": {
"input": e => this.toggle(e, key, index)
}
}), h("label", {
"staticClass": "accordion-header c-hand",
"attrs": {
"for": id
}
}, [this.icon && h(Icon, {
"attrs": {
"name": this.icon
}
}), headerSlot && headerSlot({
header: key,
item: items[key]
}), !headerSlot && key]), !bodySlot && h("div", {
"staticClass": "accordion-body",
"domProps": {
"innerHTML": items[key]
}
}), bodySlot && h("div", {
"staticClass": "accordion-body"
}, [bodySlot({
header: key,
item: items[key]
})])]);
});
return h("div", {
"staticClass": "accordion-container"
}, [accordionItems]);
}
});
var AccordionComponents = makePluggableComponents({
Accordion
});
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const mergeCss = (data, staticClass, cssClass) => {
return [data.class, data.staticClass, cssClass, staticClass];
}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const Card = /*#__PURE__*/index.component({
name: 'Card',
functional: true,
render(h, {
children,
data
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'card');
return h("div", /*#__PURE__*/helper([{}, data, {
"class": cssClass
}]), [children]);
}
});
const CardBody = /*#__PURE__*/index.component({
name: 'CardBody',
functional: true,
render(h, {
children,
data
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'card-body');
return h("div", /*#__PURE__*/helper([{}, data, {
"class": cssClass
}]), [children]);
}
});
const CardFooter = /*#__PURE__*/index.component({
name: 'CardFooter',
functional: true,
render(h, {
children,
data
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'card-footer');
return h("div", /*#__PURE__*/helper([{}, data, {
"class": cssClass
}]), [children]);
}
});
const CardHeader = /*#__PURE__*/index.component({
name: 'CardHeader',
functional: true,
render(h, {
children,
data
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'card-header');
return h("div", /*#__PURE__*/helper([{}, data, {
"class": cssClass
}]), [children]);
}
});
const CardImage = /*#__PURE__*/index.component({
name: 'CardImage',
functional: true,
props: {
img: {
type: String,
required: true
}
},
render(h, {
props,
data
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'card-image');
return h("div", /*#__PURE__*/helper([{}, data, {
"class": cssClass
}]), [h("img", {
"attrs": {
"src": props.img
},
"staticClass": "img-responsive"
})]);
}
});
const CardImagePositions = /*#__PURE__*/function () {
//__IIFE_ENUM__
let CardImagePositions;
(function (CardImagePositions) {
CardImagePositions["before"] = "before";
CardImagePositions["after"] = "after";
})(CardImagePositions || (CardImagePositions = {}));
return CardImagePositions;
}();
const CardImageSlots = /*#__PURE__*/function () {
//__IIFE_ENUM__
let CardImageSlots;
(function (CardImageSlots) {
CardImageSlots["header"] = "header";
CardImageSlots["body"] = "body";
CardImageSlots["footer"] = "footer";
})(CardImageSlots || (CardImageSlots = {}));
return CardImageSlots;
}();
var CardComponents = makePluggableComponents({
Card,
CardBody,
CardFooter,
CardHeader,
CardImage
});
const sizeValidator = size => size % 1 === 0 && size > 0 && size <= 12;
const cssClass = props => {
return ['column', props.mr ? 'col-mr-auto' : '', props.ml ? 'col-ml-auto' : '', props.mx ? 'col-mx-auto' : '', props.xs ? `col-xs-${props.xs}` : '', props.sm ? `col-sm-${props.sm}` : '', props.md ? `col-md-${props.md}` : '', props.lg ? `col-lg-${props.lg}` : '', props.xl ? `col-xl-${props.xl}` : '', props.col ? `col-${props.col}` : '', props.hide ? `hide-${props.hide}` : '', props.show ? `show-${props.show}` : ''];
};
const Column = /*#__PURE__*/index.createComponent({
name: 'Column',
functional: true,
props: {
ml: {
type: Boolean
},
mx: {
type: Boolean
},
mr: {
type: Boolean
},
xs: {
type: [Number, String],
validator: sizeValidator
},
sm: {
type: [Number, String],
validator: sizeValidator
},
md: {
type: [Number, String],
validator: sizeValidator
},
lg: {
type: [Number, String],
validator: sizeValidator
},
xl: {
type: [Number, String],
validator: sizeValidator
},
col: {
type: [Number, String],
validator: sizeValidator
},
hide: {
type: [Number, String]
},
show: {
type: [Number, String]
}
},
render(h, {
props,
children,
data
}) {
return h("div", /*#__PURE__*/helper([{
"class": cssClass(props)
}, data]), [children]);
}
});
var ColumnComponents = makePluggableComponents({
Column
});
const Columns = /*#__PURE__*/index.createComponent({
name: 'Columns',
functional: true,
props: {
gapless: Boolean,
oneline: Boolean
},
render(h, {
props,
children,
data
}) {
const cssClasses = ['columns', props.gapless && 'col-gapless', props.oneline && 'col-oneline'];
return h("div", /*#__PURE__*/helper([{
"class": cssClasses
}, data]), [children]);
}
});
var ColumnsComponents = makePluggableComponents({
Columns
});
const Grids = /*#__PURE__*/function () {
//__IIFE_ENUM__
let Grids;
(function (Grids) {
Grids["xs"] = "grid-xs";
Grids["sm"] = "grid-sm";
Grids["md"] = "grid-md";
Grids["lg"] = "grid-lg";
Grids["xl"] = "grid-xl";
})(Grids || (Grids = {}));
return Grids;
}();
const Container = /*#__PURE__*/index.createComponent({
name: 'Container',
functional: true,
props: {
grid: {
type: String
}
},
render(h, {
props,
children,
data
}) {
const cssClasses = ['container', Grids[props.grid]];
return h("div", /*#__PURE__*/helper([{
"class": cssClasses
}, data]), [children]);
}
});
var ContainerComponents = makePluggableComponents({
Container
});
const Bar = /*#__PURE__*/index.component({
name: 'Bar',
functional: true,
props: {
sm: {
type: Boolean
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
value: {
type: Number,
default: 0
},
tooltip: {
type: [String, Function],
default: undefined
}
},
render(h, {
props
}) {
const barCssClass = ['bar', props.sm && 'bar-sm'];
const barItemCssClass = ['bar-item', props.tooltip && 'tooltip'];
const barItemStyles = {
width: props.value / props.max * 100 + '%'
};
return h("div", {
"class": barCssClass
}, [h("div", {
"class": barItemCssClass,
"style": barItemStyles,
"attrs": {
"data-tooltip": props.tooltip,
"aria-valuenow": props.value,
"aria-valuemin": props.min,
"aria-valuemax": props.max,
"role": "progressbar"
}
})]);
}
});
var BarComponents = makePluggableComponents({
Bar
});
const Breadcrumb = /*#__PURE__*/index.component({
name: 'Breadcrumb',
functional: true,
props: {
crumbs: {
type: Array,
required: true
}
},
render(h, {
props,
scopedSlots
}) {
const crumbs = props.crumbs.map(crumb => {
const slot = scopedSlots.default && scopedSlots.default({
crumb
});
const text = /*#__PURE__*/h("a", {
"attrs": {
"href": crumb.path
}
}, [crumb.title]);
return h("li", {
"staticClass": "breadcrumb-item"
}, [slot || text]);
});
return h("ul", {
"staticClass": "breadcrumb"
}, [crumbs]);
}
});
var BreadcrumbComponents = makePluggableComponents({
Breadcrumb
});
var css_248z$1 = ".btn + .btn {\n margin-left: 0.4rem; }\n\n.btn:not(.btn-action) .icon {\n margin: 0 0 0 0.2rem; }\n .btn:not(.btn-action) .icon.left {\n margin: 0 0.2rem 0 0; }\n";
styleInject(css_248z$1);
const BtnTypes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let BtnTypes;
(function (BtnTypes) {
BtnTypes["primary"] = "btn-primary";
BtnTypes["link"] = "btn-link";
BtnTypes["success"] = "btn-success";
BtnTypes["error"] = "btn-error";
BtnTypes["clear"] = "btn-clear";
})(BtnTypes || (BtnTypes = {}));
return BtnTypes;
}();
const BtnSizes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let BtnSizes;
(function (BtnSizes) {
BtnSizes["sm"] = "btn-sm";
BtnSizes["lg"] = "btn-lg";
BtnSizes["block"] = "btn-block";
})(BtnSizes || (BtnSizes = {}));
return BtnSizes;
}();
const BtnStates = /*#__PURE__*/function () {
//__IIFE_ENUM__
let BtnStates;
(function (BtnStates) {
BtnStates["active"] = "active";
BtnStates["disabled"] = "disabled";
BtnStates["loading"] = "loading";
})(BtnStates || (BtnStates = {}));
return BtnStates;
}();
const Btn = /*#__PURE__*/index.componentFactoryOf().create({
name: 'Btn',
functional: true,
props: {
type: {
type: String
},
size: {
type: String
},
icon: {
type: String
},
state: {
type: String
},
tabindex: {
type: [Number, String],
default: undefined
},
left: {
type: Boolean
},
circle: {
type: Boolean
},
action: {
type: Boolean
},
htmlTag: {
type: String,
validator: tag => ['a', 'button'].includes(tag)
}
},
render(h, {
props,
data,
slots
}) {
const cssClass = /*#__PURE__*/mergeCss(data, 'btn', [BtnTypes[props.type] || props.type, BtnSizes[props.size] || props.size, BtnStates[props.state] || props.state, props.action && props.circle && 's-circle', props.action && 'btn-action']);
const leftIcon = props.icon && props.left ? h(Icon, {
"attrs": {
"name": props.icon
},
"class": "left"
}) : '';
const rightIcon = props.icon && !props.left ? h(Icon, {
"attrs": {
"name": props.icon
}
}) : '';
const content = !props.action && slots().default;
const htmlTag = ['a', 'button'].includes(props.htmlTag) ? props.htmlTag : 'button';
return h(htmlTag, { ...data,
class: cssClass,
attrs: {
tabindex: props.tabindex,
...data.attrs
}
}, [leftIcon, content, rightIcon]);
}
});
const BtnGroup = /*#__PURE__*/index.component({
name: 'BtnGroup',
functional: true,
props: {
block: {
type: Boolean
}
},
render(h, {
props,
data,
slots
}) {
const cssClass = ['btn-group', props.block && 'btn-group-block'];
return h("div", /*#__PURE__*/helper([{
"class": cssClass
}, data]), [slots().default]);
}
});
var BtnComponents = makePluggableComponents({
Btn,
BtnGroup
});
/* eslint-disable @typescript-eslint/ban-types */
const flattenListener = listener => {
let flatten;
if (listener) {
flatten = Array.isArray(listener) ? listener : [listener];
} else {
flatten = [() => {
/* noop */
}];
}
return event => flatten.forEach(l => l(event));
};
const Chip = /*#__PURE__*/index.componentFactoryOf().create({
name: 'Chip',
functional: true,
props: {
active: {
type: Boolean
},
text: {
type: String,
required: true
},
avatar: {
type: String,
default: undefined
},
initials: {
type: String,
default: undefined
},
small: {
type: Boolean
}
},
render(h, {
props,
listeners
}) {
const cssClass = ['chip', props.active && 'active'];
const avatar = (props.avatar || props.initials) && h(Avatar, {
"attrs": {
"src": props.avatar,
"size": props.small ? 'sm' : undefined,
"initials": props.initials
}
});
const closeBtn = listeners.close && h("a", {
"staticClass": "btn btn-clear",
"attrs": {
"aria-label": "Close",
"role": "button"
},
"on": {
"click": flattenListener(listeners.close)
}
});
return h("span", {
"class": cssClass
}, [avatar, props.text, closeBtn]);
}
});
var ChipComponents = makePluggableComponents({
Chip
});
const Divider = /*#__PURE__*/index.component({
name: 'Divider',
functional: true,
props: {
vert: {
type: Boolean
},
content: {
type: String,
default: undefined
}
},
render(h, {
props,
slots,
data
}) {
const classes = ['text-center', props.vert && 'divider-vert', !props.vert && 'divider'];
const dataContent = props.content || slots().default && slots().default[0].text;
return h("div", /*#__PURE__*/helper([{
"class": classes,
"attrs": {
"data-content": dataContent
}
}, data]));
}
});
var DividerComponents = makePluggableComponents({
Divider
});
const TagTypes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let TagTypes;
(function (TagTypes) {
TagTypes["primary"] = "label-primary";
TagTypes["secondary"] = "label-secondary";
TagTypes["success"] = "label-success";
TagTypes["warning"] = "label-warning";
TagTypes["error"] = "label-error";
})(TagTypes || (TagTypes = {}));
return TagTypes;
}();
var css_248z$2 = ".label + .label {\n margin-left: 0.3rem; }\n";
styleInject(css_248z$2);
const Tag = /*#__PURE__*/index.component({
name: 'Tag',
functional: true,
props: {
type: {
type: String,
default: undefined
},
rounded: {
type: Boolean
}
},
render(h, {
slots,
props,
data
}) {
const classes = ['label', TagTypes[props.type], props.rounded && 'label-rounded'];
return h("span", /*#__PURE__*/helper([{
"class": classes
}, data]), [slots().default]);
}
});
var TagComponents = makePluggableComponents({
Tag
});
const VerticalMenuItemBadge = /*#__PURE__*/index.component({
name: 'VerticalMenuItemBadge',
functional: true,
props: {
type: {
type: String,
default: undefined
}
},
render(h, {
props,
children
}) {
return h("div", {
"class": "menu-badge"
}, [h(Tag, {
"attrs": {
"type": props.type
}
}, [children])]);
}
});
const VerticalMenuItem = /*#__PURE__*/index.component({
name: 'VerticalMenuItem',
functional: true,
props: {
active: {
type: Boolean
},
badge: {
type: [String, Number],
default: undefined
},
text: {
type: String,
default: undefined
},
path: {
type: String,
default: undefined
}
},
render(h, {
props,
children
}) {
if (children && children.length) {
return h("li", {
"staticClass": "menu-item"
}, [children]);
}
const badge = props.badge && h(VerticalMenuItemBadge, {
"attrs": {
"type": "primary"
}
}, [props.badge]);
const link = /*#__PURE__*/h("a", {
"attrs": {
"href": props.path
},
"class": props.active && 'active'
}, [props.text]);
return h("li", {
"staticClass": "menu-item"
}, [badge, " ", link]);
}
});
const normalizeDivider = divider => {
return typeof divider === 'string' ? divider : '';
};
const VerticalMenuDivider = /*#__PURE__*/index.component({
name: 'VerticalMenuDivider',
functional: true,
props: {
text: {
type: [String, Boolean],
default: undefined
}
},
render(h, {
props
}) {
return h("li", {
"staticClass": "divider",
"attrs": {
"data-content": normalizeDivider(props.text)
}
});
}
});
const VerticalMenu = /*#__PURE__*/index.component({
name: 'VerticalMenu',
functional: true,
props: {
items: {
type: [Array, Object],
default: () => []
},
active: {
type: [Number, String],
default: ''
}
},
render(h, {
props,
slots,
scopedSlots,
data
}) {
if (!props.items) {
throw new TypeError('Items cannot be empty');
}
const items = Array.isArray(props.items) ? { ...props.items
} : props.items;
const menuItems = Object.keys(items).map(key => {
if (items[key].divider) {
return h(VerticalMenuDivider, {
"attrs": {
"text": items[key].divider
}
});
}
return h(VerticalMenuItem, {
"attrs": {
"active": key.toString() === props.active.toString(),
"badge": items[key].badge,
"path": items[key].path,
"text": items[key].text
}
}, [scopedSlots.default && scopedSlots.default({
item: items[key],
index: key
})]);
});
return h("ul", /*#__PURE__*/helper([{}, data, {
"class": ['menu', data.class]
}]), [slots().default, menuItems]);
}
});
var VerticalMenuComponents = makePluggableComponents({
VerticalMenu,
VerticalMenuDivider,
VerticalMenuItem,
VerticalMenuItemBadge
});
const listeners = new WeakMap();
const getEvent = (touch = false) => {
if (!touch) return 'click';
return 'ontouchstart' in window || navigator.msMaxTouchPoints ? 'touchstart' : 'click';
};
const getListener = (el, callback) => {
if (!listeners.has(el)) {
listeners.set(el, e => {
if (!el.contains(e.target)) {
callback(e, el);
}
});
}
return listeners.get(el);
};
const ClickOutside = /*#__PURE__*/{
bind(el, {
value,
modifiers
}) {
document.addEventListener( /*#__PURE__*/getEvent(modifiers.touch), /*#__PURE__*/getListener(el, value));
},
unbind(el) {
document.removeEventListener( /*#__PURE__*/getEvent(), /*#__PURE__*/getListener(el));
}
};
var ClickOutside$1 = makePluggableDirectives({
ClickOutside
});
const DropdownMenu = /*#__PURE__*/index.component({
name: 'DropdownMenu',
directives: {
ClickOutside
},
props: {
items: {
type: [Object, Array],
default: undefined
},
right: {
type: Boolean
},
btnType: {
type: String,
default: undefined
},
btnText: {
type: String,
default: undefined
},
btnIcon: {
type: String,
default: undefined
},
state: {
type: String,
default: undefined
}
},
render(h) {
const onOpen = /*#__PURE__*/flattenListener(this.$listeners.opened);
const onClose = /*#__PURE__*/flattenListener(this.$listeners.closed);
const btnCssClass = [BtnTypes[this.btnType], 'dropdown-toggle'];
const btn = /*#__PURE__*/h(Btn, {
"class": btnCssClass,
"attrs": {
"icon": this.btnIcon || 'caret',
"state": this.state,
"htmlTag": "a",
"tabindex": "0"
},
"on": {
"focus": onOpen,
"blur": onClose
}
}, [this.btnText]);
const directives = [{
name: 'click-outside',
value: () => btn.elm.blur(),
modifiers: {
touch: false
}
}];
return h("div", /*#__PURE__*/helper([{}, {
directives
}, {
"staticClass": "dropdown",
"class": this.right && 'dropdown-right'
}]), [btn, h(VerticalMenu, {
"attrs": {
"items": this.items
},
"scopedSlots": {
default: this.$scopedSlots.default
}
})]);
}
});
var DropdownMenuComponents = makePluggableComponents({
DropdownMenu
});
const EmptyTitle = /*#__PURE__*/index.component({
name: 'EmptyTitle',
functional: true,
render(h, {
children
}) {
return h("p", {
"staticClass": "empty-title h5"
}, [children]);
}
});
const EmptySubtitle = /*#__PURE__*/index.component({
name: 'EmptySubtitle',
functional: true,
render(h, {
children
}) {
return h("p", {
"staticClass": "empty-title"
}, [children]);
}
});
const EmptyIcon = /*#__PURE__*/index.component({
name: 'EmptyIcon',
functional: true,
props: {
icon: {
type: String,
required: true
}
},
render(h, {
props
}) {
return h("div", {
"staticClass": "empty-icon"
}, [h(Icon, {
"attrs": {
"name": props.icon,
"size": "x3"
}
})]);
}
});
const EmptyContent = /*#__PURE__*/index.component({
name: 'EmptyContent',
functional: true,
render(h, {
children
}) {
return h("div", {
"staticClass": "empty-content"
}, [children]);
}
});
const EmptyAction = /*#__PURE__*/index.component({
name: 'EmptyAction',
functional: true,
render(h, {
children
}) {
return h("p", {
"staticClass": "empty-action"
}, [children]);
}
});
const Empty = /*#__PURE__*/index.component({
name: 'Empty',
functional: true,
props: {
icon: {
type: String,
default: undefined
},
title: {
type: String,
default: undefined
},
sub: {
type: String,
default: undefined
}
},
render(h, {
props,
slots
}) {
const title = props.title && h(EmptyTitle, [props.title]);
const sub = props.sub && h(EmptySubtitle, [props.sub]);
const icon = props.icon && h(EmptyIcon, {
"attrs": {
"icon": props.icon
}
});
const _slots = /*#__PURE__*/slots();
const content = _slots.content && h(EmptyContent, [_slots.content]);
const actions = _slots.action && h(EmptyAction, [_slots.action]);
return h("div", {
"staticClass": "empty"
}, [icon, title, sub, content, actions, _slots.default]);
}
});
var EmptyComponents = makePluggableComponents({
Empty,
EmptyAction,
EmptyContent,
EmptyIcon,
EmptySubtitle,
EmptyTitle
});
const ModalSizes = /*#__PURE__*/function () {
//__IIFE_ENUM__
let ModalSizes;
(function (ModalSizes) {
ModalSizes["sm"] = "modal-sm";
ModalSizes["lg"] = "modal-lg";
})(ModalSizes || (ModalSizes = {}));
return ModalSizes;
}();
const ModalHeader = /*#__PURE__*/index.componentFactoryOf().create({
name: 'ModalHeader',
functional: true,
render(h, {
children,
listeners
}) {
const close = listeners.close && h(Btn, {
"staticClass": "float-right",
"attrs": {
"aria-label": "Close",
"type": "clear"
},
"on": {
"click": () => flattenListener(listeners.close)(false)
}
});
return h("div", {
"class": "modal-header"
}, [close, children]);
}
});
const ModalBody = /*#__PURE__*/index.component({
name: 'ModalBody',
functional: true,
render(h, {
children
}) {
return h("div", {
"class": "modal-body"
}, [h("div", {
"class": "content"
}, [children])]);
}
});
const ModalFooter = /*#__PURE__*/index.component({
name: 'ModalFooter',
functional: true,
render(h, {
children
}) {
return h("div", {
"class": "modal-footer"
}, [children]);
}
});
var css_248z$3 = ".overlay__shadow {\n height: 100%;\n width: 100%;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n will-change: opacity;\n align-items: center;\n justify-content: center;\n display: flex; }\n";
styleInject(css_248z$3);
const findOverlay = el => [].slice.call(el.children).find(n => n.className === 'overlay__shadow');
const findRootElement = el => {
let parent = el.parentElement;
while (parent.parentElement !== document.body) {
parent = parent.parentElement;
}
return parent;
};
const onClickStub = () => {
/* NOOP */
};
const normalizeBinding = ({
value,
arg,
modifiers
}) => {
const configuration = {};
if (typeof value === 'object') {
configuration.opacity = /*#__PURE__*/String(value.opacity || 75).padStart(2, '0');
configuration.zIndex = value.zIndex || 1;
configuration.text = value.text || '';
configuration.blur = value.blur || modifiers.blur;
configuration.onClick = value.onClick || onClickStub;
configuration.fullscreen = value.fullscreen || modifiers.fullscreen;
configuration.noScroll = configuration.fullscreen && (value.noScroll || modifiers.noScroll);
configuration.show = value.show;
} else {
configuration.opacity = /*#__PURE__*/String(arg || 75).padStart(2, '0');
configuration.zIndex = 1;
configuration.text = typeof value === 'string' ? value : '';
configuration.blur = modifiers.blur;
configuration.onClick = typeof value === 'function' ? value : onClickStub;
configuration.fullscreen = modifiers.fullscreen;
configuration.noScroll = configuration.fullscreen && modifiers.noScroll;
configuration.show = !!value;
}
return configuration;
};
const updateOverlay = (overlayEl, configuration) => {
overlayEl.style.setProperty('z-index', /*#__PURE__*/String(configuration.zIndex));
overlayEl.style.setProperty('background', `rgba(247, 248, 249, 0.${configuration.opacity})`);
if (blur) {
const blurLevel = configuration.blur === true ? '2px' : `${configuration.blur}px`;
overlayEl.style.setProperty('backdrop-filter', `blur(${blurLevel})`);
}
if (configuration.text) {
overlayEl.innerHTML = configuration.text;
}
};
const createOverlay = (container, configuration) => {
const overlayEl = /*#__PURE__*/document.createElement('div');
overlayEl.className = 'overlay__shadow';
if (configuration.fullscreen) {
overlayEl.style.setProperty('position', 'fixed');
}
overlayEl.addEventListener('click', configuration.onClick);
container.insertBefore(overlayEl, container.firstChild);
return overlayEl;
};
const disableScroll = container => {
const root = /*#__PURE__*/findRootElement(container);
root.style.setProperty('top', `-${window.scrollY}px`);
root.style.setProperty('position', 'fixed');
};
const enableScroll = container => {
const root = /*#__PURE__*/findRootElement(container);
root.style.position = '';
window.scrollTo({
top: +root.style.top.match(/\d+/)[0]
});
};
const overlay = {
inserted: /*#__PURE__*/(el, binding) => {
const configuration = /*#__PURE__*/normalize