vue3-material
Version:
Vue 3 components which adhere to the material design spec
1,086 lines (960 loc) • 90.6 kB
JavaScript
'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}// vue
var script = vue.defineComponent({
props: {
rippleColor: {
type: String,
default: 'rgb(255, 255, 255)'
}
},
// eslint-disable-next-line
setup: function setup(props) {
// refs
var rippleEffect = vue.ref(null); // computed
var cssProperties = vue.computed(function () {
return "--ripple-color: ".concat(props.rippleColor, ";");
}); // methods
var createRipple = function createRipple(event) {
var button = event.currentTarget;
if (button) {
var circle = document.createElement('span');
var diameter = Math.max(button.clientWidth, button.clientHeight);
var radius = diameter / 2;
circle.style.width = circle.style.height = "".concat(diameter, "px");
var buttonElement = button.getBoundingClientRect();
circle.style.left = "\n ".concat(event.clientX - buttonElement.left - radius, "px\n ");
circle.style.top = "\n ".concat(event.clientY - buttonElement.top - radius, "px\n ");
circle.classList.add('ripple');
if (rippleEffect.value) {
var ripple = button.getElementsByClassName('ripple')[0];
if (ripple) {
ripple.remove();
}
}
button.appendChild(circle);
}
};
return {
props: props,
createRipple: createRipple,
rippleEffect: rippleEffect,
cssProperties: cssProperties
};
}
});var _withId = /*#__PURE__*/vue.withScopeId("data-v-3c6cb756");
vue.pushScopeId("data-v-3c6cb756");
var _hoisted_1 = {
class: "content"
};
vue.popScopeId();
var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.Fragment, null, [vue.createVNode("div", {
class: "ripple-effect",
style: _ctx.cssProperties,
onMousedown: _cache[1] || (_cache[1] = function () {
return _ctx.createRipple && _ctx.createRipple.apply(_ctx, arguments);
}),
ref: "rippleEffect"
}, null, 36), vue.createVNode("div", _hoisted_1, [vue.renderSlot(_ctx.$slots, "default")])], 64);
});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 = "\n/* ripple */\n.ripple-effect[data-v-3c6cb756] {\n display: inline-flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: 0;\n border-radius: 4px;\n cursor: pointer;\n white-space: nowrap;\n box-sizing: border-box;\n text-decoration: none;\n flex: 1;\n width: 100%;\n height: 100%;\n transition: background 100ms, box-shadow 300ms;\n}\n.content[data-v-3c6cb756] {\n z-index: 10;\n pointer-events: none;\n}\n";
styleInject(css_248z);var css_248z$1 = "\nspan.ripple {\n --visible-opacity: 0.2;\n pointer-events: none;\n display: flex;\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n background-color: rgba(255, 255, 255, 0);\n box-shadow: 0 0 5px 5px var(--ripple-color);\n animation: ripple 450ms ease-in;\n transform: scale(4);\n transition: background-color 0.2s;\n opacity: 0.2;\n}\n.ripple-effect:active:hover span.ripple {\n background-color: var(--ripple-color) !important;\n}\n@keyframes ripple {\n0% {\n background-color: var(--ripple-color);\n transform: scale(0);\n}\n66% {\n background-color: var(--ripple-color);\n transform: scale(4);\n}\n100% {\n background-color: rgba(255, 255, 255, 0);\n}\n}\n";
styleInject(css_248z$1);script.render = render;
script.__scopeId = "data-v-3c6cb756";// vue
var script$1 = vue.defineComponent({
components: {
VmRipple: script
},
props: {
type: {
type: String,
default: 'button'
},
icon: {
type: String,
default: 'fal fa-coffee'
},
label: {
type: String,
default: ''
},
isSmall: {
type: Boolean,
default: false
},
primaryColor: {
type: String,
default: 'rgb(98, 0, 238)'
},
accentColor: {
type: String,
default: 'rgb(255, 255, 255)'
},
elevation: {
type: Number,
default: 1
}
},
// eslint-disable-next-line
setup: function setup(props) {
// computed
var cssProperties = vue.computed(function () {
var css = "--primary-color: ".concat(props.primaryColor, ";") + "--text-color: ".concat(props.accentColor, ";");
if (!props.label) {
css += "--ab-width: var(--size);" + "--ab-padding: 0;";
}
if (props.elevation !== null) {
css += "--default-elevation: var(--elevation-".concat(props.elevation, ");") + "--focus-elevation: var(--elevation-".concat(props.elevation + 2, ");") + "--active-elevation: var(--elevation-".concat(props.elevation + 6, ");");
}
return css;
});
return {
props: props,
cssProperties: cssProperties
};
}
});var _withId$1 = /*#__PURE__*/vue.withScopeId("data-v-82c27306");
vue.pushScopeId("data-v-82c27306");
var _hoisted_1$1 = /*#__PURE__*/vue.createVNode("div", {
class: "btn-overlay"
}, null, -1);
var _hoisted_2 = {
class: "content"
};
var _hoisted_3 = {
key: 0,
class: "label-text"
};
vue.popScopeId();
var render$1 = /*#__PURE__*/_withId$1(function (_ctx, _cache, $props, $setup, $data, $options) {
var _component_vm_ripple = vue.resolveComponent("vm-ripple");
return vue.openBlock(), vue.createBlock("button", {
class: ["vm-action-btn", {
small: _ctx.isSmall
}],
style: _ctx.cssProperties,
type: _ctx.type
}, [vue.createVNode(_component_vm_ripple, {
rippleColor: _ctx.props.accentColor
}, {
default: _withId$1(function () {
return [_hoisted_1$1, vue.createVNode("div", _hoisted_2, [vue.createVNode("i", {
class: _ctx.props.icon
}, null, 2), _ctx.props.label ? (vue.openBlock(), vue.createBlock("div", _hoisted_3, vue.toDisplayString(_ctx.props.label), 1)) : vue.createCommentVNode("", true)])];
}),
_: 1
}, 8, ["rippleColor"])], 14, ["type"]);
});var css_248z$2 = "\n.vm-action-btn[data-v-82c27306] {\n --size: 45px;\n --ab-padding: 16px;\n width: var(--ab-width);\n height: var(--size);\n min-width: var(--ab-width);\n min-height: var(--size);\n max-width: var(--ab-width);\n max-height: var(--size);\n user-select: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n transition: background 400ms;\n color: var(--text-color);\n background: var(--primary-color);\n font-size: 1.6rem;\n outline: 0;\n border: 0;\n border-radius: calc(var(--size) / 2);\n box-shadow: var(--elevation-shadow);\n padding: 0 var(--ab-padding);\n cursor: pointer;\n box-shadow: var(--default-elevation);\n transition: background 100ms, box-shadow 300ms;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n letter-spacing: 1.25px;\n}\n.label-text[data-v-82c27306] {\n font-size: 0.88rem;\n}\n.vm-action-btn[data-v-82c27306]:hover,\n.vm-action-btn[data-v-82c27306]:focus {\n box-shadow: var(--focus-elevation);\n}\n.vm-action-btn[data-v-82c27306]:active:focus {\n box-shadow: var(--active-elevation);\n}\n.vm-action-btn:hover .btn-overlay[data-v-82c27306] {\n background: rgba(255, 255, 255, 0.05);\n}\n.vm-action-btn:focus .btn-overlay[data-v-82c27306] {\n background: rgba(255, 255, 255, 0.1);\n}\n.small[data-v-82c27306] {\n --size: 35px;\n font-size: 1.4rem;\n}\n.btn-overlay[data-v-82c27306] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0);\n transition-duration: 0.1s;\n}\n.content[data-v-82c27306] {\n z-index: 1;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n";
styleInject(css_248z$2);script$1.render = render$1;
script$1.__scopeId = "data-v-82c27306";// vue
var script$2 = vue.defineComponent({
props: {
elevation: {
type: Number,
default: 2
}
},
// eslint-disable-next-line
setup: function setup(props) {
return {
props: props
};
}
});var _withId$2 = /*#__PURE__*/vue.withScopeId("data-v-2ddee2f9");
var render$2 = /*#__PURE__*/_withId$2(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", {
class: ["app-bar", ["elevation-".concat(_ctx.props.elevation), "elevation-background-".concat(_ctx.props.elevation)]]
}, [vue.renderSlot(_ctx.$slots, "default")], 2);
});var css_248z$3 = "\n.app-bar[data-v-2ddee2f9] {\n min-height: 4rem;\n display: flex;\n width: 100%;\n}\n";
styleInject(css_248z$3);script$2.render = render$2;
script$2.__scopeId = "data-v-2ddee2f9";// vue
var script$3 = vue.defineComponent({
components: {
VmRipple: script
},
props: {
type: {
type: String,
default: 'button'
},
variant: {
type: String,
validator: function validator(prop) {
return ['contained', 'outlined', 'text'].includes(prop);
},
default: 'contained'
},
routerPath: {
type: String,
default: ''
},
isDisabled: {
type: Boolean,
default: false
},
primaryColor: {
type: String,
default: 'rgb(98, 0, 238)'
},
accentColor: {
type: String,
default: 'rgb(255, 255, 255)'
},
elevation: {
type: Number,
default: 2
}
},
// eslint-disable-next-line
setup: function setup(props) {
// computed
var cssProperties = vue.computed(function () {
var css = "--primary-color: ".concat(props.primaryColor, ";") + "--text-color: ".concat(props.accentColor, ";");
if (props.elevation !== null) {
css += "--default-elevation: var(--elevation-".concat(props.elevation, ");") + "--focus-elevation: var(--elevation-".concat(props.elevation + 2, ");") + "--active-elevation: var(--elevation-".concat(props.elevation + 6, ");");
}
return css;
});
return {
props: props,
cssProperties: cssProperties
};
}
});var _withId$3 = /*#__PURE__*/vue.withScopeId("data-v-9fecb26c");
vue.pushScopeId("data-v-9fecb26c");
var _hoisted_1$2 = /*#__PURE__*/vue.createVNode("div", {
class: "btn-overlay"
}, null, -1);
vue.popScopeId();
var render$3 = /*#__PURE__*/_withId$3(function (_ctx, _cache, $props, $setup, $data, $options) {
var _component_vm_ripple = vue.resolveComponent("vm-ripple");
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.routerPath ? 'router-link' : 'button'), {
class: ["vm-btn", ["btn-".concat(_ctx.props.variant), {
disabled: _ctx.isDisabled
}]],
style: _ctx.cssProperties,
type: _ctx.props.type,
to: _ctx.routerPath
}, {
default: _withId$3(function () {
return [_hoisted_1$2, vue.createVNode(_component_vm_ripple, {
rippleColor: _ctx.props.variant !== 'contained' ? _ctx.props.primaryColor : _ctx.props.accentColor
}, {
default: _withId$3(function () {
return [vue.renderSlot(_ctx.$slots, "default")];
}),
_: 3
}, 8, ["rippleColor"])];
}),
_: 1
}, 8, ["class", "style", "type", "to"]);
});var css_248z$4 = "\n/* contained */\n.btn-contained[data-v-9fecb26c] {\n color: var(--text-color);\n background: var(--primary-color);\n box-shadow: var(--default-elevation);\n border: 0;\n padding: 10px 16px;\n}\n.btn-overlay[data-v-9fecb26c] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0);\n transition-duration: 0.1s;\n}\n.btn-contained:hover .btn-overlay[data-v-9fecb26c] {\n background: rgba(255, 255, 255, 0.05);\n}\n.btn-contained:focus .btn-overlay[data-v-9fecb26c] {\n background: rgba(255, 255, 255, 0.15);\n}\n\n/* outlined and text */\n.btn-outlined[data-v-9fecb26c] {\n background: none;\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n padding: 10px 15px;\n}\n.btn-text[data-v-9fecb26c] {\n background: none;\n color: var(--primary-color);\n border: 0;\n padding: 10px 16px;\n}\n.btn-text .btn-overlay[data-v-9fecb26c],\n.btn-outlined .btn-overlay[data-v-9fecb26c] {\n opacity: 0.1;\n}\n.btn-text:hover .btn-overlay[data-v-9fecb26c],\n.btn-outlined:hover .btn-overlay[data-v-9fecb26c] {\n background: var(--primary-color);\n}\n.btn-text:focus .btn-overlay[data-v-9fecb26c],\n.btn-outlined:focus .btn-overlay[data-v-9fecb26c] {\n background: var(--primary-color);\n opacity: 0.2;\n}\n.vm-btn[data-v-9fecb26c] {\n font-family: 'Roboto', sans-serif;\n user-select: none;\n display: inline-flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n font-size: 0.88rem;\n font-weight: 500;\n letter-spacing: 1.25px;\n outline: 0;\n border-radius: 4px;\n cursor: pointer;\n white-space: nowrap;\n box-sizing: border-box;\n text-decoration: none;\n transition: background 100ms, box-shadow 300ms;\n}\n.btn-contained[data-v-9fecb26c]:hover,\n.btn-contained[data-v-9fecb26c]:focus {\n box-shadow: var(--focus-elevation);\n}\n.btn-contained[data-v-9fecb26c]:active:hover {\n box-shadow: var(--active-elevation);\n}\n.disabled[data-v-9fecb26c] {\n opacity: 0.5;\n pointer-events: none;\n}\n";
styleInject(css_248z$4);script$3.render = render$3;
script$3.__scopeId = "data-v-9fecb26c";// vue
var script$4 = vue.defineComponent({
props: {
elevation: {
type: Number,
default: 2
},
borderRadius: {
type: Number,
default: 5
}
},
// eslint-disable-next-line
setup: function setup(props) {
// computed
var cssProperties = vue.computed(function () {
return "--card-border-radius: ".concat(props.borderRadius, "px;");
});
return {
props: props,
cssProperties: cssProperties
};
}
});var _withId$4 = /*#__PURE__*/vue.withScopeId("data-v-114efd9e");
var render$4 = /*#__PURE__*/_withId$4(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", {
class: ["card", ["elevation-".concat(_ctx.props.elevation), "elevation-background-".concat(_ctx.props.elevation)]],
style: _ctx.cssProperties
}, [vue.renderSlot(_ctx.$slots, "default")], 6);
});var css_248z$5 = "\n.card[data-v-114efd9e] {\n position: relative;\n border-radius: var(--card-border-radius);\n overflow: hidden;\n transition: box-shadow 0.2s;\n}\n";
styleInject(css_248z$5);script$4.render = render$4;
script$4.__scopeId = "data-v-114efd9e";// vue
var script$5 = vue.defineComponent({
// eslint-disable-next-line
setup: function setup(props) {
return {
props: props
};
}
});var _withId$5 = /*#__PURE__*/vue.withScopeId("data-v-e2fc2772");
vue.pushScopeId("data-v-e2fc2772");
var _hoisted_1$3 = {
class: "card-content"
};
vue.popScopeId();
var render$5 = /*#__PURE__*/_withId$5(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$3, [vue.renderSlot(_ctx.$slots, "default")]);
});var css_248z$6 = "\n.card-content[data-v-e2fc2772] {\n padding: 15px 20px;\n}\n";
styleInject(css_248z$6);script$5.render = render$5;
script$5.__scopeId = "data-v-e2fc2772";// vue
var script$6 = vue.defineComponent({
// eslint-disable-next-line
setup: function setup(props) {
return {
props: props
};
}
});var _withId$6 = /*#__PURE__*/vue.withScopeId("data-v-4bb1fe1a");
vue.pushScopeId("data-v-4bb1fe1a");
var _hoisted_1$4 = {
class: "card-header"
};
vue.popScopeId();
var render$6 = /*#__PURE__*/_withId$6(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")]);
});var css_248z$7 = "\n.card-header[data-v-4bb1fe1a] {\n padding: 15px 20px;\n font-size: 1.2rem;\n font-weight: 500;\n}\n";
styleInject(css_248z$7);script$6.render = render$6;
script$6.__scopeId = "data-v-4bb1fe1a";// vue
var script$7 = vue.defineComponent({
setup: function setup() {
return {};
}
});var _withId$7 = /*#__PURE__*/vue.withScopeId("data-v-bebb5804");
vue.pushScopeId("data-v-bebb5804");
var _hoisted_1$5 = {
class: "container"
};
var _hoisted_2$1 = {
class: "content"
};
vue.popScopeId();
var render$7 = /*#__PURE__*/_withId$7(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$5, [vue.createVNode("div", _hoisted_2$1, [vue.renderSlot(_ctx.$slots, "default")])]);
});var css_248z$8 = "\n.container[data-v-bebb5804] {\n display: flex;\n justify-content: center;\n padding: 0 calc(var(--default-margin) * 4);\n}\n.content[data-v-bebb5804] {\n flex: 1;\n max-width: 1200px;\n width: 100%;\n}\n";
styleInject(css_248z$8);script$7.render = render$7;
script$7.__scopeId = "data-v-bebb5804";// vue
var script$8 = vue.defineComponent({
props: {
modelValue: {
type: [String, Number]
},
variant: {
type: String,
validator: function validator(prop) {
return ['filled', 'outlined'].includes(prop);
},
default: 'filled'
},
label: {
type: String,
default: 'Default'
}
},
// eslint-disable-next-line
setup: function setup(props, context) {
// refs
var datePicker = vue.ref(null); // methods
var updateValue = function updateValue(e) {
var val = e.target.value;
context.emit('update:modelValue', val);
};
return {
props: props,
datePicker: datePicker,
updateValue: updateValue
};
}
});var _withId$8 = /*#__PURE__*/vue.withScopeId("data-v-7427c44c");
vue.pushScopeId("data-v-7427c44c");
var _hoisted_1$6 = /*#__PURE__*/vue.createVNode("div", {
class: "date-picker-left"
}, null, -1);
var _hoisted_2$2 = {
class: "date-picker-notch date-picker-notch-filled"
};
var _hoisted_3$1 = /*#__PURE__*/vue.createVNode("div", {
class: "date-picker-right"
}, null, -1);
vue.popScopeId();
var render$8 = /*#__PURE__*/_withId$8(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", {
class: ["date-picker", 'date-picker-' + _ctx.props.variant]
}, [vue.createVNode("input", {
class: "date-picker-input",
type: "date",
ref: "datePicker",
value: _ctx.modelValue,
onInput: _cache[1] || (_cache[1] = function () {
return _ctx.updateValue && _ctx.updateValue.apply(_ctx, arguments);
})
}, null, 40, ["value"]), _hoisted_1$6, vue.createVNode("div", _hoisted_2$2, [vue.createVNode("div", {
class: ["date-picker-label", {
'date-picker-label-filled': _ctx.isInputFilled
}]
}, vue.toDisplayString(_ctx.props.label), 3)]), _hoisted_3$1], 2);
});var css_248z$9 = "\n.date-picker[data-v-7427c44c] {\n --font-size: 1rem;\n --label-padding: 6px;\n --horizontal-padding: 16px;\n --border: 1px solid rgba(var(--default-color), 0.42);\n --height: calc(\n var(--font-size) + (var(--padding-top) + var(--padding-bottom)) + 2px\n );\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n}\n.date-picker-filled[data-v-7427c44c] {\n --padding-top: 24px;\n --padding-bottom: calc(38px - var(--padding-top));\n transition: background 0.2s;\n}\n.date-picker-filled[data-v-7427c44c]:hover {\n --padding-bottom: calc(38px - var(--padding-top));\n}\n.date-picker-outlined[data-v-7427c44c] {\n --padding-top: 18px;\n --padding-bottom: 18px;\n}\n.date-picker-outlined:hover .date-picker-left[data-v-7427c44c],\n.date-picker-outlined:hover .date-picker-notch[data-v-7427c44c],\n.date-picker-outlined:hover .date-picker-right[data-v-7427c44c] {\n --border: 1px solid rgba(var(--default-color), 0.87);\n}\n.date-picker-filled .date-picker-left[data-v-7427c44c],\n.date-picker-filled .date-picker-notch[data-v-7427c44c],\n.date-picker-filled .date-picker-right[data-v-7427c44c] {\n background: rgba(var(--default-color), 0.03);\n}\n.date-picker-filled:hover .date-picker-left[data-v-7427c44c],\n.date-picker-filled:hover .date-picker-notch[data-v-7427c44c],\n.date-picker-filled:hover .date-picker-right[data-v-7427c44c] {\n background: rgba(var(--default-color), 0.06);\n --border: 1px solid rgba(var(--default-color), 0.87);\n}\n.date-picker-left[data-v-7427c44c],\n.date-picker-notch[data-v-7427c44c],\n.date-picker-right[data-v-7427c44c] {\n min-height: 100%;\n max-height: 100%;\n height: 100%;\n}\n.date-picker-left[data-v-7427c44c],\n.date-picker-right[data-v-7427c44c] {\n min-height: var(--height);\n max-height: var(--height);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n}\n.date-picker-notch[data-v-7427c44c] {\n min-height: var(--height);\n max-height: var(--height);\n padding-top: 18px;\n padding-bottom: 18px;\n}\n.date-picker-left[data-v-7427c44c] {\n border-bottom: var(--border);\n padding-left: calc(var(--horizontal-padding) - var(--label-padding));\n border-top-left-radius: 4px;\n}\n.date-picker-outlined .date-picker-left[data-v-7427c44c] {\n border: var(--border);\n border-right: none;\n border-bottom-left-radius: 4px;\n}\n.date-picker-notch[data-v-7427c44c] {\n display: flex;\n align-items: center;\n border-bottom: var(--border);\n}\n.date-picker-outlined .date-picker-notch[data-v-7427c44c] {\n border-top: var(--border);\n}\n.date-picker-right[data-v-7427c44c] {\n border-bottom: var(--border);\n width: 100%;\n border-top-right-radius: 4px;\n}\n.date-picker-outlined .date-picker-right[data-v-7427c44c] {\n border: var(--border);\n border-left: none;\n border-bottom-right-radius: 4px;\n}\n.date-picker input[data-v-7427c44c] {\n flex: 1;\n position: absolute;\n padding: 0 var(--horizontal-padding);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n outline: none;\n border: none;\n border-radius: 5px;\n background: rgba(0, 0, 0, 0);\n color: var(--default-color);\n font-size: var(--font-size);\n width: 100%;\n}\n.date-picker-label[data-v-7427c44c] {\n flex: 1;\n padding: 0 6px;\n color: rgba(var(--default-color), 0.6);\n transition-duration: 0.2s;\n white-space: nowrap;\n font-size: var(--font-size);\n}\n.date-picker-notch[data-v-7427c44c],\n.date-picker-outlined .date-picker-notch-filled[data-v-7427c44c] {\n border-top: none;\n}\n.date-picker-filled .date-picker-notch .date-picker-label[data-v-7427c44c],\n.date-picker-filled .date-picker-label-filled[data-v-7427c44c] {\n transform: translateY(calc((-1 / 4) * var(--height)));\n font-size: 0.8rem;\n}\n.date-picker-outlined .date-picker-notch .date-picker-label[data-v-7427c44c],\n.date-picker-outlined .date-picker-label-filled[data-v-7427c44c] {\n transform: translateY(calc((-1 / 2) * var(--height)));\n font-size: 0.8rem;\n}\n.date-picker-filled input:focus ~ .date-picker-left[data-v-7427c44c],\n.date-picker-filled input:focus ~ .date-picker-notch[data-v-7427c44c],\n.date-picker-filled input:focus ~ .date-picker-right[data-v-7427c44c] {\n background: rgba(var(--default-color), 0.1);\n}\ninput:focus ~ .date-picker-left[data-v-7427c44c],\ninput:focus ~ .date-picker-notch[data-v-7427c44c],\ninput:focus ~ .date-picker-right[data-v-7427c44c] {\n border-color: #4c77d6;\n}\ninput:focus ~ .date-picker-notch .date-picker-label[data-v-7427c44c] {\n color: #4c77d6;\n}\ninput[data-v-7427c44c]:-webkit-autofill,\ninput[data-v-7427c44c]:-webkit-autofill:hover,\ninput[data-v-7427c44c]:-webkit-autofill:focus,\ninput[data-v-7427c44c]:-webkit-autofill:active {\n -webkit-background-clip: text;\n -webkit-text-fill-color: rgb(var(--default-color));\n}\ninput[data-v-7427c44c]::-webkit-outer-spin-button,\ninput[data-v-7427c44c]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\ninput[type='number'][data-v-7427c44c] {\n -moz-appearance: textfield;\n}\n";
styleInject(css_248z$9);script$8.render = render$8;
script$8.__scopeId = "data-v-7427c44c";// vue
var script$9 = vue.defineComponent({
props: {
spacing: {
type: Number,
default: 50
}
},
// eslint-disable-next-line
setup: function setup(props) {
// computed
var cssProperties = vue.computed(function () {
return "--spacing: ".concat(props.spacing, "px;");
});
return {
cssProperties: cssProperties
};
}
});var _withId$9 = /*#__PURE__*/vue.withScopeId("data-v-5c14f881");
var render$9 = /*#__PURE__*/_withId$9(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", {
class: "divider",
style: _ctx.cssProperties
}, null, 4);
});var css_248z$a = "\n.divider[data-v-5c14f881] {\n width: 100%;\n padding-bottom: var(--spacing);\n margin-bottom: var(--spacing);\n border-bottom: 1px solid rgba(var(--default-color), 0.1);\n}\n";
styleInject(css_248z$a);script$9.render = render$9;
script$9.__scopeId = "data-v-5c14f881";var script$a = vue.defineComponent({
props: {
modelValue: {
type: Number,
default: 0
},
label: {
type: String,
default: 'Default'
},
placeholder: {
type: String,
default: 'Select an option'
},
options: {
type: Array,
default: function _default() {
return [];
}
},
value: {
type: String,
default: 'id'
},
title: {
type: String,
default: 'title'
},
sort: {
type: Function,
default: function _default() {
return true;
}
}
},
// eslint-disable-next-line
setup: function setup(props, context) {
// refs
var dropdownField = vue.ref(null); // computed
var isInputFilled = vue.computed(function () {
return props.modelValue > 0;
});
var sortedOptions = vue.computed(function () {
var tmpArray = _toConsumableArray(props.options);
return tmpArray.sort(props.sort);
}); // methods
var updateValue = function updateValue(e) {
var val = parseInt(e.target.value);
context.emit('update:modelValue', val);
};
return {
props: props,
sortedOptions: sortedOptions,
isInputFilled: isInputFilled,
dropdownField: dropdownField,
updateValue: updateValue
};
}
});var _withId$a = /*#__PURE__*/vue.withScopeId("data-v-524e0fcb");
vue.pushScopeId("data-v-524e0fcb");
var _hoisted_1$7 = {
class: "dropdown"
};
var _hoisted_2$3 = {
class: "default-option-text",
value: 0
};
var _hoisted_3$2 = /*#__PURE__*/vue.createVNode("div", {
class: "dropdown-left"
}, null, -1);
var _hoisted_4 = {
class: "dropdown-notch"
};
var _hoisted_5 = {
class: "dropdown-label"
};
var _hoisted_6 = /*#__PURE__*/vue.createVNode("div", {
class: "dropdown-right"
}, null, -1);
vue.popScopeId();
var render$a = /*#__PURE__*/_withId$a(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$7, [vue.createVNode("select", {
class: ["dropdown-field", {
'default-option': !_ctx.isInputFilled
}],
ref: "dropdownField",
value: _ctx.modelValue,
onInput: _cache[1] || (_cache[1] = function () {
return _ctx.updateValue && _ctx.updateValue.apply(_ctx, arguments);
})
}, [vue.createVNode("option", _hoisted_2$3, vue.toDisplayString(_ctx.props.placeholder), 1), (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.sortedOptions, function (option, i) {
return vue.openBlock(), vue.createBlock("option", {
key: i,
value: option[_ctx.props.value]
}, vue.toDisplayString(option[_ctx.props.title]), 9, ["value"]);
}), 128))], 42, ["value"]), _hoisted_3$2, vue.createVNode("div", _hoisted_4, [vue.createVNode("div", _hoisted_5, vue.toDisplayString(_ctx.props.label), 1)]), _hoisted_6]);
});var css_248z$b = "\n.dropdown[data-v-524e0fcb] {\n --font-size: 1.1rem;\n --label-padding: 6px;\n --horizontal-padding: 16px;\n --vertical-padding: 16px;\n --border: 1px solid rgba(var(--default-color), 0.42);\n --height: calc(var(--font-size) + (var(--vertical-padding) * 2) + 2px);\n display: flex;\n width: 100%;\n font-size: 1.1rem;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0);\n position: relative;\n}\n.dropdown[data-v-524e0fcb]:hover {\n --border: 1px solid rgba(var(--default-color), 0.87);\n}\n.dropdown-left[data-v-524e0fcb],\n.dropdown-notch[data-v-524e0fcb],\n.dropdown-right[data-v-524e0fcb] {\n min-height: var(--height);\n max-height: var(--height);\n padding: var(--vertical-padding) 0;\n}\n.dropdown-left[data-v-524e0fcb] {\n padding-left: calc(var(--horizontal-padding) - var(--label-padding));\n border: var(--border);\n border-right: none;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n}\n.dropdown-notch[data-v-524e0fcb] {\n display: flex;\n align-items: center;\n padding: var(--vertical-padding) 0;\n border-bottom: var(--border);\n}\n.dropdown-right[data-v-524e0fcb] {\n width: 100%;\n border: var(--border);\n border-left: none;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.dropdown-field[data-v-524e0fcb] {\n flex: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n font-size: 1.1rem;\n border: none;\n padding: 0 calc(var(--horizontal-padding) - 4px);\n background: rgba(255, 255, 255, 0);\n color: rgb(var(--default-color));\n margin-right: var(--horizontal-padding);\n outline: none;\n}\n.dropdown-label[data-v-524e0fcb] {\n flex: 1;\n padding: 0 6px;\n color: rgba(var(--default-color), 0.6);\n transition-duration: 0.2s;\n transform: translateY(calc((-1 / 2) * var(--height)));\n font-size: 0.8rem;\n white-space: nowrap;\n}\n.dropdown-field option[data-v-524e0fcb] {\n color: rgba(0, 0, 0, 0.8);\n}\n.default-option[data-v-524e0fcb] {\n color: rgba(var(--default-color), 0.6);\n}\n.dropdown-field option.default-option-text[data-v-524e0fcb] {\n color: rgba(0, 0, 0, 0.6);\n}\n.dropdown-field:focus ~ .dropdown-left[data-v-524e0fcb],\n.dropdown-field:focus ~ .dropdown-notch[data-v-524e0fcb],\n.dropdown-field:focus ~ .dropdown-right[data-v-524e0fcb] {\n border-color: #4c77d6;\n}\n.dropdown-field:focus ~ .dropdown-notch .dropdown-label[data-v-524e0fcb] {\n color: #4c77d6;\n}\n";
styleInject(css_248z$b);script$a.render = render$a;
script$a.__scopeId = "data-v-524e0fcb";// vue
var script$b = vue.defineComponent({
props: {
scale: {
type: Number,
default: 1
},
color: {
type: String,
default: 'rgb(145 201 82)'
},
ringWidth: {
type: Number,
default: 6
},
width: {
type: Number,
default: 80
},
height: {
type: Number,
default: 80
}
},
// eslint-disable-next-line
setup: function setup(props) {
// refs
var loadingSpinner = vue.ref(null); // lifecycle hooks
vue.onMounted(function () {
if (loadingSpinner.value) {
loadingSpinner.value.style.setProperty('--spinner-scale', props.scale + '');
loadingSpinner.value.style.setProperty('--spinner-color', props.color);
loadingSpinner.value.style.setProperty('--ring-width', props.ringWidth * props.scale + 'px');
loadingSpinner.value.style.setProperty('--width', props.width * props.scale + 'px');
loadingSpinner.value.style.setProperty('--height', props.height * props.scale + 'px');
}
});
return {
loadingSpinner: loadingSpinner
};
}
});var _withId$b = /*#__PURE__*/vue.withScopeId("data-v-04827584");
vue.pushScopeId("data-v-04827584");
var _hoisted_1$8 = {
class: "loading-spinner-container"
};
var _hoisted_2$4 = /*#__PURE__*/vue.createVNode("span", {
class: "hidden-dash"
}, "-", -1);
var _hoisted_3$3 = {
class: "loading-spinner",
ref: "loadingSpinner"
};
var _hoisted_4$1 = /*#__PURE__*/vue.createVNode("div", {
class: "lds-dual-ring"
}, null, -1);
var _hoisted_5$1 = /*#__PURE__*/vue.createVNode("span", {
class: "hidden-dash"
}, "-", -1);
vue.popScopeId();
var render$b = /*#__PURE__*/_withId$b(function (_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$8, [_hoisted_2$4, vue.createVNode("div", _hoisted_3$3, [_hoisted_4$1], 512), _hoisted_5$1]);
});var css_248z$c = "\n.loading-spinner-container[data-v-04827584] {\n display: flex;\n align-items: center;\n}\n.loading-spinner[data-v-04827584] {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: var(--width);\n height: var(--height);\n min-width: var(--width);\n min-height: var(--height);\n overflow: hidden;\n}\n.lds-dual-ring[data-v-04827584] {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: var(--width);\n height: var(--height);\n min-width: var(--width);\n min-height: var(--height);\n}\n.lds-dual-ring[data-v-04827584]:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: var(--ring-width) solid rgba(255, 255, 255, 0.05);\n box-sizing: border-box;\n}\n.lds-dual-ring[data-v-04827584]:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: var(--ring-width) solid var(--spinner-color);\n border-color: var(--spinner-color) transparent transparent transparent;\n animation: lds-dual-ring-04827584 1.2s linear infinite;\n box-sizing: border-box;\n}\n@keyframes lds-dual-ring-04827584 {\n0% {\n transform: rotate(0deg);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n.hidden-dash[data-v-04827584] {\n user-select: none;\n color: rgba(0, 0, 0, 0);\n}\n";
styleInject(css_248z$c);script$b.render = render$b;
script$b.__scopeId = "data-v-04827584";var script$c = vue.defineComponent({
components: {
VmLoadingSpinner: script$b
},
props: {
config: {
type: Object
},
rowData: {
type: Array,
default: function _default() {
return [];
}
},
editCallback: {
type: Function
},
deleteCallback: {
type: Function
},
isSelectable: {
type: Boolean,
default: false
},
isGridBorder: {
type: Boolean,
default: true
},
isLoading: {
type: Boolean,
default: false
},
maxRows: {
type: Number,
default: 10
}
},
// eslint-disable-next-line
setup: function setup(props) {
// properties
var selectedRowIds = vue.ref([]);
var currentPage = vue.ref(1);
var rowsPerPage = vue.computed(function () {
return props.maxRows ? props.maxRows : 10;
}); // computed
var totalPages = vue.computed(function () {
return Math.ceil(props.rowData.length / rowsPerPage.value);
});
var startRowIndex = vue.computed(function () {
return Math.ceil((currentPage.value - 1) * rowsPerPage.value);
});
var endRowIndex = vue.computed(function () {
var endRow = Math.ceil(currentPage.value * rowsPerPage.value - 1);
if (endRow > props.rowData.length) {
endRow = props.rowData.length - 1;
}
return endRow;
});
var emptyRows = vue.computed(function () {
if (props.isLoading) {
return 0;
}
var assign = 0;
if (currentPage.value === totalPages.value && props.rowData.length % rowsPerPage.value !== 0) {
assign = rowsPerPage.value - Math.floor(props.rowData.length % rowsPerPage.value);
}
return assign;
}); // methods
var selectRowById = function selectRowById(id) {
if (props.isSelectable) {
var index = selectedRowIds.value.indexOf(id);
if (index !== -1) {
selectedRowIds.value.splice(index, 1);
} else {
selectedRowIds.value.push(id);
}
}
};
var getSelectedIds = function getSelectedIds() {
return selectedRowIds.value;
}; // eslint-disable-next-line
var getFilteredRows = function getFilteredRows() {
if (props.isLoading) {
return [];
}
var tmpRows = _toConsumableArray(props.rowData);
return tmpRows.splice(startRowIndex.value, rowsPerPage.value);
};
var setCurrentPage = function setCurrentPage(pageIndex) {
if (pageIndex > 0 && pageIndex <= totalPages.value) {
currentPage.value = pageIndex;
}
};
var incrementCurrentPage = function incrementCurrentPage() {
setCurrentPage(currentPage.value + 1);
};
var decrementCurrentPage = function decrementCurrentPage() {
setCurrentPage(currentPage.value - 1);
};
var goToLastPage = function goToLastPage() {
setCurrentPage(totalPages.value);
};
var goToFirstPage = function goToFirstPage() {
setCurrentPage(1);
};
var deselectAll = function deselectAll() {
selectedRowIds.value = [];
};
return {
props: props,
selectRowById: selectRowById,
selectedRowIds: selectedRowIds,
getSelectedIds: getSelectedIds,
rowsPerPage: rowsPerPage,
currentPage: currentPage,
totalPages: totalPages,
startRowIndex: startRowIndex,
endRowIndex: endRowIndex,
emptyRows: emptyRows,
getFilteredRows: getFilteredRows,
incrementCurrentPage: incrementCurrentPage,
decrementCurrentPage: decrementCurrentPage,
goToLastPage: goToLastPage,
goToFirstPage: goToFirstPage,
deselectAll: deselectAll
};
}
});var _withId$c = /*#__PURE__*/vue.withScopeId("data-v-5a3bb4df");
vue.pushScopeId("data-v-5a3bb4df");
var _hoisted_1$9 = {
class: "grid-wrapper"
};
var _hoisted_2$5 = {
key: 0,
style: {
"width": "1px"
}
};
var _hoisted_3$4 = {
key: 0,
class: "loading-row"
};
var _hoisted_4$2 = {
colspan: "10000"
};
var _hoisted_5$2 = {
class: "row jc-center"
};
var _hoisted_6$1 = {
key: 1
};
var _hoisted_7 = /*#__PURE__*/vue.createVNode("td", {
class: "center-text",
colspan: "10000"
}, " No data available ", -1);
var _hoisted_8 = {
key: 0
};
var _hoisted_9 = {
key: 0
};
var _hoisted_10 = /*#__PURE__*/vue.createVNode("td", null, ".", -1);
var _hoisted_11 = {
class: "pagination"
};
var _hoisted_12 = /*#__PURE__*/vue.createVNode("div", {
class: "row-counter"
}, null, -1);
var _hoisted_13 = {
class: "page-controls"
};
var _hoisted_14 = {
class: "current-page"
};
var _hoisted_15 = /*#__PURE__*/vue.createVNode("i", {
class: "far fa-chevron-double-left"
}, null, -1);
var _hoisted_16 = /*#__PURE__*/vue.createVNode("i", {
class: "far fa-chevron-left"
}, null, -1);
var _hoisted_17 = /*#__PURE__*/vue.createVNode("i", {
class: "far fa-chevron-right"
}, null, -1);
var _hoisted_18 = /*#__PURE__*/vue.createVNode("i", {
class: "far fa-chevron-double-right"
}, null, -1);
vue.popScopeId();
var render$c = /*#__PURE__*/_withId$c(function (_ctx, _cache, $props, $setup, $data, $options) {
var _component_vm_loading_spinner = vue.resolveComponent("vm-loading-spinner");
return vue.openBlock(), vue.createBlock("div", {
class: ["grid-container", {
'grid-border': _ctx.isGridBorder
}]
}, [vue.createVNode("div", _hoisted_1$9, [vue.createVNode("table", {
class: ["grid", {
'is-selectable': _ctx.props.isSelectable
}]
}, [vue.createVNode("thead", null, [vue.createVNode("tr", null, [_ctx.isSelectable ? (vue.openBlock(), vue.createBlock("th", _hoisted_2$5)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.config, function (headerConfig, i) {
return vue.openBlock(), vue.createBlock("th", {
key: i
}, vue.toDisplayString(headerConfig.title), 1);
}), 128))])]), vue.createVNode("tbody", null, [_ctx.isLoading ? (vue.openBlock(), vue.createBlock("tr", _hoisted_3$4, [vue.createVNode("td", _hoisted_4$2, [vue.createVNode("div", _hoisted_5$2, [vue.createVNode(_component_vm_loading_spinner, {
scale: 0.8
}, null, 8, ["scale"])])])])) : vue.createCommentVNode("", true), _ctx.rowData.length === 0 && !_ctx.isLoading ? (vue.openBlock(), vue.createBlock("tr", _hoisted_6$1, [_hoisted_7])) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.getFilteredRows(), function (row, i) {
return vue.openBlock(), vue.createBlock("tr", {
class: {
selected: _ctx.selectedRowIds.indexOf(row.id) !== -1
},
key: i
}, [_ctx.isSelectable ? (vue.openBlock(), vue.createBlock("td", _hoisted_8, [vue.createVNode("input", {
type: "checkbox",
checked: _ctx.selectedRowIds.find(function (x) {
return x === row.id;
}),
onChange: function onChange($event) {
return _ctx.selectRowById(row.id);
}
}, null, 40, ["checked", "onChange"])])) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.config, function (headerConfig, i) {
return vue.openBlock(), vue.createBlock("td", {
class: {
'fit-width': headerConfig.fitWidth
},
key: i
}, [!headerConfig.cellRenderer ? (vue.openBlock(), vue.createBlock("div", _hoisted_9, vue.toDisplayString(row[headerConfig.field]), 1)) : vue.createCommentVNode("", true), headerConfig.cellRenderer ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(headerConfig.cellRenderer.component), {
key: 1,
row: row,
field: headerConfig.field,
exported: headerConfig.cellRenderer.exported
}, null, 8, ["row", "field", "exported"])) : vue.createCommentVNode("", true)], 2);
}), 128))], 2);
}), 128)), (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.emptyRows, function (i) {
return vue.openBlock(), vue.createBlock("tr", {
class: "empty-row",
key: i
}, [_hoisted_10]);
}), 128))])], 2)]), vue.createVNode("div", _hoisted_11, [vue.createVNode("div", {
class: ["pagination-wrapper", {
'pagination-hidden': _ctx.isLoading
}]
}, [_hoisted_12, vue.createVNode("div", _hoisted_13, [vue.createVNode("div", _hoisted_14, vue.toDisplayString(_ctx.rowData.length ? _ctx.startRowIndex + 1 : 0) + "-" + vue.toDisplayString(_ctx.endRowIndex + 1) + " of " + vue.toDisplayString(_ctx.rowData.length), 1), vue.createVNode("div", {
class: "page-control-button",
onClick: _cache[1] || (_cache[1] = function () {
return _ctx.goToFirstPage && _ctx.goToFirstPage.apply(_ctx, arguments);
})
}, [_hoisted_15]), vue.createVNode("div", {
class: "page-control-button",
onClick: _cache[2] || (_cache[2] = function () {
return _ctx.decrementCurrentPage && _ctx.decrementCurrentPage.apply(_ctx, arguments);
})
}, [_hoisted_16]), vue.createVNode("div", {
class: "page-control-button",
onClick: _cache[3] || (_cache[3] = function () {
return _ctx.incrementCurrentPage && _ctx.incrementCurrentPage.apply(_ctx, arguments);
})
}, [_hoisted_17]), vue.createVNode("div", {
class: "page-control-button",
onClick: _cache[4] || (_cache[4] = function () {
return _ctx.goToLastPage && _ctx.goToLastPage.apply(_ctx, arguments);
})
}, [_hoisted_18])])], 2)])], 2);
});var css_248z$d = "\n.grid-container[data-v-5a3bb4df] {\n --grid-border-color: rgba(var(--default-color), 0.3);\n overflow: hidden;\n font-size: 0.9rem;\n flex: 1;\n}\n.grid-wrapper[data-v-5a3bb4df] {\n overflow-x: auto;\n}\n.grid[data-v-5a3bb4df] {\n border-collapse: collapse;\n margin: 0 auto;\n overflow: hidden;\n overflow-x: scroll;\n width: 100%;\n}\n.grid thead tr[data-v-5a3bb4df] {\n color: rgb(var(--default-color));\n text-align: left;\n border-bottom: 1px solid var(--grid-border-color);\n}\n.grid thead tr th[data-v-5a3bb4df] {\n font-weight: 600;\n}\n.grid th[data-v-5a3bb4df] {\n white-space: nowrap;\n padding: 0 16px;\n height: 50px;\n}\n.grid td[data-v-5a3bb4df] {\n height: 46px;\n white-space: nowrap;\n}\n.grid td[data-v-5a3bb4df] {\n padding: 0 16px;\n}\n.grid tbody tr[data-v-5a3bb4df] {\n border-bottom: 1px solid rgba(var(--default-color), 0.1);\n transition-duration: 0.1s;\n}\n.grid tbody tr[data-v-5a3bb4df]:last-child {\n border-bottom: none;\n}\n.grid tbody tr[data-v-5a3bb4df]:hover {\n background: rgba(var(--default-color), 0.02);\n transition-duration: 0.1s;\n}\n.grid.is-selectable tbody tr.selected[data-v-5a3bb4df] {\n background: #d5eaf8;\n}\n.grid tbody tr.empty-row[data-v-5a3bb4df] {\n visibility: hidden;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n}\n.grid tbody tr.empty-row[data-v-5a3bb4df]:last-child {\n border-bottom: none;\n}\n.grid tbody tr td.fit-width[data-v-5a3bb4df] {\n width: 1px;\n white-space: nowrap;\n}\n.pagination-hidden[data-v-5a3bb4df] {\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n}\n.pagination[data-v-5a3bb4df] {\n padding: 10px 10px;\n color: rgb(var(--default-color));\n border-top: 1px solid var(--grid-border-color);\n}\n.pagination-wrapper[data-v-5a3bb4df] {\n display: flex;\n justify-content: space-between;\n}\n.pagination > .pagination-wrapper > .page-controls[data-v-5a3bb4df] {\n display: flex;\n}\n.pagination > .pagination-wrapper > .page-controls > .current-page[data-v-5a3bb4df] {\n padding: 0 10px;\n}\n.pagination > .pagination-wrapper > .page-controls > .page-control-button[data-v-5a3bb4df] {\n color: rgb(var(--default-color), 0.4);\n padding: 0 3px;\n margin: 0 10px;\n cursor: pointer;\n transition-duration: 0.1s;\n}\n.pagination\n > .pagination-wrapper\n > .page-controls\n > .page-control-button[data-v-5a3bb4df]:hover {\n color: rgb(var(--default-color), 0.8);\n transition-duration: 0.1s;\n}\n.grid tbody tr.loading-row[data-v-5a3bb4df] {\n border-bottom: none;\n}\n.grid tbody tr.loading-row td[data-v-5a3bb4df] {\n padding: 10px 0;\n}\n";
styleInject(css_248z$d);script$c.render = render$c;
script$c.__scopeId = "data-v-5a3bb4df";// vue
var script$d = vue.defineComponent({
components: {
VmActionButton: script$1,
VmCard: script$4
},
props: {
title: {
type: String,
default: ''
},
isPreventClose: {
type: Boolean,
default: false
}
},
// eslint-disable-next-line
setup: function setup(props) {
// properties
var isVisible = vue.ref(false); // methods
var show = function show() {
isVisible.value = true;
};
var hide = function hide() {
if (!props.isPreventClose) {
isVisible.value = false;
}
};
return {
props: props,
isVisible: isVisible,
show: show,
hide: hide
};
}
});var _withId