Skip to content
This repository has been archived by the owner on May 7, 2020. It is now read-only.

Commit

Permalink
Create Components 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@the94air
the94air committed Sep 25, 2018
1 parent 5be18c9 commit 600b6c1
Show file tree
Hide file tree
Showing 19 changed files with 666 additions and 365 deletions.
346 changes: 326 additions & 20 deletions public/css/app.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>

<div id="app"></div>

<script type="text/javascript" src="javascript/app.js"></script>
Expand Down
58 changes: 48 additions & 10 deletions public/javascript/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15982,7 +15982,7 @@ __WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["config"].search

__WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["dom"].watch();

__WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["library"].add(__WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["a" /* faBell */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["j" /* faHome */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["m" /* faUser */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["n" /* faUsers */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["g" /* faCubes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["a" /* faAngleRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["d" /* faArrowRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["c" /* faArrowLeft */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["l" /* faTimes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["f" /* faCheckCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["i" /* faExclamationTriangle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["k" /* faInfoCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["h" /* faExclamationCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["b" /* faArrowDown */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["e" /* faArrowUp */]);
__WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["library"].add(__WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["c" /* faBell */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["j" /* faHome */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["m" /* faUser */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["n" /* faUsers */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["g" /* faCubes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["a" /* faAngleRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["d" /* faArrowRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["c" /* faArrowLeft */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["l" /* faTimes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["f" /* faCheckCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["i" /* faExclamationTriangle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["k" /* faInfoCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["h" /* faExclamationCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["b" /* faArrowDown */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["e" /* faArrowUp */], __WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["b" /* faArrowAltCircleRight */], __WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["a" /* faArrowAltCircleLeft */]);

__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('Fa', __WEBPACK_IMPORTED_MODULE_5__fortawesome_vue_fontawesome__["FontAwesomeIcon"]);

Expand Down Expand Up @@ -17583,10 +17583,10 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_20__;
/* unused harmony export faAddressCard */
/* unused harmony export faAngry */
/* unused harmony export faArrowAltCircleDown */
/* unused harmony export faArrowAltCircleLeft */
/* unused harmony export faArrowAltCircleRight */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return faArrowAltCircleLeft; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return faArrowAltCircleRight; });
/* unused harmony export faArrowAltCircleUp */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return faBell; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return faBell; });
/* unused harmony export faBellSlash */
/* unused harmony export faBookmark */
/* unused harmony export faBuilding */
Expand Down Expand Up @@ -23546,14 +23546,43 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//



var btn = '\n <div class="action">\n <button class="button info">Open</button>\n <button class="button success">Edit</button>\n <button class="button danger">Delete</button>\n </div>\n ';

/* harmony default export */ __webpack_exports__["default"] = ({
data: function data() {
return {
columns: [{ label: 'Name', field: 'name' }, { label: 'Age', field: 'age' }, { label: 'Created On', field: 'createdAt', dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'MMM Do YY' }, { label: 'Percent', field: 'score' }],
rows: [{ id: 1, name: "John", age: 20, createdAt: '201-10-31:9: 35 am', score: 0.03343 }, { id: 2, name: "Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 }, { id: 3, name: "Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 }, { id: 4, name: "Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 }, { id: 5, name: "Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 }, { id: 6, name: "John", age: 20, createdAt: '2011-10-31', score: 0.03343 }]
columns: [{ label: 'Name', field: 'name', filterOptions: {
enabled: false, // enable filter for this column
placeholder: 'Filter This Thing', // placeholder for filter input
filterDropdownItems: [] // dropdown (with selected values) instead of text input
} }, { label: 'Age', field: 'age' }, { label: 'Created On', field: 'createdAt', dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'MMM Do YY' }, { label: 'Percent', field: 'score' }, { label: 'Action', field: 'btn', html: true }],
rows: [{ id: 1, name: "John", age: 20, createdAt: '201-10-31:9: 35 am', score: 0.03343, btn: btn }, { id: 2, name: "Jane", age: 24, createdAt: '2011-10-31', score: 0.03343, btn: btn }, { id: 3, name: "Susan", age: 16, createdAt: '2011-10-30', score: 0.03343, btn: btn }, { id: 4, name: "Chris", age: 55, createdAt: '2011-10-11', score: 0.03343, btn: btn }, { id: 5, name: "Dan", age: 40, createdAt: '2011-10-21', score: 0.03343, btn: btn }, { id: 6, name: "John", age: 20, createdAt: '2011-10-31', score: 0.03343, btn: btn }]
// rows: [
// {
// mode: 'span', // span means this header will span all columns
// label: 'Header One', // this is the label that'll be used for the header
// html: false, // if this is true, label will be rendered as html
// children: [
// { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
// { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
// ]
// },
// {
// mode: 'span', // span means this header will span all columns
// label: 'Header Two', // this is the label that'll be used for the header
// html: false, // if this is true, label will be rendered as html
// children: [
// { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
// { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
// ]
// }
// ]
};
},

Expand Down Expand Up @@ -40214,7 +40243,7 @@ var render = function() {
"pagination-options": {
enabled: true,
mode: "records",
perPage: 100,
perPage: 3,
position: "bottom",
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
Expand All @@ -40232,6 +40261,9 @@ var render = function() {
selectionInfoClass: "custom-class",
selectionText: "rows selected",
clearSelectionText: "clear"
},
groupOptions: {
enabled: false
}
},
on: { "on-row-click": _vm.onRowClick }
Expand All @@ -40255,9 +40287,15 @@ var render = function() {
]
),
_vm._v(" "),
_c("div", { attrs: { slot: "emptystate" }, slot: "emptystate" }, [
_vm._v("\n No data for table!\n ")
])
_c(
"div",
{
staticClass: "text-center",
attrs: { slot: "emptystate" },
slot: "emptystate"
},
[_c("em", [_vm._v("No data for table!")])]
)
]
)
],
Expand Down
4 changes: 2 additions & 2 deletions src/javascript/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Vue from 'vue';
import Notifications from 'vue-notification';
import { dom, config, library } from '@fortawesome/fontawesome-svg-core';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { faBell, faArrowAltCircleRight, faArrowAltCircleLeft } from '@fortawesome/free-regular-svg-icons';
import { faHome, faUser, faUsers, faCubes, faAngleRight, faArrowRight,
faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle,
faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
Expand All @@ -16,7 +16,7 @@ dom.watch();

library.add(faBell, faHome, faUser, faUsers, faCubes, faAngleRight,
faArrowRight, faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle,
faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp);
faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp, faArrowAltCircleRight, faArrowAltCircleLeft);

Vue.component('Fa', FontAwesomeIcon);

Expand Down
56 changes: 46 additions & 10 deletions src/javascript/components/DataTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 100,
perPage: 3,
position: 'bottom',
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
Expand All @@ -32,14 +32,17 @@
clearSelectionText: 'clear',
}"
@on-row-click="onRowClick"
:groupOptions="{
enabled: false
}"
>
<div slot="table-actions">
<button class="button success">Completed</button>
<button class="button warning">Pending</button>
<button class="button danger">Rejected</button>
</div>
<div slot="emptystate">
No data for table!
<div slot="emptystate" class="text-center">
<em>No data for table!</em>
</div>
</DataTable>
</div>
Expand All @@ -48,23 +51,56 @@
<script>
import { VueGoodTable as DataTable } from 'vue-good-table';
let btn = `
<div class="action">
<button class="button info">Open</button>
<button class="button success">Edit</button>
<button class="button danger">Delete</button>
</div>
`;
export default {
data() {
return {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Name', field: 'name', filterOptions: {
enabled: false, // enable filter for this column
placeholder: 'Filter This Thing', // placeholder for filter input
filterDropdownItems: [], // dropdown (with selected values) instead of text input
}, },
{ label: 'Age', field: 'age' },
{ label: 'Created On', field: 'createdAt', dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'MMM Do YY' },
{ label: 'Percent', field: 'score' },
{ label: 'Action', field: 'btn', html: true, },
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
{ id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343, btn: btn, },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343, btn: btn, },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343, btn: btn, },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343, btn: btn, },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343, btn: btn, },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343, btn: btn, },
],
// rows: [
// {
// mode: 'span', // span means this header will span all columns
// label: 'Header One', // this is the label that'll be used for the header
// html: false, // if this is true, label will be rendered as html
// children: [
// { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
// { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
// ]
// },
// {
// mode: 'span', // span means this header will span all columns
// label: 'Header Two', // this is the label that'll be used for the header
// html: false, // if this is true, label will be rendered as html
// children: [
// { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
// { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
// ]
// }
// ]
};
},
components: { DataTable },
Expand Down
19 changes: 8 additions & 11 deletions src/sass/components/datatable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@
@import './datatable/wrap';
@import './datatable/table';
@import './datatable/table-th';
// @import './datatable/input';
// @import './datatable/loading';
@import './datatable/input';
@import './datatable/loading';

// // table enhancements
// @import './datatable/bordered';
// @import './datatable/striped';
// @import './datatable/rtl';
// @import './datatable/condensed';
// table enhancements
@import './datatable/rtl';

// // controls on top
// @import './datatable/control-bar';
// controls on top
@import './datatable/control-bar';

// // table footer
// @import './datatable/table-footer';
// table footer
@import './datatable/table-footer';
8 changes: 0 additions & 8 deletions src/sass/components/datatable/_bordered.scss
View file

This file was deleted.

5 changes: 0 additions & 5 deletions src/sass/components/datatable/_condensed.scss
View file

This file was deleted.

93 changes: 32 additions & 61 deletions src/sass/components/datatable/_control-bar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,37 @@
.vgt-global-search{
padding: 5px 0px;
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
border: 1px solid $border-color;
border-bottom: 0px;
background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
.vgt-global-search {
@apply flex;
margin-bottom: 0.45rem;
flex-wrap: no-wrap;
align-items: stretch;
.button {
font-size: 0.8rem;
padding-top: .4rem;
padding-bottom: .4rem;
border: 1px solid transparent;
}
.button + .button {
@apply ml-1;
}
}
.vgt-global-search__input{
position: relative;
padding-left: 40px;
flex-grow: 1;
.input__icon{
position: absolute;
left: 0px;
max-width: 32px;
.magnifying-glass{
margin-top: 3px;
margin-left: 8px;
display: block;
width: 16px;
height: 16px;
border: 2px solid darken($border-color, 2%);
position: relative;
border-radius: 50%;
&:before{
content: "";
display: block;
position: absolute;
right: -7px;
bottom: -5px;
background: darken($border-color, 2%);
width: 8px;
height: 4px;
border-radius: 2px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
}
}
.vgt-input{
}

.vgt-global-search__input {
position: relative;
flex-grow: 1;
}
.vgt-global-search__actions{
margin-left: 10px;

.vgt-global-search__actions {
margin-left: 0.45rem;
}

.vgt-selection-info-row{
background: $notify-bg-color;
padding: 5px 16px;
font-size: 13px;
border-top: 1px solid $border-color;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
color: lighten($notify-fg-color, 10%);
font-weight: bold;
a{
font-weight: bold;
display: inline-block;
margin-left: 10px;
}
.vgt-selection-info-row {
@apply rounded py-2 px-4;
font-size: 0.8rem;
font-weight: 600;
background: $datatable-selection-info-background-color;
margin-bottom: 0.45rem;
color: $datatable-selection-info-color;
a {
@apply inline-block no-underline ml-3;
font-weight: 600;
}
}
Loading

0 comments on commit 600b6c1

Please sign in to comment.