Showing preview only (270K chars total). Download the full file or copy to clipboard to get everything.
Repository: andrewcourtice/vuetiful
Branch: master
Commit: 3bea2aaca0ad
Files: 114
Total size: 243.7 KB
Directory structure:
gitextract_hb937lqj/
├── .babelrc
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .vscode/
│ └── settings.json
├── build/
│ ├── app.js
│ └── components.js
├── dist/
│ └── components/
│ ├── app.style.css
│ └── components.bundle.js
├── index.html
├── license.txt
├── package.json
├── postcss.config.js
├── readme.md
├── src/
│ ├── aggregators/
│ │ ├── aggregators.js
│ │ ├── average.js
│ │ ├── count.js
│ │ ├── max.js
│ │ ├── median.js
│ │ ├── min.js
│ │ ├── standard-deviation.js
│ │ ├── total.js
│ │ └── variance.js
│ ├── assets/
│ │ └── styles/
│ │ ├── abstract/
│ │ │ ├── _functions.scss
│ │ │ ├── _mixins.scss
│ │ │ └── _variables.scss
│ │ ├── core/
│ │ │ ├── _animations.scss
│ │ │ ├── _base.scss
│ │ │ ├── _buttons.scss
│ │ │ ├── _inputs.scss
│ │ │ ├── _labels.scss
│ │ │ ├── _layout.scss
│ │ │ ├── _menus.scss
│ │ │ ├── _tables.scss
│ │ │ └── _typography.scss
│ │ └── site.scss
│ ├── components/
│ │ ├── calendar/
│ │ │ └── calendar.vue
│ │ ├── chip/
│ │ │ └── chip.vue
│ │ ├── components.js
│ │ ├── datatable/
│ │ │ ├── datatable-cell.js
│ │ │ ├── datatable-collection.vue
│ │ │ ├── datatable-column.vue
│ │ │ ├── datatable.vue
│ │ │ └── readme.md
│ │ ├── datetime-picker/
│ │ │ └── datetime-picker.vue
│ │ ├── dynamic/
│ │ │ └── dynamic.js
│ │ ├── floating-panel/
│ │ │ └── floating-panel.vue
│ │ ├── modal/
│ │ │ └── modal.vue
│ │ ├── paginator/
│ │ │ ├── paginator.vue
│ │ │ └── readme.md
│ │ ├── panel/
│ │ │ └── panel.vue
│ │ ├── tab-control/
│ │ │ ├── tab-control.vue
│ │ │ └── tab-pane.vue
│ │ └── toggles/
│ │ ├── checkbox.vue
│ │ ├── radio.vue
│ │ ├── readme.md
│ │ └── toggle.vue
│ ├── directives/
│ │ ├── directives.js
│ │ └── v-drag.js
│ ├── formatters/
│ │ ├── currency.js
│ │ ├── date-long.js
│ │ ├── date-short.js
│ │ ├── datetime.js
│ │ └── formatters.js
│ ├── main.js
│ ├── maps/
│ │ ├── currencies.js
│ │ └── maps.js
│ ├── mixins/
│ │ └── checkable.js
│ ├── polyfills.js
│ ├── services/
│ │ ├── calendar.js
│ │ ├── event-emitter.js
│ │ └── http-client.js
│ ├── utilities/
│ │ ├── average-of.js
│ │ ├── base/
│ │ │ ├── aggregator.js
│ │ │ ├── type-converter.js
│ │ │ └── type-validator.js
│ │ ├── filter-by.js
│ │ ├── first-of.js
│ │ ├── group-by.js
│ │ ├── last-of.js
│ │ ├── map-values.js
│ │ ├── max-of.js
│ │ ├── median-of.js
│ │ ├── min-of.js
│ │ ├── mode-of.js
│ │ ├── nest.js
│ │ ├── page-by.js
│ │ ├── page.js
│ │ ├── sort-by.js
│ │ ├── standard-deviation-of.js
│ │ ├── total-of.js
│ │ └── variance-of.js
│ └── views/
│ ├── components/
│ │ ├── buttons.vue
│ │ ├── components.js
│ │ ├── datatables.vue
│ │ ├── modals.vue
│ │ ├── paginators.vue
│ │ ├── panels.vue
│ │ ├── tab-controls.vue
│ │ ├── toggles.vue
│ │ └── typography.vue
│ └── views.js
├── test/
│ ├── mocha.opts
│ ├── test-data.js
│ └── utilities/
│ ├── average.js
│ ├── group-by.js
│ ├── max-of.js
│ ├── median-of.js
│ ├── min-of.js
│ ├── page.js
│ ├── sort-by.js
│ ├── total-of.js
│ └── validators.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["es2015"]
]
}
================================================
FILE: .eslintrc.json
================================================
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": false
},
"sourceType": "module"
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn"
}
}
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
# Custom for Visual Studio
*.cs diff=csharp
# Standard to msysgit
*.doc diff=astextplain
*.DOC diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot diff=astextplain
*.DOT diff=astextplain
*.pdf diff=astextplain
*.PDF diff=astextplain
*.rtf diff=astextplain
*.RTF diff=astextplain
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
dist/app/
dist/*/report.html
npm-debug.log.*
*.log
================================================
FILE: .vscode/settings.json
================================================
// Place your settings in this file to overwrite default and user settings.
{
"eslint.enable": true
}
================================================
FILE: build/app.js
================================================
// Import Vue and Vue plugins
import Vue from "vue";
import VueRouter from "vue-router";
import Vuetiful from "../src/main";
import views from "../src/views/views";
function registerPlugins() {
Vue.use(Vuetiful);
Vue.use(VueRouter);
}
function buildRoutes() {
let routes = [];
for (let directoryName in views) {
let directory = views[directoryName];
for (let viewName in directory) {
let view = directory[viewName];
let path = `/${directoryName}/${viewName}`;
if (view.params) {
path += "/:" + view.params.join("/:");
}
routes.push({
path: path,
component: view.component
});
}
}
return routes;
}
function buildRootInstance() {
let routes = buildRoutes();
let menuItems = [
{
name: "Buttons",
route: "/components/buttons"
},
{
name: "Datatables",
route: "/components/datatables"
},
{
name: "Modals",
route: "/components/modals"
},
{
name: "Paginators",
route: "/components/paginators"
},
{
name: "Panels",
route: "/components/panels"
},
{
name: "Tab Controls",
route: "/components/tabcontrols"
},
{
name: "Toggles",
route: "/components/toggles"
},
{
name: "Typography",
route: "/components/typography"
}
];
new Vue({
el: '#app',
data() {
return {
menuItems: menuItems
}
},
router: new VueRouter({
routes: routes
})
});
}
function bootstrap() {
registerPlugins();
buildRootInstance();
}
bootstrap();
module.exports = Vuetiful;
================================================
FILE: build/components.js
================================================
import Vuetiful from "../src/main";
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(Vuetiful);
}
module.exports = Vuetiful;
================================================
FILE: dist/components/app.style.css
================================================
html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[layout]{display:-ms-flexbox;display:-webkit-box;display:flex}[layout*=column],[layout*=row]{width:100%;max-width:100%}[layout^=row]{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}[layout^=column]{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}[layout*=row][layout*=reverse]{-ms-flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}[layout*=column][layout*=reverse]{-ms-flex-direction:column-reverse;-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}[layout*=columns],[layout*=rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}[layout=none]{-ms-flex:none;-webkit-box-flex:0;flex:none}[layout*=column][layout*=top-],[layout*=row][layout*=-left]{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}[layout*=column][layout*=center-],[layout*=row][layout*=-center],[layout~=centered]{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}[layout*=column][layout*=bottom-],[layout*=row][layout*=-right]{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}[layout*=column][layout*=spread-],[layout*=row][layout*=-spread]{-ms-flex-pack:distribute;justify-content:space-around}[layout*=column][layout*=justify-],[layout*=row][layout*=-justify]{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}[layout*=column][layout*=-left],[layout*=row][layout*=top-]{-ms-flex-align:start;-ms-grid-row-align:flex-start;-webkit-box-align:start;align-items:flex-start}[layout*=column][layout*=-center],[layout*=row][layout*=center-],[layout~=centered]{-ms-flex-align:center;-ms-grid-row-align:center;-webkit-box-align:center;align-items:center}[layout*=column][layout*=-right],[layout*=row][layout*=bottom-]{-ms-flex-align:end;-ms-grid-row-align:flex-end;-webkit-box-align:end;align-items:flex-end}[layout*=column][layout*=-stretch],[layout*=row][layout*=stretch-]{-ms-flex-align:stretch;-ms-grid-row-align:stretch;-webkit-box-align:stretch;align-items:stretch}[layout*=columns][layout*=-left],[layout*=rows][layout*=top-]{-ms-flex-line-pack:start;align-content:flex-start}[layout*=columns][layout*=-right],[layout*=rows][layout*=bottom-]{-ms-flex-line-pack:end;align-content:flex-end}[layout*=columns][layout*=-center],[layout*=rows][layout*=center-]{-ms-flex-line-pack:center;align-content:center}[layout*=columns][layout*=-justify],[layout*=rows][layout*=justify-]{-ms-flex-line-pack:justify;align-content:space-between}[layout*=columns][layout*=-spread],[layout*=rows][layout*=spread-]{-ms-flex-line-pack:distribute;align-content:space-around}[layout*=columns][layout*=-stretch],[layout*=rows][layout*=stretch-]{-ms-flex-line-pack:stretch;align-content:stretch}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){[layout*=column]:not([layout*=row])>*{max-width:auto}[layout*=column][self*=top]{height:auto!important}[self~=size-]>*{height:auto}}[layout*=column]:not([layout*=row]) [self*=left],[layout*=row]:not([layout*=column]) [self*=top]{-ms-flex-item-align:start;align-self:flex-start}[self~=center]{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}[layout*=column]:not([layout*=row]) [self*=right],[layout*=row]:not([layout*=column]) [self*=bottom]{-ms-flex-item-align:end;align-self:flex-end}[self*=stretch]{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}[layout][self*=center]{margin-left:auto;margin-right:auto}[layout][self*=right]{margin-right:0}[layout][self*=left]{margin-left:0}[layout*=column] [self*=bottom]{margin-top:auto}[layout*=column] [self*=top]{margin-bottom:auto}[layout*=row] [self*=left]{margin-right:auto}[layout*=row] [self*=right]{margin-left:auto}[self~=size-1of5]{width:20%}[self~=size-1of4]{width:25%}[self~=size-1of3]{width:33.33333%}[self~=size-2of5]{width:40%}[self~=size-1of2]{width:50%}[self~=size-3of5]{width:60%}[self~=size-2of3]{width:66.6666%}[self~=size-3of4]{width:75%}[self~=size-4of5]{width:80%}[self~=size-1of1]{width:100%}[layout*=column][layout*=stretch-]>:not([self*=size-]),[layout*=row][layout*=-stretch]>:not([self*=size-]),[self~=size-x1]{-ms-flex:1 0 0%!important;-webkit-box-flex:1!important;flex:1 0 0%!important}[self~=size-x2]{-ms-flex:2 0 0%!important;-webkit-box-flex:2!important;flex:2 0 0%!important}[self~=size-x3]{-ms-flex:3 0 0%!important;-webkit-box-flex:3!important;flex:3 0 0%!important}[self~=size-x4]{-ms-flex:4 0 0%!important;-webkit-box-flex:4!important;flex:4 0 0%!important}[self~=size-x5]{-ms-flex:5 0 0%!important;-webkit-box-flex:5!important;flex:5 0 0%!important}[self~=size-x6]{-ms-flex:6 0 0%!important;-webkit-box-flex:6!important;flex:6 0 0%!important}[self~=size-x7]{-ms-flex:7 0 0%!important;-webkit-box-flex:7!important;flex:7 0 0%!important}[self~=size-x8]{-ms-flex:8 0 0%!important;-webkit-box-flex:8!important;flex:8 0 0%!important}[self~=size-x9]{-ms-flex:9 0 0%!important;-webkit-box-flex:9!important;flex:9 0 0%!important}[self*=size-auto]{-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto}[self*=size-x0]{-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto}[self~=size-xxlarge]{max-width:1440px;width:100%}[self~=size-xlarge]{max-width:1200px;width:100%}[self~=size-large]{max-width:960px;width:100%}[self~=size-larger]{max-width:840px;width:100%}[self~=size-medium]{max-width:720px;width:100%}[self~=size-smaller]{max-width:600px;width:100%}[self~=size-small]{max-width:480px;width:100%}[self~=size-xsmall]{max-width:360px;width:100%}[self~=size-xxsmall]{max-width:240px;width:100%}[self*=size-x]:not([self*=small]):not([self*=large]){-ms-flex-negative:1;flex-shrink:1}[self~=first]{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}[self~=order-1]{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}[self~=order-2]{-ms-flex-order:2;-webkit-box-ordinal-group:3;order:2}[self~=order-3]{-ms-flex-order:3;-webkit-box-ordinal-group:4;order:3}[self~=last]{-ms-flex-order:999;-webkit-box-ordinal-group:1000;order:999}[layout*=column]:not([layout*=row])>*{-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}@media screen and (max-width:64em){[layout*=lg-row]{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}[layout*=lg-column]{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}[layout*=lg-columns],[layout*=lg-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:52em){[layout*=md-row]{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}[layout*=md-column]{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}[layout*=md-columns],[layout*=md-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:40em){[layout*=sm-row]{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}[layout*=sm-column]{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}[layout*=sm-columns],[layout*=sm-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:64em){[self*=lg-full]{-ms-flex:1 1 100%!important;-webkit-box-flex:1!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=lg-half]{-ms-flex:1 1 50%!important;-webkit-box-flex:1!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=lg-first]{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}[self~=lg-last]{-ms-flex-order:999;-webkit-box-ordinal-group:1000;order:999}[self~=lg-hide]{display:none}[self~=lg-show]{display:inherit}}@media screen and (max-width:52em){[self*=md-full]{-ms-flex:1 1 100%!important;-webkit-box-flex:1!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=md-half]{-ms-flex:1 1 50%!important;-webkit-box-flex:1!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=md-first]{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}[self~=md-last]{-ms-flex-order:999;-webkit-box-ordinal-group:1000;order:999}[self~=md-hide]{display:none}[self~=md-show]{display:inherit}}@media screen and (max-width:40em){[self*=sm-full]{-ms-flex:1 1 100%!important;-webkit-box-flex:1!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=sm-half]{-ms-flex:1 1 50%!important;-webkit-box-flex:1!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=sm-first]{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}[self~=sm-last]{-ms-flex-order:999;-webkit-box-ordinal-group:1000;order:999}[self~=sm-hide]{display:none}[self~=sm-show]{display:inherit}}body,html{width:100%;height:100%;margin:0;padding:0}html{font-size:16px;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{font-family:Open Sans,sans-serif;font-weight:400;line-height:1.5em;color:#32394f;background-color:#fff}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}h1,h2,h3,h4,h5,h6{margin-top:1em;margin-bottom:.25em;font-weight:600;line-height:1.5em;color:#32394f}h1{font-size:3.15733em}h2{font-size:2.36859em}h3{font-size:1.77689em}h4{font-size:1.333em}h5{font-size:1em}h6{font-size:.75019em}p{margin:.75em 0}small{font-size:.75019em}strong{font-weight:600}em{font-style:italic}a{color:#2196f3;text-decoration:none}a:hover{color:#0c7cd5}a.escape-link,a.escape-link:hover{color:inherit}label{font-size:.75019em}blockquote,label{display:block;font-weight:600}blockquote{margin:1em 0;padding:0 1em;color:#888;border-left:4px solid #2196f3}code{display:block;margin:1em 0;padding:1em;font-family:monospace;white-space:pre;background-color:#fafafa;border:1px solid #dde;border-radius:2px}.container{width:100%;max-width:1170px;margin:0 auto}.grid-row{margin-left:-.5rem;margin-right:-.5rem}.grid-row+.grid-row{margin-top:1rem}.grid-cell{padding-left:.5rem;padding-right:.5rem}.button{display:inline-block;margin:0;padding:.75rem 1.5rem;font-weight:600;line-height:inherit;text-align:center;color:#fff;background-color:#2196f3;border:none;border-radius:2px;outline:none;cursor:pointer}.button:active,.button:hover{color:#fff;background-color:#0c7cd5}.button-blue{background-color:#2196f3}.button-blue:active,.button-blue:hover{color:#fff;background-color:#0c7cd5}.button-green{background-color:#00b378}.button-green:active,.button-green:hover{color:#fff;background-color:#008056}.button-red{background-color:#f44336}.button-red:active,.button-red:hover{color:#fff;background-color:#ea1c0d}.button-#ff0{background-color:#ffc107}.button-#ff0:active,.button-#ff0:hover{color:#fff;background-color:#d39e00}.button-orange{background-color:#ff9800}.button-orange:active,.button-orange:hover{color:#fff;background-color:#cc7a00}.button-purple{background-color:#673ab7}.button-purple:active,.button-purple:hover{color:#fff;background-color:#512e90}input[type=date],input[type=datetime],input[type=password],input[type=search],input[type=text],input[type=time],select{display:inline-block;width:250px;height:3rem;padding:0 .75rem;background-color:#fff;border:1px solid #dde;border-radius:2px;outline:none}input[type=date]:active,input[type=date]:focus,input[type=datetime]:active,input[type=datetime]:focus,input[type=password]:active,input[type=password]:focus,input[type=search]:active,input[type=search]:focus,input[type=text]:active,input[type=text]:focus,input[type=time]:active,input[type=time]:focus,select:active,select:focus{border-color:#2196f3}.label{display:inline-block;min-width:1.9995em;padding:0 .5em;font-size:.75019em;font-weight:600;line-height:inherit;text-align:center;color:#32394f;background-color:#fafafc;border-radius:2px}.label-blue,.label-primary{color:#fff;background-color:#2196f3}.label-green{color:#fff;background-color:#00b378}.label-red{color:#fff;background-color:#f44336}.label-#ff0{color:#fff;background-color:#ffc107}.label-orange{color:#fff;background-color:#ff9800}.label-purple{color:#fff;background-color:#673ab7}.menu-group:not(:last-child){margin-bottom:1.5rem}.menu-group-title,.menu-item{padding-left:1rem;padding-right:1rem}.menu-group-title{display:block;font-weight:600;margin-bottom:.5rem}.menu-item{padding-top:.25rem;padding-bottom:.25rem}.menu-item:hover{background-color:#fafafc}.table-wrapper{display:block;width:100%;border:1px solid #dde;border-radius:2px}.table-wrapper table{border:none}table{table-layout:fixed;width:100%;background-color:#fff;border-collapse:collapse;border:1px solid #dde}.table-striped tr:nth-child(2n)>td{background-color:#fafafa}td,th{text-align:left}td:last-of-type,th:last-of-type{border-right:none}th{padding:.75rem 1rem;font-weight:600;background-color:#fafafc;border-right:1px solid #dde;border-bottom:1px solid #dde}td{padding:.5rem 1rem;border-right:1px solid #eee;border-bottom:1px solid #eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tbody:last-of-type tr:last-of-type>td,tfoot:last-of-type tr:last-of-type>td{border-bottom:none}tfoot td{font-weight:600}tfoot tr:first-of-type td{border-top:1px solid #dde}.fade-enter-active,.fade-leave-active{transition:opacity .25s ease-out}.fade-enter,.fade-leave{opacity:0}.checkbox{display:inline-block;margin-right:1rem;vertical-align:baseline}.checkbox label{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin-right:.25rem;background-color:#fff;border:1px solid #dde;border-radius:2px;vertical-align:text-bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox label:after{position:absolute;display:block;content:" ";width:.375rem;height:.75rem;top:.125rem;left:.4rem;border-right:.2rem solid #fff;border-bottom:.2rem solid #fff;opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:opacity .15s ease-out}.checkbox input[type=checkbox]{display:none!important}.checkbox input[type=checkbox]:checked+label{background-color:#2196f3;border-color:#2196f3}.checkbox input[type=checkbox]:checked+label:after{opacity:1}.checkbox input[type=checkbox]:disabled+label{background-color:#fafafa;cursor:not-allowed}.chip{display:inline-block;min-width:1.9995em;text-align:left;color:#32394f;background-color:#fafafc;border-radius:2px}.chip-body,.chip-footer{padding:.25rem .5rem}.chip-footer{background-color:#f2f2f7}.chip-close-button{position:relative;width:1.25rem;height:1.25rem;border-radius:2px;cursor:pointer}.chip-close-button:hover{background-color:#dadae9}.chip-close-button:after,.chip-close-button:before{display:block;position:absolute;content:" ";top:50%;left:10%;width:80%;height:2px;margin-top:-1px;background-color:currentColor;-webkit-transform-origin:center center;transform-origin:center center}.chip-close-button:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.chip-close-button:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.datatable th{padding:0}.datatable-linenumber-cell,.datatable-linenumber-column{text-align:center}.datatable-aggregate-cell,.datatable-linenumber-cell{font-weight:600;background-color:#fafafc!important;border-right-color:#dde}.datatable-group-chip{margin-right:.5rem}.datatable-collection .datatable-collection .datatable-resultset{border-top:1px solid #dde}.datatable-group{padding:0;background-color:#fff}.datatable-group,.datatable-groups-header{border-bottom:1px solid #dde}.datatable-group-header{padding:.5rem 1rem;background-color:#fafafc}.datatable-grouping-over{box-shadow:0 0 0 2px #2196f3}.datatable-row-indent{display:inline-block;width:1.5rem;height:1em}.datatable-group-label{font-weight:600}.datatable-info-cell{text-align:center;font-weight:600}.datatable-aggregators .datatable-info-cell{border-bottom:1px solid #dde}.datatable-options{padding:.75rem 1rem;background-color:#fafafc;border-top:1px solid #dde}.datatable-editable .datatable-cell{position:relative;padding:0!important;overflow:visible}.datatable-editable .datatable-cell input,.datatable-editable .datatable-cell select{display:block;width:100%;height:auto;padding:.5rem 1rem;background-color:transparent;border:none;border-radius:0}.datatable-editable .datatable-cell input:active,.datatable-editable .datatable-cell input:focus,.datatable-editable .datatable-cell select:active,.datatable-editable .datatable-cell select:focus{box-shadow:0 0 0 2px #2196f3}.datatable-column{padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datatable-sort-arrow{width:0;height:0;border:.375rem solid transparent}.datatable-sort-arrow-asc{border-bottom-color:currentColor;-webkit-transform:translateY(-.1875rem);transform:translateY(-.1875rem)}.datatable-sort-arrow-desc{border-top-color:currentColor;-webkit-transform:translateY(.1875rem);transform:translateY(.1875rem)}.float{display:inline-block;position:relative}.float-panel{display:block;position:absolute;top:100%;left:0;min-width:250px;min-height:50px;margin-top:5px;background-color:#fff;border-radius:2px;box-shadow:0 2px 3px 0 rgba(0,0,0,.2);z-index:10;-webkit-transform-origin:top left;transform-origin:top left}.float-enter,.float-leave-active{opacity:0;-webkit-transform:scale(0);transform:scale(0)}.float-enter-active,.float-leave-active{transition:opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1)}.modal-transition-enter-active,.modal-transition-leave-active{transition:opacity .2s ease-out}.modal-transition-enter-active .modal,.modal-transition-leave-active .modal{transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.modal-transition-enter,.modal-transition-leave{opacity:0}.modal-transition-enter .modal,.modal-transition-leave .modal{-webkit-transform:scale(.8);transform:scale(.8)}.modal-shade{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3);z-index:1000}.modal{width:640px;background-color:#fff;border-radius:2px;box-shadow:0 0 1px 2px rgba(0,0,0,.1);overflow:hidden}.modal-body,.modal-footer,.modal-header{padding:1rem}.modal-footer{background-color:#fafafc;border-top:1px solid #eee}.modal-title{font-weight:600}.paginator{border:1px solid #dde;border-radius:2px}.paginator-footer{padding:1rem;background-color:#fafafc;border-top:1px solid #dde}.paginator-button{display:inline-block;min-width:1.5em;padding:0 .5rem;font-weight:600;background-color:#dde;border-radius:2px;cursor:pointer}.paginator-button.active{color:#fff;background-color:#2196f3}.paginator-page-number{margin:0 .25rem}.panel{width:100%;min-height:150px;background-color:#fff;border:1px solid #dde;border-radius:2px}.panel-body,.panel-footer,.panel-header{padding:.75rem 1rem}.panel-footer,.panel-header{background-color:#fafafc}.panel-header{border-bottom:1px solid #dde}.panel-footer{border-top:1px solid #dde}.panel-title{font-weight:600}.radio{display:inline-block;margin-right:1rem;vertical-align:baseline}.radio label{position:relative;display:inline-block;width:1.25rem;height:1.25rem;background-color:#fff;border:1px solid #dde;border-radius:50%;vertical-align:text-bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio label:after{position:absolute;display:block;content:" ";width:.5rem;height:.5rem;top:50%;left:50%;margin-top:-.25rem;margin-left:-.25rem;background-color:#fff;border-radius:50%}.radio input[type=radio]{display:none!important}.radio input[type=radio]:checked+label{background-color:#2196f3;border-color:#2196f3}.radio input[type=radio]:disabled+label{background-color:#fafafa;cursor:not-allowed}.tab-control{display:block;border:1px solid #dde;border-radius:2px}.tabs-list{background-color:#fafafa;border-bottom:1px solid #dde}.tab-item{position:relative;padding:.75rem 1rem;font-weight:600;border-right:1px solid #dde;cursor:pointer}.tab-item:after{position:absolute;display:none;content:" ";bottom:-1px;left:0;width:100%;height:1px}.tab-item.active,.tab-item:after{background-color:#fff}.tab-item.active:after{display:block}.tab-pane{min-height:2rem;padding:1rem}.toggle{display:inline-block;margin-right:1rem;vertical-align:baseline}.toggle label{position:relative;display:inline-block;width:2.15rem;height:1.25rem;background-color:#fff;border:1px solid #dde;border-radius:.625rem;vertical-align:text-bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle label:after{position:absolute;display:block;content:" ";width:.8rem;height:.8rem;top:50%;left:.25rem;background-color:#dde;border-radius:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:-webkit-transform .15s ease-out;transition:transform .15s ease-out;transition:transform .15s ease-out,-webkit-transform .15s ease-out}.toggle input[type=checkbox]{display:none!important}.toggle input[type=checkbox]:checked+label{background-color:#2196f3;border-color:#2196f3}.toggle input[type=checkbox]:checked+label:after{background-color:#fff;-webkit-transform:translate(.75rem,-50%);transform:translate(.75rem,-50%)}.toggle input[type=checkbox]:disabled+label{background-color:#fafafa;cursor:not-allowed}
/*# sourceMappingURL=app.style.css.map*/
================================================
FILE: dist/components/components.bundle.js
================================================
var vuetiful=function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return t[r].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=64)}([function(t,e){t.exports=function(t,e,n,r){var a,o=t=t||{},u=typeof t.default;"object"!==u&&"function"!==u||(a=t,o=t.default);var i="function"==typeof o?o.options:o;if(e&&(i.render=e.render,i.staticRenderFns=e.staticRenderFns),n&&(i._scopeId=n),r){var s=Object.create(i.computed||null);Object.keys(r).forEach(function(t){var e=r[t];s[t]=function(){return e}}),i.computed=s}return{esModule:a,exports:o,options:i}}},function(t,e,n){function r(t,e){if(c(t))return new Date(t.getTime());if("string"!=typeof t)return new Date(t);var n=e||{},r=n.additionalDigits;r=null==r?p:Number(r);var l=a(t),f=o(l.date,r),v=f.year,g=f.restDateString,h=u(g,v);if(h){var m,y=h.getTime(),b=0;return l.time&&(b=i(l.time)),l.timezone?m=s(l.timezone):(m=new Date(y+b).getTimezoneOffset(),m=new Date(y+b+m*d).getTimezoneOffset()),new Date(y+b+m*d)}return new Date(t)}function a(t){var e,n={},r=t.split(v);if(g.test(r[0])?(n.date=null,e=r[0]):(n.date=r[0],e=r[1]),e){var a=P.exec(e);a?(n.time=e.replace(a[1],""),n.timezone=a[1]):n.time=e}return n}function o(t,e){var n,r=m[e],a=b[e];if(n=y.exec(t)||a.exec(t)){var o=n[1];return{year:parseInt(o,10),restDateString:t.slice(o.length)}}if(n=h.exec(t)||r.exec(t)){var u=n[1];return{year:100*parseInt(u,10),restDateString:t.slice(u.length)}}return{year:null}}function u(t,e){if(null===e)return null;var n,r,a,o;if(0===t.length)return r=new Date(0),r.setUTCFullYear(e),r;if(n=_.exec(t))return r=new Date(0),a=parseInt(n[1],10)-1,r.setUTCFullYear(e,a),r;if(n=x.exec(t)){r=new Date(0);var u=parseInt(n[1],10);return r.setUTCFullYear(e,0,u),r}if(n=M.exec(t)){r=new Date(0),a=parseInt(n[1],10)-1;var i=parseInt(n[2],10);return r.setUTCFullYear(e,a,i),r}if(n=D.exec(t))return o=parseInt(n[1],10)-1,l(e,o);if(n=w.exec(t)){o=parseInt(n[1],10)-1;return l(e,o,parseInt(n[2],10)-1)}return null}function i(t){var e,n,r;if(e=S.exec(t))return(n=parseFloat(e[1].replace(",",".")))%24*f;if(e=O.exec(t))return n=parseInt(e[1],10),r=parseFloat(e[2].replace(",",".")),n%24*f+r*d;if(e=C.exec(t)){n=parseInt(e[1],10),r=parseInt(e[2],10);var a=parseFloat(e[3].replace(",","."));return n%24*f+r*d+1e3*a}return null}function s(t){var e,n;return(e=j.exec(t))?0:(e=N.exec(t))?(n=60*parseInt(e[2],10),"+"===e[1]?-n:n):(e=T.exec(t),e?(n=60*parseInt(e[2],10)+parseInt(e[3],10),"+"===e[1]?-n:n):0)}function l(t,e,n){e=e||0,n=n||0;var r=new Date(0);r.setUTCFullYear(t,0,4);var a=r.getUTCDay()||7,o=7*e+n+1-a;return r.setUTCDate(r.getUTCDate()+o),r}var c=n(60),f=36e5,d=6e4,p=2,v=/[T ]/,g=/:/,h=/^(\d{2})$/,m=[/^([+-]\d{2})$/,/^([+-]\d{3})$/,/^([+-]\d{4})$/],y=/^(\d{4})/,b=[/^([+-]\d{4})/,/^([+-]\d{5})/,/^([+-]\d{6})/],_=/^-(\d{2})$/,x=/^-?(\d{3})$/,M=/^-?(\d{2})-?(\d{2})$/,D=/^-?W(\d{2})$/,w=/^-?W(\d{2})-?(\d{1})$/,S=/^(\d{2}([.,]\d*)?)$/,O=/^(\d{2}):?(\d{2}([.,]\d*)?)$/,C=/^(\d{2}):?(\d{2}):?(\d{2}([.,]\d*)?)$/,P=/([Z+-].*)$/,j=/^(Z)$/,N=/^([+-])(\d{2})$/,T=/^([+-])(\d{2}):?(\d{2})$/;t.exports=r},function(t,e,n){var r=n(29)("wks"),a=n(12),o=n(3).Symbol,u="function"==typeof o;(t.exports=function(t){return r[t]||(r[t]=u&&o[t]||(u?o:a)("Symbol."+t))}).store=r},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(8),a=n(17);t.exports=n(7)?function(t,e,n){return r.f(t,e,a(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(48),a=n(21);t.exports=function(t){return r(a(t))}},function(t,e,n){t.exports=!n(15)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(14),a=n(47),o=n(31),u=Object.defineProperty;e.f=n(7)?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),a)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var r=n(3),a=n(5),o=n(4),u=n(12)("src"),i=Function.toString,s=(""+i).split("toString");n(9).inspectSource=function(t){return i.call(t)},(t.exports=function(t,e,n,i){var l="function"==typeof n;l&&(o(n,"name")||a(n,"name",e)),t[e]!==n&&(l&&(o(n,u)||a(n,u,t[e]?""+t[e]:s.join(String(e)))),t===r?t[e]=n:i?t[e]?t[e]=n:a(t,e,n):(delete t[e],a(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[u]||i.call(this)})},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e,n){"use strict";function r(t,e,n){var r=n||0,a=!0,o=!1,u=void 0;try{for(var i,s=t[Symbol.iterator]();!(a=(i=s.next()).done);a=!0){var l=i.value,c=e.call(this,r,l,t);if(!1===c)return!1;r=c}}catch(t){o=!0,u=t}finally{try{!a&&s.return&&s.return()}finally{if(o)throw u}}return r}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){var r=n(10);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){var r=n(54),a=n(22);t.exports=Object.keys||function(t){return r(t,a)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){"use strict";function r(t,e){return(0,a.format)(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(62)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={model:{prop:"source",event:"change"},props:{id:{type:String,required:!0},source:{required:!0},value:{required:!1},disabled:{type:Boolean,default:!1}},data:function(){return{proxy:!1}},computed:{checked:{get:function(){return this.source},set:function(t){this.proxy=t,this.$emit("change",this.proxy)}}}}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(3),a=n(9),o=n(5),u=n(11),i=n(45),s=function(t,e,n){var l,c,f,d,p=t&s.F,v=t&s.G,g=t&s.S,h=t&s.P,m=t&s.B,y=v?r:g?r[e]||(r[e]={}):(r[e]||{}).prototype,b=v?a:a[e]||(a[e]={}),_=b.prototype||(b.prototype={});v&&(n=e);for(l in n)c=!p&&y&&void 0!==y[l],f=(c?y:n)[l],d=m&&c?i(f,r):h&&"function"==typeof f?i(Function.call,f):f,y&&u(y,l,f,t&s.U),b[l]!=f&&o(b,l,d),h&&_[l]!=f&&(_[l]=f)};r.core=a,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,e){t.exports={}},function(t,e){t.exports=!1},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(8).f,a=n(4),o=n(2)("toStringTag");t.exports=function(t,e,n){t&&!a(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},function(t,e,n){var r=n(29)("keys"),a=n(12);t.exports=function(t){return r[t]||(r[t]=a(t))}},function(t,e,n){var r=n(3),a=r["__core-js_shared__"]||(r["__core-js_shared__"]={});t.exports=function(t){return a[t]||(a[t]={})}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(10);t.exports=function(t,e){if(!r(t))return t;var n,a;if(e&&"function"==typeof(n=t.toString)&&!r(a=n.call(t)))return a;if("function"==typeof(n=t.valueOf)&&!r(a=n.call(t)))return a;if(!e&&"function"==typeof(n=t.toString)&&!r(a=n.call(t)))return a;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(3),a=n(9),o=n(25),u=n(33),i=n(8).f;t.exports=function(t){var e=a.Symbol||(a.Symbol=o?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||i(e,t,{value:u.f(t)})}},function(t,e,n){e.f=n(2)},function(t,e,n){function r(t){return a(t,{weekStartsOn:1})}var a=n(153);t.exports=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={AED:"د.إ",AFN:"؋",ALL:"L",ANG:"ƒ",AOA:"Kz",ARS:"$",AUD:"$",AWG:"ƒ",AZN:"₼",BAM:"KM",BBD:"$",BDT:"৳",BGN:"лв",BHD:".د.ب",BIF:"FBu",BMD:"$",BND:"$",BOB:"Bs.",BRL:"R$",BSD:"$",BTN:"Nu.",BWP:"P",BYR:"p.",BZD:"BZ$",CAD:"$",CDF:"FC",CHF:"Fr.",CLP:"$",CNY:"¥",COP:"$",CRC:"₡",CUC:"$",CUP:"₱",CVE:"$",CZK:"Kč",DJF:"Fdj",DKK:"kr",DOP:"RD$",DZD:"دج",EEK:"kr",EGP:"£",ERN:"Nfk",ETB:"Br",EUR:"€",FJD:"$",FKP:"£",GBP:"£",GEL:"₾",GGP:"£",GHC:"₵",GHS:"GH₵",GIP:"£",GMD:"D",GNF:"FG",GTQ:"Q",GYD:"$",HKD:"$",HNL:"L",HRK:"kn",HTG:"G",HUF:"Ft",IDR:"Rp",ILS:"₪",IMP:"£",INR:"₹",IQD:"ع.د",IRR:"﷼",ISK:"kr",JEP:"£",JMD:"J$",JPY:"¥",KES:"KSh",KGS:"лв",KHR:"៛",KMF:"CF",KPW:"₩",KRW:"₩",KYD:"$",KZT:"₸",LAK:"₭",LBP:"£",LKR:"₨",LRD:"$",LSL:"M",LTL:"Lt",LVL:"Ls",MAD:"MAD",MDL:"lei",MGA:"Ar",MKD:"ден",MMK:"K",MNT:"₮",MOP:"MOP$",MUR:"₨",MVR:"Rf",MWK:"MK",MXN:"$",MYR:"RM",MZN:"MT",NAD:"$",NGN:"₦",NIO:"C$",NOK:"kr",NPR:"₨",NZD:"$",OMR:"﷼",PAB:"B/.",PEN:"S/.",PGK:"K",PHP:"₱",PKR:"₨",PLN:"zł",PYG:"Gs",QAR:"﷼",RMB:"￥",RON:"lei",RSD:"Дин.",RUB:"₽",RWF:"R₣",SAR:"﷼",SBD:"$",SCR:"₨",SDG:"ج.س.",SEK:"kr",SGD:"$",SHP:"£",SLL:"Le",SOS:"S",SRD:"$",SSP:"£",STD:"Db",SVC:"$",SYP:"£",SZL:"E",THB:"฿",TJS:"SM",TMT:"T",TND:"د.ت",TOP:"T$",TRL:"₤",TRY:"₺",TTD:"TT$",TVD:"$",TWD:"NT$",TZS:"TSh",UAH:"₴",UGX:"USh",USD:"$",UYU:"$U",UZS:"лв",VEF:"Bs",VND:"₫",VUV:"VT",WST:"WS$",XAF:"FCFA",XBT:"Ƀ",XCD:"$",XOF:"CFA",XPF:"₣",YER:"﷼",ZAR:"R",ZWD:"Z$",BTC:"฿"}},function(t,e,n){"use strict";function r(t,e){var n=(0,o.default)(t,e);return!!n&&n/t.length}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(42),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function r(t){var e=!0,n=!1,r=void 0;try{for(var a,o=i[Symbol.iterator]();!(e=(a=o.next()).done);e=!0){var u=a.value;if(u.test(t))return u.toNumber}}catch(t){n=!0,r=t}finally{try{!e&&o.return&&o.return()}finally{if(n)throw r}}return function(t){return t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(38),o=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(a),u=/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/,i=[{test:function(t){return!!o.isNumber(t)||u.test(t)},toNumber:parseFloat},{test:function(t){if(o.isDate(t))return!0;var e=new Date(t);return o.isDate(e)},toNumber:function(t){return new Date(t).getTime()}}]},function(t,e,n){"use strict";function r(t,e){return e===Object.prototype.toString.call(t)}function a(t){for(var e=!1,n=0,r=arguments.length,a=Array(r>1?r-1:0),o=1;o<r;o++)a[o-1]=arguments[o];for(;!e&&n<a.length;)e=a[n].call(this,t),n++;return e}function o(t){return r(t,g.array)}function u(t){return r(t,g.boolean)}function i(t){return r(t,g.date)&&!isNaN(t.getTime())}function s(t){return r(t,g.null)}function l(t){return r(t,g.number)}function c(t){return r(t,g.object)}function f(t){return r(t,g.string)}function d(t){return r(t,g.undefined)}function p(t){return!a(t,o,i,c)}function v(t){return a(t,o,c)}Object.defineProperty(e,"__esModule",{value:!0}),e.isAny=a,e.isArray=o,e.isBoolean=u,e.isDate=i,e.isNull=s,e.isNumber=l,e.isObject=c,e.isString=f,e.isUndefined=d,e.isPrimitive=p,e.isCollection=v;var g={array:"[object Array]",boolean:"[object Boolean]",date:"[object Date]",null:"[object Null]",number:"[object Number]",object:"[object Object]",string:"[object String]",undefined:"[object Undefined]"}},function(t,e,n){"use strict";function r(t,e){if(!e)return t;for(var n=[],r=0;r<t.length;r++){var u=t[r];for(var i in u){var s=u[i];if(!(o.indexOf(void 0===s?"undefined":a(s))<0)){if(s.toString().toLowerCase().indexOf(e.toLowerCase())>-1){n.push(u);break}}}}return n}Object.defineProperty(e,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.default=r;var o=["string","number","boolean"]},function(t,e,n){"use strict";function r(t,e){e=e||function(t){return t};var n={},r=!0,a=!1,o=void 0;try{for(var u,i=t[Symbol.iterator]();!(r=(u=i.next()).done);r=!0){var s=u.value,l=e.call(t,s);n.hasOwnProperty(l)||(n[l]=[]),n[l].push(s)}}catch(t){a=!0,o=t}finally{try{!r&&i.return&&i.return()}finally{if(a)throw o}}return n}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}function a(t,e,n){if(n=n||1,e=e||function(t){return t},1!==Math.abs(n))throw new Error("Sort direction must be either 1 (ascending) or -1 (descending)");var a=[].concat(r(t));return a.sort(function(r,a){var o=e.call(t,r),u=e.call(t,a);return(o<u?-1:o>u?1:0)*n}),a}Object.defineProperty(e,"__esModule",{value:!0}),e.default=a},function(t,e,n){"use strict";function r(t,e){var n=parseFloat(e);return!isNaN(n)&&t+n}function a(t,e){return e=e||function(t){return t},(0,u.default)(t,function(t,n,a){var o=e.call(a,n);return r.call(a,t,o)})}Object.defineProperty(e,"__esModule",{value:!0}),e.default=a;var o=n(13),u=function(t){return t&&t.__esModule?t:{default:t}}(o)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e){var n=t.length,r=(0,s.default)(t,e),a=(0,u.default)(t,function(t,n,a){var o=e.call(a,n);return t+Math.pow(o-r,2)});return!!a&&a/n}Object.defineProperty(e,"__esModule",{value:!0}),e.default=a;var o=n(13),u=r(o),i=n(36),s=r(i)},function(t,e,n){var r=n(2)("unscopables"),a=Array.prototype;void 0==a[r]&&n(5)(a,r,{}),t.exports=function(t){a[r][t]=!0}},function(t,e,n){var r=n(112);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,a){return t.call(e,n,r,a)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(10),a=n(3).document,o=r(a)&&r(a.createElement);t.exports=function(t){return o?a.createElement(t):{}}},function(t,e,n){t.exports=!n(7)&&!n(15)(function(){return 7!=Object.defineProperty(n(46)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(20);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(20);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(25),a=n(23),o=n(11),u=n(5),i=n(4),s=n(24),l=n(120),c=n(27),f=n(127),d=n(2)("iterator"),p=!([].keys&&"next"in[].keys()),v=function(){return this};t.exports=function(t,e,n,g,h,m,y){l(n,e,g);var b,_,x,M=function(t){if(!p&&t in O)return O[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},D=e+" Iterator",w="values"==h,S=!1,O=t.prototype,C=O[d]||O["@@iterator"]||h&&O[h],P=C||M(h),j=h?w?M("entries"):P:void 0,N="Array"==e?O.entries||C:C;if(N&&(x=f(N.call(new t)))!==Object.prototype&&(c(x,D,!0),r||i(x,d)||u(x,d,v)),w&&C&&"values"!==C.name&&(S=!0,P=function(){return C.call(this)}),r&&!y||!p&&!S&&O[d]||u(O,d,P),s[e]=P,s[D]=v,h)if(b={values:w?P:M("values"),keys:m?P:M("keys"),entries:j},y)for(_ in b)_ in O||o(O,_,b[_]);else a(a.P+a.F*(p||S),e,b);return b}},function(t,e,n){var r=n(14),a=n(124),o=n(22),u=n(28)("IE_PROTO"),i=function(){},s=function(){var t,e=n(46)("iframe"),r=o.length;for(e.style.display="none",n(119).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write("<script>document.F=Object<\/script>"),t.close(),s=t.F;r--;)delete s.prototype[o[r]];return s()};t.exports=Object.create||function(t,e){var n;return null!==t?(i.prototype=r(t),n=new i,i.prototype=null,n[u]=t):n=s(),void 0===e?n:a(n,e)}},function(t,e,n){var r=n(54),a=n(22).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,a)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(4),a=n(6),o=n(113)(!1),u=n(28)("IE_PROTO");t.exports=function(t,e){var n,i=a(t),s=0,l=[];for(n in i)n!=u&&r(i,n)&&l.push(n);for(;e.length>s;)r(i,n=e[s++])&&(~o(l,n)||l.push(n));return l}},function(t,e,n){var r=n(30),a=Math.min;t.exports=function(t){return t>0?a(r(t),9007199254740991):0}},function(t,e,n){var r=n(21);t.exports=function(t){return Object(r(t))}},function(t,e,n){function r(t,e){var n=a(t),r=Number(e),u=n.getMonth()+r,i=new Date(0);i.setFullYear(n.getFullYear(),u,1),i.setHours(0,0,0,0);var s=o(i);return n.setMonth(u,Math.min(s,n.getDate())),n}var a=n(1),o=n(58);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=e.getFullYear(),r=e.getMonth(),o=new Date(0);return o.setFullYear(n,r+1,0),o.setHours(0,0,0,0),o.getDate()}var a=n(1);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=e.getFullYear(),r=new Date(0);r.setFullYear(n+1,0,4),r.setHours(0,0,0,0);var u=o(r),i=new Date(0);i.setFullYear(n,0,4),i.setHours(0,0,0,0);var s=o(i);return e.getTime()>=u.getTime()?n+1:e.getTime()>=s.getTime()?n:n-1}var a=n(1),o=n(34);t.exports=r},function(t,e){function n(t){return t instanceof Date}t.exports=n},function(t,e,n){function r(t){if(a(t))return!isNaN(t);throw new TypeError(toString.call(t)+" is not an instance of Date")}var a=n(60);t.exports=r},function(t,e){t.exports=dateFns},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t){for(var e in i.default){var n=i.default[e];t.component(e,n)}}function o(t){for(var e in l.default){var n=l.default[e];t.directive(e,n)}}Object.defineProperty(e,"__esModule",{value:!0}),n(99),n(156),n(157);var u=n(89),i=r(u),s=n(92),l=r(s),c=n(80),f=r(c),d=n(97),p=r(d),v=n(98),g=r(v);e.default={install:function(t){a(t),o(t)},aggregators:f.default,formatters:p.default,maps:g.default}},function(t,e,n){"use strict";var r=n(63),a=function(t){return t&&t.__esModule?t:{default:t}}(r);"undefined"!=typeof window&&window.Vue&&window.Vue.use(a.default),t.exports=a.default},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(100),o=r(a),u=n(141),i=r(u);e.default={data:function(){return{calendar:new o.default}},methods:{previous:function(){this.calendar.previousMonth()},next:function(){this.calendar.nextMonth()}},filters:{date:function(t,e){return(0,i.default)(t,e)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{removable:{type:Boolean,default:!0}},methods:{remove:function(){this.$emit("remove",this)}}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(90),o=r(a),u=n(40),i=r(u);e.default={name:"datatable-collection",props:{rows:{type:Array,required:!0},columns:{type:Array,required:!0},groupingColumns:{type:Array},groupingIndex:{type:Number,default:0},striped:{type:Boolean,default:!0},editable:{type:Boolean,default:!1},lineNumbers:{type:Boolean,default:!1},aggregated:{type:Boolean,default:!1},margin:{type:String,default:"1.5em"},collectionIndex:{type:Number,default:0},optimize:{type:Boolean,default:!1},message:{type:String,default:"No results",required:!1}},computed:{groupable:function(){return this.groupingIndex<this.groupingColumns.length},groupingColumn:function(){var t=this.groupingColumns[this.groupingIndex];return this.columns.find(function(e){return e.id===t})},groups:function(){var t=this.groupingColumn.id;return(0,i.default)(this.rows,function(e){return e[t]})},columnSpan:function(){return this.columns.length+(this.lineNumbers?1:0)},indentStyle:function(){return{"margin-left":1.5*this.groupingIndex+"rem"}}},components:{datatableCell:o.default}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=["left","center","right","auto"],a={1:"asc","-1":"desc"};e.default={props:{id:{type:String,required:!0},label:{type:String},width:{type:[Number,String]},alignment:{type:String,default:"left",validator:function(t){return r.indexOf(t)>-1}},formatter:{type:Function},sortable:{type:Boolean,default:!0},groupable:{type:Boolean,default:!0},aggregators:{type:Array}},data:function(){return{sortingDirection:1}},computed:{sorting:{get:function(){return this.$parent.sortingId===this.id&&this.sortable},set:function(t){t&&this.sortable&&(this.$parent.sortingId=this.id)}},grouping:{get:function(){return this.$parent.groupingColumnIds.indexOf(this.id)>-1}},columnWidth:function(){if(this.width){var t=isNaN(this.width)?"":"%";return this.width+t}},columnLayout:function(){return("right"!==this.alignment?"row":"row-reverse")+" center-justify"},columnStyles:function(){var t="left"===this.alignment?null:this.alignment;return{width:this.columnWidth,textAlign:t}},sortArrowClass:function(){return"datatable-sort-arrow-"+a[this.sortingDirection]},template:function(){return this.$parent.$scopedSlots[this.id]}},methods:{sort:function(){if(this.sorting)return void(this.sortingDirection*=-1);this.sorting=!0},formatData:function(t){return this.formatter?this.formatter(t):t},dragStart:function(t){t.stopPropagation(),t.dataTransfer.dropEffect="copy",t.dataTransfer.setData("text",this.id)}},created:function(){var t=this.$parent.addColumn;if(!t)return void console.warn("A datatable-column must be registered within a datatable component.");t(this)},destroyed:function(){this.$parent.removeColumn(this)}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(172),o=r(a),u=n(39),i=r(u),s=n(41),l=r(s),c=n(38);e.default={props:{fixed:{type:Boolean,default:!0},striped:{type:Boolean,default:!0},source:{type:Array,default:function(){return[]}},editable:{type:Boolean,default:!1},filterable:{type:Boolean,default:!0},lineNumbers:{type:Boolean,default:!1},threshold:{type:Number,default:50},message:{type:String,default:"No results"}},data:function(){return{columns:[],filter:null,sortingId:null,groupingColumnIds:[],groupingDropzoneActive:!1}},computed:{sortingColumn:function(){var t=this;return this.columns.find(function(e){return e.id===t.sortingId})},groupingColumns:function(){var t=this;return this.groupingColumnIds.map(function(e){return t.columns.find(function(t){return t.id===e})})},tableClasses:function(){return{"datatable-editable":this.editable,"table-fixed":this.fixed}},groupableColumns:function(){return this.columns.filter(function(t){return t.groupable})},rows:function(){var t=this,e=this.source;return this.filter&&(e=(0,i.default)(e,this.filter)),this.sortingColumn&&(e=(0,l.default)(e,function(e){return e[t.sortingColumn.id]},this.sortingColumn.sortingDirection)),e},columnSpan:function(){var t=this.columns.length;return this.lineNumbers&&t++,this.aggregated&&t++,t},lineColumnWidth:function(){return this.source.length.toString().length+2+"em"},aggregators:function(){var t=[],e=!0,n=!1,r=void 0;try{for(var a,o=this.columns[Symbol.iterator]();!(e=(a=o.next()).done);e=!0){var u=a.value;u.aggregators&&(t=t.concat(u.aggregators))}}catch(t){n=!0,r=t}finally{try{!e&&o.return&&o.return()}finally{if(n)throw r}}return t.filter(function(t,e,n){return e===n.indexOf(t)})},aggregated:function(){return this.aggregators&&this.aggregators.length>0},optimize:function(){return this.source.length>=this.threshold}},methods:{addColumn:function(t){this.columns.push(t)},removeColumn:function(t){var e=this.columns.indexOf(t);this.columns.splice(e,1)},groupColumn:function(t){this.groupingColumnIds.push(t.id)},degroupColumn:function(t){var e=this.groupingColumnIds.indexOf(t.id);this.groupingColumnIds.splice(e,1)},aggregate:function(t,e){if(!t.aggregators||-1===t.aggregators.indexOf(e))return" ";var n=e.callback.call(t,this.rows,function(e){return e[t.id]});return!n||(0,c.isCollection)(n)?" ":e.format?t.formatData(n):n},dragDrop:function(t){t.preventDefault();var e=t.dataTransfer.getData("text"),n=this.groupableColumns.find(function(t){return t.id===e});n&&!n.grouping&&this.groupColumn(n)},dragOver:function(t){t.preventDefault()},dragEnter:function(t){t.preventDefault(),this.groupingDropzoneActive=!0},dragLeave:function(t){t.preventDefault(),this.groupingDropzoneActive=!1}},components:{datatableCollection:o.default}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(62),a=new Date(-864e13),o=new Date(864e13);e.default={props:{value:{required:!0},type:{type:String,default:"date"},format:{type:String,default:"DD-MM-YYYY"},minDate:{type:Date,default:function(){return a}},maxDate:{type:Date,default:function(){return o}},minHour:{type:Number,default:0},maxHour:{type:Number,default:23},minMinute:{type:Number,default:0},maxMinute:{type:Number,default:59}},data:function(){return{visible:!1}},computed:{formattedValue:function(){return this.value&&(0,r.isValid)(this.value)?(0,r.format)(this.value,this.format):null}},methods:{updateValue:function(t){this.$emit("input",t)},show:function(){var t=this;this.visible=!0;var e=function e(n){n.stopPropagation(),t.$el.contains(n.target)||(t.visible=!1,document.removeEventListener("click",e))};document.addEventListener("click",e)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{visible:{type:Boolean,default:!1},position:{type:String,default:"bottom left"},showArrow:{type:Boolean,default:!1}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,required:!0}},data:function(){return{showing:!1}},methods:{open:function(){this.showing=!0,this.$emit("open",this)},close:function(){this.showing=!1,this.$emit("close",this)}}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(39),o=r(a),u=n(107),i=r(u);e.default={props:{source:{type:Array,default:function(){return[]}},pageSize:{type:Number,default:25},filter:{type:String}},data:function(){return{index:0}},computed:{pages:function(){var t=this.source;this.filter&&(t=(0,o.default)(t,this.filter));var e=(0,i.default)(t,this.pageSize);return this.pageNumber>e.length&&(this.pageNumber=1),e},pageNumber:{get:function(){return this.index+1},set:function(t){this.index=t-1,this.$emit("page-changed",t)}},data:function(){return this.pages[this.index]}},methods:{movePrevious:function(){this.pageNumber-=this.pageNumber>1?1:0},moveNext:function(){this.pageNumber+=this.pageNumber!=this.pages.length?1:0},moveTo:function(t){t>0&&t<=this.pages.length&&(this.pageNumber=t)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,required:!0}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{tabs:[],selectedTabId:null}},computed:{selectedTab:function(){var t=this;return this.tabs.find(function(e){return e.id===t.selectedTabId})}},methods:{addTab:function(t){this.tabs.push(t)},removeTab:function(t){var e=this.tabs.indexOf(t);this.tabs.splice(e,1)},selectTab:function(t){this.selectedTabId=t.id,this.$emit("tab-change",t)}},mounted:function(){this.tabs.length>0&&(this.selectedTabId=this.tabs[0].id)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{id:{type:String,required:!0},label:{type:String,required:!0}},computed:{selected:function(){return this.$parent.selectedTab===this}},created:function(){var t=this.$parent.addTab;if(!t)return void console.warn("A tab-pane must be registered in a tab-control.");t(this)},destroyed:function(){this.$parent.removeTab(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(19),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={mixins:[a.default]}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(19),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={mixins:[a.default]}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(19),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={mixins:[a.default]}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(85),o=r(a),u=n(83),i=r(u),s=n(82),l=r(s),c=n(81),f=r(c),d=n(87),p=r(d),v=n(88),g=r(v),h=n(86),m=r(h),y=n(84),b=r(y);e.default={min:o.default,max:i.default,count:l.default,average:f.default,total:p.default,variance:g.default,standardDeviation:m.default,median:b.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(36),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Average",callback:a.default,format:!0}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={label:"Count",callback:function(t){return t.length}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(103),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Maximum",callback:a.default,format:!0}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(104),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Median",callback:a.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(105),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Minimum",callback:a.default,format:!0}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(108),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Standard Deviation",callback:a.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(42),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Total",callback:a.default,format:!0}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(43),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={label:"Variance",callback:a.default}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(170),o=r(a),u=n(182),i=r(u),s=n(171),l=r(s),c=n(174),f=r(c),d=n(173),p=r(d),v=n(175),g=r(v),h=n(91),m=r(h),y=n(176),b=r(y),_=n(177),x=r(_),M=n(178),D=r(M),w=n(179),S=r(w),O=n(183),C=r(O),P=n(180),j=r(P),N=n(181),T=r(N),k=n(184),F=r(k);e.default={calendar:o.default,checkbox:i.default,chip:l.default,datatable:f.default,datatableColumn:p.default,datetimePicker:g.default,dynamic:m.default,floatingPanel:b.default,modal:x.default,paginator:D.default,panel:S.default,radio:C.default,toggle:F.default,tabControl:j.default,tabPane:T.default}},function(t,e,n){"use strict";function r(t,e){var n={template:a,props:["row","column"]};return t&&(n.template=e?u:o),n}Object.defineProperty(e,"__esModule",{value:!0});var a="<span>{{ column.formatData(row[column.id]) }}</span>",o='<input type="text" v-model="row[column.id]"/>',u='<input type="text" v-model.lazy="row[column.id]"/>';e.default={functional:!0,name:"datatable-cell",props:{row:Object,column:Object,editable:{type:Boolean,default:!1},optimize:{type:Boolean,default:!1}},render:function(t,e){var n=e.props.row,a=e.props.column,o={class:{"datatable-cell":!0},style:a.columnStyles};if(a.template){return t("td",o,[a.template({row:n,column:a,value:n[a.id]})])}return t("td",o,[t(r(e.props.editable,e.props.optimize),{props:{row:n,column:a}})])}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={functional:!0,props:{component:{type:Object,required:!0}},render:function(t,e){var n=e.props.component;if(!n.node)return void console.warn("Dynamic element not rendered. No node name specified.");var r={attrs:n.attrs,props:n.props,domProps:n.domProps,on:n.on};if(!n.children)return t(n.node,r);var a=n.children.map(function(e){return t("dynamic",{props:{component:e}})});return t(n.node,r,a)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(93),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={drag:a.default}},function(t,e,n){"use strict";function r(t){}Object.defineProperty(e,"__esModule",{value:!0});var a={start:{eventName:"dragstart",draggable:!0,callback:r},drag:{eventName:"drag",draggable:!0,callback:r},enter:{eventName:"dragenter",callback:r},leave:{eventName:"dragleave",callback:r},over:{eventName:"dragover",callback:r},drop:{eventName:"drop",callback:r},end:{eventName:"dragend",draggable:!0,callback:r}};e.default={bind:function(t,e,n){var r=e.arg.toLowerCase();if(!(r in a))return void console.warn("Event not supported");var o=a[r];o.draggable&&t.setAttribute("draggable",!0);var u=e.value;"function"!=typeof u&&(u=function(t){}),t.addEventListener(o.eventName,function(e){return o.callback.call(t,e),u.call(t,e),!1},!1)}}},function(t,e,n){"use strict";function r(t,e,n){e=e||2;var r=parseFloat(t);return isNaN(r)?t:(n?o.default[n.toUpperCase()]:o.default.USD)+r.toFixed(e).replace(/(\d)(?=(\d{3})+\.)/g,"$1,")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(35),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function r(t){return(0,o.default)(t,"D MMMM YYYY")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(18),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function r(t){return(0,o.default)(t,"DD/MM/YYYY")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(18),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(94),o=r(a),u=n(18),i=r(u),s=n(96),l=r(s),c=n(95),f=r(c);e.default={currency:o.default,datetime:i.default,dateShort:l.default,dateLong:f.default}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(35),a=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default={currencies:a.default}},function(t,e,n){"use strict";n(110),n(111),n(109)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){return(0,s.default)(t)?t:new Date}Object.defineProperty(e,"__esModule",{value:!0});var u=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(61),s=r(i),l=n(144),c=r(l),f=n(152),d=r(f),p=n(140),v=r(p),g=n(139),h=r(g),m=n(57),y=r(m),b=n(155),_=r(b),x=n(149),M=r(x),D=n(106),w=r(D),S=n(101),O=r(S),C=n(102),P=r(C),j=new Date(-864e13),N=new Date(864e13),T=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],k=function(){function t(e,n,r){a(this,t),this.minDate=n||j,this.maxDate=r||N,this.startDate=e||new Date,this.generate()}return u(t,[{key:"generate",value:function(){var t=(0,d.default)(this.startDate),e=(0,v.default)(this.startDate),n=(0,h.default)(t,e);return this.weeks=(0,w.default)(n,function(t){var e=t.getDay()+1,n=t.getDate(),r=(13-e+n)/7;return Math.floor(r)}),this.weeks}},{key:"previousMonth",value:function(){return this.startDate=(0,_.default)(this.startDate,1),this.generate()}},{key:"nextMonth",value:function(){return this.startDate=(0,y.default)(this.startDate,1),this.generate()}},{key:"goToMonth",value:function(t){return this.startDate=(0,M.default)(this.startDate,t),this.generate()}},{key:"weekdays",get:function(){return T}},{key:"minDate",get:function(){return this._minDate},set:function(t){this._minDate=o(t)}},{key:"maxDate",get:function(){return this._maxDate},set:function(t){this._maxDate=o(t)}},{key:"startDate",get:function(){return this._startDate},set:function(t){this._startDate=o(t),(0,c.default)(this._startDate,this._minDate,this._maxDate)||(this._startDate=this.minDate)}},{key:"paddingStart",get:function(){var t=(0,O.default)(this.weeks);return(0,O.default)(t).getDay()}},{key:"paddingEnd",get:function(){var t=this.weeks,e=(0,P.default)(t);return 6-(0,P.default)(e).getDay()}}]),t}();e.default=k},function(t,e,n){"use strict";function r(t){if(t.length&&!(t.length<1))return t[0]}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t){if(t.length&&!(t.length<1))return t[t.length-1]}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e,n){var r=n(e);return!isNaN(r)&&Math.max(t,r)}function o(t,e){e=e||function(t){return t};var n=e.call(t,t[0]),r=(0,l.default)(n);return(0,i.default)(t,function(t,n,o){return a(t,e.call(o,n),r)},-1/0)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=o;var u=n(13),i=r(u),s=n(37),l=r(s)},function(t,e,n){"use strict";function r(t,e){return e.call(this,t)}function a(t,e){var n=(0,u.default)(t,e),a=n.length,o=Math.floor(a/2),i=r(n[o],e);return a%2?i:(i+r(n[o-1],e))/2}Object.defineProperty(e,"__esModule",{value:!0}),e.default=a;var o=n(41),u=function(t){return t&&t.__esModule?t:{default:t}}(o)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e,n){var r=n(e);return!isNaN(r)&&Math.min(t,r)}function o(t,e){e=e||function(t){return t};var n=e.call(t,t[0]),r=(0,l.default)(n);return(0,i.default)(t,function(t,n,o){return a(t,e.call(o,n),r)},1/0)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=o;var u=n(13),i=r(u),s=n(37),l=r(s)},function(t,e,n){"use strict";function r(t,e){var n=(0,o.default)(t,e),r=[];for(var a in n)r.push(n[a]);return r}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(40),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function r(t,e){for(var n=[],r=0,a=t.length;r<a;){var o=r+e;a-r<e&&(o=r+(a-r));var u=t.slice(r,o);n.push(u),r+=e}return n}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t,e){var n=(0,o.default)(t,e);return!!n&&Math.sqrt(n)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var a=n(43),o=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){n(130),t.exports=n(9).Array.find},function(t,e,n){n(134),n(132),n(135),n(136),t.exports=n(9).Symbol},function(t,e,n){n(133),n(137),t.exports=n(33).f("iterator")},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var r=n(6),a=n(55),o=n(129);t.exports=function(t){return function(e,n,u){var i,s=r(e),l=a(s.length),c=o(u,l);if(t&&n!=n){for(;l>c;)if((i=s[c++])!=i)return!0}else for(;l>c;c++)if((t||c in s)&&s[c]===n)return t||c||0;return!t&&-1}}},function(t,e,n){var r=n(45),a=n(48),o=n(56),u=n(55),i=n(116);t.exports=function(t,e){var n=1==t,s=2==t,l=3==t,c=4==t,f=6==t,d=5==t||f,p=e||i;return function(e,i,v){for(var g,h,m=o(e),y=a(m),b=r(i,v,3),_=u(y.length),x=0,M=n?p(e,_):s?p(e,0):void 0;_>x;x++)if((d||x in y)&&(g=y[x],h=b(g,x,m),t))if(n)M[x]=h;else if(h)switch(t){case 3:return!0;case 5:return g;case 6:return x;case 2:M.push(g)}else if(c)return!1;return f?-1:l||c?c:M}}},function(t,e,n){var r=n(10),a=n(49),o=n(2)("species");t.exports=function(t){var e;return a(t)&&(e=t.constructor,"function"!=typeof e||e!==Array&&!a(e.prototype)||(e=void 0),r(e)&&null===(e=e[o])&&(e=void 0)),void 0===e?Array:e}},function(t,e,n){var r=n(115);t.exports=function(t,e){return new(r(t))(e)}},function(t,e,n){var r=n(20),a=n(2)("toStringTag"),o="Arguments"==r(function(){return arguments}()),u=function(t,e){try{return t[e]}catch(t){}};t.exports=function(t){var e,n,i;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=u(e=Object(t),a))?n:o?r(e):"Object"==(i=r(e))&&"function"==typeof e.callee?"Arguments":i}},function(t,e,n){var r=n(16),a=n(53),o=n(26);t.exports=function(t){var e=r(t),n=a.f;if(n)for(var u,i=n(t),s=o.f,l=0;i.length>l;)s.call(t,u=i[l++])&&e.push(u);return e}},function(t,e,n){t.exports=n(3).document&&document.documentElement},function(t,e,n){"use strict";var r=n(51),a=n(17),o=n(27),u={};n(5)(u,n(2)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(u,{next:a(1,n)}),o(t,e+" Iterator")}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(16),a=n(6);t.exports=function(t,e){for(var n,o=a(t),u=r(o),i=u.length,s=0;i>s;)if(o[n=u[s++]]===e)return n}},function(t,e,n){var r=n(12)("meta"),a=n(10),o=n(4),u=n(8).f,i=0,s=Object.isExtensible||function(){return!0},l=!n(15)(function(){return s(Object.preventExtensions({}))}),c=function(t){u(t,r,{value:{i:"O"+ ++i,w:{}}})},f=function(t,e){if(!a(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,r)){if(!s(t))return"F";if(!e)return"E";c(t)}return t[r].i},d=function(t,e){if(!o(t,r)){if(!s(t))return!0;if(!e)return!1;c(t)}return t[r].w},p=function(t){return l&&v.NEED&&s(t)&&!o(t,r)&&c(t),t},v=t.exports={KEY:r,NEED:!1,fastKey:f,getWeak:d,onFreeze:p}},function(t,e,n){var r=n(8),a=n(14),o=n(16);t.exports=n(7)?Object.defineProperties:function(t,e){a(t);for(var n,u=o(e),i=u.length,s=0;i>s;)r.f(t,n=u[s++],e[n]);return t}},function(t,e,n){var r=n(26),a=n(17),o=n(6),u=n(31),i=n(4),s=n(47),l=Object.getOwnPropertyDescriptor;e.f=n(7)?l:function(t,e){if(t=o(t),e=u(e,!0),s)try{return l(t,e)}catch(t){}if(i(t,e))return a(!r.f.call(t,e),t[e])}},function(t,e,n){var r=n(6),a=n(52).f,o={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],i=function(t){try{return a(t)}catch(t){return u.slice()}};t.exports.f=function(t){return u&&"[object Window]"==o.call(t)?i(t):a(r(t))}},function(t,e,n){var r=n(4),a=n(56),o=n(28)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=a(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,e,n){var r=n(30),a=n(21);t.exports=function(t){return function(e,n){var o,u,i=String(a(e)),s=r(n),l=i.length;return s<0||s>=l?t?"":void 0:(o=i.charCodeAt(s),o<55296||o>56319||s+1===l||(u=i.charCodeAt(s+1))<56320||u>57343?t?i.charAt(s):o:t?i.slice(s,s+2):u-56320+(o-55296<<10)+65536)}}},function(t,e,n){var r=n(30),a=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?a(t+e,0):o(t,e)}},function(t,e,n){"use strict";var r=n(23),a=n(114)(5),o=!0;"find"in[]&&Array(1).find(function(){o=!1}),r(r.P+r.F*o,"Array",{find:function(t){return a(this,t,arguments.length>1?arguments[1]:void 0)}}),n(44)("find")},function(t,e,n){"use strict";var r=n(44),a=n(121),o=n(24),u=n(6);t.exports=n(50)(Array,"Array",function(t,e){this._t=u(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,a(1)):"keys"==e?a(0,n):"values"==e?a(0,t[n]):a(0,[n,t[n]])},"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},function(t,e,n){"use strict";var r=n(117),a={};a[n(2)("toStringTag")]="z",a+""!="[object z]"&&n(11)(Object.prototype,"toString",function(){return"[object "+r(this)+"]"},!0)},function(t,e,n){"use strict";var r=n(128)(!0);n(50)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){"use strict";var r=n(3),a=n(4),o=n(7),u=n(23),i=n(11),s=n(123).KEY,l=n(15),c=n(29),f=n(27),d=n(12),p=n(2),v=n(33),g=n(32),h=n(122),m=n(118),y=n(49),b=n(14),_=n(6),x=n(31),M=n(17),D=n(51),w=n(126),S=n(125),O=n(8),C=n(16),P=S.f,j=O.f,N=w.f,T=r.Symbol,k=r.JSON,F=k&&k.stringify,$=p("_hidden"),A=p("toPrimitive"),E={}.propertyIsEnumerable,Y=c("symbol-registry"),R=c("symbols"),I=c("op-symbols"),B=Object.prototype,H="function"==typeof T,L=r.QObject,G=!L||!L.prototype||!L.prototype.findChild,z=o&&l(function(){return 7!=D(j({},"a",{get:function(){return j(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=P(B,e);r&&delete B[e],j(t,e,n),r&&t!==B&&j(B,e,r)}:j,K=function(t){var e=R[t]=D(T.prototype);return e._k=t,e},W=H&&"symbol"==typeof T.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof T},U=function(t,e,n){return t===B&&U(I,e,n),b(t),e=x(e,!0),b(n),a(R,e)?(n.enumerable?(a(t,$)&&t[$][e]&&(t[$][e]=!1),n=D(n,{enumerable:M(0,!1)})):(a(t,$)||j(t,$,M(1,{})),t[$][e]=!0),z(t,e,n)):j(t,e,n)},Z=function(t,e){b(t);for(var n,r=m(e=_(e)),a=0,o=r.length;o>a;)U(t,n=r[a++],e[n]);return t},V=function(t,e){return void 0===e?D(t):Z(D(t),e)},J=function(t){var e=E.call(this,t=x(t,!0));return!(this===B&&a(R,t)&&!a(I,t))&&(!(e||!a(this,t)||!a(R,t)||a(this,$)&&this[$][t])||e)},X=function(t,e){if(t=_(t),e=x(e,!0),t!==B||!a(R,e)||a(I,e)){var n=P(t,e);return!n||!a(R,e)||a(t,$)&&t[$][e]||(n.enumerable=!0),n}},q=function(t){for(var e,n=N(_(t)),r=[],o=0;n.length>o;)a(R,e=n[o++])||e==$||e==s||r.push(e);return r},Q=function(t){for(var e,n=t===B,r=N(n?I:_(t)),o=[],u=0;r.length>u;)!a(R,e=r[u++])||n&&!a(B,e)||o.push(R[e]);return o};H||(T=function(){if(this instanceof T)throw TypeError("Symbol is not a constructor!");var t=d(arguments.length>0?arguments[0]:void 0),e=function(n){this===B&&e.call(I,n),a(this,$)&&a(this[$],t)&&(this[$][t]=!1),z(this,t,M(1,n))};return o&&G&&z(B,t,{configurable:!0,set:e}),K(t)},i(T.prototype,"toString",function(){return this._k}),S.f=X,O.f=U,n(52).f=w.f=q,n(26).f=J,n(53).f=Q,o&&!n(25)&&i(B,"propertyIsEnumerable",J,!0),v.f=function(t){return K(p(t))}),u(u.G+u.W+u.F*!H,{Symbol:T});for(var tt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),et=0;tt.length>et;)p(tt[et++]);for(var tt=C(p.store),et=0;tt.length>et;)g(tt[et++]);u(u.S+u.F*!H,"Symbol",{for:function(t){return a(Y,t+="")?Y[t]:Y[t]=T(t)},keyFor:function(t){if(W(t))return h(Y,t);throw TypeError(t+" is not a symbol!")},useSetter:function(){G=!0},useSimple:function(){G=!1}}),u(u.S+u.F*!H,"Object",{create:V,defineProperty:U,defineProperties:Z,getOwnPropertyDescriptor:X,getOwnPropertyNames:q,getOwnPropertySymbols:Q}),k&&u(u.S+u.F*(!H||l(function(){var t=T();return"[null]"!=F([t])||"{}"!=F({a:t})||"{}"!=F(Object(t))})),"JSON",{stringify:function(t){if(void 0!==t&&!W(t)){for(var e,n,r=[t],a=1;arguments.length>a;)r.push(arguments[a++]);return e=r[1],"function"==typeof e&&(n=e),!n&&y(e)||(e=function(t,e){if(n&&(e=n.call(this,t,e)),!W(e))return e}),r[1]=e,F.apply(k,r)}}}),T.prototype[A]||n(5)(T.prototype,A,T.prototype.valueOf),f(T,"Symbol"),f(Math,"Math",!0),f(r.JSON,"JSON",!0)},function(t,e,n){n(32)("asyncIterator")},function(t,e,n){n(32)("observable")},function(t,e,n){for(var r=n(131),a=n(11),o=n(3),u=n(5),i=n(24),s=n(2),l=s("iterator"),c=s("toStringTag"),f=i.Array,d=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],p=0;p<5;p++){var v,g=d[p],h=o[g],m=h&&h.prototype;if(m){m[l]||u(m,l,f),m[c]||u(m,c,g),i[g]=f;for(v in r)m[v]||a(m,v,r[v],!0)}}},function(t,e,n){function r(t,e){var n=a(t),r=a(e),i=n.getTime()-n.getTimezoneOffset()*o,s=r.getTime()-r.getTimezoneOffset()*o;return Math.round((i-s)/u)}var a=n(150),o=6e4,u=864e5;t.exports=r},function(t,e,n){function r(t,e){var n=a(t),r=a(e),o=r.getTime();if(n.getTime()>o)throw new Error("The first date cannot be after the second date");var u=[],i=n;for(i.setHours(0,0,0,0);i.getTime()<=o;)u.push(a(i)),i.setDate(i.getDate()+1);return u}var a=n(1);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=e.getMonth();return e.setFullYear(e.getFullYear(),n+1,0),e.setHours(23,59,59,999),e}var a=n(1);t.exports=r},function(t,e,n){function r(t,e,n){var r=e?String(e):"YYYY-MM-DDTHH:mm:ss.SSSZ",o=n||{},u=o.locale,i=p.format.formatters,s=p.format.formattingTokensRegExp;u&&u.format&&u.format.formatters&&(i=u.format.formatters,u.format.formattingTokensRegExp&&(s=u.format.formattingTokensRegExp));var l=f(t);return d(l)?a(r,i,s)(l):"Invalid Date"}function a(t,e,n){var r,a,u=t.match(n),i=u.length;for(r=0;r<i;r++)a=e[u[r]]||v[u[r]],u[r]=a||o(u[r]);return function(t){for(var e="",n=0;n<i;n++)u[n]instanceof Function?e+=u[n](t,v):e+=u[n];return e}}function o(t){return t.match(/\[[\s\S]/)?t.replace(/^\[|]$/g,""):t.replace(/\\/g,"")}function u(t,e){e=e||"";var n=t>0?"-":"+",r=Math.abs(t),a=Math.floor(r/60),o=r%60;return n+i(a,2)+e+i(o,2)}function i(t,e){for(var n=Math.abs(t).toString();n.length<e;)n="0"+n;return n}var s=n(142),l=n(143),c=n(59),f=n(1),d=n(61),p=n(148),v={M:function(t){return t.getMonth()+1},MM:function(t){return i(t.getMonth()+1,2)},Q:function(t){return Math.ceil((t.getMonth()+1)/3)},D:function(t){return t.getDate()},DD:function(t){return i(t.getDate(),2)},DDD:function(t){return s(t)},DDDD:function(t){return i(s(t),3)},d:function(t){return t.getDay()},E:function(t){return t.getDay()||7},W:function(t){return l(t)},WW:function(t){return i(l(t),2)},YY:function(t){return i(t.getFullYear(),4).substr(2)},YYYY:function(t){return i(t.getFullYear(),4)},GG:function(t){return String(c(t)).substr(2)},GGGG:function(t){return c(t)},H:function(t){return t.getHours()},HH:function(t){return i(t.getHours(),2)},h:function(t){var e=t.getHours();return 0===e?12:e>12?e%12:e},hh:function(t){return i(v.h(t),2)},m:function(t){return t.getMinutes()},mm:function(t){return i(t.getMinutes(),2)},s:function(t){return t.getSeconds()},ss:function(t){return i(t.getSeconds(),2)},S:function(t){return Math.floor(t.getMilliseconds()/100)},SS:function(t){return i(Math.floor(t.getMilliseconds()/10),2)},SSS:function(t){return i(t.getMilliseconds(),3)},Z:function(t){return u(t.getTimezoneOffset(),":")},ZZ:function(t){return u(t.getTimezoneOffset())},X:function(t){return Math.floor(t.getTime()/1e3)},x:function(t){return t.getTime()}};t.exports=r},function(t,e,n){function r(t){var e=a(t);return u(e,o(e))+1}var a=n(1),o=n(154),u=n(138);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=o(e).getTime()-u(e).getTime();return Math.round(n/i)+1}var a=n(1),o=n(34),u=n(151),i=6048e5;t.exports=r},function(t,e,n){function r(t,e,n){var r=a(t).getTime(),o=a(e).getTime(),u=a(n).getTime();if(o>u)throw new Error("The start of the range cannot be after the end of the range");return r>=o&&r<=u}var a=n(1);t.exports=r},function(t,e){function n(t){var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);var a=r.concat(e).sort().reverse();return new RegExp("(\\[[^\\[]*\\])|(\\\\)?("+a.join("|")+"|.)","g")}var r=["M","MM","Q","D","DD","DDD","DDDD","d","E","W","WW","YY","YYYY","GG","GGGG","H","HH","h","hh","m","mm","s","ss","S","SS","SSS","Z","ZZ","X","x"];t.exports=n},function(t,e){function n(){function t(t,n,r){r=r||{};var a;return a="string"==typeof e[t]?e[t]:1===n?e[t].one:e[t].other.replace("{{count}}",n),r.addSuffix?r.comparison>0?"in "+a:a+" ago":a}var e={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};return{localize:t}}t.exports=n},function(t,e,n){function r(){var t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],n=["Su","Mo","Tu","We","Th","Fr","Sa"],r=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],u=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],i=["AM","PM"],s=["am","pm"],l=["a.m.","p.m."],c={MMM:function(e){return t[e.getMonth()]},MMMM:function(t){return e[t.getMonth()]},dd:function(t){return n[t.getDay()]},ddd:function(t){return r[t.getDay()]},dddd:function(t){return u[t.getDay()]},A:function(t){return t.getHours()/12>=1?i[1]:i[0]},a:function(t){return t.getHours()/12>=1?s[1]:s[0]},aa:function(t){return t.getHours()/12>=1?l[1]:l[0]}};return["M","D","DDD","d","Q","W"].forEach(function(t){c[t+"o"]=function(e,n){return a(n[t](e))}}),{formatters:c,formattingTokensRegExp:o(c)}}function a(t){var e=t%100;if(e>20||e<10)switch(e%10){case 1:return t+"st";case 2:return t+"nd";case 3:return t+"rd"}return t+"th"}var o=n(145);t.exports=r},function(t,e,n){var r=n(146),a=n(147);t.exports={distanceInWords:r(),format:a()}},function(t,e,n){function r(t,e){var n=a(t),r=Number(e),u=n.getFullYear(),i=n.getDate(),s=new Date(0);s.setFullYear(u,r,15),s.setHours(0,0,0,0);var l=o(s);return n.setMonth(r,Math.min(i,l)),n}var a=n(1),o=n(58);t.exports=r},function(t,e,n){function r(t){var e=a(t);return e.setHours(0,0,0,0),e}var a=n(1);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=new Date(0);return n.setFullYear(e,0,4),n.setHours(0,0,0,0),o(n)}var a=n(59),o=n(34);t.exports=r},function(t,e,n){function r(t){var e=a(t);return e.setDate(1),e.setHours(0,0,0,0),e}var a=n(1);t.exports=r},function(t,e,n){function r(t,e){var n=e?Number(e.weekStartsOn)||0:0,r=a(t),o=r.getDay(),u=(o<n?7:0)+o-n;return r.setDate(r.getDate()-u),r.setHours(0,0,0,0),r}var a=n(1);t.exports=r},function(t,e,n){function r(t){var e=a(t),n=new Date(0);return n.setFullYear(e.getFullYear(),0,1),n.setHours(0,0,0,0),n}var a=n(1);t.exports=r},function(t,e,n){function r(t,e){var n=Number(e);return a(t,-n)}var a=n(57);t.exports=r},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e,n){var r=n(0)(n(65),n(191),null,null);t.exports=r.exports},function(t,e,n){n(161);var r=n(0)(n(66),n(188),null,null);t.exports=r.exports},function(t,e,n){var r=n(0)(n(67),n(190),null,null);t.exports=r.exports},function(t,e,n){n(164);var r=n(0)(n(68),n(193),null,null);t.exports=r.exports},function(t,e,n){n(160);var r=n(0)(n(69),n(187),null,null);t.exports=r.exports},function(t,e,n){var r=n(0)(n(70),n(199),null,null);t.exports=r.exports},function(t,e,n){n(167);var r=n(0)(n(71),n(196),null,null);t.exports=r.exports},function(t,e,n){n(166);var r=n(0)(n(72),n(195),null,null);t.exports=r.exports},function(t,e,n){n(168);var r=n(0)(n(73),n(197),null,null);t.exports=r.exports},function(t,e,n){n(159);var r=n(0)(n(74),n(186),null,null);t.exports=r.exports},function(t,e,n){n(162);var r=n(0)(n(75),n(189),null,null);t.exports=r.exports},function(t,e,n){n(169);var r=n(0)(n(76),n(198),null,null);t.exports=r.exports},function(t,e,n){n(165);var r=n(0)(n(77),n(194),null,null);t.exports=r.exports},function(t,e,n){n(158);var r=n(0)(n(78),n(185),null,null);t.exports=r.exports},function(t,e,n){n(163);var r=n(0)(n(79),n(192),null,null);t.exports=r.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"radio"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.checked,expression:"checked"}],attrs:{type:"radio",id:t.id,name:t.id,disabled:t.disabled},domProps:{value:t.value,checked:t._q(t.checked,t.value)},on:{__c:function(e){t.checked=t.value}}}),t._v(" "),n("label",{attrs:{for:t.id}}),t._v(" "),t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"panel"},[n("div",{staticClass:"panel-header"},[n("div",{attrs:{layout:"row center-justify"}},[n("span",{staticClass:"panel-title",attrs:{self:"size-x1"}},[t._v(t._s(t.title))]),t._v(" "),n("div",[t._t("panel-header")],2)])]),t._v(" "),n("div",{staticClass:"panel-body"},[t._t("default")],2),t._v(" "),t.$slots.panelFooter?n("div",{staticClass:"panel-footer"},[t._t("panel-footer")],2):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"datatable table-wrapper",class:t.tableClasses},[n("table",[n("thead",{staticClass:"datatable-columns"},[n("tr",[t.lineNumbers?n("th",{style:{width:t.lineColumnWidth}},[n("div",{staticClass:"datatable-column datatable-linenumber-column"},[t._v("#")])]):t._e(),t._v(" "),t.aggregated?n("th",[n("div",{staticClass:"datatable-column datatable-aggregate-column"},[t._v("Aggregate")])]):t._e(),t._v(" "),t._t("default")],2)]),t._v(" "),t.groupingColumnIds.length>0?n("tbody",{staticClass:"datatable-groups"},[n("tr",[n("td",{staticClass:"datatable-groups-header",attrs:{colspan:t.columnSpan}},t._l(t.groupingColumns,function(e,r){return n("chip",{key:e.id,staticClass:"datatable-group-chip",on:{remove:function(n){t.degroupColumn(e)}}},[n("div",[n("small",[n("strong",[t._v(t._s(0==r?"Grouping By:":"Then:"))])])]),t._v(" "),n("div",[t._v(t._s(e.label))])])}))])]):t._e(),t._v(" "),n("tbody",{directives:[{name:"drag",rawName:"v-drag:enter",value:t.dragEnter,expression:"dragEnter",arg:"enter"},{name:"drag",rawName:"v-drag:leave",value:t.dragLeave,expression:"dragLeave",arg:"leave"},{name:"drag",rawName:"v-drag:over",value:t.dragOver,expression:"dragOver",arg:"over"},{name:"drag",rawName:"v-drag:drop",value:t.dragDrop,expression:"dragDrop",arg:"drop"}],staticClass:"datatable-collections"},[n("tr",[n("td",{staticClass:"datatable-group",attrs:{colspan:t.columnSpan}},[n("datatable-collection",{attrs:{rows:t.rows,columns:t.columns,striped:t.striped,editable:t.editable,"line-numbers":t.lineNumbers,aggregated:t.aggregated,"grouping-columns":t.groupingColumnIds,margin:t.lineColumnWidth,message:t.message}})],1)])]),t._v(" "),t.aggregated?n("tfoot",{staticClass:"datatable-aggregators"},[n("tr",[n("td",{staticClass:"datatable-info-cell",attrs:{colspan:t.columnSpan}},[t._v(" ")])]),t._v(" "),t._l(t.aggregators,function(e,r){return n("tr",{key:e.label},[t.lineNumbers?n("td",{staticClass:"datatable-linenumber-cell"},[t._v(t._s(r+1))]):t._e(),t._v(" "),t.aggregated?n("td",{staticClass:"datatable-aggregate-cell"},[t._v(t._s(e.label))]):t._e(),t._v(" "),t._l(t.columns,function(r){return n("td",{style:r.columnStyles},[t._v(t._s(t.aggregate(r,e)))])})],2)})],2):t._e()],1),t._v(" "),t.filterable?n("div",{staticClass:"datatable-options",attrs:{layout:"row center-justify"}},[t.optimize?n("input",{directives:[{name:"model",rawName:"v-model.lazy",value:t.filter,expression:"filter",modifiers:{lazy:!0}}],attrs:{type:"text",placeholder:"Filter this dataset. Press enter to search...",self:"size-x1"},domProps:{value:t.filter},on:{change:function(e){t.filter=e.target.value}}}):n("input",{directives:[{name:"model",rawName:"v-model",value:t.filter,expression:"filter"}],attrs:{type:"text",placeholder:"Filter this dataset...",self:"size-x1"},domProps:{value:t.filter},on:{input:function(e){e.target.composing||(t.filter=e.target.value)}}})]):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"chip"},[n("div",{attrs:{layout:"row stretch-justify"}},[n("div",{staticClass:"chip-body"},[t._t("default")],2),t._v(" "),t.removable?n("div",{staticClass:"chip-footer",attrs:{layout:"row center-center"}},[n("div",{staticClass:"chip-close-button",attrs:{title:"Click to remove"},on:{click:t.remove}})]):t._e()])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tab-control"},[n("div",{staticClass:"tabs-list",attrs:{layout:"row center-justify"}},[n("div",{attrs:{self:"size-x1",layout:"row center-left"}},t._l(t.tabs,function(e){return n("div",{staticClass:"tab-item",class:{active:e.selected},on:{click:function(n){t.selectTab(e)}}},[t._t(e.id,[n("span",[t._v(t._s(e.label))])],{value:e})],2)})),t._v(" "),n("div",[t._t("tabs-extra")],2)]),t._v(" "),t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"datatable-collection"},[t.groupable?n("table",{class:{"table-striped":t.striped}},t._l(t.groups,function(e,r,a){return n("tr",[n("td",{staticClass:"datatable-group",attrs:{colspan:t.columnSpan}},[n("div",{staticClass:"datatable-group-header",attrs:{layout:"row center-justify"}},[n("div",{attrs:{self:"size-x1"}},[n("span",{staticClass:"datatable-group-label",style:t.indentStyle},[t._v(t._s(t.groupingColumn.formatData(r)))])]),t._v(" "),e.length>1?n("span",{staticClass:"label label-primary datatable-row-count"},[t._v(t._s(e.length))]):t._e()]),t._v(" "),n("datatable-collection",{attrs:{rows:e,columns:t.columns,striped:t.striped,editable:t.editable,"line-numbers":t.lineNumbers,aggregated:t.aggregated,margin:t.margin,"grouping-columns":t.groupingColumns,"grouping-index":t.groupingIndex+1,"collection-index":t.collectionIndex*a,optimize:t.optimize,message:t.message}})],1)])})):n("table",{staticClass:"datatable-resultset",class:{"table-striped":t.striped}},[t.rows.length<1?n("tr",[n("td",{staticClass:"datatable-info-cell",attrs:{colspan:t.columnSpan}},[t._v(t._s(t.message))])]):t._e(),t._v(" "),t._l(t.rows,function(e,r){return n("tr",[t.lineNumbers?n("td",{staticClass:"datatable-cell datatable-linenumber-cell",style:{width:t.margin}},[t._v(t._s(t.collectionIndex+r+1))]):t._e(),t._v(" "),t.aggregated?n("td",{staticClass:"datatable-cell datatable-aggregate-cell"},[t._v(" ")]):t._e(),t._v(" "),t._l(t.columns,function(r){return n("datatable-cell",{key:r.id,attrs:{column:r,row:e,editable:t.editable,optimize:t.optimize}})})],2)})],2)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"calendar table-wrapper"},[n("div",{staticClass:"calendar-header",attrs:{layout:"row center-justify"}},[n("button",{staticClass:"button",on:{click:t.previous}},[t._v("Previous")]),t._v(" "),n("div",{staticClass:"calendar-month-name"},[t._v(t._s(t._f("date")(t.calendar.startDate,"MMMM YYYY")))]),t._v(" "),n("button",{staticClass:"button",on:{click:t.next}},[t._v("Next")])]),t._v(" "),n("table",[n("thead",[n("tr",t._l(t.calendar.weekdays,function(e){return n("td",[t._v(t._s(e))])}))]),t._v(" "),n("tbody",t._l(t.calendar.weeks,function(e,r){return n("tr",{staticClass:"calendar-week"},[0==r?t._l(t.calendar.paddingStart,function(t){return n("td",{staticClass:"calendar-day"})}):t._e(),t._v(" "),t._l(e,function(e){return n("td",{staticClass:"calendar-day"},[n("div",[t._v(t._s(e.getDate()))])])}),t._v(" "),r+1==t.calendar.weeks.length?t._l(t.calendar.paddingEnd,function(t){return n("td",{staticClass:"calendar-day"})}):t._e()],2)}))])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"toggle"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.checked,expression:"checked"}],attrs:{type:"checkbox",id:t.id,name:t.id,disabled:t.disabled},domProps:{value:t.value,checked:Array.isArray(t.checked)?t._i(t.checked,t.value)>-1:t.checked},on:{__c:function(e){var n=t.checked,r=e.target,a=!!r.checked;if(Array.isArray(n)){var o=t.value,u=t._i(n,o);a?u<0&&(t.checked=n.concat(o)):u>-1&&(t.checked=n.slice(0,u).concat(n.slice(u+1)))}else t.checked=a}}}),t._v(" "),n("label",{attrs:{for:t.id}}),t._v(" "),t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("th",{directives:[{name:"drag",rawName:"v-drag:start",value:t.dragStart,expression:"dragStart",arg:"start"}],style:t.columnStyles,attrs:{title:"Click to sort. Drag to center to group."},on:{click:t.sort}},[n("div",{staticClass:"datatable-column",attrs:{layout:t.columnLayout}},[n("div",[t._t("default",[t._v(t._s(t.label||t.id))])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.sorting,expression:"sorting"}],staticClass:"datatable-sort-arrow",class:t.sortArrowClass})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"checkbox"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.checked,expression:"checked"}],attrs:{type:"checkbox",id:t.id,name:t.id,disabled:t.disabled},domProps:{value:t.value,checked:Array.isArray(t.checked)?t._i(t.checked,t.value)>-1:t.checked},on:{__c:function(e){var n=t.checked,r=e.target,a=!!r.checked;if(Array.isArray(n)){var o=t.value,u=t._i(n,o);a?u<0&&(t.checked=n.concat(o)):u>-1&&(t.checked=n.slice(0,u).concat(n.slice(u+1)))}else t.checked=a}}}),t._v(" "),n("label",{attrs:{for:t.id}}),t._v(" "),t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"modal-transition"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showing,expression:"showing"}],staticClass:"modal-shade",attrs:{layout:"row center-center"}},[n("div",{staticClass:"modal"},[n("div",{staticClass:"modal-header"},[n("div",{attrs:{layout:"row center-justify"}},[n("span",{staticClass:"modal-title",attrs:{self:"size-x1"}},[t._v(t._s(t.title))]),t._v(" "),n("div",[t._t("modal-header"),t._v(" "),n("div",{staticClass:"modal-close-button"})],2)])]),t._v(" "),n("div",{staticClass:"modal-body"},[t._t("default")],2),t._v(" "),n("div",{staticClass:"modal-footer"},[t._t("modal-footer")],2)])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"float"},[t._t("host"),t._v(" "),n("transition",{attrs:{name:"float"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],staticClass:"float-panel"},[t._t("content")],2)])],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"paginator"},[n("div",{staticClass:"paginator-body"},[t._t("default",null,{data:t.data,pageNumber:t.pageNumber})],2),t._v(" "),n("div",{staticClass:"paginator-footer",attrs:{layout:"row center-justify"}},[n("div",{staticClass:"paginator-button paginator-page-previous",on:{click:t.movePrevious}},[n("span",[t._v("Prev")])]),t._v(" "),n("div",{staticClass:"paginator-page-numbers"},t._l(t.pages.length,function(e){return n("div",{staticClass:"paginator-button paginator-page-number",class:{active:e===t.pageNumber},on:{click:function(n){t.moveTo(e)}}},[n("span",[t._v(t._s(e))])])})),t._v(" "),n("div",{staticClass:"paginator-button paginator-page-next",on:{click:t.moveNext}},[n("span",[t._v("Next")])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.selected?n("div",{staticClass:"tab-pane"},[t._t("default")],2):t._e()},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("floating-panel",{staticClass:"date-picker",attrs:{visible:t.visible}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.formattedValue,expression:"formattedValue"}],attrs:{type:"text",readonly:""},domProps:{value:t.formattedValue},on:{focus:function(e){t.show()},input:function(e){e.target.composing||(t.formattedValue=e.target.value)}},slot:"host"}),t._v(" "),n("p",{on:{click:function(e){t.updateValue(new Date)}},slot:"content"},[t._v("Hello")])])},staticRenderFns:[]}}]);
//# sourceMappingURL=components.bundle.js.map
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vuetiful Component Framework</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/dist/app.style.css">
<style>
body {
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
}
#topbar {
border-bottom: 1px solid #DDDDEE;
z-index: 1000;
}
#topbar-sidebar,
#content-sidebar {
border-right: 1px solid;
}
#topbar-sidebar {
background-color: #2196F3;
border-right-color: #2196F3;
}
#app-title {
margin: 1rem 0;
padding: 0 2rem;
color: #FFFFFF;
}
#content-sidebar {
border-right-color: #DDDDEE;
}
#content-sidebar,
#content-page {
padding: 1rem;
overflow-y: auto;
}
#content-sidebar .menu-item {}
</style>
</head>
<body>
<div id="app" layout="column">
<div id="topbar" layout="row center-stretch">
<div id="topbar-sidebar" self="size-xxsmall">
<h3 id="app-title">Vuetiful</h3>
</div>
<div id="topbar-page" self="size-x1"></div>
</div>
<div id="content" self="size-x1" layout="row stretch-stretch">
<div id="content-sidebar" self="size-xxsmall">
<div class="menu">
<div class="menu-group">
<span class="menu-group-title">Components</span>
<div class="menu-item" v-for="menu in menuItems">
<router-link :to="menu.route" class="escape-link">{{ menu.name }}</router-link>
</div>
</div>
</div>
</div>
<div id="content-page" self="size-x1">
<div class="container">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</div>
</div>
<script src="/dist/app.bundle.js"></script>
</body>
</html>
================================================
FILE: license.txt
================================================
MIT License
Copyright (c) 2017 Andrew Courtice
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: package.json
================================================
{
"name": "vuetiful",
"description": "Component framework written on top of the Vue reactive library",
"version": "0.1.0",
"author": "Andrew Courtice",
"repository": "https://github.com/andrewcourtice/vuetiful.git",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
"build:components": "cross-env NODE_ENV=production SCOPE=components webpack --progress --hide-modules",
"build:app": "cross-env NODE_ENV=production SCOPE=app webpack --progress --hide-modules",
"start": "npm run dev",
"test": "mocha"
},
"dependencies": {
"core-js": "^2.4.1",
"date-fns": "^1.28.2",
"flex-layout-attribute": "^1.0.3",
"vue": "^2.2.6",
"vue-router": "^2.3.1"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"chai": "^3.5.0",
"cross-env": "^3.0.0",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.1",
"mocha": "^3.2.0",
"node-sass": "^4.5.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.2",
"webpack-bundle-analyzer": "^2.2.0",
"webpack-dev-server": "^2.4.2"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: [
require("autoprefixer")
]
};
================================================
FILE: readme.md
================================================
# Vuetiful
Vuetiful is a component framework written on top of the Vue reactive library. It is primarily designed for creating business/administration applications where the displaying of data is paramount. Although targeted primarily at business applications, Vuetiful is extremely flexible and easily themed making it trivial to integrate into any website.
**Update:** *Due to time limitations this project has been discontinued. Please feel free to use or distribute any of the code in this repo as per the license below.*
## Getting started
This project is still very much in the early days of development so it is not currently available on npm (but will be soon).
To use the components simply download the `components.bundle.js` and `app.style.css` files from the `/dist` directory and link to them in your html.
Alternatively, if you would like to see a demo of the current set of components and styles you can clone this repo and build it to see a demo application. After cloning the repo run:
```bash
npm install
npm start
```
A browser window will automatically open and load the demo app.
## License
MIT License
Copyright (c) 2017 Andrew Courtice
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: src/aggregators/aggregators.js
================================================
import min from "./min";
import max from "./max";
import count from "./count";
import average from "./average";
import total from "./total";
import variance from "./variance";
import standardDeviation from "./standard-deviation";
import median from "./median";
export default {
min,
max,
count,
average,
total,
variance,
standardDeviation,
median
}
================================================
FILE: src/aggregators/average.js
================================================
import averageOf from "../utilities/average-of";
export default {
label: "Average",
callback: averageOf,
format: true
}
================================================
FILE: src/aggregators/count.js
================================================
export default {
label: "Count",
callback: (array) => array.length
}
================================================
FILE: src/aggregators/max.js
================================================
import maxOf from "../utilities/max-of";
export default {
label: "Maximum",
callback: maxOf,
format: true
}
================================================
FILE: src/aggregators/median.js
================================================
import medianOf from "../utilities/median-of";
export default {
label: "Median",
callback: medianOf
}
================================================
FILE: src/aggregators/min.js
================================================
import minOf from "../utilities/min-of";
export default {
label: "Minimum",
callback: minOf,
format: true
}
================================================
FILE: src/aggregators/standard-deviation.js
================================================
import standardDeviationOf from "../utilities/standard-deviation-of";
export default {
label: "Standard Deviation",
callback: standardDeviationOf
}
================================================
FILE: src/aggregators/total.js
================================================
import totalOf from "../utilities/total-of";
export default {
label: "Total",
callback: totalOf,
format: true
}
================================================
FILE: src/aggregators/variance.js
================================================
import varianceOf from "../utilities/variance-of";
export default {
label: "Variance",
callback: varianceOf
}
================================================
FILE: src/assets/styles/abstract/_functions.scss
================================================
@function pow($base, $exponent: 2) {
$value: $base;
@for $i from 1 through ($exponent - 1) {
$value: ($value * $base);
}
@return $value;
}
================================================
FILE: src/assets/styles/abstract/_mixins.scss
================================================
@mixin truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
================================================
FILE: src/assets/styles/abstract/_variables.scss
================================================
$base-point-size: 8px;
$typography-ratio: 1.333;
$font-size: 16px;
$line-height: 1.5em;
$colour-font: #32394F;
$colour-font-negative: #FFFFFF;
$colour-background: #FFFFFF;
$colour-background-medium: #FAFAFC;
$colour-border: #DDDDEE;
$colour-border-light: #EEEEEE;
$colour-primary: #2196F3;
$colour-accents: (
blue: #2196F3,
green: #00B378,
red: #F44336,
yellow: #FFC107,
orange: #FF9800,
purple: #673AB7
);
$colour-variation: 10%;
$border-radius: 2px;
================================================
FILE: src/assets/styles/core/_animations.scss
================================================
.fade {
&-enter-active,
&-leave-active {
transition: opacity 250ms ease-out;
}
&-enter,
&-leave {
opacity: 0;
}
}
================================================
FILE: src/assets/styles/core/_base.scss
================================================
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
html {
font-size: $font-size;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: $line-height;
color: $colour-font;
background-color: $colour-background;
}
button,
input,
textarea,
select,
optgroup {
color: inherit;
font: inherit;
margin: 0;
}
================================================
FILE: src/assets/styles/core/_buttons.scss
================================================
.button {
display: inline-block;
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: 600;
line-height: inherit;
text-align: center;
color: $colour-font-negative;
background-color: $colour-primary;
border: none;
border-radius: $border-radius;
outline: none;
cursor: pointer;
&:hover,
&:active {
color: $colour-font-negative;
background-color: darken($colour-primary, $colour-variation);
}
}
@each $name, $colour in $colour-accents {
.button-#{ $name } {
background-color: $colour;
&:hover,
&:active {
color: $colour-font-negative;
background-color: darken($colour, $colour-variation);
}
}
}
================================================
FILE: src/assets/styles/core/_inputs.scss
================================================
input[type="text"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="password"],
input[type="search"],
select {
display: inline-block;
width: 250px;
height: 3rem;
padding: 0 0.75rem;
background-color: $colour-background;
border: 1px solid $colour-border;
border-radius: 2px;
outline: none;
&:focus,
&:active {
border-color: $colour-primary;
}
}
================================================
FILE: src/assets/styles/core/_labels.scss
================================================
.label {
display: inline-block;
min-width: 1.5em * $typography-ratio;
padding: 0 0.5em;
font-size: 1em/$typography-ratio;
font-weight: 600;
line-height: inherit;
text-align: center;
color: $colour-font;
background-color: $colour-background-medium;
border-radius: $border-radius;
}
.label-primary {
color: $colour-font-negative;
background-color: $colour-primary;
}
@each $name, $colour in $colour-accents {
.label-#{ $name } {
color: $colour-font-negative;
background-color: $colour;
}
}
================================================
FILE: src/assets/styles/core/_layout.scss
================================================
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.grid-row {
margin-left: -0.5rem;
margin-right: -0.5rem;
& + .grid-row {
margin-top: 1rem;
}
}
.grid-cell {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
================================================
FILE: src/assets/styles/core/_menus.scss
================================================
.menu {
}
.menu-group {
&:not(:last-child) {
margin-bottom: 1.5rem;
}
}
.menu-group-title,
.menu-item {
padding-left: 1rem;
padding-right: 1rem;
}
.menu-group-title {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
}
.menu-item {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
&:hover {
background-color: $colour-background-medium;
}
}
================================================
FILE: src/assets/styles/core/_tables.scss
================================================
$color-table-row-alt: #FAFAFA;
.table-wrapper {
display: block;
width: 100%;
border: 1px solid $colour-border;
border-radius: 2px;
& table {
border: none;
}
}
table {
table-layout: fixed;
width: 100%;
background-color: $colour-background;
border-collapse: collapse;
border: 1px solid $colour-border;
}
.table-striped {
& tr {
&:nth-child(even) {
& > td {
background-color: $color-table-row-alt;
}
}
}
}
th,
td {
text-align: left;
&:last-of-type {
border-right: none;
}
}
th {
padding: 0.75rem 1rem;
font-weight: 600;
background-color: $colour-background-medium;
border-right: 1px solid $colour-border;
border-bottom: 1px solid $colour-border;
}
td {
padding: 0.5rem 1rem;
border-right: 1px solid $colour-border-light;
border-bottom: 1px solid $colour-border-light;
@include truncate-text;
}
tbody,
tfoot {
&:last-of-type {
& tr {
&:last-of-type {
& > td {
border-bottom: none;
}
}
}
}
}
tfoot {
& td {
font-weight: 600;
}
& tr {
&:first-of-type {
& td {
border-top: 1px solid $colour-border;
}
}
}
}
================================================
FILE: src/assets/styles/core/_typography.scss
================================================
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1em;
margin-bottom: 0.25em;
font-weight: 600;
line-height: $line-height;
color: $colour-font;
}
h1 {
font-size: #{ pow($typography-ratio, 4) }em;
}
h2 {
font-size: #{ pow($typography-ratio, 3) }em;
}
h3 {
font-size: #{ pow($typography-ratio) }em;
}
h4 {
font-size: $typography-ratio * 1em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em/$typography-ratio;
}
p {
margin: 0.75em 0;
}
small {
font-size: 1em/$typography-ratio;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
a {
color: $colour-primary;
text-decoration: none;
&:hover {
color: darken($colour-primary, $colour-variation);
}
&.escape-link {
color: inherit;
&:hover {
color: inherit;
}
}
}
label {
display: block;
font-weight: 600;
font-size: 1em/$typography-ratio;
}
blockquote {
display: block;
margin: 1em 0;
padding: 0 1em;
color: #888;
font-weight: 600;
border-left: 4px solid #2196F3;
}
code {
display: block;
margin: 1em 0;
padding: 1em;
font-family: monospace;
white-space: pre;
background-color: #FAFAFA;
border: 1px solid $colour-border;
border-radius: $border-radius;
}
================================================
FILE: src/assets/styles/site.scss
================================================
@import "./abstract/_variables.scss";
@import "./abstract/_functions.scss";
@import "./abstract/_mixins.scss";
@import "./core/_base.scss";
@import "./core/_typography.scss";
@import "./core/_layout.scss";
@import "./core/_buttons.scss";
@import "./core/_inputs.scss";
@import "./core/_labels.scss";
@import "./core/_menus.scss";
@import "./core/_tables.scss";
@import "./core/_animations.scss";
================================================
FILE: src/components/calendar/calendar.vue
================================================
<template>
<div class="calendar table-wrapper">
<div class="calendar-header" layout="row center-justify">
<button class="button" @click="previous">Previous</button>
<div class="calendar-month-name">{{ calendar.startDate | date("MMMM YYYY") }}</div>
<button class="button" @click="next">Next</button>
</div>
<table>
<thead>
<tr>
<td v-for="weekday in calendar.weekdays">{{ weekday }}</td>
</tr>
</thead>
<tbody>
<tr class="calendar-week" v-for="(week, index) in calendar.weeks">
<template v-if="index == 0">
<td class="calendar-day" v-for="spacer in calendar.paddingStart"></td>
</template>
<td class="calendar-day" v-for="day in week">
<div>{{ day.getDate() }}</div>
</td>
<template v-if="(index + 1) == calendar.weeks.length">
<td class="calendar-day" v-for="spacer in calendar.paddingEnd"></td>
</template>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import CalendarMonth from "../../services/calendar.js";
import format from "date-fns/format";
export default {
data() {
return {
calendar: new CalendarMonth()
};
},
methods: {
previous() {
this.calendar.previousMonth();
},
next() {
this.calendar.nextMonth();
}
},
filters: {
date(value, pattern) {
return format(value, pattern);
}
}
}
</script>
================================================
FILE: src/components/chip/chip.vue
================================================
<template>
<div class="chip">
<div layout="row stretch-justify">
<div class="chip-body">
<slot></slot>
</div>
<div class="chip-footer" layout="row center-center" v-if="removable">
<div class="chip-close-button" @click="remove" title="Click to remove"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
removable: {
type: Boolean,
default: true
}
},
methods: {
remove() {
this.$emit("remove", this);
}
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.chip {
display: inline-block;
min-width: 1.5em * $typography-ratio;
text-align: left;
color: $colour-font;
background-color: $colour-background-medium;
border-radius: $border-radius;
}
.chip-body,
.chip-footer {
padding: 0.25rem 0.5rem;
}
.chip-footer {
background-color: darken($colour-background-medium, 2.5%);
}
.chip-close-button {
position: relative;
width: 1.25rem;
height: 1.25rem;
border-radius: $border-radius;
cursor: pointer;
&:hover {
background-color: darken($colour-background-medium, $colour-variation);
}
&:before,
&:after {
display: block;
position: absolute;
content: " ";
top: 50%;
left: 10%;
width: 80%;
height: 2px;
margin-top: -1px;
background-color: currentColor;
transform-origin: center center;
}
&:before {
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
}
</style>
================================================
FILE: src/components/components.js
================================================
import Calendar from "./calendar/calendar.vue";
import Checkbox from "./toggles/checkbox.vue";
import Chip from "./chip/chip.vue";
import DataTable from "./datatable/datatable.vue";
import DataTableColumn from "./datatable/datatable-column.vue";
import DateTimePicker from "./datetime-picker/datetime-picker.vue";
import Dynamic from "./dynamic/dynamic";
import FloatingPanel from "./floating-panel/floating-panel.vue";
import Modal from "./modal/modal.vue";
import Paginator from "./paginator/paginator.vue";
import Panel from "./panel/panel.vue";
import Radio from "./toggles/radio.vue";
import TabControl from "./tab-control/tab-control.vue";
import TabPane from "./tab-control/tab-pane.vue";
import Toggle from "./toggles/toggle.vue";
export default {
calendar: Calendar,
checkbox: Checkbox,
chip: Chip,
datatable: DataTable,
datatableColumn: DataTableColumn,
datetimePicker: DateTimePicker,
dynamic: Dynamic,
floatingPanel: FloatingPanel,
modal: Modal,
paginator: Paginator,
panel: Panel,
radio: Radio,
toggle: Toggle,
tabControl: TabControl,
tabPane: TabPane
}
================================================
FILE: src/components/datatable/datatable-cell.js
================================================
const defaultTemplate = "<span>{{ column.formatData(row[column.id]) }}</span>";
const editableTemplate = '<input type="text" v-model="row[column.id]"/>';
const optimizedEditableTemplate = '<input type="text" v-model.lazy="row[column.id]"/>';
function getChildComponent(editable, optimize) {
let component = {
template: defaultTemplate,
props: ["row", "column"]
};
if (editable) {
component.template = optimize ? optimizedEditableTemplate : editableTemplate;
}
return component;
}
export default {
functional: true,
name: "datatable-cell",
props: {
row: Object,
column: Object,
editable: {
type: Boolean,
default: false
},
optimize: {
type: Boolean,
default: false
}
},
render(createElement, context) {
let row = context.props.row;
let column = context.props.column;
let cell = "td";
let cellProps = {
class: {
"datatable-cell": true
},
style: column.columnStyles
};
if (column.template) {
let vNode = column.template({
row,
column,
value: row[column.id]
});
return createElement(cell, cellProps, [vNode]);
}
let child = getChildComponent(context.props.editable, context.props.optimize);
let childProps = {
props: {
row,
column
}
};
return createElement(cell, cellProps, [
createElement(child, childProps)
]);
}
}
================================================
FILE: src/components/datatable/datatable-collection.vue
================================================
<template>
<div class="datatable-collection">
<table v-if="groupable" :class="{ 'table-striped': striped }">
<tr v-for="(data, group, index) in groups">
<td class="datatable-group" :colspan="columnSpan">
<div class="datatable-group-header" layout="row center-justify">
<div self="size-x1">
<span class="datatable-group-label" :style="indentStyle">{{ groupingColumn.formatData(group) }}</span>
</div>
<span class="label label-primary datatable-row-count" v-if="data.length > 1">{{ data.length }}</span>
</div>
<datatable-collection
:rows="data"
:columns="columns"
:striped="striped"
:editable="editable"
:line-numbers="lineNumbers"
:aggregated="aggregated"
:margin="margin"
:grouping-columns="groupingColumns"
:grouping-index="groupingIndex + 1"
:collection-index="collectionIndex * index"
:optimize="optimize"
:message="message">
</datatable-collection>
</td>
</tr>
</table>
<table v-else class="datatable-resultset" :class="{ 'table-striped': striped }">
<tr v-if="rows.length < 1">
<td class="datatable-info-cell" :colspan="columnSpan">{{ message }}</td>
</tr>
<tr v-for="(row, index) in rows">
<td v-if="lineNumbers" class="datatable-cell datatable-linenumber-cell" :style="{ width: margin }">{{ collectionIndex + index + 1 }}</td>
<td v-if="aggregated" class="datatable-cell datatable-aggregate-cell"> </td>
<datatable-cell v-for="column in columns" :key="column.id" :column="column" :row="row" :editable="editable" :optimize="optimize"></datatable-cell>
</tr>
</table>
</div>
</template>
<script>
import DatatableCell from "./datatable-cell.js";
import groupBy from "../../utilities/group-by.js";
export default {
name: "datatable-collection",
props: {
rows: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
groupingColumns: {
type: Array
},
groupingIndex: {
type: Number,
default: 0
},
striped: {
type: Boolean,
default: true
},
editable: {
type: Boolean,
default: false
},
lineNumbers: {
type: Boolean,
default: false
},
aggregated: {
type: Boolean,
default: false
},
margin: {
type: String,
default: "1.5em"
},
collectionIndex: {
type: Number,
default: 0
},
optimize: {
type: Boolean,
default: false
},
message: {
type: String,
default: "No results",
required: false
}
},
computed: {
groupable() {
return this.groupingIndex < this.groupingColumns.length;
},
groupingColumn() {
let columnId = this.groupingColumns[this.groupingIndex];
return this.columns.find(column => column.id === columnId);
},
groups() {
let columnId = this.groupingColumn.id;
return groupBy(this.rows, row => row[columnId]);
},
columnSpan() {
return this.columns.length + (this.lineNumbers ? 1 : 0);
},
indentStyle() {
let margin = this.groupingIndex * 1.5;
return {
"margin-left": margin + "rem"
};
}
},
components: {
datatableCell: DatatableCell
}
}
</script>
================================================
FILE: src/components/datatable/datatable-column.vue
================================================
<template>
<th :style="columnStyles" title="Click to sort. Drag to center to group." @click="sort" v-drag:start="dragStart">
<div class="datatable-column" :layout="columnLayout">
<div>
<slot>{{ label || id }}</slot>
</div>
<div class="datatable-sort-arrow" :class="sortArrowClass" v-show="sorting"></div>
</div>
</th>
</template>
<script>
const alignments = [
"left",
"center",
"right",
"auto"
];
const sortClassMap = {
"1": "asc",
"-1": "desc"
};
export default {
props: {
id: {
type: String,
required: true
},
label: {
type: String
},
width: {
type: [ Number, String ]
},
alignment: {
type: String,
default: "left",
validator: value => {
return alignments.indexOf(value) > -1;
}
},
formatter: {
type: Function
},
sortable: {
type: Boolean,
default: true
},
groupable: {
type: Boolean,
default: true
},
aggregators: {
type: Array
}
},
data() {
return {
sortingDirection: 1
};
},
computed: {
sorting: {
get() {
return (this.$parent.sortingId === this.id && this.sortable);
},
set(value) {
if (value && this.sortable) {
this.$parent.sortingId = this.id;
}
}
},
grouping: {
get() {
return (this.$parent.groupingColumnIds.indexOf(this.id) > -1);
}
},
columnWidth() {
if (!this.width) {
return;
}
let suffix = isNaN(this.width) ? "" : "%";
return this.width + suffix;
},
columnLayout() {
let direction = this.alignment !== "right" ? "row" : "row-reverse";
return direction + " center-justify";
},
columnStyles() {
let alignment = this.alignment === "left" ? null : this.alignment;
return {
width: this.columnWidth,
textAlign: alignment
};
},
sortArrowClass() {
let direction = sortClassMap[this.sortingDirection];
return "datatable-sort-arrow-" + direction;
},
template() {
return this.$parent.$scopedSlots[this.id];
}
},
methods: {
sort() {
if (this.sorting) {
this.sortingDirection *= -1;
return;
}
this.sorting = true;
},
formatData(value) {
if (!this.formatter) {
return value;
}
return this.formatter(value);
},
dragStart(event) {
event.stopPropagation();
event.dataTransfer.dropEffect = "copy";
event.dataTransfer.setData("text", this.id);
}
},
created() {
let addColumn = this.$parent.addColumn;
if (!addColumn) {
console.warn("A datatable-column must be registered within a datatable component.");
return;
}
addColumn(this);
},
destroyed() {
this.$parent.removeColumn(this);
}
}
</script>
<style lang="scss">
$sort-arrow-size: 0.375rem;
$sort-arrow-offset: $sort-arrow-size / 2;
.datatable-column {
padding: 0.75rem 1rem;
cursor: pointer;
user-select: none;
}
.datatable-sort-arrow {
width: 0;
height: 0;
border: $sort-arrow-size solid transparent;
}
.datatable-sort-arrow-asc {
border-bottom-color: currentColor;
transform: translate(0, -$sort-arrow-offset);
}
.datatable-sort-arrow-desc {
border-top-color: currentColor;
transform: translate(0, $sort-arrow-offset);
}
</style>
================================================
FILE: src/components/datatable/datatable.vue
================================================
<template>
<div class="datatable table-wrapper" :class="tableClasses">
<table>
<thead class="datatable-columns">
<tr>
<th v-if="lineNumbers" :style="{ width: lineColumnWidth }">
<div class="datatable-column datatable-linenumber-column">#</div>
</th>
<th v-if="aggregated">
<div class="datatable-column datatable-aggregate-column">Aggregate</div>
</th>
<slot></slot>
</tr>
</thead>
<tbody class="datatable-groups" v-if="groupingColumnIds.length > 0">
<tr>
<td class="datatable-groups-header" :colspan="columnSpan">
<chip class="datatable-group-chip" v-for="(column, index) in groupingColumns" :key="column.id" @remove="degroupColumn(column)">
<div>
<small>
<strong>{{ index == 0 ? "Grouping By:" : "Then:" }}</strong>
</small>
</div>
<div>{{ column.label }}</div>
</chip>
</td>
</tr>
</tbody>
<tbody class="datatable-collections" v-drag:enter="dragEnter" v-drag:leave="dragLeave" v-drag:over="dragOver" v-drag:drop="dragDrop">
<tr>
<td class="datatable-group" :colspan="columnSpan">
<datatable-collection
:rows="rows"
:columns="columns"
:striped="striped"
:editable="editable"
:line-numbers="lineNumbers"
:aggregated="aggregated"
:grouping-columns="groupingColumnIds"
:margin="lineColumnWidth"
:message="message">
</datatable-collection>
</td>
</tr>
</tbody>
<tfoot class="datatable-aggregators" v-if="aggregated">
<tr>
<td class="datatable-info-cell" :colspan="columnSpan"> </td>
</tr>
<tr v-for="(aggregator, index) in aggregators" :key="aggregator.label">
<td v-if="lineNumbers" class="datatable-linenumber-cell">{{ index + 1 }}</td>
<td v-if="aggregated" class="datatable-aggregate-cell">{{ aggregator.label }}</td>
<td v-for="column in columns" :style="column.columnStyles">{{ aggregate(column, aggregator) }}</td>
</tr>
</tfoot>
</table>
<div class="datatable-options" layout="row center-justify" v-if="filterable">
<input type="text" placeholder="Filter this dataset. Press enter to search..." v-model.lazy="filter" self="size-x1" v-if="optimize">
<input type="text" placeholder="Filter this dataset..." v-model="filter" self="size-x1" v-else>
</div>
</div>
</template>
<script>
import DatatableCollection from "./datatable-collection.vue";
import filterBy from "../../utilities/filter-by.js";
import sortBy from "../../utilities/sort-by.js";
import { isCollection } from "../../utilities/base/type-validator.js";
export default {
props: {
fixed: {
type: Boolean,
default: true
},
striped: {
type: Boolean,
default: true
},
source: {
type: Array,
default: () => []
},
editable: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: true
},
lineNumbers: {
type: Boolean,
default: false
},
threshold: {
type: Number,
default: 50
},
message: {
type: String,
default: "No results"
}
},
data() {
return {
columns: [],
filter: null,
sortingId: null,
groupingColumnIds: [],
groupingDropzoneActive: false
};
},
computed: {
sortingColumn() {
return this.columns.find(column => column.id === this.sortingId);
},
groupingColumns() {
return this.groupingColumnIds.map(columnId => {
return this.columns.find(column => column.id === columnId);
});
},
tableClasses() {
return {
"datatable-editable": this.editable,
"table-fixed": this.fixed
};
},
groupableColumns() {
return this.columns.filter(column => column.groupable);
},
rows() {
let rows = this.source;
// Filter the rows first to reduce the set (if a filter is supplied) we need to sort
if (this.filter) {
rows = filterBy(rows, this.filter);
}
// Sort the filtered set
if (this.sortingColumn) {
rows = sortBy(rows, row => row[this.sortingColumn.id], this.sortingColumn.sortingDirection);
}
return rows;
},
columnSpan() {
let columnSpan = this.columns.length;
if (this.lineNumbers) {
columnSpan++
}
if (this.aggregated) {
columnSpan ++
}
return columnSpan;
},
lineColumnWidth() {
let count = this.source.length;
return count.toString().length + 2 + "em";
},
aggregators() {
let aggregators = [];
for (let column of this.columns) {
if (!column.aggregators) {
continue;
}
aggregators = aggregators.concat(column.aggregators);
}
return aggregators.filter((item, index, arr) => {
return index === arr.indexOf(item);
});
},
aggregated() {
return this.aggregators && this.aggregators.length > 0;
},
optimize() {
return this.source.length >= this.threshold;
}
},
methods: {
addColumn(column) {
this.columns.push(column);
},
removeColumn(column) {
let index = this.columns.indexOf(column);
this.columns.splice(index, 1);
},
groupColumn(column) {
this.groupingColumnIds.push(column.id);
},
degroupColumn(column) {
let index = this.groupingColumnIds.indexOf(column.id);
this.groupingColumnIds.splice(index, 1);
},
aggregate(column, aggregator) {
const noResult = " ";
if (!column.aggregators || column.aggregators.indexOf(aggregator) === -1) {
return noResult;
}
let result = aggregator.callback.call(column, this.rows, row => row[column.id]);
if (!result || isCollection(result)) {
return noResult;
}
return aggregator.format ? column.formatData(result) : result;
},
dragDrop(event) {
event.preventDefault();
let columnId = event.dataTransfer.getData("text");
let column = this.groupableColumns.find(item => {
return item.id === columnId;
});
if (column && !column.grouping) {
this.groupColumn(column);
}
},
dragOver(event) {
event.preventDefault();
},
dragEnter(event) {
event.preventDefault();
this.groupingDropzoneActive = true;
},
dragLeave(event) {
event.preventDefault();
this.groupingDropzoneActive = false;
}
},
components: {
datatableCollection: DatatableCollection
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.datatable {
& th {
padding: 0;
}
}
.datatable-linenumber-column,
.datatable-linenumber-cell {
text-align: center;
}
.datatable-linenumber-cell,
.datatable-aggregate-cell {
font-weight: 600;
background-color: $colour-background-medium !important;
border-right-color: $colour-border;
}
.datatable-group-chip {
margin-right: 0.5rem;
}
.datatable-collection {
& .datatable-collection {
& .datatable-resultset {
border-top: 1px solid $colour-border;
}
}
}
.datatable-group {
padding: 0;
background-color: $colour-background;
border-bottom: 1px solid $colour-border;
}
.datatable-groups-header {
border-bottom: 1px solid $colour-border;
}
.datatable-group-header {
padding: 0.5rem 1rem;
background-color: $colour-background-medium;
}
.datatable-grouping-over {
box-shadow: 0 0 0 2px $colour-primary;
}
.datatable-row-indent {
display: inline-block;
width: 1.5rem;
height: 1em;
}
.datatable-group-label {
font-weight: 600;
}
.datatable-info-cell {
text-align: center;
font-weight: 600;
}
.datatable-aggregators {
& .datatable-info-cell {
border-bottom: 1px solid $colour-border;
}
}
.datatable-options {
padding: 0.75rem 1rem;
background-color: $colour-background-medium;
border-top: 1px solid $colour-border;
}
.datatable-editable {
& .datatable-cell {
position: relative;
padding: 0 !important;
overflow: visible;
& input,
& select {
display: block;
width: 100%;
height: auto;
padding: 0.5rem 1rem;
background-color: transparent;
border: none;
border-radius: 0;
&:focus,
&:active {
box-shadow: 0 0 0 2px $colour-primary;
}
}
}
}
</style>
================================================
FILE: src/components/datatable/readme.md
================================================
# Datatable
The datatable component is essentially a "glorified table" designed to efficiently display dense data. Datatables aren't a heavily used component but they are fundamental to business applications - particularly ones displaying financial data or dashboards. A good datatable is hard to come by these days. Often they are too bulky, poorly designed, rigid, lack features or have too many dependencies on other frameworks. I have aimed to mitigate most of these problems with the Vuetiful datatable but I expect there will be features lacking that you need.
If you would like a feature added to the datatable or if you find a bug, please open an issue on this repo.
**Note:** The line numbering is a little bit quirky in multi-group mode. I'll hopefully have it fixed soon.
To see a demo of this component in action check out this codepen example: [http://codepen.io/andrewcourtice/full/woQzpa](http://codepen.io/andrewcourtice/full/woQzpa).
- [Getting Started](#getting-started)
- [Props](#props)
- [Datatable](#datatable-1)
- [Datatable Column](#datatable-column)
- [Formatting Data](#formatting-data)
- [Sorting Data](#sorting-data)
- [Grouping Data](#grouping-data)
- [Editing Data](#editing-data)
- [Customizing the Datatable](#customizing-the-datatable)
- [Header Templates](#header-templates)
- [Cell Templates](#cell-templates)
- [View Mode](#view-mode)
- [Edit Mode](#edit-mode)
- [Aggregation](#aggregation)
- [Pagination](#pagination)
- [Optimization](#optimization)
## Getting Started
Using the datatable is trivial. Just drop a `datatable` element in your html and start defining some `datatable-columns`. Refer to the **props** section below to see what props you can use with this component. I'll also talk about customizing cell and header templates using slots later. Here's a basic example:
```html
<datatable>
<datatable-column id="datatable-column-1" label="Column 1"></datatable-column>
<datatable-column id="datatable-column-2" label="Column 2"></datatable-column>
<datatable-column id="datatable-column-3" label="Column 3"></datatable-column>
</datatable>
```
You can also use Vue's list rendering features to define columns in your viewmodel.
```javascript
new Vue({
el: "#app",
data: function() {
return {
columns: [
{ id: "datatable-column-1", label: "Column 1" },
{ id: "datatable-column-2", label: "Column 2" },
{ id: "datatable-column-3", label: "Column 3" }
]
};
}
});
```
```html
<datatable>
<datatable-column v-for="column in columns" :id="column.id" :label="column.label"></datatable-column>
</datatable>
```
## Props
### Datatable
```html
<datatable
:source="customers.data"
:striped="customers.striped"
:filterable="customers.filterable"
:editable="customers.editable"
:line-numbers="customers.lineNumbers">
<!-- datatable-column -->
</datatable>
```
| Prop | Type | Required | Default | Description |
| ---- | ---- | :------: | ------- | ----------- |
| source | array[object] | no | [] | An array of objects to display in the table. a.k.a. - the data. This is often JSON fetched from your application and parsed |
| striped | boolean | no | true | Whether the table should display alternate row coloring |
| filterable | boolean | no | true | Whether the table should display a textbox in the footer for filtering the current dataset |
| editable | boolean | no | false | Whether the table should be displayed in edit mode. See [Editing Data](#editing-data) |
| line-numbers | boolean | no | true | Whether the table should display line numbers on the left of each row |
| threshold | number | no | 50 | The maximum number of rows before the datatable enables performance optimizations. See [Optimization](#optimization). |
**Note:** For specifying literal true values on props you can use a shorthand version. eg. instead of writing `editable="true"` you can just use the existence of the prop to define it's value eg. `editable`.
### Datatable Column
```html
<datatable-column
:id="column.id"
:label="column.label"
:width="column.width"
:sortable="column.sortable"
:groupable="column.groupable"
:aggregators="column.aggregators"
:formatter="column.formatter">
</datatable-column>
```
| Prop | Type | Required | Default | Description |
| ---- | ---- | :------: | ------- | ----------- |
| id | string | yes | | The uniqie id of this column. The id must correspond to a property on the objects in your data source |
| label | string | no | this.id | The label of this column to display in the header of the table. If none is specified, the id of this column will be used |
| width | string or number | no | | The width of the column. If a number is supplied the component will assume a percentage (eg. 25 = 25%). If a string is supplied the component will interpret it literally (eg. 3px, 3.5rem, 4em etc.) |
| sortable | boolean | no | true | Whether this row can be used for sorting |
| groupable | boolean | no | true | Whether this row can be used for grouping |
| aggregators | array | no | | A set of aggregate functions the column should use to process data in this column. See [Aggregators](#aggregators) for more information |
| formatter | function | no | | A function used to format the data in this column before it is displayed. This is particularly useful for dates and numeric value. See [Formatting Data](#formatting-data) |
## Formatting Data
More often than not you will likely run into a situation where you need to display data in a different format than it's raw form. This is common for dates and numbers. As seen above, each column has a `formatter` prop which allows you to specify a function that formats the data for that cell. There are several ways you could do this but using our basic example above, let's take a look at one way how you would implement a custom formatter:
```javascript
new Vue({
el: "#app",
data: function() {
return {
/* replace with real data */
data: []
};
},
methods: {
formatCurrency: function(value) {
var currency = parseFloat(value);
if (isNaN(currency)) {
return value;
}
return "$" + currency.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
}
}
});
```
```html
<datatable>
<datatable-column id="datatable-column-1" label="Column 1"></datatable-column>
<datatable-column id="datatable-column-2" label="Column 2"></datatable-column>
<datatable-column id="datatable-column-3" label="Column 3" :formatter="formatCurrency"></datatable-column>
</datatable>
```
The format function signature expects one parameter which will be the value of the cell. Vuetiful comes with a few formatters already built in such as **currency**, **datetime**, **dateShort**, **dateLong**, **datetimeShort**, **datetimeLong**.
**Note:** The **datetime** formatter requires a format string parameter (eg. "DD MMM YYYY hh:mm"). Because the datatable only sends one parameter through to the formatter function you would have to wrap the formatter in a function before being bound to a column. eg:
```javascript
var formatters = vuteiful.formatters;
new Vue({
el: "#app",
data: function() {
return {
/* replace with real data */
data: []
};
},
methods: {
/*
We need to wrap the datetime formatter in a function that just expects
the value parameter. This way we can tell the datetime formatter which format
we'd like the data displayed in.
*/
customDatetimeFormatter: function(value) {
return formatters.datetime(value, "DD MMMM YYYY h:mm a");
}
}
});
```
## Sorting Data
The datatable allows you to easily sort your data. To sort by a particular column, click the column header at the top of the table. The data will be displayed in ascending order by default. Clicking the same column header again will reverse the sort order (descending).
## Grouping Data
In addition to sorting, the datatable allows you to group your data by multiple columns.
This probably best illustrated with an example. Let's say you have an online T-Shirt business and want to see specific profiles for purchases. Your purchases dataset may have the following columns: **Name**, **Email**, **Product Name**, **Quantity**, **Purchase Date**. Now that you have your data you may want to know which customers bought more than one of a particular T-Shirt on any given day. The process for this would be to group the data by **Purchase Date**, then group those groups by **Product Name**, then finally group the resulting group by **Quantity**. This can be repeated for as many columns as you have in any order.
To group by a particular column, simply drag the column header from the top of the table into the middle of the table. Keep repeating this step for each subsequent column you would like to group by. The columns being grouped on will be displayed at the top of the table under the headers.
To remove a column from the grouping, click the **x** button on the corresponding group at the top of the table.
## Editing Data
A quick note on editing data. When `editable` is set to true on the datatable, the default bahaviour of the table is to convert all the cells into textboxes and remove data formatting. In other words the user will be able to edit the raw data. Typing into the textbox will mutate (change) the data in the array bound to the `source` prop.
## Customizing the Datatable
The datatable is very flexible with customizing how your users interact with the component. One of the ways you can change the component to suit your requirements is templating. This component makes use of Vue's scoped templates to allow you to define your own markup (and custom components) for column headers and cells.
### Header Templates
The default slot on the `datatable-column` component allows you to easily customize the content displayed in the column header. Let's look at an example where we want to have a column to allow users to select rows using a checkbox.
```html
<datatable-column id="select-all" width="3.25rem" :sortable="false" :groupable="false">
<checkbox id="select-all-checkbox" v-model="selectAll"></checkbox>
</datatable-column>
```
**Note:** The `checkbox` component used in the example above is also part of the Vuetiful component framework. Refer to **components/toggles** for how to use `checkbox`, `radio` and `toggle` components.
### Cell Templates
Here is where the flexibility of this component really comes in handy. Sometimes you may want to go beyond just using the default cell template and a custom formatter. Custom cell templates allow you to define specific types of markup or custom components to be used for a particular column instead of the default one built into the component. By default, each cell gets a different template for view and edit modes respectively. Here's what gets rendered into each cell by default:
#### View Mode
```html
<span>{{ column.formatData(row[column.id]) }}</span>
```
#### Edit Mode
```html
<input type="text" v-model="row[column.id]" />
```
To override this all we have to do is define a template in our datatable and tell it to slot into the column we want. Here's an example extending on the custom header template example above:
```html
<datatable :source="customers.data" :editable="customers.editable">
<datatable-column id="select-all" width="3.25rem" :sortable="false" :groupable="false">
<checkbox id="select-all-checkbox" v-model="selectAll"></checkbox>
</datatable-column>
<!-- Define the rest of our columns here -->
<template slot="sel" scope="cell">
<div class="checkable-column">
<checkbox :id="cell.row.id" :val="cell.row" v-model="customers.selected"></checkbox>
</div>
</template>
</datatable>
```
Notice how the `slot="select-all"` prop on the `template` matches the `id="select-all"` prop of the column we want to define a custom template for. Within your custom template a `cell` variable will be available for binding. Here's an outline of the properties available on the `cell` variable:
| Property | Type | Description |
| -------- | ---- | ----------- |
| row | object | The current object that represents this row. This object will have all the properties on it as defined in your data source. This is handy for accessing values for other columns in the current row. |
| column | datatable-column | This is the viewmodel of the current column that the repeater is using to get the value in the row. Calling `formatData(value)` on the column will call the formatter function defined in your `datatable-column`. |
| value | any | This is just some sugar to simplify getting the value for the cell. It is equivalent to calling `row[column.id]` |
At this point you may be wondering how to define a different template for when the datatable is in edit mode. The short answer is: you don't have to. Just use Vue's `v-if` and `v-else` conditional bindings to change the content of the cell. Using this approach means you are in complete control over what gets rendered for the cell. You could even change the components based on the type of value that is in the current cell. Let's see what conditional rendering based on the datatables `editable` prop would look like:
```html
<template slot="sel" scope="cell">
<div v-if="customers.editable">
<!-- Put your custom edit template here -->
</div>
<div v-else>
<!-- Put your custom view template here -->
</div>
</template>
```
## Aggregation
The datatable component supports aggregate functions out-of-the-box. The aggregate functions included are listed below.
| Function | Supported Types | Formatted Output |
| -------- | --------------- | ----------- |
| min | number, date | yes |
| max | number, date | yes |
| count | n/a | no |
| average (mean) | number | yes |
| median | number | yes |
| total | number | yes |
| variance | number | no |
| standard deviation | number | no |
**Note:** *Formatted Output tells the aggregator to format the result for the current column before rendering it in the view.*
If an aggregate function is applied to a column with an unsupported type in it, a null value will be displayed.
To apply aggregation to a column(s) you simply bind an array of aggregators to each column you want to aggregate. Here's how you would use some of the built-in aggregate functions to calculate the **min**, **max** and **total**.
```javascript
var aggregators = vuetiful.aggregators;
new Vue({
el: "#app",
data: function() {
return {
/* ... */
aggregators: [
aggregators.min,
aggregators.max,
aggregators.total
]
};
}
});
```
Then in your view you would bind `:aggregators="aggregators"` like so on any column you would like to apply these aggregate functions to. Of course you can apply different combinations of aggregation to different columns.
## Pagination
Pagination is particularly useful for when you need to display a large set of data but don't want to take up large amounts of screen real-estate displaying it all. It also means our datatable has to do less work by rendering smaller chunks of data at a time.
You may have noticed that there is no option on the datatable for pagination. This is because pagination is not built into the datatable component. The `paginator` is actually a standalone component that allows you to paginate data and inject any child component into it's scope. Given that the `paginator` is a separate component I won't go into too much detail here on how to use it but I will show you a simple example of bundling it with the `datatable`. To see how the `paginator` component works in detail, check out the **components/paginator** folder.
Here's a basic example of using the paginator with the `datatable`:
```html
<paginator :source="customers.data" :page-size="5">
<template scope="page">
<!-- Notice here how we bind the datatable source to the data property exposed from the paginator -->
<!-- this ensures that the only data the datatable is aware of is the current page -->
<datatable id="data-table-main" :source="page.data">
<!-- Datatable columns & templates -->
</datatable>
</template>
</paginator>
```
All we've done here is bound the `paginator` to the root data source instead of the `datatable`. The `datatable` source is then bound to the data exposed by the current page.
## Optimization
Because the datatable component is designed to display large amounts of complex data it wouldn't make sense to have everything running in real-time on large sets of data. Doing so would result in a noticable impact on performance. For this reason you can provide a `threshold` value on the datatable. The threshold tells the datatable to enable performace optimizations as soon as the number of rows in the dataset exceeds the threshold value. Once the threshold is exceeded a few things will happen:
1. Typing in the filter box at the bottom of the table will no longer filter the data in real-time. The filter won't be applied until the enter key is pressed or the textbox loses focus.
2. Typing in an editable cell will no longer edit data in real-time. Changes won;t be applied to the data until the enter key is pressed or the cell loses focus.
================================================
FILE: src/components/datetime-picker/datetime-picker.vue
================================================
<template>
<floating-panel class="date-picker" :visible="visible">
<input type="text" slot="host" v-model="formattedValue" @focus="show()" readonly>
<p slot="content" @click="updateValue(new Date())">Hello</p>
</floating-panel>
</template>
<script>
import { isValid, format } from "date-fns";
const EPOCH_MIN = new Date(-8640000000000000);
const EPOCH_MAX = new Date(8640000000000000);
export default {
props: {
value: {
required: true
},
type: {
type: String,
default: "date"
},
format: {
type: String,
default: "DD-MM-YYYY"
},
minDate: {
type: Date,
default: () => EPOCH_MIN
},
maxDate: {
type: Date,
default: () => EPOCH_MAX
},
minHour: {
type: Number,
default: 0
},
maxHour: {
type: Number,
default: 23
},
minMinute: {
type: Number,
default: 0
},
maxMinute: {
type: Number,
default: 59
}
},
data() {
return {
visible: false
}
},
computed: {
formattedValue() {
return this.value && isValid(this.value) ? format(this.value, this.format) : null;
}
},
methods: {
updateValue(value) {
this.$emit("input", value);
},
show() {
this.visible = true;
let listener = (event) => {
event.stopPropagation();
if (!this.$el.contains(event.target)) {
this.visible = false;
document.removeEventListener("click", listener);
}
};
document.addEventListener("click", listener);
}
}
}
</script>
================================================
FILE: src/components/dynamic/dynamic.js
================================================
export default {
functional: true,
props: {
component: {
type: Object,
required: true
}
},
render: (createElement, context) => {
let component = context.props.component;
if (!component.node) {
console.warn("Dynamic element not rendered. No node name specified.");
return;
}
let definition = {
attrs: component.attrs,
props: component.props,
domProps: component.domProps,
on: component.on
};
if (!component.children) {
return createElement(component.node, definition);
}
let children = component.children.map(child => {
return createElement("dynamic", {
props: {
component: child
}
});
});
return createElement(component.node, definition, children);
}
}
================================================
FILE: src/components/floating-panel/floating-panel.vue
================================================
<template>
<div class="float">
<slot name="host"></slot>
<transition name="float">
<div class="float-panel" v-show="visible">
<slot name="content"></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
},
position: {
type: String,
default: "bottom left"
},
showArrow: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss">
.float {
display: inline-block;
position: relative;
}
.float-panel {
display: block;
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
min-height: 50px;
margin-top: 5px;
background-color: #FFFFFF;
border-radius: 2px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
z-index: 10;
transform-origin: top left;
}
.float-enter,
.float-leave-active {
opacity: 0;
transform: scale(0, 0);
}
.float-enter-active,
.float-leave-active {
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
================================================
FILE: src/components/modal/modal.vue
================================================
<template>
<transition name="modal-transition">
<div class="modal-shade" layout="row center-center" v-show="showing">
<div class="modal">
<div class="modal-header">
<div layout="row center-justify">
<span class="modal-title" self="size-x1">{{ title }}</span>
<div>
<slot name="modal-header"></slot>
<div class="modal-close-button"></div>
</div>
</div>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="modal-footer"></slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
},
data() {
return {
showing: false
};
},
methods: {
open() {
this.showing = true;
this.$emit("open", this);
},
close() {
this.showing = false;
this.$emit("close", this);
}
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.modal-transition {
&-enter-active,
&-leave-active {
transition: opacity 200ms ease-out;
& .modal {
transition: transform 200ms ease-out;
}
}
&-enter,
&-leave {
opacity: 0;
& .modal {
transform: scale(0.8, 0.8);
}
}
}
.modal-shade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.modal {
width: 640px;
background-color: $colour-background;
border-radius: $border-radius;
box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.modal-footer {
background-color: $colour-background-medium;
border-top: 1px solid $colour-border-light;
}
.modal-body {
}
.modal-title {
font-weight: 600;
}
</style>
================================================
FILE: src/components/paginator/paginator.vue
================================================
<template>
<div class="paginator">
<div class="paginator-body">
<slot :data="data" :page-number="pageNumber"></slot>
</div>
<div class="paginator-footer" layout="row center-justify">
<div class="paginator-button paginator-page-previous" @click="movePrevious">
<span>Prev</span>
</div>
<div class="paginator-page-numbers">
<div class="paginator-button paginator-page-number" :class="{ 'active': num === pageNumber }" v-for="num in pages.length" @click="moveTo(num)">
<span>{{ num }}</span>
</div>
</div>
<div class="paginator-button paginator-page-next" @click="moveNext">
<span>Next</span>
</div>
</div>
</div>
</template>
<script>
import filterBy from "../../utilities/filter-by.js";
import page from "../../utilities/page.js";
export default {
props: {
source: {
type: Array,
default: () => []
},
pageSize: {
type: Number,
default: 25
},
filter: {
type: String
}
},
data() {
return {
index: 0
};
},
computed: {
pages() {
let data = this.source;
if (this.filter) {
data = filterBy(data, this.filter);
}
let pages = page(data, this.pageSize);
// need to reset the page number if the data length changes
// otherwise the index will be outside the bounds of the data
if (this.pageNumber > pages.length) {
this.pageNumber = 1;
}
return pages;
},
pageNumber: {
get() {
return this.index + 1;
},
set(value) {
this.index = value - 1;
this.$emit("page-changed", value);
}
},
data() {
return this.pages[this.index];
}
},
methods: {
movePrevious() {
this.pageNumber -= this.pageNumber > 1 ? 1 : 0;
},
moveNext() {
this.pageNumber += (this.pageNumber != this.pages.length) ? 1 : 0;
},
moveTo(pageNumber) {
if (pageNumber > 0 && pageNumber <= this.pages.length) {
this.pageNumber = pageNumber;
}
}
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.paginator {
border: 1px solid $colour-border;
border-radius: $border-radius;
}
.paginator-footer {
padding: 1rem;
background-color: $colour-background-medium;
border-top: 1px solid $colour-border;
}
.paginator-button {
display: inline-block;
min-width: 1.5em;
padding: 0 0.5rem;
font-weight: 600;
background-color: $colour-border;
border-radius: $border-radius;
cursor: pointer;
&.active {
color: $colour-font-negative;
background-color: $colour-primary;
}
}
.paginator-page-number {
margin: 0 0.25rem;
}
</style>
================================================
FILE: src/components/paginator/readme.md
================================================
================================================
FILE: src/components/panel/panel.vue
================================================
<template>
<div class="panel">
<div class="panel-header">
<div layout="row center-justify">
<span class="panel-title" self="size-x1">{{ title }}</span>
<div>
<slot name="panel-header"></slot>
</div>
</div>
</div>
<div class="panel-body">
<slot></slot>
</div>
<div class="panel-footer" v-if="$slots.panelFooter">
<slot name="panel-footer"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.panel {
width: 100%;
min-height: 150px;
background-color: $colour-background;
border: 1px solid $colour-border;
border-radius: $border-radius;
}
.panel-header,
.panel-body,
.panel-footer {
padding: 0.75rem 1rem;
}
.panel-header,
.panel-footer {
background-color: $colour-background-medium;
}
.panel-header {
border-bottom: 1px solid $colour-border;
}
.panel-footer {
border-top: 1px solid $colour-border;
}
.panel-body {
}
.panel-title {
font-weight: 600;
}
</style>
================================================
FILE: src/components/tab-control/tab-control.vue
================================================
<template>
<div class="tab-control">
<div class="tabs-list" layout="row center-justify">
<div self="size-x1" layout="row center-left">
<div v-for="tab in tabs" class="tab-item" :class="{ active: tab.selected }" @click="selectTab(tab)">
<slot :name="tab.id" :value="tab">
<span>{{ tab.label }}</span>
</slot>
</div>
</div>
<div>
<slot name="tabs-extra"></slot>
</div>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [],
selectedTabId: null
};
},
computed: {
selectedTab() {
return this.tabs.find(tab => tab.id === this.selectedTabId);
}
},
methods: {
addTab(tab) {
this.tabs.push(tab);
},
removeTab(tab) {
let index = this.tabs.indexOf(tab);
this.tabs.splice(index, 1);
},
selectTab(tab) {
this.selectedTabId = tab.id;
this.$emit("tab-change", tab);
}
},
mounted() {
if (this.tabs.length > 0) {
this.selectedTabId = this.tabs[0].id;
}
}
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.tab-control {
display: block;
border: 1px solid $colour-border;
border-radius: $border-radius;
}
.tabs-list {
background-color: #FAFAFA;
border-bottom: 1px solid $colour-border;
}
.tab-item {
position: relative;
padding: 0.75rem 1rem;
font-weight: 600;
border-right: 1px solid $colour-border;
cursor: pointer;
&:after {
position: absolute;
display: none;
content: " ";
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: $colour-background;
}
&.active {
background-color: $colour-background;
&:after {
display: block;
}
}
}
</style>
================================================
FILE: src/components/tab-control/tab-pane.vue
================================================
<template>
<div class="tab-pane" v-if="selected">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
},
label: {
type: String,
required: true
}
},
computed: {
selected() {
return this.$parent.selectedTab === this;
}
},
created() {
let addTab = this.$parent.addTab;
if (!addTab) {
console.warn("A tab-pane must be registered in a tab-control.");
return;
}
addTab(this);
},
destroyed() {
this.$parent.removeTab(this);
}
}
</script>
<style lang="scss">
.tab-pane {
min-height: 2rem;
padding: 1rem;
}
</style>
================================================
FILE: src/components/toggles/checkbox.vue
================================================
<template>
<div class="checkbox">
<input type="checkbox" :id="id" :name="id" :disabled="disabled" :value="value" v-model="checked">
<label :for="id"></label>
<slot></slot>
</div>
</template>
<script>
import checkable from "../../mixins/checkable.js";
export default {
mixins: [ checkable ]
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.checkbox {
display: inline-block;
margin-right: 1rem;
vertical-align: baseline;
& label {
position: relative;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
background-color: $colour-background;
border: 1px solid $colour-border;
border-radius: $border-radius;
vertical-align: text-bottom;
cursor: pointer;
user-select: none;
&:after {
position: absolute;
display: block;
content: " ";
width: 0.375rem;
height: 0.75rem;
top: 0.125rem;
left: 0.4rem;
border-right: 0.2rem solid white;
border-bottom: 0.2rem solid white;
opacity: 0;
transform: rotate(45deg);
transition: opacity 150ms ease-out;
}
}
& input[type="checkbox"] {
display: none !important;
&:checked {
& + label {
background-color: $colour-primary;
border-color: $colour-primary;
&:after {
opacity: 1;
}
}
}
&:disabled {
& + label {
background-color: #FAFAFA;
cursor: not-allowed;
}
}
}
}
</style>
================================================
FILE: src/components/toggles/radio.vue
================================================
<template>
<div class="radio">
<input type="radio" :id="id" :name="id" :disabled="disabled" :value="value" v-model="checked">
<label :for="id"></label>
<slot></slot>
</div>
</template>
<script>
import checkable from "../../mixins/checkable.js";
export default {
mixins: [ checkable ]
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.radio {
display: inline-block;
margin-right: 1rem;
vertical-align: baseline;
& label {
position: relative;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background-color: $colour-background;
border: 1px solid $colour-border;
border-radius: 50%;
vertical-align: text-bottom;
cursor: pointer;
user-select: none;
&:after {
position: absolute;
display: block;
content: " ";
width: 0.5rem;
height: 0.5rem;
top: 50%;
left: 50%;
margin-top: -0.25rem;
margin-left: -0.25rem;
background-color: $colour-background;
border-radius: 50%;
}
}
& input[type="radio"] {
display: none !important;
&:checked {
& + label {
background-color: $colour-primary;
border-color: $colour-primary;
}
}
&:disabled {
& + label {
background-color: #FAFAFA;
cursor: not-allowed;
}
}
}
}
</style>
================================================
FILE: src/components/toggles/readme.md
================================================
# Toggles
This docucumentation will cover 3 components which all share the *toggle* behaviour
================================================
FILE: src/components/toggles/toggle.vue
================================================
<template>
<div class="toggle">
<input type="checkbox" :id="id" :name="id" :disabled="disabled" :value="value" v-model="checked">
<label :for="id"></label>
<slot></slot>
</div>
</template>
<script>
import checkable from "../../mixins/checkable.js";
export default {
mixins: [ checkable ]
}
</script>
<style lang="scss">
@import "../../assets/styles/abstract/_variables.scss";
.toggle {
display: inline-block;
margin-right: 1rem;
vertical-align: baseline;
& label {
position: relative;
display: inline-block;
width: 2.15rem;
height: 1.25rem;
background-color: $colour-background;
border: 1px solid $colour-border;
border-radius: 0.625rem;
vertical-align: text-bottom;
cursor: pointer;
user-select: none;
&:after {
position: absolute;
display: block;
content: " ";
width: 0.8rem;
height: 0.8rem;
top: 50%;
left: 0.25rem;
background-color: $colour-border;
border-radius: 50%;
transform: translate(0, -50%);
transition: transform 150ms ease-out;
}
}
& input[type="checkbox"] {
display: none !important;
&:checked {
& + label {
background-color: $colour-primary;
border-color: $colour-primary;
&:after {
background-color: $colour-background;
transform: translate(0.75rem, -50%);
}
}
}
&:disabled {
& + label {
background-color: #FAFAFA;
cursor: not-allowed;
}
}
}
}
</style>
================================================
FILE: src/directives/directives.js
================================================
import Drag from "./v-drag";
export default {
drag: Drag
}
================================================
FILE: src/directives/v-drag.js
================================================
function genericHandler(event) {
}
const eventHandlerMap = {
start: {
eventName: "dragstart",
draggable: true,
callback: genericHandler
},
drag: {
eventName: "drag",
draggable: true,
callback: genericHandler
},
enter: {
eventName: "dragenter",
callback: genericHandler
},
leave: {
eventName: "dragleave",
callback: genericHandler
},
over: {
eventName: "dragover",
callback: genericHandler
},
drop: {
eventName: "drop",
callback: genericHandler
},
end: {
eventName: "dragend",
draggable: true,
callback: genericHandler
}
};
export default {
bind(element, binding, vNode) {
let eventType = binding.arg.toLowerCase();
if (!(eventType in eventHandlerMap)) {
console.warn("Event not supported");
return;
}
let handler = eventHandlerMap[eventType];
if (handler.draggable) {
element.setAttribute("draggable", true);
}
let callback = binding.value;
if (typeof (callback) !== "function") {
callback = function (event) { };
}
element.addEventListener(handler.eventName, event => {
handler.callback.call(element, event);
callback.call(element, event);
return false;
}, false);
}
}
================================================
FILE: src/formatters/currency.js
================================================
import currencies from "../maps/currencies";
export default function currency(value, precision, currency) {
precision = precision || 2;
let parsed = parseFloat(value);
if (isNaN(parsed)) {
return value;
}
let symbol = currency ? currencies[currency.toUpperCase()] : currencies.USD;
return symbol + parsed.toFixed(precision).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
}
================================================
FILE: src/formatters/date-long.js
================================================
import datetime from "./datetime";
export default function dateShort(value) {
return datetime(value, "D MMMM YYYY");
}
================================================
FILE: src/formatters/date-short.js
================================================
import datetime from "./datetime";
export default function dateShort(value) {
return datetime(value, "DD/MM/YYYY");
}
================================================
FILE: src/formatters/datetime.js
================================================
import { format } from "date-fns";
export default function datetime(value, pattern) {
return format(value, pattern);
}
================================================
FILE: src/formatters/formatters.js
================================================
import currency from "./currency";
import datetime from "./datetime";
import dateShort from "./date-short";
import dateLong from "./date-long";
export default {
currency,
datetime,
dateShort,
dateLong
}
================================================
FILE: src/main.js
================================================
import "./polyfills";
import "flex-layout-attribute";
import "./assets/styles/site.scss";
import components from "./components/components";
import directives from "./directives/directives";
// Exposed modules
import aggregators from "../src/aggregators/aggregators";
import formatters from "../src/formatters/formatters";
import maps from "../src/maps/maps";
function registerComponents(Vue) {
for (let component in components) {
let definition = components[component];
Vue.component(component, definition);
}
}
function registerDirectives(Vue) {
for (let directive in directives) {
let definition = directives[directive];
Vue.directive(directive, definition);
}
}
export default {
install(Vue) {
registerComponents(Vue);
registerDirectives(Vue);
},
// Expose to global scope
aggregators,
formatters,
maps
}
================================================
FILE: src/maps/currencies.js
================================================
export default {
AED: "د.إ",
AFN: "؋",
ALL: "L",
ANG: "ƒ",
AOA: "Kz",
ARS: "$",
AUD: "$",
AWG: "ƒ",
AZN: "₼",
BAM: "KM",
BBD: "$",
BDT: "৳",
BGN: "лв",
BHD: ".د.ب",
BIF: "FBu",
BMD: "$",
BND: "$",
BOB: "Bs.",
BRL: "R$",
BSD: "$",
BTN: "Nu.",
BWP: "P",
BYR: "p.",
BZD: "BZ$",
CAD: "$",
CDF: "FC",
CHF: "Fr.",
CLP: "$",
CNY: "¥",
COP: "$",
CRC: "₡",
CUC: "$",
CUP: "₱",
CVE: "$",
CZK: "Kč",
DJF: "Fdj",
DKK: "kr",
DOP: "RD$",
DZD: "دج",
EEK: "kr",
EGP: "£",
ERN: "Nfk",
ETB: "Br",
EUR: "€",
FJD: "$",
FKP: "£",
GBP: "£",
GEL: "₾",
GGP: "£",
GHC: "₵",
GHS: "GH₵",
GIP: "£",
GMD: "D",
GNF: "FG",
GTQ: "Q",
GYD: "$",
HKD: "$",
HNL: "L",
HRK: "kn",
HTG: "G",
HUF: "Ft",
IDR: "Rp",
ILS: "₪",
IMP: "£",
INR: "₹",
IQD: "ع.د",
IRR: "﷼",
ISK: "kr",
JEP: "£",
JMD: "J$",
JPY: "¥",
KES: "KSh",
KGS: "лв",
KHR: "៛",
KMF: "CF",
KPW: "₩",
KRW: "₩",
KYD: "$",
KZT: "₸",
LAK: "₭",
LBP: "£",
LKR: "₨",
LRD: "$",
LSL: "M",
LTL: "Lt",
LVL: "Ls",
MAD: "MAD",
MDL: "lei",
MGA: "Ar",
MKD: "ден",
MMK: "K",
MNT: "₮",
MOP: "MOP$",
MUR: "₨",
MVR: "Rf",
MWK: "MK",
MXN: "$",
MYR: "RM",
MZN: "MT",
NAD: "$",
NGN: "₦",
NIO: "C$",
NOK: "kr",
NPR: "₨",
NZD: "$",
OMR: "﷼",
PAB: "B/.",
PEN: "S/.",
PGK: "K",
PHP: "₱",
PKR: "₨",
PLN: "zł",
PYG: "Gs",
QAR: "﷼",
RMB: "￥",
RON: "lei",
RSD: "Дин.",
RUB: "₽",
RWF: "R₣",
SAR: "﷼",
SBD: "$",
SCR: "₨",
SDG: "ج.س.",
SEK: "kr",
SGD: "$",
SHP: "£",
SLL: "Le",
SOS: "S",
SRD: "$",
SSP: "£",
STD: "Db",
SVC: "$",
SYP: "£",
SZL: "E",
THB: "฿",
TJS: "SM",
TMT: "T",
TND: "د.ت",
TOP: "T$",
TRL: "₤",
TRY: "₺",
TTD: "TT$",
TVD: "$",
TWD: "NT$",
TZS: "TSh",
UAH: "₴",
UGX: "USh",
USD: "$",
UYU: "$U",
UZS: "лв",
VEF: "Bs",
VND: "₫",
VUV: "VT",
WST: "WS$",
XAF: "FCFA",
XBT: "Ƀ",
XCD: "$",
XOF: "CFA",
XPF: "₣",
YER: "﷼",
ZAR: "R",
ZWD: "Z$",
BTC: "฿"
};
================================================
FILE: src/maps/maps.js
================================================
import currencies from "./currencies";
export default {
currencies
}
================================================
FILE: src/mixins/checkable.js
================================================
export default {
model: {
prop: "source",
event: "change"
},
props: {
id: {
type: String,
required: true
},
source: {
required: true
},
value: {
required: false
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
proxy: false
};
},
computed: {
checked: {
get() {
return this.source;
},
set(value) {
this.proxy = value;
this.$emit("change", this.proxy);
}
}
}
}
================================================
FILE: src/polyfills.js
================================================
// Symbols
import "core-js/fn/symbol";
import "core-js/fn/symbol/iterator";
// Arrays
import "core-js/fn/array/find";
================================================
FILE: src/services/calendar.js
================================================
import isValid from "date-fns/is_valid";
import isWithinRange from "date-fns/is_within_range";
import startOfMonth from "date-fns/start_of_month";
import endOfMonth from "date-fns/end_of_month";
import eachDay from "date-fns/each_day";
import addMonths from "date-fns/add_months";
import subMonths from "date-fns/sub_months";
import setMonth from "date-fns/set_month";
import pageBy from "../utilities/page-by";
import firstOf from "../utilities/first-of.js";
import lastOf from "../utilities/last-of.js";
const EPOCH_MIN = new Date(-8640000000000000);
const EPOCH_MAX = new Date(8640000000000000);
const weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
function cleanDate(date) {
return isValid(date) ? date : new Date();
}
export default class CalendarMonth {
get weekdays() {
return weekdays;
}
get minDate() {
return this._minDate;
}
set minDate(date) {
this._minDate = cleanDate(date);
}
get maxDate() {
return this._maxDate;
}
set maxDate(date) {
this._maxDate = cleanDate(date);
}
get startDate() {
return this._startDate;
}
set startDate(date) {
this._startDate = cleanDate(date);
if (!isWithinRange(this._startDate, this._minDate, this._maxDate)) {
this._startDate = this.minDate;
}
}
get paddingStart() {
let firstWeek = firstOf(this.weeks);
let firstDay = firstOf(firstWeek);
return firstDay.getDay();
}
get paddingEnd() {
let weeks = this.weeks;
let lastWeek = lastOf(weeks);
let lastDay = lastOf(lastWeek);
return 6 - lastDay.getDay();
}
generate() {
let monthStart = startOfMonth(this.startDate);
let monthEnd = endOfMonth(this.startDate);
let days = eachDay(monthStart, monthEnd);
this.weeks = pageBy(days, day => {
let weekPosition = day.getDay() + 1;
let monthPosition = day.getDate();
let position = (13 - weekPosition + monthPosition) / 7;
return Math.floor(position);
});
return this.weeks;
}
previousMonth() {
this.startDate = subMonths(this.startDate, 1);
return this.generate();
}
nextMonth() {
this.startDate = addMonths(this.startDate, 1);
return this.generate();
}
goToMonth(month) {
this.startDate = setMonth(this.startDate, month);
return this.generate();
}
constructor(startDate, minDate, maxDate) {
this.minDate = minDate || EPOCH_MIN;
this.maxDate = maxDate || EPOCH_MAX;
this.startDate = startDate || new Date();
this.generate();
}
}
================================================
FILE: src/services/event-emitter.js
================================================
import Vue from "vue";
// Here we can just wrap Vue's built-in pub-sub system
// Saves me from writing my own or importing another dependency :)
export class EventEmitter {
constructor() {
this.emitter = new Vue();
}
emit(event, ...args) {
this.emitter.$emit.apply(this.emitter, event, args);
}
on(event, callback) {
this.emitter.$on(event, callback);
}
off(event, callback) {
this.emitter.$off(event, callback);
}
}
export default new EventEmitter();
================================================
FILE: src/services/http-client.js
================================================
class HttpRequest {
constructor(url, method) {
this.url = url;
this.method = method;
this.type = "text/json";
this.headers = [];
}
execute() {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.onload = (event) => {
resolve();
};
});
}
}
export class HttpClient {
constructor() {
}
}
================================================
FILE: src/utilities/average-of.js
================================================
import totalOf from "./total-of";
export default function averageOf(array, callback) {
let value = totalOf(array, callback);
return value ? value / array.length : false;
}
================================================
FILE: src/utilities/base/aggregator.js
================================================
export default function aggregate(array, callback, startValue) {
let accumulator = startValue || 0;
for (let item of array) {
let result = callback.call(this, accumulator, item, array);
if (result === false) {
return false;
}
accumulator = result;
}
return accumulator;
}
================================================
FILE: src/utilities/base/type-converter.js
================================================
import * as typeValidator from "./type-validator";
const floatTest = /^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/;
const evaluators = [
{
test: value => {
return typeValidator.isNumber(value) ? true : floatTest.test(value);
},
toNumber: parseFloat
},
{
test: value => {
if (typeValidator.isDate(value)) {
return true;
}
let date = new Date(value);
return typeValidator.isDate(date);
},
toNumber: value => (new Date(value)).getTime()
}
]
export default function toNumber(value) {
for (let evaluator of evaluators) {
let result = evaluator.test(value);
if (result) {
return evaluator.toNumber;
}
}
return (value => value);
}
================================================
FILE: src/utilities/base/type-validator.js
================================================
const types = {
array: "[object Array]",
boolean: "[object Boolean]",
date: "[object Date]",
null: "[object Null]",
number: "[object Number]",
object: "[object Object]",
string: "[object String]",
undefined: "[object Undefined]"
};
function isType(value, type) {
return type === Object.prototype.toString.call(value);
}
export function isAny(value, ...validators) {
let any = false;
let index = 0;
while (!any && index < validators.length) {
any = validators[index].call(this, value);
index++
}
return any;
}
export function isArray(value) {
return isType(value, types.array);
}
export function isBoolean(value) {
return isType(value, types.boolean);
}
export function isDate(value) {
return isType(value, types.date) && !isNaN(value.getTime());
}
export function isNull(value) {
return isType(value, types.null);
}
export function isNumber(value) {
return isType(value, types.number);
}
export function isObject(value) {
return isType(value, types.object);
}
export function isString(value) {
return isType(value, types.string);
}
export function isUndefined(value) {
return isType(value, types.undefined);
}
export function isPrimitive(value) {
return !isAny(value, isArray, isDate, isObject);
}
export function isCollection(value) {
return isAny(value, isArray, isObject);
}
================================================
FILE: src/utilities/filter-by.js
================================================
// Need to add support for searching dates
const SEARCHABLE_TYPES = ["string", "number", "boolean"];
/**
* Filter an array of objects by the given phrase
*
* @export
* @param {Array} array
* @param {String} filter
* @returns Array
*/
export default function filterBy(array, filter) {
if (!filter) {
return array;
}
let filtered = [];
for (let i = 0; i < array.length; i++) {
let item = array[i];
for (let prop in item) {
let value = item[prop];
// Ensure the value is of a searchable type
// This will automatically handle null values
if (SEARCHABLE_TYPES.indexOf(typeof (value)) < 0) {
continue;
}
// Normalise the value to get a consistent match
let normalised = value.toString().toLowerCase();
if (normalised.indexOf(filter.toLowerCase()) > -1) {
filtered.push(item);
break;
}
}
}
return filtered;
}
================================================
FILE: src/utilities/first-of.js
================================================
export default function firstOf(array) {
if (!array.length || array.length < 1) {
return;
}
return array[0];
}
================================================
FILE: src/utilities/group-by.js
================================================
/**
* Group and array of objects by a given key
*
* @export
* @param {Array} array The array to group
* @para
gitextract_hb937lqj/ ├── .babelrc ├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── .vscode/ │ └── settings.json ├── build/ │ ├── app.js │ └── components.js ├── dist/ │ └── components/ │ ├── app.style.css │ └── components.bundle.js ├── index.html ├── license.txt ├── package.json ├── postcss.config.js ├── readme.md ├── src/ │ ├── aggregators/ │ │ ├── aggregators.js │ │ ├── average.js │ │ ├── count.js │ │ ├── max.js │ │ ├── median.js │ │ ├── min.js │ │ ├── standard-deviation.js │ │ ├── total.js │ │ └── variance.js │ ├── assets/ │ │ └── styles/ │ │ ├── abstract/ │ │ │ ├── _functions.scss │ │ │ ├── _mixins.scss │ │ │ └── _variables.scss │ │ ├── core/ │ │ │ ├── _animations.scss │ │ │ ├── _base.scss │ │ │ ├── _buttons.scss │ │ │ ├── _inputs.scss │ │ │ ├── _labels.scss │ │ │ ├── _layout.scss │ │ │ ├── _menus.scss │ │ │ ├── _tables.scss │ │ │ └── _typography.scss │ │ └── site.scss │ ├── components/ │ │ ├── calendar/ │ │ │ └── calendar.vue │ │ ├── chip/ │ │ │ └── chip.vue │ │ ├── components.js │ │ ├── datatable/ │ │ │ ├── datatable-cell.js │ │ │ ├── datatable-collection.vue │ │ │ ├── datatable-column.vue │ │ │ ├── datatable.vue │ │ │ └── readme.md │ │ ├── datetime-picker/ │ │ │ └── datetime-picker.vue │ │ ├── dynamic/ │ │ │ └── dynamic.js │ │ ├── floating-panel/ │ │ │ └── floating-panel.vue │ │ ├── modal/ │ │ │ └── modal.vue │ │ ├── paginator/ │ │ │ ├── paginator.vue │ │ │ └── readme.md │ │ ├── panel/ │ │ │ └── panel.vue │ │ ├── tab-control/ │ │ │ ├── tab-control.vue │ │ │ └── tab-pane.vue │ │ └── toggles/ │ │ ├── checkbox.vue │ │ ├── radio.vue │ │ ├── readme.md │ │ └── toggle.vue │ ├── directives/ │ │ ├── directives.js │ │ └── v-drag.js │ ├── formatters/ │ │ ├── currency.js │ │ ├── date-long.js │ │ ├── date-short.js │ │ ├── datetime.js │ │ └── formatters.js │ ├── main.js │ ├── maps/ │ │ ├── currencies.js │ │ └── maps.js │ ├── mixins/ │ │ └── checkable.js │ ├── polyfills.js │ ├── services/ │ │ ├── calendar.js │ │ ├── event-emitter.js │ │ └── http-client.js │ ├── utilities/ │ │ ├── average-of.js │ │ ├── base/ │ │ │ ├── aggregator.js │ │ │ ├── type-converter.js │ │ │ └── type-validator.js │ │ ├── filter-by.js │ │ ├── first-of.js │ │ ├── group-by.js │ │ ├── last-of.js │ │ ├── map-values.js │ │ ├── max-of.js │ │ ├── median-of.js │ │ ├── min-of.js │ │ ├── mode-of.js │ │ ├── nest.js │ │ ├── page-by.js │ │ ├── page.js │ │ ├── sort-by.js │ │ ├── standard-deviation-of.js │ │ ├── total-of.js │ │ └── variance-of.js │ └── views/ │ ├── components/ │ │ ├── buttons.vue │ │ ├── components.js │ │ ├── datatables.vue │ │ ├── modals.vue │ │ ├── paginators.vue │ │ ├── panels.vue │ │ ├── tab-controls.vue │ │ ├── toggles.vue │ │ └── typography.vue │ └── views.js ├── test/ │ ├── mocha.opts │ ├── test-data.js │ └── utilities/ │ ├── average.js │ ├── group-by.js │ ├── max-of.js │ ├── median-of.js │ ├── min-of.js │ ├── page.js │ ├── sort-by.js │ ├── total-of.js │ └── validators.js └── webpack.config.js
SYMBOL INDEX (175 symbols across 33 files)
FILE: build/app.js
function registerPlugins (line 8) | function registerPlugins() {
function buildRoutes (line 13) | function buildRoutes() {
function buildRootInstance (line 38) | function buildRootInstance() {
function bootstrap (line 91) | function bootstrap() {
FILE: dist/components/components.bundle.js
function e (line 1) | function e(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{...
function r (line 1) | function r(t,e){if(c(t))return new Date(t.getTime());if("string"!=typeof...
function a (line 1) | function a(t){var e,n={},r=t.split(v);if(g.test(r[0])?(n.date=null,e=r[0...
function o (line 1) | function o(t,e){var n,r=m[e],a=b[e];if(n=y.exec(t)||a.exec(t)){var o=n[1...
function u (line 1) | function u(t,e){if(null===e)return null;var n,r,a,o;if(0===t.length)retu...
function i (line 1) | function i(t){var e,n,r;if(e=S.exec(t))return(n=parseFloat(e[1].replace(...
function s (line 1) | function s(t){var e,n;return(e=j.exec(t))?0:(e=N.exec(t))?(n=60*parseInt...
function l (line 1) | function l(t,e,n){e=e||0,n=n||0;var r=new Date(0);r.setUTCFullYear(t,0,4...
function r (line 1) | function r(t,e,n){var r=n||0,a=!0,o=!1,u=void 0;try{for(var i,s=t[Symbol...
function r (line 1) | function r(t,e){return(0,a.format)(t,e)}
function r (line 1) | function r(t){return a(t,{weekStartsOn:1})}
function r (line 1) | function r(t,e){var n=(0,o.default)(t,e);return!!n&&n/t.length}
function r (line 1) | function r(t){var e=!0,n=!1,r=void 0;try{for(var a,o=i[Symbol.iterator](...
function r (line 1) | function r(t,e){return e===Object.prototype.toString.call(t)}
function a (line 1) | function a(t){for(var e=!1,n=0,r=arguments.length,a=Array(r>1?r-1:0),o=1...
function o (line 1) | function o(t){return r(t,g.array)}
function u (line 1) | function u(t){return r(t,g.boolean)}
function i (line 1) | function i(t){return r(t,g.date)&&!isNaN(t.getTime())}
function s (line 1) | function s(t){return r(t,g.null)}
function l (line 1) | function l(t){return r(t,g.number)}
function c (line 1) | function c(t){return r(t,g.object)}
function f (line 1) | function f(t){return r(t,g.string)}
function d (line 1) | function d(t){return r(t,g.undefined)}
function p (line 1) | function p(t){return!a(t,o,i,c)}
function v (line 1) | function v(t){return a(t,o,c)}
function r (line 1) | function r(t,e){if(!e)return t;for(var n=[],r=0;r<t.length;r++){var u=t[...
function r (line 1) | function r(t,e){e=e||function(t){return t};var n={},r=!0,a=!1,o=void 0;t...
function r (line 1) | function r(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.len...
function a (line 1) | function a(t,e,n){if(n=n||1,e=e||function(t){return t},1!==Math.abs(n))t...
function r (line 1) | function r(t,e){var n=parseFloat(e);return!isNaN(n)&&t+n}
function a (line 1) | function a(t,e){return e=e||function(t){return t},(0,u.default)(t,functi...
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function a (line 1) | function a(t,e){var n=t.length,r=(0,s.default)(t,e),a=(0,u.default)(t,fu...
function r (line 1) | function r(t,e){var n=a(t),r=Number(e),u=n.getMonth()+r,i=new Date(0);i....
function r (line 1) | function r(t){var e=a(t),n=e.getFullYear(),r=e.getMonth(),o=new Date(0);...
function r (line 1) | function r(t){var e=a(t),n=e.getFullYear(),r=new Date(0);r.setFullYear(n...
function n (line 1) | function n(t){return t instanceof Date}
function r (line 1) | function r(t){if(a(t))return!isNaN(t);throw new TypeError(toString.call(...
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function a (line 1) | function a(t){for(var e in i.default){var n=i.default[e];t.component(e,n)}}
function o (line 1) | function o(t){for(var e in l.default){var n=l.default[e];t.directive(e,n)}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t,e){var n={template:a,props:["row","column"]};return t&&(n.t...
function r (line 1) | function r(t){}
function r (line 1) | function r(t,e,n){e=e||2;var r=parseFloat(t);return isNaN(r)?t:(n?o.defa...
function r (line 1) | function r(t){return(0,o.default)(t,"D MMMM YYYY")}
function r (line 1) | function r(t){return(0,o.default)(t,"DD/MM/YYYY")}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function a (line 1) | function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a ...
function o (line 1) | function o(t){return(0,s.default)(t)?t:new Date}
function t (line 1) | function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.en...
function t (line 1) | function t(e,n,r){a(this,t),this.minDate=n||j,this.maxDate=r||N,this.sta...
function r (line 1) | function r(t){if(t.length&&!(t.length<1))return t[0]}
function r (line 1) | function r(t){if(t.length&&!(t.length<1))return t[t.length-1]}
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function a (line 1) | function a(t,e,n){var r=n(e);return!isNaN(r)&&Math.max(t,r)}
function o (line 1) | function o(t,e){e=e||function(t){return t};var n=e.call(t,t[0]),r=(0,l.d...
function r (line 1) | function r(t,e){return e.call(this,t)}
function a (line 1) | function a(t,e){var n=(0,u.default)(t,e),a=n.length,o=Math.floor(a/2),i=...
function r (line 1) | function r(t){return t&&t.__esModule?t:{default:t}}
function a (line 1) | function a(t,e,n){var r=n(e);return!isNaN(r)&&Math.min(t,r)}
function o (line 1) | function o(t,e){e=e||function(t){return t};var n=e.call(t,t[0]),r=(0,l.d...
function r (line 1) | function r(t,e){var n=(0,o.default)(t,e),r=[];for(var a in n)r.push(n[a]...
function r (line 1) | function r(t,e){for(var n=[],r=0,a=t.length;r<a;){var o=r+e;a-r<e&&(o=r+...
function r (line 1) | function r(t,e){var n=(0,o.default)(t,e);return!!n&&Math.sqrt(n)}
function r (line 1) | function r(t,e){var n=a(t),r=a(e),i=n.getTime()-n.getTimezoneOffset()*o,...
function r (line 1) | function r(t,e){var n=a(t),r=a(e),o=r.getTime();if(n.getTime()>o)throw n...
function r (line 1) | function r(t){var e=a(t),n=e.getMonth();return e.setFullYear(e.getFullYe...
function r (line 1) | function r(t,e,n){var r=e?String(e):"YYYY-MM-DDTHH:mm:ss.SSSZ",o=n||{},u...
function a (line 1) | function a(t,e,n){var r,a,u=t.match(n),i=u.length;for(r=0;r<i;r++)a=e[u[...
function o (line 1) | function o(t){return t.match(/\[[\s\S]/)?t.replace(/^\[|]$/g,""):t.repla...
function u (line 1) | function u(t,e){e=e||"";var n=t>0?"-":"+",r=Math.abs(t),a=Math.floor(r/6...
function i (line 1) | function i(t,e){for(var n=Math.abs(t).toString();n.length<e;)n="0"+n;ret...
function r (line 1) | function r(t){var e=a(t);return u(e,o(e))+1}
function r (line 1) | function r(t){var e=a(t),n=o(e).getTime()-u(e).getTime();return Math.rou...
function r (line 1) | function r(t,e,n){var r=a(t).getTime(),o=a(e).getTime(),u=a(n).getTime()...
function n (line 1) | function n(t){var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);var...
function n (line 1) | function n(){function t(t,n,r){r=r||{};var a;return a="string"==typeof e...
function r (line 1) | function r(){var t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep...
function a (line 1) | function a(t){var e=t%100;if(e>20||e<10)switch(e%10){case 1:return t+"st...
function r (line 1) | function r(t,e){var n=a(t),r=Number(e),u=n.getFullYear(),i=n.getDate(),s...
function r (line 1) | function r(t){var e=a(t);return e.setHours(0,0,0,0),e}
function r (line 1) | function r(t){var e=a(t),n=new Date(0);return n.setFullYear(e,0,4),n.set...
function r (line 1) | function r(t){var e=a(t);return e.setDate(1),e.setHours(0,0,0,0),e}
function r (line 1) | function r(t,e){var n=e?Number(e.weekStartsOn)||0:0,r=a(t),o=r.getDay(),...
function r (line 1) | function r(t){var e=a(t),n=new Date(0);return n.setFullYear(e.getFullYea...
function r (line 1) | function r(t,e){var n=Number(e);return a(t,-n)}
FILE: src/components/datatable/datatable-cell.js
function getChildComponent (line 5) | function getChildComponent(editable, optimize) {
method render (line 41) | render(createElement, context) {
FILE: src/directives/v-drag.js
function genericHandler (line 2) | function genericHandler(event) {
method bind (line 42) | bind(element, binding, vNode) {
FILE: src/formatters/currency.js
function currency (line 3) | function currency(value, precision, currency) {
FILE: src/formatters/date-long.js
function dateShort (line 3) | function dateShort(value) {
FILE: src/formatters/date-short.js
function dateShort (line 3) | function dateShort(value) {
FILE: src/formatters/datetime.js
function datetime (line 3) | function datetime(value, pattern) {
FILE: src/main.js
function registerComponents (line 14) | function registerComponents(Vue) {
function registerDirectives (line 22) | function registerDirectives(Vue) {
method install (line 32) | install(Vue) {
FILE: src/mixins/checkable.js
method data (line 31) | data() {
method get (line 40) | get() {
method set (line 43) | set(value) {
FILE: src/services/calendar.js
constant EPOCH_MIN (line 14) | const EPOCH_MIN = new Date(-8640000000000000);
constant EPOCH_MAX (line 15) | const EPOCH_MAX = new Date(8640000000000000);
function cleanDate (line 27) | function cleanDate(date) {
class CalendarMonth (line 33) | class CalendarMonth {
method weekdays (line 35) | get weekdays() {
method minDate (line 39) | get minDate() {
method minDate (line 43) | set minDate(date) {
method maxDate (line 47) | get maxDate() {
method maxDate (line 51) | set maxDate(date) {
method startDate (line 55) | get startDate() {
method startDate (line 59) | set startDate(date) {
method paddingStart (line 67) | get paddingStart() {
method paddingEnd (line 74) | get paddingEnd() {
method generate (line 82) | generate() {
method previousMonth (line 100) | previousMonth() {
method nextMonth (line 105) | nextMonth() {
method goToMonth (line 110) | goToMonth(month) {
method constructor (line 115) | constructor(startDate, minDate, maxDate) {
FILE: src/services/event-emitter.js
class EventEmitter (line 6) | class EventEmitter {
method constructor (line 8) | constructor() {
method emit (line 12) | emit(event, ...args) {
method on (line 16) | on(event, callback) {
method off (line 20) | off(event, callback) {
FILE: src/services/http-client.js
class HttpRequest (line 1) | class HttpRequest {
method constructor (line 3) | constructor(url, method) {
method execute (line 10) | execute() {
class HttpClient (line 23) | class HttpClient {
method constructor (line 24) | constructor() {
FILE: src/utilities/average-of.js
function averageOf (line 3) | function averageOf(array, callback) {
FILE: src/utilities/base/aggregator.js
function aggregate (line 1) | function aggregate(array, callback, startValue) {
FILE: src/utilities/base/type-converter.js
function toNumber (line 25) | function toNumber(value) {
FILE: src/utilities/base/type-validator.js
function isType (line 13) | function isType(value, type) {
function isAny (line 17) | function isAny(value, ...validators) {
function isArray (line 29) | function isArray(value) {
function isBoolean (line 33) | function isBoolean(value) {
function isDate (line 37) | function isDate(value) {
function isNull (line 41) | function isNull(value) {
function isNumber (line 45) | function isNumber(value) {
function isObject (line 49) | function isObject(value) {
function isString (line 53) | function isString(value) {
function isUndefined (line 57) | function isUndefined(value) {
function isPrimitive (line 61) | function isPrimitive(value) {
function isCollection (line 65) | function isCollection(value) {
FILE: src/utilities/filter-by.js
constant SEARCHABLE_TYPES (line 2) | const SEARCHABLE_TYPES = ["string", "number", "boolean"];
function filterBy (line 12) | function filterBy(array, filter) {
FILE: src/utilities/first-of.js
function firstOf (line 2) | function firstOf(array) {
FILE: src/utilities/group-by.js
function groupBy (line 9) | function groupBy(array, callback) {
FILE: src/utilities/last-of.js
function lastOf (line 2) | function lastOf(array) {
FILE: src/utilities/map-values.js
function mapValues (line 1) | function mapValues(object, callback) {
FILE: src/utilities/max-of.js
function max (line 4) | function max(accumulator, value, converter) {
function minOf (line 10) | function minOf(array, callback) {
FILE: src/utilities/median-of.js
function getValue (line 3) | function getValue(item, callback) {
function medianOf (line 7) | function medianOf(array, callback) {
FILE: src/utilities/min-of.js
function min (line 4) | function min(accumulator, value, converter) {
function minOf (line 10) | function minOf(array, callback) {
FILE: src/utilities/nest.js
function nest (line 3) | function nest(array, keys) {
FILE: src/utilities/page-by.js
function pageBy (line 3) | function pageBy(array, callback) {
FILE: src/utilities/page.js
function page (line 1) | function page(array, pageSize) {
FILE: src/utilities/sort-by.js
function sortBy (line 10) | function sortBy(array, callback, direction) {
FILE: src/utilities/standard-deviation-of.js
function standardDeviationOf (line 3) | function standardDeviationOf(array, callback) {
FILE: src/utilities/total-of.js
function total (line 3) | function total(accumulator, value) {
function totalOf (line 9) | function totalOf(array, callback) {
FILE: src/utilities/variance-of.js
function varianceOf (line 4) | function varianceOf(array, callback) {
FILE: test/utilities/sort-by.js
function verifySortedArray (line 36) | function verifySortedArray(sortedArray, comparitiveOperator, key) {
Condensed preview — 114 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (267K chars).
[
{
"path": ".babelrc",
"chars": 45,
"preview": "{\n \"presets\": [\n [\"es2015\"]\n ]\n}"
},
{
"path": ".eslintrc.json",
"chars": 499,
"preview": "{\n \"env\": {\n \"browser\": true,\n \"commonjs\": true,\n \"es6\": true,\n \"node\": true\n },\n \""
},
{
"path": ".gitattributes",
"chars": 378,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n\n# St"
},
{
"path": ".gitignore",
"chars": 75,
"preview": ".DS_Store\nnode_modules/\ndist/app/\ndist/*/report.html\nnpm-debug.log.*\n*.log\n"
},
{
"path": ".vscode/settings.json",
"chars": 105,
"preview": "// Place your settings in this file to overwrite default and user settings.\n{\n \"eslint.enable\": true\n}"
},
{
"path": "build/app.js",
"chars": 1958,
"preview": "// Import Vue and Vue plugins\nimport Vue from \"vue\";\nimport VueRouter from \"vue-router\";\nimport Vuetiful from \"../src/ma"
},
{
"path": "build/components.js",
"chars": 147,
"preview": "import Vuetiful from \"../src/main\";\n\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(Vuetiful);\n}\n"
},
{
"path": "dist/components/app.style.css",
"chars": 21404,
"preview": "html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[layout]{display:-ms-flexbox;display:-webkit-box;display:"
},
{
"path": "dist/components/components.bundle.js",
"chars": 68132,
"preview": "var vuetiful=function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return t[r].call(a.e"
},
{
"path": "index.html",
"chars": 2467,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>Vuetiful Component Framework</title>\n "
},
{
"path": "license.txt",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2017 Andrew Courtice\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "package.json",
"chars": 1408,
"preview": "{\n \"name\": \"vuetiful\",\n \"description\": \"Component framework written on top of the Vue reactive library\",\n \"version\": "
},
{
"path": "postcss.config.js",
"chars": 75,
"preview": "\nmodule.exports = {\n plugins: [\n require(\"autoprefixer\")\n ]\n};"
},
{
"path": "readme.md",
"chars": 2193,
"preview": "# Vuetiful\n\nVuetiful is a component framework written on top of the Vue reactive library. It is primarily designed for c"
},
{
"path": "src/aggregators/aggregators.js",
"chars": 381,
"preview": "import min from \"./min\";\nimport max from \"./max\";\nimport count from \"./count\";\nimport average from \"./average\";\nimport t"
},
{
"path": "src/aggregators/average.js",
"chars": 132,
"preview": "import averageOf from \"../utilities/average-of\";\n\nexport default {\n label: \"Average\",\n callback: averageOf,\n fo"
},
{
"path": "src/aggregators/count.js",
"chars": 77,
"preview": "\nexport default {\n label: \"Count\",\n callback: (array) => array.length\n}"
},
{
"path": "src/aggregators/max.js",
"chars": 120,
"preview": "import maxOf from \"../utilities/max-of\";\n\nexport default {\n label: \"Maximum\",\n callback: maxOf,\n format: true\n}"
},
{
"path": "src/aggregators/median.js",
"chars": 110,
"preview": "import medianOf from \"../utilities/median-of\";\n\nexport default {\n label: \"Median\",\n callback: medianOf\n}"
},
{
"path": "src/aggregators/min.js",
"chars": 120,
"preview": "import minOf from \"../utilities/min-of\";\n\nexport default {\n label: \"Minimum\",\n callback: minOf,\n format: true\n}"
},
{
"path": "src/aggregators/standard-deviation.js",
"chars": 156,
"preview": "import standardDeviationOf from \"../utilities/standard-deviation-of\";\n\nexport default {\n label: \"Standard Deviation\","
},
{
"path": "src/aggregators/total.js",
"chars": 124,
"preview": "import totalOf from \"../utilities/total-of\";\n\nexport default {\n label: \"Total\",\n callback: totalOf,\n format: tr"
},
{
"path": "src/aggregators/variance.js",
"chars": 118,
"preview": "import varianceOf from \"../utilities/variance-of\";\n\nexport default {\n label: \"Variance\",\n callback: varianceOf\n}"
},
{
"path": "src/assets/styles/abstract/_functions.scss",
"chars": 165,
"preview": "\n@function pow($base, $exponent: 2) {\n $value: $base;\n\n @for $i from 1 through ($exponent - 1) {\n $value: ("
},
{
"path": "src/assets/styles/abstract/_mixins.scss",
"chars": 101,
"preview": "\n@mixin truncate-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}"
},
{
"path": "src/assets/styles/abstract/_variables.scss",
"chars": 481,
"preview": "\n$base-point-size: 8px;\n\n$typography-ratio: 1.333;\n$font-size: 16px;\n$line-height: 1.5em;\n\n$colour-font: #32394F;\n$colou"
},
{
"path": "src/assets/styles/core/_animations.scss",
"chars": 156,
"preview": "\n.fade {\n\n &-enter-active,\n &-leave-active {\n transition: opacity 250ms ease-out;\n }\n\n &-enter,\n &"
},
{
"path": "src/assets/styles/core/_base.scss",
"chars": 472,
"preview": "\nhtml,\nbody {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: $font-size;\n "
},
{
"path": "src/assets/styles/core/_buttons.scss",
"chars": 733,
"preview": "\n.button {\n display: inline-block;\n margin: 0;\n padding: 0.75rem 1.5rem;\n font-weight: 600;\n line-height:"
},
{
"path": "src/assets/styles/core/_inputs.scss",
"chars": 425,
"preview": "\ninput[type=\"text\"],\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime\"],\ninput[type=\"password\"],\ninput[type="
},
{
"path": "src/assets/styles/core/_labels.scss",
"chars": 565,
"preview": "\n.label {\n display: inline-block;\n min-width: 1.5em * $typography-ratio;\n padding: 0 0.5em;\n font-size: 1em/"
},
{
"path": "src/assets/styles/core/_layout.scss",
"chars": 265,
"preview": "\n.container {\n width: 100%;\n max-width: 1170px;\n margin: 0 auto;\n}\n\n.grid-row {\n margin-left: -0.5rem;\n m"
},
{
"path": "src/assets/styles/core/_menus.scss",
"chars": 413,
"preview": "\n.menu {\n\n}\n\n.menu-group {\n\n &:not(:last-child) {\n margin-bottom: 1.5rem;\n }\n}\n\n.menu-group-title,\n.menu-it"
},
{
"path": "src/assets/styles/core/_tables.scss",
"chars": 1376,
"preview": "\n$color-table-row-alt: #FAFAFA;\n\n.table-wrapper {\n display: block;\n width: 100%;\n border: 1px solid $colour-bor"
},
{
"path": "src/assets/styles/core/_typography.scss",
"chars": 1299,
"preview": "\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 1em;\n margin-bottom: 0.25em;\n font-weight: 600;\n line-height: $line-h"
},
{
"path": "src/assets/styles/site.scss",
"chars": 401,
"preview": "\n@import \"./abstract/_variables.scss\";\n@import \"./abstract/_functions.scss\";\n@import \"./abstract/_mixins.scss\";\n\n@import"
},
{
"path": "src/components/calendar/calendar.vue",
"chars": 1840,
"preview": "<template>\n <div class=\"calendar table-wrapper\">\n <div class=\"calendar-header\" layout=\"row center-justify\">\n "
},
{
"path": "src/components/chip/chip.vue",
"chars": 1956,
"preview": "<template>\n <div class=\"chip\">\n <div layout=\"row stretch-justify\">\n <div class=\"chip-body\">\n "
},
{
"path": "src/components/components.js",
"chars": 1128,
"preview": "\nimport Calendar from \"./calendar/calendar.vue\";\nimport Checkbox from \"./toggles/checkbox.vue\";\nimport Chip from \"./chip"
},
{
"path": "src/components/datatable/datatable-cell.js",
"chars": 1695,
"preview": "const defaultTemplate = \"<span>{{ column.formatData(row[column.id]) }}</span>\";\nconst editableTemplate = '<input type=\"t"
},
{
"path": "src/components/datatable/datatable-collection.vue",
"chars": 4521,
"preview": "<template>\n <div class=\"datatable-collection\">\n <table v-if=\"groupable\" :class=\"{ 'table-striped': striped }\">"
},
{
"path": "src/components/datatable/datatable-column.vue",
"chars": 4686,
"preview": "<template>\n <th :style=\"columnStyles\" title=\"Click to sort. Drag to center to group.\" @click=\"sort\" v-drag:start=\"dra"
},
{
"path": "src/components/datatable/datatable.vue",
"chars": 11327,
"preview": "<template>\n <div class=\"datatable table-wrapper\" :class=\"tableClasses\">\n <table>\n <thead class=\"dat"
},
{
"path": "src/components/datatable/readme.md",
"chars": 17985,
"preview": "# Datatable\n\nThe datatable component is essentially a \"glorified table\" designed to efficiently display dense data. Data"
},
{
"path": "src/components/datetime-picker/datetime-picker.vue",
"chars": 2224,
"preview": "<template>\n <floating-panel class=\"date-picker\" :visible=\"visible\">\n <input type=\"text\" slot=\"host\" v-model=\"f"
},
{
"path": "src/components/dynamic/dynamic.js",
"chars": 959,
"preview": "export default {\n functional: true,\n\n props: {\n component: {\n type: Object,\n required"
},
{
"path": "src/components/floating-panel/floating-panel.vue",
"chars": 1413,
"preview": "<template>\n <div class=\"float\">\n <slot name=\"host\"></slot>\n <transition name=\"float\">\n <div "
},
{
"path": "src/components/modal/modal.vue",
"chars": 2571,
"preview": "<template>\n <transition name=\"modal-transition\">\n <div class=\"modal-shade\" layout=\"row center-center\" v-show=\""
},
{
"path": "src/components/paginator/paginator.vue",
"chars": 3533,
"preview": "<template>\n <div class=\"paginator\">\n <div class=\"paginator-body\">\n <slot :data=\"data\" :page-number="
},
{
"path": "src/components/paginator/readme.md",
"chars": 0,
"preview": ""
},
{
"path": "src/components/panel/panel.vue",
"chars": 1423,
"preview": "<template>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div layout=\"row center-justify\">\n "
},
{
"path": "src/components/tab-control/tab-control.vue",
"chars": 2374,
"preview": "<template>\n <div class=\"tab-control\">\n <div class=\"tabs-list\" layout=\"row center-justify\">\n <div se"
},
{
"path": "src/components/tab-control/tab-pane.vue",
"chars": 929,
"preview": "<template>\n <div class=\"tab-pane\" v-if=\"selected\">\n <slot></slot>\n </div>\n</template>\n\n<script>\n export "
},
{
"path": "src/components/toggles/checkbox.vue",
"chars": 2033,
"preview": "<template>\n <div class=\"checkbox\">\n <input type=\"checkbox\" :id=\"id\" :name=\"id\" :disabled=\"disabled\" :value=\"va"
},
{
"path": "src/components/toggles/radio.vue",
"chars": 1828,
"preview": "<template>\n <div class=\"radio\">\n <input type=\"radio\" :id=\"id\" :name=\"id\" :disabled=\"disabled\" :value=\"value\" v"
},
{
"path": "src/components/toggles/readme.md",
"chars": 94,
"preview": "# Toggles\n\nThis docucumentation will cover 3 components which all share the *toggle* behaviour"
},
{
"path": "src/components/toggles/toggle.vue",
"chars": 2058,
"preview": "<template>\n <div class=\"toggle\">\n <input type=\"checkbox\" :id=\"id\" :name=\"id\" :disabled=\"disabled\" :value=\"valu"
},
{
"path": "src/directives/directives.js",
"chars": 63,
"preview": "import Drag from \"./v-drag\";\n\nexport default {\n drag: Drag\n}"
},
{
"path": "src/directives/v-drag.js",
"chars": 1471,
"preview": "\nfunction genericHandler(event) {\n\n}\n\nconst eventHandlerMap = {\n start: {\n eventName: \"dragstart\",\n dra"
},
{
"path": "src/formatters/currency.js",
"chars": 402,
"preview": "import currencies from \"../maps/currencies\";\n\nexport default function currency(value, precision, currency) {\n\n precis"
},
{
"path": "src/formatters/date-long.js",
"chars": 123,
"preview": "import datetime from \"./datetime\";\n\nexport default function dateShort(value) {\n return datetime(value, \"D MMMM YYYY\")"
},
{
"path": "src/formatters/date-short.js",
"chars": 122,
"preview": "import datetime from \"./datetime\";\n\nexport default function dateShort(value) {\n return datetime(value, \"DD/MM/YYYY\");"
},
{
"path": "src/formatters/datetime.js",
"chars": 123,
"preview": "import { format } from \"date-fns\";\n\nexport default function datetime(value, pattern) {\n return format(value, pattern)"
},
{
"path": "src/formatters/formatters.js",
"chars": 219,
"preview": "import currency from \"./currency\";\nimport datetime from \"./datetime\";\nimport dateShort from \"./date-short\";\nimport dateL"
},
{
"path": "src/main.js",
"chars": 906,
"preview": "import \"./polyfills\";\n\nimport \"flex-layout-attribute\";\nimport \"./assets/styles/site.scss\";\n\nimport components from \"./co"
},
{
"path": "src/maps/currencies.js",
"chars": 2406,
"preview": "export default {\n AED: \"د.إ\",\n AFN: \"؋\",\n ALL: \"L\",\n ANG: \"ƒ\",\n AOA: \"Kz\",\n ARS: \"$\",\n AUD: \"$\",\n "
},
{
"path": "src/maps/maps.js",
"chars": 73,
"preview": "import currencies from \"./currencies\";\n\nexport default {\n currencies\n}"
},
{
"path": "src/mixins/checkable.js",
"chars": 712,
"preview": "\nexport default {\n\n model: {\n prop: \"source\",\n event: \"change\"\n },\n\n props: {\n\n id: {\n "
},
{
"path": "src/polyfills.js",
"chars": 118,
"preview": "// Symbols\nimport \"core-js/fn/symbol\";\nimport \"core-js/fn/symbol/iterator\";\n\n// Arrays\nimport \"core-js/fn/array/find\";"
},
{
"path": "src/services/calendar.js",
"chars": 2800,
"preview": "import isValid from \"date-fns/is_valid\";\nimport isWithinRange from \"date-fns/is_within_range\";\nimport startOfMonth from "
},
{
"path": "src/services/event-emitter.js",
"chars": 524,
"preview": "import Vue from \"vue\";\n\n// Here we can just wrap Vue's built-in pub-sub system\n// Saves me from writing my own or import"
},
{
"path": "src/services/http-client.js",
"chars": 461,
"preview": "class HttpRequest {\n\n constructor(url, method) {\n this.url = url;\n this.method = method;\n this.t"
},
{
"path": "src/utilities/average-of.js",
"chars": 185,
"preview": "import totalOf from \"./total-of\";\n\nexport default function averageOf(array, callback) {\n let value = totalOf(array, c"
},
{
"path": "src/utilities/base/aggregator.js",
"chars": 342,
"preview": "export default function aggregate(array, callback, startValue) {\n\n let accumulator = startValue || 0;\n\n for (let i"
},
{
"path": "src/utilities/base/type-converter.js",
"chars": 819,
"preview": "import * as typeValidator from \"./type-validator\";\n\nconst floatTest = /^(\\-|\\+)?([0-9]+(\\.[0-9]+)?|Infinity)$/;\n\nconst e"
},
{
"path": "src/utilities/base/type-validator.js",
"chars": 1408,
"preview": "\nconst types = {\n array: \"[object Array]\",\n boolean: \"[object Boolean]\",\n date: \"[object Date]\",\n null: \"[ob"
},
{
"path": "src/utilities/filter-by.js",
"chars": 1031,
"preview": "// Need to add support for searching dates\nconst SEARCHABLE_TYPES = [\"string\", \"number\", \"boolean\"];\n\n/**\n * Filter an a"
},
{
"path": "src/utilities/first-of.js",
"chars": 134,
"preview": "\nexport default function firstOf(array) {\n\n if (!array.length || array.length < 1) {\n return;\n }\n\n retur"
},
{
"path": "src/utilities/group-by.js",
"chars": 529,
"preview": "/**\n * Group and array of objects by a given key\n * \n * @export\n * @param {Array} array The array to group\n * @param {St"
},
{
"path": "src/utilities/last-of.js",
"chars": 147,
"preview": "\nexport default function lastOf(array) {\n\n if (!array.length || array.length < 1) {\n return;\n }\n\n return"
},
{
"path": "src/utilities/map-values.js",
"chars": 181,
"preview": "export default function mapValues(object, callback) {\n let mapped = {};\n\n for (let prop in object) {\n mappe"
},
{
"path": "src/utilities/max-of.js",
"chars": 774,
"preview": "import aggregate from \"./base/aggregator\";\nimport toNumber from \"./base/type-converter\";\n\nfunction max(accumulator, valu"
},
{
"path": "src/utilities/median-of.js",
"chars": 517,
"preview": "import sortBy from \"./sort-by\";\n\nfunction getValue(item, callback) {\n return callback.call(this, item);\n} \n\nexport de"
},
{
"path": "src/utilities/min-of.js",
"chars": 779,
"preview": "import aggregate from \"./base/aggregator\";\nimport toNumber from \"./base/type-converter\";\n\nfunction min(accumulator, valu"
},
{
"path": "src/utilities/mode-of.js",
"chars": 0,
"preview": ""
},
{
"path": "src/utilities/nest.js",
"chars": 298,
"preview": "import mapValues from \"./map-values\";\n\nexport default function nest(array, keys) {\n if (!keys.length) {\n retur"
},
{
"path": "src/utilities/page-by.js",
"chars": 244,
"preview": "import groupBy from \"./group-by\";\n\nexport default function pageBy(array, callback) {\n\n let groups = groupBy(array, ca"
},
{
"path": "src/utilities/page.js",
"chars": 405,
"preview": "export default function page(array, pageSize) {\n let pages = [];\n let start = 0;\n let length = array.length;\n\n "
},
{
"path": "src/utilities/sort-by.js",
"chars": 909,
"preview": "// Consider making this immutable. I'm undecided at the moment.\n/**\n * Sort an array of objects by the given key and dir"
},
{
"path": "src/utilities/standard-deviation-of.js",
"chars": 205,
"preview": "import varianceOf from \"./variance-of\";\n\nexport default function standardDeviationOf(array, callback) {\n let variance"
},
{
"path": "src/utilities/total-of.js",
"chars": 437,
"preview": "import aggregate from \"./base/aggregator\";\n\nfunction total(accumulator, value) {\n let num = parseFloat(value);\n\n r"
},
{
"path": "src/utilities/variance-of.js",
"chars": 471,
"preview": "import aggregate from \"./base/aggregator\";\nimport averageOf from \"./average-of\";\n\nexport default function varianceOf(arr"
},
{
"path": "src/views/components/buttons.vue",
"chars": 1640,
"preview": "<template>\n <div id=\"buttons\">\n <h1>Buttons</h1>\n <div class=\"grid-row\">\n <div class=\"grid-c"
},
{
"path": "src/views/components/components.js",
"chars": 751,
"preview": "import Buttons from \"./buttons.vue\";\nimport Datatables from \"./datatables.vue\";\nimport Modals from \"./modals.vue\";\nimpor"
},
{
"path": "src/views/components/datatables.vue",
"chars": 17523,
"preview": "<template>\n <div id=\"datatables\">\n <h1>Datatables</h1>\n <div>\n <h3>Configuration</h3>\n "
},
{
"path": "src/views/components/modals.vue",
"chars": 1516,
"preview": "<template>\n <div id=\"modals\">\n <h1>Modals</h1>\n <div class=\"grid-row\">\n <div class=\"grid-cel"
},
{
"path": "src/views/components/paginators.vue",
"chars": 7208,
"preview": "<template>\n <div id=\"paginators\">\n <h1>Paginator</h1>\n <div>\n <h3>Paginated Datatable</h3>\n "
},
{
"path": "src/views/components/panels.vue",
"chars": 1723,
"preview": "<template>\n <div id=\"panels\">\n <h1>Panels</h1>\n <div class=\"grid-row\" layout=\"row top-stretch\">\n "
},
{
"path": "src/views/components/tab-controls.vue",
"chars": 2117,
"preview": "<template>\n <div id=\"tab-controls\">\n <h1>Tab Controls</h1>\n <div class=\"grid-row\">\n <div cla"
},
{
"path": "src/views/components/toggles.vue",
"chars": 2138,
"preview": "<template>\n <div id=\"toggles\">\n <h1>Toggles</h1>\n <div class=\"grid-row\">\n <div class=\"grid-c"
},
{
"path": "src/views/components/typography.vue",
"chars": 3210,
"preview": "<template>\n <div id=\"typography\">\n <h1>This is the first heading</h1>\n <h2>This is the second heading</"
},
{
"path": "src/views/views.js",
"chars": 96,
"preview": "import Components from \"./components/components\";\n\nexport default {\n components: Components\n}"
},
{
"path": "test/mocha.opts",
"chars": 68,
"preview": "--compilers js:babel-register \n--require babel-polyfill \n--recursive"
},
{
"path": "test/test-data.js",
"chars": 3836,
"preview": "export const arrays = {\n\n simple: {\n\n numeric: {\n data: [5, 6, 5, 3, 9, 4, 7, 1, 4, 9, 0, 3, 5],\n "
},
{
"path": "test/utilities/average.js",
"chars": 956,
"preview": "import {\n assert\n} from \"chai\";\n\nimport averageOf from \"../../src/utilities/average-of\";\nimport totalOf from \"../../s"
},
{
"path": "test/utilities/group-by.js",
"chars": 839,
"preview": "import {\n assert\n} from \"chai\";\n\nimport groupBy from \"../../src/utilities/group-by\";\nimport { arrays } from \"../test-"
},
{
"path": "test/utilities/max-of.js",
"chars": 992,
"preview": "import {\n assert\n} from \"chai\";\n\nimport maxOf from \"../../src/utilities/max-of\";\nimport { arrays } from \"../test-data"
},
{
"path": "test/utilities/median-of.js",
"chars": 0,
"preview": ""
},
{
"path": "test/utilities/min-of.js",
"chars": 998,
"preview": "import {\n assert\n} from \"chai\";\n\nimport minOf from \"../../src/utilities/min-of\";\nimport { arrays } from \"../test-data"
},
{
"path": "test/utilities/page.js",
"chars": 396,
"preview": "import {\n assert\n} from \"chai\";\nimport page from \"../../src/utilities/page\";\n\nconst array = [5, 6, 5, 3, 9, 4, 7, 1, "
},
{
"path": "test/utilities/sort-by.js",
"chars": 1997,
"preview": "import {\n assert\n} from \"chai\";\nimport sortBy from \"../../src/utilities/sort-by\";\n\nconst simpleArray = [5, 6, 1, 9, 4"
},
{
"path": "test/utilities/total-of.js",
"chars": 931,
"preview": "import {\n assert\n} from \"chai\";\nimport totalOf from \"../../src/utilities/total-of\";\n\nconst simpleArray = [5, 6, 1, 9,"
},
{
"path": "test/utilities/validators.js",
"chars": 1693,
"preview": "import {\n assert\n} from \"chai\";\n\nimport * as typeValidator from \"../../src/utilities/base/type-validator\";\n\ndescribe("
},
{
"path": "webpack.config.js",
"chars": 3809,
"preview": "var path = require(\"path\");\nvar webpack = require(\"webpack\");\n\nvar ExtractTextPlugin = require(\"extract-text-webpack-plu"
}
]
About this extraction
This page contains the full source code of the andrewcourtice/vuetiful GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 114 files (243.7 KB), approximately 68.7k tokens, and a symbol index with 175 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.