├── vui-logo.png
├── vui
    ├── components
    │   ├── DropdownDivider.vue
    │   ├── FormCol.vue
    │   ├── CardText.vue
    │   ├── FormRow.vue
    │   ├── CardBody.vue
    │   ├── CardTitle.vue
    │   ├── FormGroup.vue
    │   ├── IconStack.vue
    │   ├── NavbarText.vue
    │   ├── FormGroupRow.vue
    │   ├── DropdownItemHeader.vue
    │   ├── CardSubtitle.vue
    │   ├── DropdownItemText.vue
    │   ├── FormHelpText.vue
    │   ├── Select.vue
    │   ├── AlertLink.vue
    │   ├── Option.vue
    │   ├── CardLink.vue
    │   ├── FormLabel.vue
    │   ├── NavbarToggler.vue
    │   ├── Form.vue
    │   ├── NavbarCollapse.vue
    │   ├── Accordion.vue
    │   ├── Card.vue
    │   ├── ListGroup.vue
    │   ├── CardFooter.vue
    │   ├── Progress.vue
    │   ├── Fieldset.vue
    │   ├── Jumbotron.vue
    │   ├── ButtonGroup.vue
    │   ├── InputGroupAppend.vue
    │   ├── Badge.vue
    │   ├── DropdownSelectOption.vue
    │   ├── NavbarNav.vue
    │   ├── CardHeader.vue
    │   ├── InputGroup.vue
    │   ├── NavbarBrand.vue
    │   ├── Legend.vue
    │   ├── InputGroupPrepend.vue
    │   ├── Textarea.vue
    │   ├── BreadcrumbItem.vue
    │   ├── Nav.vue
    │   ├── ProgressBar.vue
    │   ├── NavbarItemDropdown.vue
    │   ├── Callout.vue
    │   ├── CardImage.vue
    │   ├── Icon.vue
    │   ├── ImgPlaceholder.vue
    │   ├── Navbar.vue
    │   ├── Alert.vue
    │   ├── TabsPanel.vue
    │   ├── AccordionPanel.vue
    │   ├── Breadcrumb.vue
    │   ├── DropdownButtonSplit.vue
    │   ├── DropdownSelect.vue
    │   ├── DropdownButton.vue
    │   ├── DropdownLink.vue
    │   ├── DropdownItem.vue
    │   ├── Input.vue
    │   ├── InputFile.vue
    │   ├── NavbarItem.vue
    │   ├── NavItem.vue
    │   ├── InputFileButton.vue
    │   ├── ListGroupItem.vue
    │   ├── Button.vue
    │   ├── Radio.vue
    │   ├── Checkbox.vue
    │   ├── Modal.vue
    │   ├── Pagination.vue
    │   └── Dtable.vue
    ├── directives
    │   ├── AlignDirective.js
    │   ├── FloatDirective.js
    │   ├── ShadowDirective.js
    │   ├── DragDirective.js
    │   ├── ColorsDirective.js
    │   ├── FontDirective.js
    │   └── BorderDirective.js
    ├── images
    │   ├── angle-asc.svg
    │   ├── angle-desc.svg
    │   └── angle-down.svg
    ├── vui_filters.js
    ├── widgets
    │   └── CodePanel.vue
    ├── vui.css
    └── vui.js
├── LICENSE
└── README.md


/vui-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vui-kit/vui/HEAD/vui-logo.png


--------------------------------------------------------------------------------
/vui/components/DropdownDivider.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="dropdown-divider"></div>
3 | </template>
4 | 
5 | <script>
6 | export default {
7 | 	name: 'vui-dropdown-divider'
8 | }
9 | </script>


--------------------------------------------------------------------------------
/vui/components/FormCol.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="col">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-col'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/CardText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<p class="card-text">
 3 | 		<slot></slot>
 4 | 	</p>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-text'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/FormRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="form-row">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-row'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/CardBody.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="card-body">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-body'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/CardTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<h5 class="card-title">
 3 | 		<slot></slot>
 4 | 	</h5>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-title'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/FormGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="form-group">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-group'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/IconStack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="icon-stack">
 3 | 		<slot></slot>
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-icon-stack'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/NavbarText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="navbar-text">
 3 |    <slot></slot>
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-navbar-text'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/directives/AlignDirective.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | Vue.directive('align', {
4 | 	bind: function(el, binding) {
5 | 		if (binding.arg) {
6 | 			el.classList.add(`align-${binding.arg}`)			
7 | 		}
8 | 	}
9 | })


--------------------------------------------------------------------------------
/vui/directives/FloatDirective.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | Vue.directive('float', {
4 | 	bind: function(el, binding) {
5 | 		if (binding.arg) {
6 | 			el.classList.add(`float-${binding.arg}`)			
7 | 		}
8 | 	}
9 | })


--------------------------------------------------------------------------------
/vui/components/FormGroupRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="form-group row">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-group-row'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/DropdownItemHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<h6 class="dropdown-header">
 3 | 		<slot></slot>
 4 | 	</h6>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-dropdown-header'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/CardSubtitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<h6 class="card-subtitle mb-2 text-muted">
 3 | 		<slot></slot>
 4 | 	</h6>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-subtitle'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/DropdownItemText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="dropdown-item-text">
 3 | 		<slot></slot>
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-dropdown-item-text'
10 | }
11 | </script>


--------------------------------------------------------------------------------
/vui/components/FormHelpText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<small class="form-text text-muted">
 3 | 		<slot></slot>
 4 | 	</small>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-help-text'
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/vui/components/Select.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<select class="form-control">
 3 | 		<slot></slot>
 4 | </select>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-select',
10 | 	props: {
11 | 
12 | 	}
13 | }
14 | </script>
15 | 
16 | <style>
17 | 
18 | </style>
19 | 


--------------------------------------------------------------------------------
/vui/directives/ShadowDirective.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.directive('shadow', {
 4 | 	bind: function(el, binding) {
 5 | 		if (!binding.arg) {
 6 | 			el.classList.add('shadow')			
 7 | 		}
 8 | 		else {
 9 | 			el.classList.add(`shadow-${binding.arg}`)
10 | 		}
11 | 	}
12 | })


--------------------------------------------------------------------------------
/vui/images/angle-asc.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg>


--------------------------------------------------------------------------------
/vui/components/AlertLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a :href="href" class="alert-link">
 3 | 		<slot></slot>
 4 | 	</a>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-alert-link',
10 | 	props: {
11 | 		'href': { type: String, default: null }
12 | 	}
13 | }
14 | </script>


--------------------------------------------------------------------------------
/vui/images/angle-desc.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/></svg>


--------------------------------------------------------------------------------
/vui/images/angle-down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/></svg>


--------------------------------------------------------------------------------
/vui/directives/DragDirective.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.directive('drag', {
 4 | 	inserted: function(el, binding) {
 5 | 		Draggable.create(el, {
 6 | 			type: "x,y", 
 7 | 			edgeResistance: .8, 
 8 | 			trigger: binding.value,
 9 | 			bounds: "#" + binding.arg, 
10 | 			throwProps: true
11 | 		})
12 | 	}
13 | })


--------------------------------------------------------------------------------
/vui/components/Option.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<option>
 3 | 		<slot></slot>
 4 | 	</option>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-option'
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | option {
15 | 	padding-top: .3rem !important;
16 | 	padding-bottom: .3rem !important;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/vui/components/CardLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a class="card-link" :href="href" :target="target">
 3 | 		<slot></slot>
 4 | 	</a>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-link',
10 | 	props: {
11 | 		'href': { type: String, default: null },
12 | 		'target': { type: String, default: '_blank' }
13 | 	}
14 | }
15 | </script>


--------------------------------------------------------------------------------
/vui/components/FormLabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<label :for="labelFor">
 3 | 		<slot></slot>
 4 | 	</label>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form-label',
10 | 	props: {
11 | 		'for': { type: String, default: null }
12 | 	},
13 | 	computed: {
14 | 		labelFor() {
15 | 			return this.for
16 | 		}
17 | 	}
18 | }
19 | </script>


--------------------------------------------------------------------------------
/vui/components/NavbarToggler.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button 
 3 | 		class="navbar-toggler" 
 4 | 		type="button" 
 5 | 		data-toggle="collapse"
 6 | 		@click="$parent.toggleNavbar()"
 7 | 	>
 8 |     <span class="navbar-toggler-icon"></span>
 9 |   </button>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 | 	name: 'vui-navbar-toggler'
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/vui/components/Form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<form :class="{ 'form-inline': isInline }">
 3 | 		<slot></slot>
 4 | 	</form>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-form',
10 | 	props: {
11 | 		'inline': { type: Boolean, default: false }
12 | 	},
13 | 	computed: {
14 | 		isInline() {
15 | 			return !!this.inline
16 | 		}
17 | 	}
18 | }
19 | </script>


--------------------------------------------------------------------------------
/vui/components/NavbarCollapse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="collapse navbar-collapse text-left" :class="{'show': isExpanded}">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-navbar-collapse',
10 | 	computed: {
11 | 		isExpanded() {
12 | 			return this.$parent.expandNavbar
13 | 		}
14 | 	}
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/vui/components/Accordion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="accordion">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-accordian',
10 | 	methods: {
11 |     openChild(child) {
12 | 			this.$children.forEach(item => {
13 | 				if (child !== item) {
14 | 					item.open = false
15 | 				}
16 | 			})
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/vui/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div 
 3 | 		class="card"
 4 | 		:class="`text-${align}`"
 5 | 		:style="{ 'width': width }"
 6 | 	>
 7 | 		<slot></slot>
 8 | 	</div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 | 	name: 'vui-card',
14 | 	props: {
15 | 		'width': { type: String, default: null },
16 | 		'align': { type: String, default: 'left' }
17 | 	}
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/vui/components/ListGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ul 
 3 | 		class="list-group" 
 4 | 		:class="{ 'list-group-flush': isFlush }"
 5 | 	>
 6 | 		<slot></slot>
 7 | 	</ul>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: 'vui-list-group',
13 | 	props: {
14 | 		'flush': { type: Boolean, default: false }
15 | 	},
16 | 	computed: {
17 | 		isFlush() {
18 | 			return !!this.flush
19 | 		}
20 | 	}
21 | }
22 | </script>


--------------------------------------------------------------------------------
/vui/components/CardFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="card-footer" :class="hasColor">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-footer',
10 | 	props: {
11 | 		'color': { type: String, default: null }
12 | 	},
13 | 	computed: {
14 | 		hasColor() {
15 | 			return this.color ? `bg-${this.color} text-white` : 'text-dark'
16 | 		}
17 | 	}
18 | }
19 | </script>


--------------------------------------------------------------------------------
/vui/components/Progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="progress mt-2 mb-2" :style="`height: ${height}`">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-progress',
10 | 	props: {
11 | 		'height': { type: String }
12 | 	},
13 | 	data() {
14 | 		return {
15 | 			
16 | 		}
17 | 	},
18 | 	computed: {
19 | 		
20 | 	}
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | 
26 | </style>


--------------------------------------------------------------------------------
/vui/components/Fieldset.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<fieldset>
 3 | 		<slot></slot>
 4 | 	</fieldset>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-fieldset'
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | fieldset {
15 | 	border: 1px solid #ccc;
16 | 	-moz-border-radius: 4px;
17 | 	-webkit-border-radius: 4px;	
18 | 	border-radius: 4px;	
19 | 	padding: 10px;
20 | }
21 | legend + * {
22 | 	clear:both;
23 | }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/vui/directives/ColorsDirective.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.directive('color', {
 4 | 	bind: function(el, binding) {
 5 | 		if (binding.arg === 'txt' && binding.value !== '') {
 6 | 			// Overrides preset router-link color property
 7 | 			el.style.color = ''
 8 | 			el.classList.add(`text-${binding.value}`)			
 9 | 		}
10 | 		if (binding.arg === 'bg' && binding.value !== '') {
11 | 			el.classList.add(`bg-${binding.value}`) 			
12 | 		}
13 | 	}
14 | })


--------------------------------------------------------------------------------
/vui/components/Jumbotron.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="jumbotron" :class="{ 'jumbotron-fluid': isFluid }">
 3 | 		<div :class="{ 'container': isFluid }">
 4 | 			<slot></slot>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 	name: 'vui-jumbotron',
12 | 	props: {
13 | 		'fluid': { type: Boolean, default: false }
14 | 	},
15 | 	computed: {
16 | 		isFluid() {
17 | 			return !!this.fluid
18 | 		}
19 | 	}
20 | }
21 | </script>


--------------------------------------------------------------------------------
/vui/components/ButtonGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="btn-group" :class="hasSize" role="group">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-button-group',
10 | 	props: {
11 | 		'size': { type: String, default: null },
12 | 		'color': { type: String, default: 'secondary' }
13 | 	},
14 | 	computed: {
15 | 		hasSize() {
16 | 			return this.size ? `btn-group-${this.size}` : null
17 | 		}
18 | 	}
19 | }
20 | </script>


--------------------------------------------------------------------------------
/vui/vui_filters.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.filter('capFirst', function(value) {
 4 | 	if (!value) return ''
 5 | 	value = value.toString()
 6 | 	return value.charAt(0).toUpperCase() + value.slice(1)
 7 | })
 8 | 
 9 | Vue.filter('capAll', function(value) {
10 | 	if (!value) return ''
11 | 	value = value.toString()
12 | 	return value.toUpperCase()
13 | })
14 | 
15 | Vue.filter('lowercase', function(value) {
16 | 	if (!value) return ''
17 | 	value = value.toString()
18 | 	return value.toLowerCase()
19 | })


--------------------------------------------------------------------------------
/vui/components/InputGroupAppend.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="input-group-append">
 3 | 		<span class="input-group-text" v-if="text">
 4 | 			<slot></slot>
 5 | 		</span>
 6 | 		<slot v-if="!text"></slot>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: 'vui-input-group-append',
13 | 	props: {
14 | 		'text': { type: Boolean, default: false }
15 | 	},
16 | 	computed: {
17 | 		isText() {
18 | 			return !!this.text
19 | 		}
20 | 	}
21 | }
22 | </script>
23 | 
24 | <style>
25 | 
26 | </style>
27 | 


--------------------------------------------------------------------------------
/vui/components/Badge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="badge" :class="[hasColor, hasPill]">
 3 | 		<slot></slot>
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-badge',
10 | 	props: {
11 | 		'color': { type: String, default: 'secondary' },
12 | 		'pill': { type: Boolean, default: false }
13 | 	},
14 | 	computed: {
15 | 		hasColor() {
16 | 			return this.color ? `badge-${this.color}` : null
17 | 		},
18 | 		hasPill() {
19 | 			return this.pill ? 'badge-pill' : null
20 | 		}
21 | 	}
22 | }
23 | </script>


--------------------------------------------------------------------------------
/vui/components/DropdownSelectOption.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="dropdown-item" @click="selectOption()">
 3 | 		<slot></slot>
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-dropdown-select-option',
10 | 	methods: {
11 | 		selectOption() {
12 | 			this.$emit('click')
13 | 			this.$parent.toggleMenu()
14 | 			this.$parent.inputValue = this.$slots.default[0].text.trim()
15 | 		}
16 | 	}
17 | }
18 | </script>
19 | 
20 | <style scoped>
21 | .dropdown-item {
22 | 	cursor: pointer !important;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/vui/components/NavbarNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ul class="navbar-nav mr-auto">
 3 | 		<slot></slot>
 4 | 	</ul>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-navbar-nav',
10 | 	data() {
11 | 		return {
12 | 			showMenu: false
13 | 		}
14 | 	},
15 | 	methods: {
16 | 		toggleMenu(child) {
17 | 			this.$children.forEach(item => {
18 | 				if (child == item._uid) {
19 | 					item.showMenu = !item.showMenu
20 | 				}
21 | 				else {
22 | 					item.showMenu = false
23 | 				}
24 | 			})
25 | 		}
26 | 	}
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/vui/components/CardHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="card-header" :class="[hasColor, hasSize]">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-card-header',
10 | 	props: {
11 | 		'color': { type: String, default: null },
12 | 		'size': { type: String, default: null }
13 | 	},
14 | 	computed: {
15 | 		hasColor() {
16 | 			return this.color ? `bg-${this.color} text-white` : 'text-dark'
17 | 		},
18 | 		hasSize() {
19 | 			return this.size ? this.size : null
20 | 		}
21 | 	}
22 | }
23 | </script>


--------------------------------------------------------------------------------
/vui/components/InputGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="input-group" :class="hasSize">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-input-group',
10 | 	props: {
11 | 		'size': { type: String, default: null }
12 | 	},
13 | 	computed: {
14 | 		hasSize() {
15 | 			if (this.size === 'sm') {
16 | 				return 'input-group-sm'
17 | 			}
18 | 			else if (this.size === 'lg') {
19 | 				return 'input-group-lg'
20 | 			}
21 | 		}
22 | 	}
23 | }
24 | </script>
25 | 
26 | <style>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/vui/components/NavbarBrand.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<router-link :to="to" class="navbar-brand" v-if="!isHeading">
 3 | 		<slot></slot>
 4 | 	</router-link>
 5 | 	<span class="navbar-brand mb-0 h1" v-else-if="isHeading">
 6 | 		<slot></slot>
 7 | 	</span>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: 'vui-navbar-brand',
13 | 	props: {
14 | 		'to': { type: String, default: '/' },
15 | 		'heading': { type: Boolean, default: false }
16 | 	},
17 | 	computed: {
18 | 		isHeading() {
19 | 			return !!this.heading
20 | 		}
21 | 	}
22 | }
23 | </script>


--------------------------------------------------------------------------------
/vui/components/Legend.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<legend :class="align">
 3 | 		<slot></slot>
 4 | 	</legend>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-legend',
10 | 	props: {
11 | 		'align': { type: String, default: null }
12 | 	}
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | legend {
18 | 	font-size: 1.2rem;
19 |   padding: 6px;
20 | 	width: auto;
21 | }
22 | legend.center {
23 | 	text-align: center;
24 | }
25 | legend.right {
26 | 	text-align: right;
27 | }
28 | legend + * {
29 |     -webkit-margin-top-collapse: separate;
30 | }
31 | </style>


--------------------------------------------------------------------------------
/vui/components/InputGroupPrepend.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="input-group-prepend">
 3 | 		<span class="input-group-text" v-if="!isButton">
 4 | 			<slot></slot>
 5 | 		</span>
 6 | 		<slot v-if="isButton"></slot>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: 'vui-input-group-prepend',
13 | 	props: {
14 | 		'button': { type: Boolean, default: false }
15 | 	},
16 | 	computed: {
17 | 		isButton() {
18 | 			return !!this.button
19 | 		}
20 | 	}
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | span {
26 | 	margin: 0 auto;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/vui/components/Textarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<textarea class="form-control" :value="value" :placeholder="ph">
 3 | 		<slot name="textarea"></slot>
 4 | 	</textarea>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-textarea',
10 | 	props: ['placeholder'],
11 | 	data() {
12 | 		return {
13 | 			ph: ''
14 | 		}
15 | 	},
16 | 	computed: {
17 | 		value() {
18 | 			if (this.$slots.textarea === undefined) {
19 | 				return this.ph = 'Enter your text...'
20 | 			}
21 | 			else {
22 | 				return this.$slots.default[0].text.replace(/^\s+/g, '')
23 | 			}
24 | 			
25 | 		}
26 | 	}
27 | }
28 | </script>


--------------------------------------------------------------------------------
/vui/components/BreadcrumbItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<li class="breadcrumb-item" :class="{ 'active': isActive }">
 3 | 		<router-link :to="to" v-if="!isActive">
 4 | 			<a href="#"><slot></slot></a>
 5 | 		</router-link>
 6 | 
 7 | 		<slot v-else></slot>
 8 | 	</li>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 | 	name: 'vui-breadcrumb-item',
14 | 	props: {
15 | 		'active': { type: Boolean, default: true },
16 | 		'to': { type: String, default: null }
17 | 	},
18 | 	mounted() {
19 | 		console.log(this.$route.path);
20 | 	},
21 | 	computed: {
22 | 		isActive() {
23 | 			return this.active ? true : false
24 | 		}
25 | 	}
26 | }
27 | </script>


--------------------------------------------------------------------------------
/vui/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ul 
 3 | 		class="nav" 
 4 | 		:class="{ 
 5 | 			'nav-tabs': hasTabs, 
 6 | 			'nav-pills': hasPills, 
 7 | 			'nav-fill': hasFill,
 8 | 			'nav-justified': isJustified 
 9 | 		}"
10 | 	>
11 | 		<slot></slot>
12 | 	</ul>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 | 	name: 'vui-nav',
18 | 	props: {
19 | 		'tabs': { type: Boolean, default: false },
20 | 		'pills': { type: Boolean, default: false },
21 | 		'fill': { type: Boolean, default: false },
22 | 		'justified': { type: Boolean, default: false }
23 | 	},
24 | 	computed: {
25 | 		hasTabs() {
26 | 			return !!this.tabs
27 | 		},
28 | 		hasPills() {
29 | 			return !!this.pills
30 | 		},
31 | 		hasFill() {
32 | 			return !!this.fill
33 | 		},
34 | 		isJustified() {
35 | 			return !!this.justified
36 | 		}
37 | 	}
38 | }
39 | </script>


--------------------------------------------------------------------------------
/vui/components/ProgressBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div 
 3 | 		class="progress-bar"
 4 | 		:class="[`bg-${color}`, { 
 5 | 			'progress-bar-striped': hasStripes,
 6 | 			'progress-bar-animated': isAnimated 
 7 | 		}]" 
 8 | 		role="progressbar" 
 9 | 		:style="`width: ${width}%`"
10 | 		aria-valuemax="50"
11 | 	>
12 | 		{{ label }}
13 | 	</div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 | 	name: 'vui-progress-bar',
19 | 	props: {
20 | 		'width': { type: String },
21 | 		'color': { type: String, default: 'primary' },
22 | 		'label': { type: String },
23 | 		'striped': { type: Boolean, default: false },
24 | 		'animated': { type: Boolean, default: false }
25 | 	},
26 | 	computed: {
27 | 		hasStripes() {
28 | 			return !!this.striped
29 | 		},
30 | 		isAnimated() {
31 | 			return this.striped ? !!this.animated : null
32 | 		}
33 | 	}
34 | }
35 | </script>


--------------------------------------------------------------------------------
/vui/components/NavbarItemDropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<li class="nav-item dropdown">
 3 | 		<a class="nav-link dropdown-toggle" @click="toggleMenu">
 4 | 			{{ text }} 
 5 | 		</a>
 6 | 		<div ref="menu" class="dropdown-menu" :class="{ 'show': showMenu }">
 7 | 			<slot></slot>
 8 | 		</div>
 9 | 	</li>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 | 	name: 'vui-nav-item-dropdown',
15 | 	props: {
16 | 		'text': { type: String, default: 'Nav Item' },
17 | 		'autoClose': { type: Boolean, default: false }
18 | 	},
19 | 	data() {
20 | 		return {
21 | 			showMenu: false
22 | 		}
23 | 	},
24 | 	computed: {
25 | 		hasAutoClose() {
26 | 			return !!this.autoClose
27 | 		}
28 | 	},
29 | 	methods: {
30 | 		toggleMenu() {
31 | 			this.$parent.toggleMenu(this._uid)
32 | 		}
33 | 	}
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | .nav-link {
39 | 	color: dimgrey !important;
40 | 	font-weight: 400;
41 | 	cursor: pointer;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/vui/components/Callout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="callout mt-2 mb-2" :class="type">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: 'vui-callout',
10 | 	props: {
11 | 		'type': { type: String, default: 'info' }
12 | 	}
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | .callout {
18 | 	padding: 20px;
19 | 	border-top: 1px solid #ccc;
20 | 	border-right: 1px solid #ccc;
21 | 	border-bottom: 1px solid #ccc;
22 | 	border-radius: 5px;
23 | 	width: 100%;
24 | }
25 | .callout.success {
26 | 	border-left: 8px solid #28a745;
27 | 	background-color: rgba(40,167,69,.1);
28 | }
29 | .callout.info {
30 | 	border-left: 8px solid #17a2b8;
31 | 	background-color: rgba(23,162,184,.1);
32 | }
33 | .callout.warning {
34 | 	border-left: 8px solid #ffc107;
35 | 	background-color: rgba(255,193,7,.1);
36 | }
37 | .callout.danger {
38 | 	border-left: 8px solid #dc3545;
39 | 	background-color: rgba(220,53,69,.1);
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/vui/components/CardImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="wrapper">
 3 | 		<span class="caption" :class="capAlign">
 4 | 			{{ cap }}
 5 | 		</span>
 6 | 		<img class="image" :src="src" />
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: 'vui-card-image',
13 | 	props: {
14 | 		'src': { type: String, default: null },
15 | 		'cap': { type: String, default: null },
16 | 		'capAlign': { type: String, default: 'middle' }
17 | 	}
18 | }
19 | </script>
20 | 
21 | <style scoped>
22 | .wrapper {
23 | 	position: relative;
24 | }
25 | 
26 | image {
27 | 	z-index: 1;
28 | 	width: 100%;
29 | 	height: auto;
30 | }
31 | 
32 | .caption {
33 | 	left: 0;
34 | 	position: absolute;
35 | 	text-align: center;
36 | 	width: 100%;
37 | 	color: white;
38 | 	font-size: 20px;
39 | 	z-index: 2;
40 | 	margin: auto;
41 | }
42 | 
43 | .caption.top {
44 | 	top: 20px;
45 | }
46 | .caption.middle {
47 | 	top: 45%;
48 | }
49 | .caption.bottom {
50 | 	bottom: 20px;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/vui/components/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<i 
 3 | 		ref="icon"
 4 | 		:class="[
 5 | 			`icon-${name} icon-rotate-${rotate} icon-flip-${flip} pull-${pull}`, 
 6 | 			{ 'icon-spin': hasSpin, 'icon-border': hasBorder, 'icon-muted': isMuted }
 7 | 		]" 
 8 | 		:style="`font-size: ${size}; color: ${color}; font-weight: normal`"
 9 | 	></i>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 | 	name: 'vui-icon',
15 | 	props: {
16 | 		'name': { type: String },
17 | 		'size': { type: String, default: '14px' },
18 | 		'color': { type: String, default: null },
19 | 		'rotate': { type: String, default: null },
20 | 		'flip': { type: String, default: null },
21 | 		'spin': { type: Boolean, default: false },
22 | 		'pull': { type: String, default: null },
23 | 		'border': { type: Boolean, default: false },
24 | 		'muted': { type: Boolean, default: false }
25 | 	},
26 | 	computed: {
27 | 		hasSpin() {
28 | 			return !!this.spin
29 | 		},
30 | 		hasBorder() {
31 | 			return !!this.border
32 | 		},
33 | 		isMuted() {
34 | 			return !!this.muted
35 | 		}
36 | 	}
37 | }
38 | </script>


--------------------------------------------------------------------------------
/vui/components/ImgPlaceholder.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<img :src="`https://via.placeholder.com/${size}/${hasColor}/${hasText}`">
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 | 	name: 'vui-img-placeholder',
 8 | 	props: {
 9 | 		'size': { type: String, default: null },
10 | 		'color': { type: String, default: 'secondary' },
11 | 		'text': { type: String, default: null }
12 | 	},
13 | 	computed: {
14 | 		hasColor() {
15 | 			if (this.color === 'primary') {
16 | 				return '007bff/ffffff'
17 | 			}
18 | 			else if (this.color === 'secondary') {
19 | 				return '6c757d/ffffff'
20 | 			}
21 | 			else if (this.color === 'success') {
22 | 				return '28a745/ffffff'
23 | 			}
24 | 			else if (this.color === 'danger') {
25 | 				return 'dc3545/ffffff'
26 | 			}
27 | 			else if (this.color === 'warning') {
28 | 				return 'ffc107/343a40'
29 | 			}
30 | 			else if (this.color === 'info') {
31 | 				return '17a2b8/ffffff'
32 | 			}
33 | 			else if (this.color === 'light') {
34 | 				return 'ffffff/343a40'
35 | 			}
36 | 			else if (this.color === 'dark') {
37 | 				return '343a40/ffffff'
38 | 			}
39 | 		},
40 | 		hasText() {
41 | 			return this.text ? `?text=${this.text}` : null
42 | 		}
43 | 	}
44 | }
45 | </script>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2011-2018 Twitter, Inc.
 4 | Copyright (c) 2011-2018 The Bootstrap Authors
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/vui/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<nav 
 3 | 		class="navbar" 
 4 | 		:class="[`navbar-expand-${expand}`, position, hasTheme, hasColor, hasShadow]"
 5 | 		:style="`background-color: ${bgColor};`"
 6 | 	>
 7 | 		<slot></slot>
 8 | 	</nav>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 | 	name: 'vui-navbar',
14 | 	props: {
15 | 		'position': { type: String, default: null },
16 | 		'theme': { type: String, default: 'light' },
17 | 		'color': { type: String, default: null },
18 | 		'bgColor': { type: String, default: null },
19 | 		'expand': { type: String, default: 'sm' },
20 | 		'shadow': { type: Boolean, default: false }
21 | 	},
22 | 	data() {
23 | 		return {
24 | 			expandNavbar: false
25 | 		}
26 | 	},
27 | 	computed: {
28 | 		hasTheme() {
29 | 			return this.theme ? `navbar-${this.theme}` : null
30 | 		},
31 | 		hasColor() {
32 | 			return this.color ? `bg-${this.color}` : null
33 | 		},
34 | 		hasShadow() {
35 | 			return !!this.shadow
36 | 		}
37 | 	},
38 | 	methods: {
39 | 		toggleNavbar() {
40 | 			return this.expandNavbar = !this.expandNavbar
41 | 		}
42 | 	}
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | .navbar {
48 | 	display: flex !important;
49 | 	justify-content: space-between !important;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/vui/components/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="alert" :class="hasColor" role="alert" v-show="isShown">
 3 | 		<slot></slot>
 4 | 		<button 
 5 | 			type="button" 
 6 | 			class="close alert-close-btn" 
 7 | 			@click="close"
 8 | 			v-show="dismissible"
 9 | 		>
10 | 			<i class="fa icon-remove"></i>
11 | 		</button>
12 | 	</div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 | 	name: 'vui-alert',
18 | 	props: {
19 | 		'color': { type: String, default: 'danger' },
20 | 		'dismissible': { type: Boolean, default: false },
21 | 		'timer': { type: Number, default: null }
22 | 	},
23 | 	data() {
24 | 		return {
25 | 			isShown: true
26 | 		}
27 | 	},
28 | 	updated() {		
29 | 		this.timer ? this.setTimer() : null
30 | 	},
31 | 	computed: {
32 | 		hasColor() {
33 | 			return this.color ? `alert-${this.color}` : null
34 | 		},
35 | 		isDismissible() {
36 | 			return this.dismissible ? true : false
37 | 		}
38 | 	},
39 | 	methods: {
40 | 		close() {
41 | 			return this.isShown = false
42 | 		},
43 | 		setTimer() {			
44 | 			let vm = this
45 | 			setTimeout(() => {
46 | 				vm.close()
47 | 			}, vm.timer);
48 | 		}
49 | 	}
50 | }
51 | </script>
52 | 
53 | <style scoped>
54 | .alert-close-btn {
55 | 	position: absolute;
56 | 	top: .5em;
57 | 	right: .5em;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/vui/components/TabsPanel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="card shadow-sm rounded">
 3 | 		<ul class="nav nav-tabs">
 4 | 			<li 
 5 | 				v-for="(tab, index) in tabs"
 6 | 				class="nav-item"
 7 | 				:key="index"
 8 | 				@click="tabClick(tab.content, index)"
 9 | 			>
10 | 				<a 
11 | 					class="nav-link" 
12 | 					:class="{ 'active': tab.active }"  
13 | 					ref="tab1-tab"
14 | 					href="#"
15 | 				>
16 | 					{{ tab.label }}
17 | 				</a>
18 | 			</li>
19 | 		</ul>
20 | 
21 | 		<div class="card-body">
22 | 			<div class="tab-content">
23 | 				<div 
24 | 					class="tab-pane fade"
25 | 					:class="{ 'active': tab.active, 'show': tab.active }"
26 | 					v-for="(tab, index) in tabs"
27 | 					:key="index"	 
28 | 					:ref="tab.content"
29 | 				>
30 | 					<slot :name="tab.content"></slot>
31 | 				</div>
32 | 			</div>
33 | 		</div>
34 | 	</div>
35 | </template>
36 | 
37 | <script>
38 | export default {
39 | 	name: 'TabPanel',
40 | 	props: {
41 | 		'tabs': { type: Array, required: true }
42 | 	},
43 | 	methods: {
44 | 		tabClick(tab, index) {
45 | 			// clear all active classes
46 | 			this.tabs.forEach(tab => {
47 | 				tab.active = false
48 | 			})
49 | 
50 | 			// set current active class
51 | 			this.tabs[index].active = true
52 | 		}
53 | 	}
54 | }
55 | </script>
56 | 
57 | <style scoped>
58 | .nav-link.active {
59 | 	font-weight: bold;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/vui/directives/FontDirective.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.directive('font', {
 4 | 	bind: function(el, binding) {
 5 | 		if (binding.arg === 'lcase') {
 6 | 			el.classList.add('text-lowercase')			
 7 | 		}
 8 | 		else if (binding.arg === 'ucase') {
 9 | 			el.classList.add('text-uppercase')			
10 | 		}
11 | 		else if (binding.arg === 'cap') {
12 | 			el.classList.add('text-capitalize')			
13 | 		}
14 | 
15 | 		else if (binding.arg === 'justify') {
16 | 			el.classList.add('text-justify')			
17 | 		}
18 | 		else if (binding.arg === 'left') {
19 | 			el.classList.add('text-left')			
20 | 		}
21 | 		else if (binding.arg === 'center') {
22 | 			el.classList.add('text-center')			
23 | 		}
24 | 		else if (binding.arg === 'right') {
25 | 			el.classList.add('text-right')			
26 | 		}
27 | 
28 | 		else if (binding.arg === 'truncate') {
29 | 			el.classList.add('text-truncate')
30 | 		}
31 | 
32 | 		else if (binding.arg === 'bold') {
33 | 			el.classList.add('font-weight-bold')
34 | 		}
35 | 		else if (binding.arg === 'normal') {
36 | 			el.classList.add('font-weight-normal')
37 | 		}
38 | 		else if (binding.arg === 'light') {
39 | 			el.classList.add('font-weight-light')
40 | 		}
41 | 		else if (binding.arg === 'italic') {
42 | 			el.classList.add('font-italic')
43 | 		}
44 | 		else if (binding.arg === 'monospace') {
45 | 			el.classList.add('text-monospace')
46 | 		}
47 | 	}
48 | })


--------------------------------------------------------------------------------
/vui/components/AccordionPanel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="card">
 3 | 		<div 
 4 | 			class="card-header"
 5 | 			:class="[{ 'active': open }, `bg-${activeColor}`, `text-${activeTextColor}`]" 
 6 | 			@click="expandItem"
 7 | 		>
 8 | 			<h6 class="mb-0 font-weight-normal" :class="{ 'active': open }">
 9 | 				{{ header }}
10 | 			</h6>
11 | 		</div>
12 | 		<div class="card-body" v-show="open">
13 | 			<slot></slot>
14 | 		</div>
15 | 	</div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 | 	name: 'AccordianPanel',
21 | 	props: {
22 | 		'header': { type: String, default: null },
23 | 		'active': { type: Boolean, default: false },
24 | 		'bgColor': { type: String, default: null }
25 | 	},
26 | 	data() {
27 | 		return {
28 | 			open: false
29 | 		}
30 | 	},
31 | 	mounted() {
32 | 		this.active ? this.open = true : this.open = false
33 | 	},
34 | 	computed: {
35 | 		activeColor() {
36 | 			return this.open ? this.bgColor : 'light'
37 | 		},
38 | 		activeTextColor() {
39 | 			return this.open && this.bgColor ? 'light' : null
40 | 		}
41 | 	},
42 | 	methods: {
43 | 		expandItem() {
44 | 			this.open = true
45 | 			this.$parent.openChild(this)
46 | 			this.$emit('click')
47 | 		}
48 | 	}
49 | }
50 | </script>
51 | 
52 | <style scoped>
53 | .card-header {
54 | 	cursor: pointer;
55 | }
56 | .card-header.active {
57 | 	cursor: default;
58 | }
59 | h6.active {
60 | 	font-weight: bold !important;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/vui/components/Breadcrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<nav class="breadcrumb">
 3 | 			<span 
 4 | 				class="" 
 5 | 				v-for="(path, index) in paths" 
 6 | 				:key="index"
 7 | 			>	
 8 | 				<span v-if="index < paths.length -1">
 9 | 					<router-link :to="buildPath(index)">
10 | 						{{ path }}
11 | 					</router-link> 
12 | 					<span class="breadcrumb-seperator">{{ seperator }}</span>
13 | 				</span>
14 | 				<span v-else>{{ path }}</span>
15 | 			</span>
16 | 	</nav>
17 | </template>
18 | 
19 | <script>
20 | let to = ''
21 | 
22 | export default {
23 | 	name: 'vui-breadcrumb',
24 | 	props: {
25 | 		'seperator': { type: String, default: '/' }
26 | 	},
27 | 	data() {
28 | 		return {
29 | 			paths: [],
30 | 			routePath: ''
31 | 		}
32 | 	},
33 | 	mounted() {
34 | 		// clear previous stored route data
35 | 		to = ''
36 | 		this.paths = []
37 | 		// set fresh route data
38 | 		this.routePath = ''
39 | 		let routePath = this.$route.path
40 | 		let pathArray = routePath.split("/")
41 | 
42 | 		pathArray.forEach((item) => {
43 | 			if (item !== "") {
44 | 				this.paths.push(item.charAt(0).toUpperCase() + item.slice(1))
45 | 			}
46 | 		})	
47 | 	},
48 | 	methods: {
49 | 		buildPath(idx) {
50 | 			to += `/${this.paths[idx].toLowerCase()}`
51 | 			return to
52 | 		}
53 | 	}
54 | }
55 | </script>
56 | 
57 | <style scoped>
58 | .breadcrumb-item {
59 | 	cursor: pointer;
60 | }
61 | 
62 | .breadcrumb-seperator {
63 | 	padding-left: 10px;
64 | 	padding-right: 10px;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/vui/components/DropdownButtonSplit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="btn-group">
 3 | 		<button 
 4 | 			type="button" 
 5 | 			class="btn"
 6 | 			:class="[hasColor, btnSize]"
 7 | 			@click="$emit('click')"
 8 | 		>
 9 | 			{{ text }}
10 | 		</button>
11 | 		<button
12 | 			class="btn dropdown-toggle dropdown-toggle-split"
13 | 			:class="[hasColor, btnSize]" 
14 | 			type="button"
15 | 			@click="toggleMenu"
16 | 		>
17 | 		</button>
18 | 		<div class="dropdown-menu shadow" :class="{ 'show': showMenu }">
19 | 			<slot></slot>
20 | 		</div>
21 | 	</div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 | 	name: 'vui-dropdown-button-split',
27 | 	props: {
28 | 		'text': { type: String, default: 'Dropdown button' },
29 | 		'color': { type: String, default: 'secondary' },
30 | 		'outline': { type: Boolean, default: false },
31 | 		'size': { type: String, default: null },
32 | 		'action': { type: String, default: null }
33 | 	},
34 | 	data() {
35 | 		return {
36 | 			showMenu: false
37 | 		}
38 | 	},
39 | 	computed: {
40 | 		hasColor() {
41 | 			if (this.outline === false) {
42 | 				return this.color ? `btn-${this.color}` : null
43 | 			}
44 | 			else {
45 | 				return this.color ? `btn-outline-${this.color}` : null
46 | 			} 
47 | 		},
48 | 		hasOutline() {
49 | 			return !!this.outline
50 | 		},
51 | 		btnSize() {
52 | 			if (this.size === 'lg') {
53 | 				return 'btn-lg'
54 | 			}
55 | 			else if (this.size === 'sm') {
56 | 				return 'btn-sm'
57 | 			}
58 | 		}
59 | 	},
60 | 	methods: {
61 | 		toggleMenu() {
62 | 			return this.showMenu = !this.showMenu
63 | 		}
64 | 	}
65 | }
66 | </script>


--------------------------------------------------------------------------------
/vui/widgets/CodePanel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="example-panel">
 3 | 		<div class="example" v-if="this.$slots.example">
 4 | 			<slot name="example"></slot>
 5 | 		</div>
 6 | 		<div class="code">
 7 | 			<button class="btn btn-light copy-btn" :data-clipboard-text="this.$slots.code[0].text">
 8 | 				Copy
 9 | 			</button>
10 | 			<pre>
11 | 				<code :class="hasType">
12 | 					<slot name="code"></slot>
13 | 				</code>
14 | 			</pre>
15 | 		</div>
16 | 	</div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 | 	name: 'vui-code-panel',
22 | 	props: {
23 | 		'type': { type: String }
24 | 	},
25 | 	mounted() {
26 | 		const clipboard = new ClipboardJS('.copy-btn')
27 | 		Prism.highlightAll()
28 | 	},
29 | 	computed: {
30 | 		hasType() {
31 | 			return this.type ? `language-${this.type}` : 'language-html'
32 | 		}
33 | 	}
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | .example-panel {
39 | 	border: 1px solid #ccc;
40 | }
41 | 
42 | .example {
43 | 	padding: 20px;
44 | 	position: relative;
45 | }
46 | 
47 | .code {
48 | 	overflow: auto;
49 | 	white-space: pre-line;
50 | 	position: relative;
51 | }
52 | 
53 | code {
54 | 	tab-size: 2;
55 | }
56 | 
57 | pre {
58 | 	margin: 0;
59 | 	padding: 0 20px;
60 | 	margin-bottom: 0px;
61 | 	overflow: auto;
62 | 	word-break: break-word;
63 | 	font-size: 15px;
64 | 	background-color: rgba(0,0,0,.05);
65 | 	border: 0px;
66 | 	tab-size: 2;
67 | }
68 | 
69 | .copy-btn {
70 | 	position: absolute;
71 | 	right: 10px;
72 | 	margin-top: 5px;
73 | 	margin-right: -10px;
74 | 	font-size: 12px;
75 | 	background-color: transparent;
76 | 	z-index: 10;
77 | }
78 | </style>


--------------------------------------------------------------------------------
/vui/components/DropdownSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="dropdown-select">
 3 | 		<vui-input 
 4 | 			ref="selectInput"
 5 | 			@click.native="toggleMenu()" 
 6 | 			:value="inputValue || value" 
 7 | 			class="select-input"
 8 | 			:placeholder="placeholder"
 9 | 		/>
10 | 		<div class="dropdown-menu shadow" :class="{ 'show': showMenu }">
11 | 			<slot></slot>
12 | 		</div>
13 | 	</div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 | 	name: 'vui-dropdown-select',
19 | 	props: {
20 | 		'placeholder': { type: String, default: null },
21 | 		'value': { type: String, default: null }
22 | 	},
23 | 	data() {
24 | 		return {
25 | 			showMenu: false,
26 | 			inputValue: null
27 | 		}
28 | 	},
29 | 	watch: {
30 | 		inputValue() {
31 | 			this.$emit('input', this.inputValue)
32 | 		}
33 | 	},
34 | 	computed: {
35 | 		hasValue() {
36 | 			if (this.value && this.inputValue === '') {
37 | 				return this.inputValue = this.value
38 | 			}
39 | 		}
40 | 	},
41 | 	methods: {
42 | 		toggleMenu() {
43 | 			return this.showMenu = !this.showMenu
44 | 		}
45 | 	}
46 | }
47 | </script>
48 | 
49 | <style scoped>
50 | .dropdown-select {
51 | 	position: relative;
52 | }
53 | 
54 | .dropdown-menu {
55 | 	position: absolute;
56 | 	width: 100% !important;
57 | 	margin-top: 0px;
58 | 	margin-left: 0px;
59 | }
60 | 
61 | .select-input {
62 | 	padding-right: 8px !important;
63 | 	background-image: url('../../vui/images/angle-down.svg');
64 | 	background-size: 12px;
65 | 	background-position: right;
66 | 	background-origin: content-box, padding-box;
67 | 	background-repeat: no-repeat;
68 | 	cursor: default;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/vui/components/DropdownButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="dropdown">
 3 | 		<button
 4 | 			class="btn dropdown-toggle"
 5 | 			:class="[hasColor, btnSize, { 'navLink': hasNavLink }]" 
 6 | 			type="button"
 7 | 			@click="toggleMenu"
 8 | 		>
 9 | 			{{ text }}
10 | 		</button>
11 | 		<div class="dropdown-menu shadow" :class="{ 'show': showMenu }">
12 | 			<slot></slot>
13 | 		</div>
14 | 	</div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 | 	name: 'vui-dropdown-button',
20 | 	props: {
21 | 		'text': { type: String, default: 'Dropdown button' },
22 | 		'color': { type: String, default: 'secondary' },
23 | 		'outline': { type: Boolean, default: false },
24 | 		'size': { type: String, default: null },
25 | 		'navLink': { type: Boolean, default: false }
26 | 	},
27 | 	data() {
28 | 		return {
29 | 			showMenu: false
30 | 		}
31 | 	},
32 | 	computed: {
33 | 		hasColor() {
34 | 			if (this.outline === false) {
35 | 				return this.color ? `btn-${this.color}` : null
36 | 			}
37 | 			else {
38 | 				return this.color ? `btn-outline-${this.color}` : null
39 | 			} 
40 | 		},
41 | 		hasOutline() {
42 | 			return !!this.outline
43 | 		},
44 | 		btnSize() {
45 | 			if (this.size === 'lg') {
46 | 				return 'btn-lg'
47 | 			}
48 | 			else if (this.size === 'sm') {
49 | 				return 'btn-sm'
50 | 			}
51 | 		},
52 | 		hasNavLink() {
53 | 			return !!this.navLink
54 | 		}
55 | 	},
56 | 	methods: {
57 | 		toggleMenu() {
58 | 			return this.showMenu = !this.showMenu
59 | 		}
60 | 	}
61 | }
62 | </script>
63 | 
64 | <style scoped>
65 | .navLink {
66 | 	color: #007bff !important;
67 | 	font-weight: 400;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/vui/components/DropdownLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="dropdown">
 3 | 		<span
 4 | 			class="btn dropdown-toggle"
 5 | 			:class="[hasColor, hasOutline, btnSize]"
 6 | 			@click="toggleMenu"
 7 | 		>
 8 | 			<i class="mr-1" :class="`fa ${icon}`" v-show="hasIcon"></i>
 9 | 			{{ text }}
10 | 		</span>
11 | 		<div class="dropdown-menu shadow" :class="{ 'show': showMenu }">
12 | 			<slot></slot>
13 | 		</div>
14 | 	</div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 | 	name: 'vui-dropdown-link',
20 | 	props: {
21 | 		'text': { type: String, default: 'Dropdown link' },
22 | 		'icon': { type: String, default: null },
23 | 		'color': { type: String, default: 'secondary' },
24 | 		'outline': { type: Boolean, default: true },
25 | 		'size': { type: String, default: null },
26 | 		'href': { type: String, default: null },
27 | 		'autoClose': { type: Boolean, default: false }
28 | 	},
29 | 	data() {
30 | 		return {
31 | 			showMenu: false
32 | 		}
33 | 	},
34 | 	computed: {
35 | 		hasColor() {
36 | 			return this.color ? `btn-${this.color}` : null
37 | 		},
38 | 		hasOutline() {
39 | 			return this.outline ? `btn-outline-${this.color}` : null
40 | 		},
41 | 		btnSize() {
42 | 			if (this.size === 'lg') {
43 | 				return 'btn-lg'
44 | 			}
45 | 			else if (this.size === 'sm') {
46 | 				return 'btn-sm'
47 | 			}
48 | 		},
49 | 		hasIcon() {
50 | 			return this.icon ? true : false
51 | 		},
52 | 		hasAutoClose() {
53 | 			return !!this.autoClose
54 | 		}
55 | 	},
56 | 	methods: {
57 | 		toggleMenu() {
58 | 			return this.showMenu = !this.showMenu
59 | 		},
60 | 		preventDefault() {
61 | 			return null
62 | 		}
63 | 	}
64 | }
65 | </script>


--------------------------------------------------------------------------------
/vui/components/DropdownItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 | 	<div v-if="setType === 'router-link'">
 4 | 		<router-link 
 5 | 			:to="to" 
 6 | 			class="dropdown-item text-secondary"
 7 | 			@click.native="$parent.toggleMenu(), $emit('click')"
 8 | 		>
 9 | 			<slot></slot>
10 | 		</router-link>
11 | 	</div>
12 | 	<div v-else-if="setType === 'link'">
13 | 		<a 
14 | 			class="dropdown-item text-secondary" 
15 | 			:href="href" 
16 | 			:target="target"
17 | 			@click="$parent.toggleMenu(), $emit('click')"
18 | 		>
19 | 			<slot></slot>
20 | 		</a>
21 | 	</div>
22 | 	<div v-else>
23 | 		<span 
24 | 			class="dropdown-item text-secondary" 
25 | 			@click="$emit('click'), $parent.hasAutoClose ? $parent.toggleMenu() : null"
26 | 		>
27 | 			<slot></slot>
28 | 		</span>
29 | 	</div>
30 | </div>
31 | </template>
32 | 
33 | <script>
34 | //bg-light text-secondary
35 | export default {
36 | 	name: 'vui-dropdown-item',
37 | 	props: {
38 | 		'to': { type: String, default: '' },
39 | 		'href': { type: String, default: '' },
40 | 		'target': { type: String, default: '' }
41 | 		
42 | 	},
43 | 	computed: {
44 | 		setType() {
45 | 			if (this.to) {
46 | 				return 'router-link'
47 | 			}
48 | 			else if (this.href) {
49 | 				return 'link'
50 | 			}
51 | 		}
52 | 	}
53 | }
54 | </script>
55 | 
56 | <style scoped>
57 | .dropdown-item.active, 
58 | .dropdown-item:active {
59 | 	background-color: #fff;
60 | }
61 | .dropdown-item.active:hover, 
62 | .dropdown-item:active:hover {
63 | 	background-color: #f8f9fa;
64 | }
65 | 
66 | span.dropdown-item, 
67 | span.dropdown-item {
68 | 	background-color: #fff;
69 | 	cursor: pointer;
70 | 	color: dimgrey;
71 | }
72 | span.dropdown-item.active:hover, 
73 | span.dropdown-item:active:hover {
74 | 	background-color: #f8f9fa;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.vui-kit.com/">
 3 |     <img src="vui-logo.png" width="180px" />
 4 |   </a>
 5 | 
 6 |   <h1 align="center">Vui</h1>
 7 | 
 8 |   <p align="center">
 9 |     A lightweight component library for Vue2 Single Page Applications
10 |   </p>
11 | </p>
12 | 
13 | <br>
14 | 
15 | ## Documentation
16 | 
17 | <https://www.vui-kit.com/>
18 | 
19 | ## Features
20 | - Large set of easy to use Vue Components.
21 | - Download and add to any new or existing project.
22 | - Detailed documentaion.
23 | 
24 | ## Roadmap
25 | - 20 New Components (Spring 2019)
26 | - Vui Admin (Python Flask) (Spring 2019)
27 | - Emmet support for VSCode & Atom (Spring 2019)
28 | - Support for Fontawesome 4 & 5 icons (Spring 2019)
29 | - Vui Studio (Quasar/Electron App) (Summer 2019)
30 | 
31 | ### Vui Admin
32 | Unlike most themes that only provide a static UI, Vui Admin is a quick start application that provides a functional layout with many working features and a richer set of Vui components designed especially for Admin projects. Just drop the package into your Python Flask project folder and your ready to start developing.
33 | 
34 | ### Vui Studio
35 | Design and prototype your project interfaces using this drag and drop editor. Once you have a design, you can then generate
36 | template code to add to your Vue project. Similar to Bootstrap Studio.
37 | 
38 | ## Patreons
39 | In order for me to dedicate time to design and develop these projects, I need to be able to support myself and pay the bills, so if you like the work I am doing and want to see more great projects added to the Vui Kit show your support and
40 | become a pateron. You will get your logo or photo on this README page and also on every page of the Offical Vui-Kit website with a link to your site. [<a href="https://www.patreon.com/joe_lomoglio">Become a patron.</a>]
41 | 


--------------------------------------------------------------------------------
/vui/components/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<input 
 3 | 		ref="input"
 4 | 		class="form-control"
 5 | 		:type="type"
 6 | 		:autocomplete="autocomplete" 
 7 | 		:autofocus="autofocus"
 8 | 		:placeholder="placeholder"
 9 | 		:required="required"
10 | 		:pattern="pattern"
11 | 		:value="value"
12 | 		@input="update()"
13 | 	>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 | 	name: 'vui-input',
19 | 	props: {
20 | 		'autocomplete': { type: String,  default: null },
21 | 		'autofocus': 		{ type: Boolean, default: false },
22 | 		'type': 				{ type: String,  default: null },
23 | 		'placeholder': 	{ type: String,  default: null },
24 | 		'required': 		{ type: Boolean, default: false },
25 | 		'pattern': 			{ type: String,  default: null },
26 | 		'value': 				{ type: String,  default: null }
27 | 	},
28 | 	computed: {
29 | 		hasAutofocus() {
30 | 			return !!this.autofocus
31 | 		},
32 | 		isRequired() {
33 | 			return !!this.required
34 | 		}
35 | 	},
36 | 	methods: {
37 | 		update() {
38 | 			this.$emit('input', this.$refs.input.value)
39 | 		}
40 | 	}
41 | }
42 | </script>
43 | 
44 | <style scoped>
45 | input[type="color"] {
46 | 	/* -webkit-appearance: none;
47 | 	border: none; */
48 | 	width: 42px;
49 | 	height: 32px;
50 | }
51 | input[type="color"]::-webkit-color-swatch-wrapper {
52 | 	padding: 0;
53 | }
54 | input[type="color"]::-webkit-color-swatch {
55 | 	border: none;
56 | }
57 | 
58 | input[type="file"] {
59 | 	width: 0.1px;
60 | 	height: 0.1px;
61 | 	opacity: 0;
62 | 	overflow: hidden;
63 | 	position: absolute;
64 | 	z-index: -1;
65 | }
66 | 
67 | input[type="file"] + label {
68 | 	font-size: 1.25em;
69 | 	font-weight: 700;
70 | 	color: white;
71 | 	background-color: black;
72 | 	display: inline-block;
73 | }
74 | 
75 | input[type="file"]:focus + label,
76 | input[type="file"]:hover + label {
77 | 	background-color: #eee;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/vui/components/InputFile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="custom-file">
 3 | 		<input type="file" class="custom-file-input" id="customFile">
 4 | 		<label class="custom-file-label" for="customFile">Choose file</label>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 | 	name: 'vui-input-file',
11 | 	props: {
12 | 		'id': { type: String,  default: null },
13 | 		'color': { type: String, default: 'secondary' },
14 | 		'size': { type: String, default: null },
15 | 		'outline': { type: Boolean, default: false },
16 | 		'block': { type: Boolean, default: false },
17 | 		'active': { type: Boolean, default: false },
18 | 		'disabled': { type: Boolean, default: false },
19 | 		'btnText': { type: String, default: null },
20 | 		'btnIcon': { type: String, default: null },
21 | 	},
22 | 	computed: {
23 | 		hasColor() {
24 | 			// check to see if we use button-group color or this prop color
25 | 			if (this.partOfButtonGroup) {
26 | 				return `btn-${this.$parent.$props.color}`
27 | 			}
28 | 			else {
29 | 				if (this.outline === false) {
30 | 					return this.color ? `btn-${this.color}` : null
31 | 				}
32 | 				else {
33 | 					return this.color ? `btn-outline-${this.color}` : null
34 | 				} 
35 | 			}
36 | 		},
37 | 		hasOutline() {
38 | 			return !!this.outline
39 | 		},
40 | 		btnSize() {
41 | 			if (this.size === 'lg') {
42 | 				return 'btn-lg'
43 | 			}
44 | 			else if (this.size === 'sm') {
45 | 				return 'btn-sm'
46 | 			}
47 | 		},
48 | 		isBlock() {
49 | 			return this.block ? 'btn-block' : null
50 | 		},
51 | 		isActive() {
52 | 			return this.active && !this.disabled ? 'active' : null
53 | 		},
54 | 		isDisabled() {
55 | 			return this.disabled && !this.active ? !!this.disabled : null
56 | 		}
57 | 	}
58 | }
59 | </script>
60 | 
61 | <style>
62 | div.fileinputs {
63 | 	position: relative;
64 | }
65 | 
66 | div.fakefile {
67 | 	position: absolute;
68 | 	top: 0px;
69 | 	left: 0px;
70 | 	z-index: 1;
71 | }
72 | 
73 | input.file {
74 | 	position: relative;
75 | 	text-align: right;
76 | 	opacity: 0;
77 | 	z-index: 2;
78 | }
79 | 
80 | input.fake-input {
81 | 	border: none;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/vui/components/NavbarItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<li class="nav-item">
 3 | 		<router-link 
 4 | 			v-if="!isDisabled" 
 5 | 			:to="to"
 6 | 			:exact="isExact"
 7 | 			class="nav-link"
 8 | 			:class="{ 'active-link': isActive }"
 9 | 			@click.native="$parent.$parent.$parent.toggleNavbar()"
10 | 		>
11 | 			<slot></slot>
12 | 		</router-link>
13 | 
14 | 		<a class="nav-link disabled-link disabled" disabled v-else-if="isDisabled">
15 | 			<slot></slot>
16 | 		</a>
17 | 	</li>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 | 	name: 'vui-nav-item',
23 | 	props: {
24 | 		'to': { type: String, default: '/' },
25 | 		'exact': { type: Boolean, default: null },
26 | 		'active': { type: Boolean, default: false },
27 | 		'disabled': { type: Boolean, default: false }
28 | 	},
29 | 	computed: {
30 | 		isExact() {
31 | 			return this.exact ? true : false
32 | 		},
33 | 		isActive() {
34 | 			return !!this.active
35 | 		},
36 | 		isDisabled() {
37 | 			return !!this.disabled
38 | 		},
39 | 	}
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | /* LIGHT THEME CLASSES */
45 | .nav-link .active {
46 | 	font-weight: 400;
47 | 	color: rgba(0,0,0,.7);
48 | }
49 | .nav-link.disabled-link {
50 | 	font-weight: 400;
51 | 	color: rgba(0,0,0,.4) !important;
52 | 	cursor: default !important;
53 | }
54 | .nav-link.active-link {
55 | 	font-weight: 600;
56 | 	color: rgba(0,0,0,.7) !important;
57 | }
58 | .nav-link {
59 | 	color: dimgrey !important;
60 | 	font-weight: 400;
61 | }
62 | 
63 | /* DARK THEME CLASSES */
64 | .navbar.navbar-dark .nav-link.disabled-link.disabled {
65 | 	font-weight: 400 !important;
66 | 	color: rgba(255,255,255,.45) !important;
67 | 	cursor: default !important;
68 | }
69 | .navbar.navbar-dark .nav-link.active-link {
70 | 	font-weight: 400 !important;
71 | 	color: white !important;
72 | }
73 | .navbar.navbar-dark .nav-link:active {
74 | 	font-weight: 400 !important;
75 | 	color: white !important;
76 | }
77 | .navbar.navbar-dark .nav-link {
78 | 	color: rgba(255,255,255,.8) !important;
79 | 	font-weight: 400 !important;
80 | }
81 | .navbar.navbar-dark .nav-link:hover {
82 | 	color: rgba(255,255,255,.95) !important;
83 | 	font-weight: 400 !important;
84 | }
85 | </style>
86 | 
87 | 


--------------------------------------------------------------------------------
/vui/components/NavItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<li class="nav-item">
 3 | 		<router-link
 4 | 			v-if="!isDisabled && !isTab && !isPill" 
 5 | 			:to="to"
 6 | 			:exact="isExact"
 7 | 			class="nav-link"
 8 | 			:class="{ 'active-link': isActive }"
 9 | 		>
10 | 			<slot></slot>
11 | 		</router-link>
12 | 
13 | 		<a class="nav-link disabled-link disabled" disabled v-else-if="isDisabled">
14 | 			<slot></slot>
15 | 		</a>
16 | 
17 | 		<a 
18 | 			class="nav-link"
19 | 			:class="{ 'active': isActive, 'active-link': isActive }" 
20 | 			href="#" 
21 | 			v-else-if="!isDisabled && isTab && !isPill"
22 | 		>
23 | 			<slot></slot>
24 | 		</a>
25 | 
26 | 		<router-link 
27 | 			class="nav-link pill"
28 | 			:class="{ 'active-link': isActive }" 
29 | 			:to="to"
30 | 			:exact="isExact"
31 | 			v-else-if="!isDisabled && !isTab && isPill"
32 | 		>
33 | 			<slot></slot>
34 | 		</router-link>
35 | 
36 | 	</li>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 | 	name: 'vui-nav-item',
42 | 	props: {
43 | 		'to': { type: String, default: '/' },
44 | 		'exact': { type: Boolean, default: null },
45 | 		'active': { type: Boolean, default: false },
46 | 		'disabled': { type: Boolean, default: false },
47 | 		'tab': { type: Boolean, default: false },
48 | 		'pill': { type: Boolean, default: false },
49 | 	},
50 | 	computed: {
51 | 		isExact() {
52 | 			return this.exact ? true : false
53 | 		},
54 | 		isActive() {
55 | 			return !!this.active
56 | 		},
57 | 		isDisabled() {
58 | 			return !!this.disabled
59 | 		},
60 | 		isTab() {
61 | 			return !!this.tab
62 | 		},
63 | 		isPill() {
64 | 			return !!this.pill
65 | 		}
66 | 	}
67 | }
68 | </script>
69 | 
70 | <style scoped>
71 | .nav-link.disabled-link {
72 | 	font-weight: 400;
73 | 	color: rgba(0,0,0,.4) !important;
74 | 	cursor: default !important;
75 | }
76 | .nav-link.active-link {
77 | 	font-weight: 600;
78 | 	color: #007bff !important;
79 | }
80 | .nav-link {
81 | 	color: #007bff !important;
82 | 	font-weight: 400;
83 | }
84 | .nav-link.pill.active-link {
85 | 	color: white !important;
86 | 	background: #007bff!important;
87 | 	font-weight: 600;
88 | }
89 | .nav-link.pill {
90 | 	color: b#007bff !important;
91 | 	background: transparent !important;
92 | 	font-weight: 600;
93 | }
94 | </style>
95 | 
96 | 


--------------------------------------------------------------------------------
/vui/components/InputFileButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="fileinputs">
 3 | 		<input type="file" :id="id" class="file" />
 4 | 		<div class="fakefile">
 5 | 			<vui-button
 6 | 				class="btn"
 7 | 				:class="[hasColor, btnSize, isBlock, isActive, isDisabled]"
 8 | 				:disabled="isDisabled"
 9 | 				@click="$emit('click')"
10 | 			>
11 | 				<i class="fa icon-download-alt"></i> Choose a file...
12 | 			</vui-button>
13 | 			<input class="fake-input" />
14 | 		</div>
15 | 	</div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 | 	name: 'vui-input-file',
21 | 	props: {
22 | 		'id': { type: String,  default: null },
23 | 		'color': { type: String, default: 'secondary' },
24 | 		'size': { type: String, default: null },
25 | 		'outline': { type: Boolean, default: false },
26 | 		'block': { type: Boolean, default: false },
27 | 		'active': { type: Boolean, default: false },
28 | 		'disabled': { type: Boolean, default: false },
29 | 		'btnText': { type: String, default: null },
30 | 		'btnIcon': { type: String, default: null },
31 | 	},
32 | 	computed: {
33 | 		hasColor() {
34 | 			// check to see if we use button-group color or this prop color
35 | 			if (this.partOfButtonGroup) {
36 | 				return `btn-${this.$parent.$props.color}`
37 | 			}
38 | 			else {
39 | 				if (this.outline === false) {
40 | 					return this.color ? `btn-${this.color}` : null
41 | 				}
42 | 				else {
43 | 					return this.color ? `btn-outline-${this.color}` : null
44 | 				} 
45 | 			}
46 | 		},
47 | 		hasOutline() {
48 | 			return !!this.outline
49 | 		},
50 | 		btnSize() {
51 | 			if (this.size === 'lg') {
52 | 				return 'btn-lg'
53 | 			}
54 | 			else if (this.size === 'sm') {
55 | 				return 'btn-sm'
56 | 			}
57 | 		},
58 | 		isBlock() {
59 | 			return this.block ? 'btn-block' : null
60 | 		},
61 | 		isActive() {
62 | 			return this.active && !this.disabled ? 'active' : null
63 | 		},
64 | 		isDisabled() {
65 | 			return this.disabled && !this.active ? !!this.disabled : null
66 | 		}
67 | 	}
68 | }
69 | </script>
70 | 
71 | <style>
72 | div.fileinputs {
73 | 	position: relative;
74 | }
75 | 
76 | div.fakefile {
77 | 	position: absolute;
78 | 	top: 0px;
79 | 	left: 0px;
80 | 	z-index: 1;
81 | }
82 | 
83 | input.file {
84 | 	position: relative;
85 | 	text-align: right;
86 | 	opacity: 0;
87 | 	z-index: 2;
88 | }
89 | 
90 | input.fake-input {
91 | 	border: none;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/vui/components/ListGroupItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<li 
  3 | 		class="list-group-item list-group-item-action" 
  4 | 		:class="[hasColor, { 
  5 | 			'active': isActive, 
  6 | 			'disabled': isDisabled,
  7 | 			'm-0': isLink || isRlink || isButton,
  8 | 			'p-0': isLink || isRlink || isButton,
  9 | 		}]"
 10 | 	>
 11 | 		<slot v-if="!isLink && !isRlink && !isButton"></slot>
 12 | 
 13 | 		<a 
 14 | 			:href="href" 
 15 | 			class="list-group-item list-group-item-action"
 16 | 			:class="[hasColor, { 'active': isActive, 'disabled': isDisabled }]"
 17 | 			v-if="isLink"
 18 | 		>
 19 | 			<slot v-if="isLink"></slot>
 20 | 		</a>
 21 | 
 22 | 		<router-link 
 23 | 			:to="to"
 24 | 			tag="a" 
 25 | 			class="list-group-item list-group-item-action rlink"
 26 | 			:class="[hasColor, { 'disabled': isDisabled }]"
 27 | 			:active="isActive"
 28 | 			v-if="isRlink"
 29 | 		>
 30 | 			<slot v-if="isRlink"></slot>
 31 | 		</router-link>
 32 | 
 33 | 		<button @click="$emit('click')" 
 34 | 			class="list-group-item list-group-item-action"
 35 | 			:class="[hasColor, { 'active': isActive, 'disabled': isDisabled }]"
 36 | 			v-if="isButton"
 37 | 		>
 38 | 			<slot v-if="isButton"></slot>
 39 | 		</button>
 40 | 	</li>
 41 | </template>
 42 | 
 43 | <script>
 44 | export default {
 45 | 	name: 'vui-list-group-item',
 46 | 	props: {
 47 | 		'active': { type: Boolean, default: false },
 48 | 		'disabled': { type: Boolean, default: false },
 49 | 		'link': { type: Boolean, default: false },
 50 | 		'rlink': { type: Boolean, default: false },
 51 | 		'button': { type: Boolean, default: false },
 52 | 		'href': { type: String, default: '' },
 53 | 		'to': { type: String, default: '' },
 54 | 		'color': { type: String, default: '' }
 55 | 	},
 56 | 	computed: {
 57 | 		isActive() {
 58 | 			return !!this.active
 59 | 		},
 60 | 		isDisabled() {
 61 | 			return !!this.disabled
 62 | 		},
 63 | 		isLink() {
 64 | 			return !!this.link
 65 | 		},
 66 | 		isRlink() {
 67 | 			return !!this.rlink
 68 | 		},
 69 | 		isButton() {
 70 | 			return !!this.button
 71 | 		},
 72 | 		hasColor() {
 73 | 			return this.color ? `list-group-item-${this.color}` : null
 74 | 		}
 75 | 	}
 76 | }
 77 | </script>
 78 | 
 79 | <style scoped>
 80 | .disabled {
 81 | 	pointer-events: none; 
 82 | 	opacity: 0.6;
 83 | }
 84 | 
 85 | .rlink {
 86 | 	background: #fff; 
 87 | 	color: #000; 
 88 | 	border: 1px solid #ccc
 89 | }
 90 | .rlink:hover {
 91 | 	background-color: rgba(240,248,255,.5) !important;
 92 | }
 93 | .rlink.router-link-active,
 94 | .rlink.router-link-exact-active
 95 |  {
 96 | 	background: inherit; 
 97 | 	color: inherit;
 98 | 	border: inherit;
 99 | }
100 | a, button, .rlink {
101 | 	border-top: none !important;
102 | 	border-bottom: none !important;
103 | }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/vui/directives/BorderDirective.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.directive('border', {
 4 | 	bind: function(el, binding) {
 5 | 
 6 | 		// Additive: All Boders
 7 | 		if (!binding.arg && !binding.modifiers[0]) {
 8 | 			el.classList.add("border")			
 9 | 		}
10 | 		// Additive: Top Boder
11 | 		else if (binding.arg === 'top' && !binding.modifiers[0]) {
12 | 			el.classList.add("border-top")
13 | 		}
14 | 		// Additive: Right Boder
15 | 		else if (binding.arg === 'right' && !binding.modifiers[0]) {
16 | 			el.classList.add("border-right")
17 | 		}
18 | 		// Additive: Bottom Boder
19 | 		else if (binding.arg === 'bottom' && !binding.modifiers[0]) {
20 | 			el.classList.add("border-bottom")
21 | 		}
22 | 		// Additive: Left Boder
23 | 		else if (binding.arg === 'left' && !binding.modifiers[0]) {
24 | 			el.classList.add("border-left")
25 | 		}
26 | 
27 | 		// Subtractive: No Boders
28 | 		else if (!binding.arg && binding.modifiers[0]) {
29 | 			el.classList.add("border-0")			
30 | 		}
31 | 		// Subtractive: No Top Boder
32 | 		else if (binding.arg === 'top' && binding.modifiers[0]) {
33 | 			el.classList.add("border")
34 | 			el.classList.add("border-top-0")			
35 | 		}
36 | 		// Subtractive: No Right Boder
37 | 		else if (binding.arg === 'right' && binding.modifiers[0]) {
38 | 			el.classList.add("border")
39 | 			el.classList.add("border-right-0")			
40 | 		}
41 | 		// Subtractive: No Bottom Boder
42 | 		else if (binding.arg === 'bottom' && binding.modifiers[0]) {
43 | 			el.classList.add("border")
44 | 			el.classList.add("border-bottom-0")			
45 | 		}
46 | 		// Subtractive: No Left Boder
47 | 		else if (binding.arg === 'left' && binding.modifiers[0]) {
48 | 			el.classList.add("border")
49 | 			el.classList.add("border-left-0")			
50 | 		}
51 | 
52 | 		// Border Colors
53 | 		if (binding.value) {
54 | 			el.classList.add("border-" + binding.value)
55 | 		}
56 | 
57 | 		// Border Radius: All
58 | 		if (binding.modifiers['rounded']) {
59 | 			el.classList.add("rounded")
60 | 		}
61 | 		// Border Radius: Top
62 | 		else if (binding.modifiers['rounded-top']) {
63 | 			el.classList.add("rounded-top")
64 | 		}
65 | 		// Border Radius: Right
66 | 		else if (binding.modifiers['rounded-right']) {
67 | 			el.classList.add("rounded-right")
68 | 		}
69 | 		// Border Radius: Bottom
70 | 		else if (binding.modifiers['rounded-bottom']) {
71 | 			el.classList.add("rounded-bottom")
72 | 		}
73 | 		// Border Radius: Left
74 | 		else if (binding.modifiers['rounded-left']) {
75 | 			el.classList.add("rounded-left")
76 | 		}
77 | 		// Border Radius: Circle
78 | 		else if (binding.modifiers['rounded-circle']) {
79 | 			el.classList.add("rounded-circle")
80 | 		}
81 | 		// Border Radius: None
82 | 		else if (binding.modifiers['rounded-0']) {
83 | 			el.classList.add("rounded-0")
84 | 		}
85 | 		
86 | 		// el.innerHTML =
87 | 		// 	'name - '       + binding.name + '<br>' +
88 | 		// 	'expression - ' + binding.expression + '<br>' +
89 | 		// 	'argument - '   + binding.arg + '<br>' +
90 | 		// 	'modifiers - '  + JSON.stringify(binding.modifiers) + '<br>' +
91 | 		// 	'value - '      + binding.value
92 |   }
93 | })


--------------------------------------------------------------------------------
/vui/components/Button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<button 
  3 | 		type="button" 
  4 | 		class="btn"
  5 | 		:class="[hasColor, btnSize, isBlock, isActive, isDisabled]"
  6 | 		:disabled="isDisabled"
  7 | 		@click="$emit('click')"
  8 | 	>
  9 | 		<slot></slot>
 10 | 	</button>
 11 | </template>
 12 | 
 13 | <script>
 14 | export default {
 15 | 	name: 'vui-button',
 16 | 	props: {
 17 | 		'color': { type: String, default: 'secondary' },
 18 | 		'theme': { type: String, default: null },
 19 | 		'size': { type: String, default: null },
 20 | 		'outline': { type: Boolean, default: false },
 21 | 		'block': { type: Boolean, default: false },
 22 | 		'active': { type: Boolean, default: false },
 23 | 		'disabled': { type: Boolean, default: false }
 24 | 	},
 25 | 	data() {
 26 | 		return {
 27 | 			partOfButtonGroup: false
 28 | 		}
 29 | 	},
 30 | 	mounted() {
 31 | 		if (this.$parent.$el.classList.contains('btn-group')) {
 32 | 			this.partOfButtonGroup = true
 33 | 		}
 34 | 	},
 35 | 	computed: {
 36 | 		btnGroup() {
 37 | 			// Is the button part of a button-group?
 38 | 			return !!this.partOfButtonGroup
 39 | 		},
 40 | 		hasColor() {
 41 | 			// check to see if we use button-group color or this prop color
 42 | 			if (this.partOfButtonGroup) {
 43 | 				return `btn-${this.$parent.$props.color}`
 44 | 			}
 45 | 			else {
 46 | 				if (this.outline === false) {
 47 | 					return this.color ? `btn-${this.color}` : null
 48 | 				}
 49 | 				// Theme is only used when button is part of a navbar
 50 | 				else {
 51 | 					if (this.theme == 'light' || this.theme == 'dark') {
 52 | 						if (this.theme === 'light') {
 53 | 							if (this.color.charAt(0) === '#') {
 54 | 								return `btn-outline-secondary btn-transparent text-secondary`
 55 | 							}
 56 | 							else {
 57 | 								return this.color ? `btn-outline-secondary bg-light btn-light-transparent text-secondary` : null
 58 | 							}
 59 | 						}
 60 | 						else if (this.theme === 'dark') {
 61 | 							if (this.color.charAt(0) === '#') {
 62 | 								return `btn-outline-light btn-transparent text-white`
 63 | 							}
 64 | 							else {
 65 | 								return this.color ? `btn-outline-light bg-${this.color} text-white` : null
 66 | 							}
 67 | 						}
 68 | 					}
 69 | 					else {
 70 | 						return this.color ? `btn-outline-${this.color}` : null
 71 | 					}
 72 | 				} 
 73 | 			}
 74 | 		},
 75 | 		hasOutline() {
 76 | 			return !!this.outline
 77 | 		},
 78 | 		btnSize() {
 79 | 			if (this.size === 'lg') {
 80 | 				return 'btn-lg'
 81 | 			}
 82 | 			else if (this.size === 'sm') {
 83 | 				return 'btn-sm'
 84 | 			}
 85 | 		},
 86 | 		isBlock() {
 87 | 			return this.block ? 'btn-block' : null
 88 | 		},
 89 | 		isActive() {
 90 | 			return this.active && !this.disabled ? 'active' : null
 91 | 		},
 92 | 		isDisabled() {
 93 | 			return this.disabled && !this.active ? !!this.disabled : null
 94 | 		}
 95 | 	}
 96 | }
 97 | </script>
 98 | 
 99 | <style scoped>
100 | .btn-transparent {
101 | 	background: transparent !important;
102 | }
103 | .btn-transparent:hover {
104 | 	background: rgba(255,255,255,.2) !important;
105 | }
106 | .btn-light-transparent:hover {
107 | 	background: rgba(0,0,0,.1) !important;
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/vui/components/Radio.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div 
  3 | 		class="custom-control custom-radio"
  4 | 		:class="[hasColor, {'custom-control-inline': isInline}]"
  5 | 	>
  6 | 		<input 
  7 | 			class="custom-control-input" 
  8 | 			type="radio" 
  9 | 			:value="value"
 10 | 			:name="name"
 11 | 			:id="id"
 12 | 			:checked="isChecked"
 13 | 			:disabled="isDisabled"
 14 | 			:autofocus="autofocus"
 15 | 		>
 16 | 		<label class="custom-control-label mr-0 d-block" :class="hasColor" :for="id">
 17 | 			<slot></slot>
 18 | 		</label>
 19 | 	</div>
 20 | </template>
 21 | 
 22 | <script>
 23 | export default {
 24 | 	name: 'vui-radio',
 25 | 	props: {
 26 | 		'name': 			{ type: String, default: null },
 27 | 		'id': 				{ type: String, default: 'radio1' },
 28 | 		'value': 			{ type: String, default: null },
 29 | 		'disabled': 	{ type: Boolean, default: false },
 30 | 		'checked': 		{ type: Boolean, default: false },
 31 | 		'autofocus': 	{ type: Boolean, default: false },
 32 | 		'inline': 		{ type: Boolean, default: false },
 33 | 		'color':			{ type: String, default: 'default' }
 34 | 	},
 35 | 	computed: {
 36 | 		isDisabled() {
 37 | 			return !!this.disabled
 38 | 		},
 39 | 		isChecked() {
 40 | 			return !!this.checked
 41 | 		},
 42 | 		isInline() {
 43 | 			return !!this.inline
 44 | 		},
 45 | 		hasColor() {
 46 | 			return this.color ? `custom-${this.color}` : null
 47 | 		}
 48 | 	}
 49 | }
 50 | </script>
 51 | 
 52 | <style scoped>
 53 | /* .custom-control-label:before{
 54 |   background-color: #eee;
 55 | } */
 56 | 
 57 | .custom-default.custom-radio .custom-control-input:checked 
 58 | ~ .custom-default.custom-control-label::before {
 59 |   background-color: #bfcad4;
 60 | }
 61 | .custom-default.custom-radio .custom-control-input:checked 
 62 | ~ .custom-default.custom-control-label::after {
 63 |   background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
 64 | }
 65 | 
 66 | .custom-primary.custom-radio .custom-control-input:checked 
 67 | ~ .custom-primary.custom-control-label::before {
 68 |   background-color: #007bff;
 69 | }
 70 | 
 71 | .custom-secondary.custom-radio .custom-control-input:checked 
 72 | ~ .custom-secondary.custom-control-label::before {
 73 |   background-color: #6c757d;
 74 | }
 75 | 
 76 | .custom-success.custom-radio .custom-control-input:checked 
 77 | ~ .custom-success.custom-control-label::before {
 78 |   background-color: #28a745;
 79 | }
 80 | 
 81 | .custom-danger.custom-radio .custom-control-input:checked 
 82 | ~ .custom-danger.custom-control-label::before {
 83 |   background-color: #dc3545;
 84 | }
 85 | 
 86 | .custom-warning.custom-radio .custom-control-input:checked 
 87 | ~ .custom-warning.custom-control-label::before {
 88 |   background-color: #ffc107;
 89 | }
 90 | 
 91 | .custom-info.custom-radio .custom-control-input:checked 
 92 | ~ .custom-info.custom-control-label::before {
 93 |   background-color: #17a2b8;
 94 | }
 95 | 
 96 | .custom-dark.custom-radio .custom-control-input:checked 
 97 | ~ .custom-dark.custom-control-label::before {
 98 |   background-color: #343a40;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/vui/components/Checkbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div 
  3 | 		class="custom-control custom-checkbox"
  4 | 		:class="[hasColor, {'custom-control-inline': isInline}]"
  5 | 	>
  6 | 		<input 
  7 | 			class="custom-control-input" 
  8 | 			type="checkbox" 
  9 | 			:value="value"
 10 | 			:name="name"
 11 | 			:id="id"
 12 | 			:checked="isChecked"
 13 | 			:disabled="isDisabled"
 14 | 			:autofocus="autofocus"
 15 | 		>
 16 | 		<label class="custom-control-label mr-0 d-block" :class="hasColor" :for="id">
 17 | 			<slot></slot>
 18 | 		</label>
 19 | 	</div>
 20 | </template>
 21 | 
 22 | <script>
 23 | export default {
 24 | 	name: 'vui-checkbox',
 25 | 	props: {
 26 | 		'name': 			{ type: String, default: null },
 27 | 		'id': 				{ type: String, default: 'chkbx1' },
 28 | 		'value': 			{ type: String, default: null },
 29 | 		'disabled': 	{ type: Boolean, default: false },
 30 | 		'checked': 		{ type: Boolean, default: false },
 31 | 		'autofocus': 	{ type: Boolean, default: false },
 32 | 		'inline': 		{ type: Boolean, default: false },
 33 | 		'color':			{ type: String, default: 'default' }
 34 | 	},
 35 | 	computed: {
 36 | 		isDisabled() {
 37 | 			return !!this.disabled
 38 | 		},
 39 | 		isChecked() {
 40 | 			return !!this.checked
 41 | 		},
 42 | 		isInline() {
 43 | 			return !!this.inline
 44 | 		},
 45 | 		hasColor() {
 46 | 			return this.color ? `custom-${this.color}` : null
 47 | 		}
 48 | 	}
 49 | }
 50 | </script>
 51 | 
 52 | <style scoped>
 53 | /* .custom-control-label:before{
 54 |   background-color: #eee;
 55 | } */
 56 | 
 57 | .custom-default.custom-checkbox .custom-control-input:checked 
 58 | ~ .custom-default.custom-control-label::before {
 59 |   background-color: #bfcad4;
 60 | }
 61 | .custom-default.custom-checkbox .custom-control-input:checked 
 62 | ~ .custom-default.custom-control-label::after {
 63 |   background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
 64 | }
 65 | 
 66 | .custom-primary.custom-checkbox .custom-control-input:checked 
 67 | ~ .custom-primary.custom-control-label::before {
 68 |   background-color: #007bff;
 69 | }
 70 | 
 71 | .custom-secondary.custom-checkbox .custom-control-input:checked 
 72 | ~ .custom-secondary.custom-control-label::before {
 73 |   background-color: #6c757d;
 74 | }
 75 | 
 76 | .custom-success.custom-checkbox .custom-control-input:checked 
 77 | ~ .custom-success.custom-control-label::before {
 78 |   background-color: #28a745;
 79 | }
 80 | 
 81 | .custom-danger.custom-checkbox .custom-control-input:checked 
 82 | ~ .custom-danger.custom-control-label::before {
 83 |   background-color: #dc3545;
 84 | }
 85 | 
 86 | .custom-warning.custom-checkbox .custom-control-input:checked 
 87 | ~ .custom-warning.custom-control-label::before {
 88 |   background-color: #ffc107;
 89 | }
 90 | 
 91 | .custom-info.custom-checkbox .custom-control-input:checked 
 92 | ~ .custom-info.custom-control-label::before {
 93 |   background-color: #17a2b8;
 94 | }
 95 | 
 96 | .custom-dark.custom-checkbox .custom-control-input:checked 
 97 | ~ .custom-dark.custom-control-label::before {
 98 |   background-color: #343a40;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/vui/components/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="container">
  3 | 		<div class="row">
  4 | 			<div class="col-md-10 offset-md-1">
  5 | 				<div 
  6 | 					class="card shadow rounded" 
  7 | 					:class="`vertical-${modalPosition}`"
  8 | 					:style="`
  9 | 						top:${topOffset}%; 
 10 | 						transform: translate(-50%, -${topOffset}%);
 11 | 						width: ${width}%
 12 | 					`"
 13 | 				>
 14 | 					<div class="card-header" :class="hasColor">
 15 | 						
 16 | 						<div class="row" v-if="!hasHeaderTemplate">
 17 | 							<div class="col-10">
 18 | 								<h5 class="modal-title">
 19 | 									<i :class="[`ficon-${icon}`, `mr-1`]"></i> {{ title }}
 20 | 								</h5>
 21 | 							</div>
 22 | 							<div class="col-2">
 23 | 								<button
 24 | 									type="button" 
 25 | 									class="close float-right"
 26 | 									@click="closeModal"
 27 | 								>
 28 | 									&times;
 29 | 								</button>	
 30 | 							</div>
 31 | 						</div>
 32 | 
 33 | 						<slot name="header" v-if="hasHeaderTemplate"></slot>
 34 | 
 35 | 					</div>
 36 | 					<div class="card-body card-text w-100">
 37 | 						<slot></slot>
 38 | 					</div>
 39 | 					<div class="card-footer text-muted text-right" v-if="hasFooter">
 40 | 						<template v-if="!hasFooterTemplate">
 41 | 							<vui-button @click="closeModal">Cancel</vui-button>
 42 | 							<vui-button color="primary" @click="$emit('ok')">Ok</vui-button>
 43 | 						</template>
 44 | 
 45 | 						<slot name="footer" v-if="hasFooterTemplate"></slot>
 46 | 					</div>
 47 | 				</div>
 48 | 				<div class="lightbox"></div>
 49 | 			</div>
 50 | 		</div>
 51 | 	</div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 | 	name: 'vui-modal',
 57 | 	props: {
 58 | 		'icon': { type: String, default: '' },
 59 | 		'title': { type: String, default: 'Modal' },
 60 | 		'color': { type: String, default: 'light' },
 61 | 		'position': { type: String, default: 'top' },
 62 | 		'topOffset': { type: String, default: '50' },
 63 | 		'width': { type: String, default: '50' },
 64 | 		'headerTemplate': { type: Boolean, default: false },
 65 | 		'footerTemplate': { type: Boolean, default: false },
 66 | 		'noFooter': { type: Boolean, default: false }
 67 | 	},
 68 | 	data() {
 69 | 		return {
 70 | 			close: false,
 71 | 			modalPosition: this.position
 72 | 		}
 73 | 	},
 74 | 	computed: {
 75 | 		hasColor() {
 76 | 			if (this.color === 'warning' || this.color === 'light') {
 77 | 				return `bg-${this.color} text-dark`
 78 | 			}
 79 | 			else if (this.color !== 'warning' || this.color !== 'light') {
 80 | 				return `bg-${this.color} text-white`
 81 | 			}
 82 | 			else if(!this.color) {
 83 | 				return null
 84 | 			}
 85 | 		},
 86 | 		hasHeaderTemplate() {
 87 | 			return !!this.headerTemplate
 88 | 		},
 89 | 		hasFooterTemplate() {
 90 | 			return !!this.footerTemplate
 91 | 		},
 92 | 		hasFooter() {
 93 | 			return this.noFooter ? false : true
 94 | 		}
 95 | 	},
 96 | 	methods: {
 97 | 		closeModal() {
 98 | 			return this.$emit('close')
 99 | 		}
100 | 	}
101 | }
102 | </script>
103 | 
104 | <style scoped>
105 | .vertical-center {
106 | 	position: fixed;
107 |   top: 50%;
108 |   left: 50%;
109 |   transform: translate(-50%, -50%);
110 | 	-webkit-animation-duration: 1s;
111 |   animation-duration: 1s;
112 | 	-webkit-animation-name: fadeIn;
113 |   animation-name: fadeIn;
114 | }
115 | 
116 | .vertical-top {
117 | 	position: fixed;
118 |   top: 5%;
119 |   left: 50%;
120 |   transform: translate(-50%, -5%);
121 | 	-webkit-animation-duration: 1s;
122 |   animation-duration: 1s;
123 | 	-webkit-animation-name: fadeIn;
124 |   animation-name: fadeIn;
125 | }
126 | 
127 | @-webkit-keyframes fadeIn {
128 | 	0% {opacity: 0;}
129 | 	100% {opacity: 1;}
130 | }
131 | 
132 | @keyframes fadeIn {
133 | 	0% {opacity: 0;}
134 | 	100% {opacity: 1;}
135 | }
136 | 
137 | .card {
138 | 	z-index: 1022 !important;
139 | }
140 | 
141 | .lightbox {
142 | 	position: fixed;
143 | 	top: 0;
144 | 	left: 0;
145 | 	right: 0;
146 | 	bottom: 0;
147 | 	background-color: rgba(0,0,0,.5);
148 | 	z-index: 1021 !important;
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/vui/vui.css:
--------------------------------------------------------------------------------
  1 | /** TOOLTIP STYLES: Default ***************************************/
  2 | [tooltip] {
  3 | 	position: relative;
  4 | 	display: inline-block;
  5 | }
  6 | [tooltip]::before {
  7 | 	content: "";
  8 | 	position: absolute;
  9 | 	top: -6px;
 10 | 	left: 50%;
 11 | 	transform: translateX(-50%);
 12 | 	border-width: 4px 6px 0 6px;
 13 | 	border-style: solid;
 14 | 	border-color: rgba(0,0,0,0.7) transparent transparent transparent;
 15 | 	z-index: 99;
 16 | 	opacity: 0;
 17 | }
 18 | 
 19 | [tooltip-position='left']::before {
 20 |   left: 0%;
 21 |   top: 50%;
 22 |   margin-left: -12px;
 23 |   transform: translatey(-50%) rotate(-90deg) 
 24 | }
 25 | [tooltip-position='top']::before {
 26 |   left: 50%;
 27 | }
 28 | [tooltip-position='bottom']::before {
 29 |   top: 100%;
 30 |   margin-top: 8px;
 31 |   transform: translateX(-50%) translatey(-100%) rotate(-180deg)
 32 | }
 33 | [tooltip-position='right']::before {
 34 |   left: 100%;
 35 |   top: 50%;
 36 |   margin-left: 1px;
 37 |   transform: translatey(-50%) rotate(90deg)
 38 | }
 39 | 
 40 | [tooltip]::after {
 41 | 	content: attr(tooltip);
 42 | 	position: absolute;
 43 | 	left: 50%;
 44 | 	top: -6px;
 45 | 	transform: translateX(-50%) translateY(-100%);
 46 | 	background: rgba(0,0,0,1);
 47 | 	text-align: center;
 48 | 	color: #fff;
 49 | 	padding: 6px 10px;
 50 | 	font-size: 14px;
 51 | 	min-width: 100px;
 52 | 	max-width: 300px;
 53 | 	border-radius: 5px;
 54 | 	pointer-events: none;
 55 | 	z-index: 99;
 56 | 	opacity: 0;
 57 | 	white-space: nowrap;
 58 | }
 59 | 
 60 | [tooltip-position='left']::after {
 61 |   left: 0%;
 62 |   top: 50%;
 63 |   margin-left: -8px;
 64 |   transform: translateX(-100%) translateY(-50%);
 65 | }
 66 | [tooltip-position='top']::after {
 67 |   left: 50%;
 68 | }
 69 | [tooltip-position='bottom']::after {
 70 |   top: 100%;
 71 |   margin-top: 8px;
 72 |   transform: translateX(-50%) translateY(0%);
 73 | }
 74 | [tooltip-position='right']::after {
 75 |   left: 100%;
 76 |   top: 50%;
 77 |   margin-left: 8px;
 78 |   transform: translateX(0%) translateY(-50%);
 79 | }
 80 | 
 81 | [tooltip]:hover::after,
 82 | [tooltip]:hover::before {
 83 |    opacity: 1
 84 | }
 85 | 
 86 | [tooltip].show::after,
 87 | [tooltip].show::before {
 88 | 	opacity: 1
 89 | }
 90 | 
 91 | /** TOOLTIP STYLES: Primary ***************************************/
 92 | [tooltip-color='primary']::before {
 93 | 	border-color: #007bff transparent transparent transparent;
 94 | }
 95 | [tooltip-color='primary']::after {
 96 | 	background: #007bff;
 97 | }
 98 | 
 99 | /** TOOLTIP STYLES: Secondary ***************************************/
100 | [tooltip-color='secondary']::before {
101 | 	border-color: #6c757d transparent transparent transparent;
102 | }
103 | [tooltip-color='secondary']::after {
104 | 	background: #6c757d;
105 | }
106 | 
107 | /** TOOLTIP STYLES: Success ***************************************/
108 | [tooltip-color='success']::before {
109 | 	border-color: #28a745 transparent transparent transparent;
110 | }
111 | [tooltip-color='success']::after {
112 | 	background: #28a745;
113 | }
114 | 
115 | /** TOOLTIP STYLES: Danger ***************************************/
116 | [tooltip-color='danger']::before {
117 | 	border-color: #dc3545 transparent transparent transparent;
118 | }
119 | [tooltip-color='danger']::after {
120 | 	background: #dc3545;
121 | }
122 | 
123 | /** TOOLTIP STYLES: Warning ***************************************/
124 | [tooltip-color='warning']::before {
125 | 	border-color: #ffc107 transparent transparent transparent;
126 | }
127 | [tooltip-color='warning']::after {
128 | 	background: #ffc107;
129 | 	color: #343a40;
130 | }
131 | 
132 | /** TOOLTIP STYLES: Info ***************************************/
133 | [tooltip-color='info']::before {
134 | 	border-color: #17a2b8 transparent transparent transparent;
135 | }
136 | [tooltip-color='info']::after {
137 | 	background: #17a2b8;
138 | }
139 | 
140 | /** TOOLTIP STYLES: Dark ***************************************/
141 | [tooltip-color='dark']::before {
142 | 	border-color: #343a40 transparent transparent transparent;
143 | }
144 | [tooltip-color='dark']::after {
145 | 	background: #343a40;
146 | }
147 | 
148 | 
149 | 


--------------------------------------------------------------------------------
/vui/components/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!-- Less than 10 pages -->
  3 | 	<ul v-if="totalPages > 1 && totalPages <= 10" :class="`pagination pagination-${size} justify-content-${alignment}`">
  4 | 		<!-- Prev -->
  5 | 		<li v-if="withNextPrev" class="page-item" :class="disablePrev">
  6 | 				<a class="page-link" @click="!disablePrev ? btnPrev() : ''">
  7 | 					<span v-html="prevText"></span>
  8 | 				</a>
  9 | 		</li>
 10 | 
 11 | 		<!-- Pagers -->
 12 | 		<li 
 13 | 		  v-for="(n, index) in totalPages" 
 14 | 			:key="index" class="page-item" 
 15 | 			:class="n == selected ? 'active ' + color  : ''"
 16 | 		>
 17 | 				<a class="page-link" @click="emitBtnClick(n)">{{ n }}</a>
 18 | 		</li>
 19 | 
 20 | 		<!-- Next -->
 21 | 		<li v-if="withNextPrev" class="page-item" :class="disableNext">
 22 | 				<a class="page-link" @click="!disableNext ? btnNext() : ''">
 23 | 					<span v-html="nextText"></span>
 24 | 				</a>
 25 | 		</li>
 26 | 	</ul>
 27 | 
 28 | 	<!-- More than 10 pages -->
 29 | 	<ul v-else-if="totalPages >= 11" :class="`pagination pagination-${size} justify-content-${alignment}`">
 30 | 		<!-- Prev -->
 31 | 		<li v-if="withNextPrev" class="page-item" :class="disablePrev">
 32 | 				<a class="page-link" @click="!disablePrev ? btnPrev() : ''">
 33 | 					<span v-html="prevText"></span>
 34 | 				</a>
 35 | 		</li>
 36 | 
 37 | 		<!-- Pagers -->
 38 | 		<li 
 39 | 			v-for="(n, index) in pages"
 40 | 			:key="index"
 41 | 			class="page-item" 
 42 | 			v-if="n.show" 
 43 | 			:class="n.content == selected ? 'active ' + color : '' + n.disable"
 44 | 		>
 45 | 			<a class="page-link" v-if="n.disable != 'disabled'" @click="emitBtnClick(n.content)">
 46 | 				{{ n.content }}
 47 | 			</a>
 48 | 			<a class="page-link" v-else>{{ n.content }}</a>
 49 | 		</li>
 50 | 
 51 | 		<!-- Next -->
 52 | 		<li v-if="withNextPrev" class="page-item" :class="disableNext">
 53 | 			<a class="page-link" @click="!disableNext ? btnNext() : ''">
 54 | 				<span v-html="nextText"></span>
 55 | 			</a>
 56 | 		</li>
 57 | 	</ul> 
 58 | </template>
 59 | 
 60 | <script>
 61 | export default {
 62 | 	name: 'vui-pagination',
 63 | 	props: {
 64 | 		totalPages: { type : Number, required: true },
 65 | 		currentPage: { type : Number, default: 1 },
 66 | 		withNextPrev: { type : Boolean, default : true },
 67 | 		lastText: { type : String, default : '&raquo;' },
 68 | 		nextText: { type : String, default : 'Next' },
 69 | 		prevText: { type : String, default : 'Prev' },
 70 | 		color: { type : String, default: 'primary' },
 71 | 		align: { type: String, default: '' },
 72 | 		size: { type: String, default: 'md' },
 73 | 	},
 74 | 	data() {
 75 | 		const pageRange = this.perPage
 76 | 		return {
 77 | 			selected: this.currentPage,
 78 | 			pageRange: 3,
 79 | 			disableNext : '',
 80 | 			disablePrev : '',
 81 | 			lastBtnClicked: false
 82 | 		}
 83 | 	},
 84 | 	mounted() {
 85 | 		this.disablePrevNext()
 86 | 		this.$emit('pageChange', {
 87 | 			'page': this.currentPage,
 88 | 			'pages': this.totalPages
 89 | 		})
 90 | 	},
 91 | 	computed: {
 92 | 		alignment() {
 93 | 			if (this.align === 'left') {
 94 | 				return 'start'
 95 | 			}
 96 | 			else if (!this.align || this.align === '') {
 97 | 				return 'center'
 98 | 			}
 99 | 			else if (this.align === 'right') {
100 | 				return 'end'
101 | 			}
102 | 		},
103 | 		pages() {
104 | 			let items = [];
105 | 
106 | 			for (let i = 0; i < this.totalPages; i++) {
107 | 				let page = { content: i + 1, disable: '', show: false }
108 | 				items[i] = page
109 | 			}
110 | 
111 | 			let page1 = { content: "...", disable : 'disabled', show : false }
112 | 			let page2 = { content: "...", disable : 'disabled', show : false }
113 | 
114 | 			items.splice(1, 0, page1)
115 | 			items.splice(items.length - 1, 0, page2)
116 | 
117 | 			for (let i = 0; i < items.length; i++) {
118 | 				if (i == 0 || i == items.length-1) {
119 | 					items[i].show = true
120 | 				}
121 | 					
122 | 				if (this.selected <= this.pageRange) {
123 | 					if (this.selected == this.pageRange) {
124 | 						if (i >= 2 && i <= this.pageRange + 1) {
125 | 							items[i].show = true
126 | 						}				
127 | 					}
128 | 					else {
129 | 						if (i >= 2 && i <= this.pageRange) {
130 | 							items[i].show = true
131 | 						}		
132 | 					}
133 | 					items[items.length - 2].show = true
134 | 				}
135 | 				else if (this.selected > this.pageRange) {
136 | 					if (i >= this.selected - 1 && (this.selected + 2) < items.length - 2 && i <= this.selected + 1) {
137 | 						items[1].show = true
138 | 						items[items.length - 2].show = true
139 | 						items[i].show = true
140 | 					}
141 | 					else if (i >= items.length - 2 - this.pageRange && (this.selected + 2) >= items.length - 2) {
142 | 						items[1].show = true
143 | 						items[items.length - 2].show = false
144 | 						items[i].show = true
145 | 					}
146 | 				}
147 | 			}
148 | 			return items
149 | 		},
150 | 	},
151 | 	methods: {
152 | 		emitBtnClick(n) {
153 | 			this.selected = n
154 | 			this.$emit('pageChange', {
155 | 				'page': n,
156 | 				'pages': this.totalPages
157 | 			})
158 | 			this.disablePrevNext()
159 | 		},
160 | 		btnNext() {
161 | 			this.selected++
162 | 			this.$emit('pageChange', {
163 | 				'page': this.selected,
164 | 				'pages': this.totalPages
165 | 			})
166 | 			this.disablePrevNext()
167 | 		},
168 | 		btnPrev() {
169 | 			this.selected--
170 | 			this.$emit('pageChange', {
171 | 				'page': this.selected,
172 | 				'pages': this.totalPages
173 | 			})
174 | 			this.disablePrevNext()
175 | 		},
176 | 		disablePrevNext() {
177 | 			this.disablePrev = this.selected == 1 ? 'disabled' : ''
178 | 			this.disableNext = this.selected == this.totalPages ? 'disabled' : ''
179 | 		}
180 | 	}
181 | }
182 | </script>
183 | 
184 | <style lang="css" scoped>
185 | .pagination .active a {
186 | 	z-index: 0;
187 | }
188 | a:hover {
189 | 	cursor: pointer;
190 | }
191 | .active.primary a {
192 | 	background: #007BFF;
193 | 	border-color: #007BFF;
194 | }
195 | .active.secondary a {
196 | 	background: #6c757d;
197 | 	border-color: #6c757d;
198 | }
199 | .active.success a {
200 | 	background: #28A745;
201 | 	border-color: #28A745;
202 | }
203 | .active.danger a {
204 | 	background: #DC3545;
205 | 	border-color: #DC3545;
206 | }
207 | .active.warning a {
208 | 	background: #FFC107;
209 | 	border-color: #FFC107;
210 | }
211 | .active.info a {
212 | 	background: #17A2B8;
213 | 	border-color: #17A2B8;
214 | }
215 | .active.dark a {
216 | 	background: #343A40;
217 | 	border-color: #343A40;
218 | }
219 | </style>


--------------------------------------------------------------------------------
/vui/vui.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | 
  3 | /*** IMPORT GLOBAL STYLES **************************/
  4 | import './vui.css'
  5 | 
  6 | /*** IMPORT GLOBAL FILTERS **************************/
  7 | import './vui_filters.js'
  8 | 
  9 | /*** IMPORT GLOBAL DIRECTIVES **************************/
 10 | import './directives/BorderDirective.js'
 11 | import './directives/DragDirective.js'
 12 | import './directives/ColorsDirective.js'
 13 | import './directives/FloatDirective.js'
 14 | import './directives/ShadowDirective.js'
 15 | import './directives/FontDirective.js'
 16 | import './directives/AlignDirective.js'
 17 | 
 18 | /*** IMPORT GLOBAL COMPONENTS **************************/
 19 | import Accordion from "@/vui/components/Accordion"
 20 | import AccordionPanel from "@/vui/components/AccordionPanel"
 21 | import Alert from "@/vui/components/Alert"
 22 | import AlertLink from "@/vui/components/AlertLink"
 23 | import Badge from "@/vui/components/Badge"
 24 | import Breadcrumb from "@/vui/components/Breadcrumb"
 25 | import BreadcrumbItem from "@/vui/components/BreadcrumbItem"
 26 | import Button from "@/vui/components/Button"
 27 | import ButtonGroup from "@/vui/components/ButtonGroup"
 28 | import Callout from "@/vui/components/Callout"
 29 | import Card from "@/vui/components/Card"
 30 | import CardHeader from "@/vui/components/CardHeader"
 31 | import CardBody from "@/vui/components/CardBody"
 32 | import CardTitle from "@/vui/components/CardTitle"
 33 | import CardSubtitle from "@/vui/components/CardSubtitle"
 34 | import CardText from "@/vui/components/CardText"
 35 | import CardLink from "@/vui/components/CardLink"
 36 | import CardImage from "@/vui/components/CardImage"
 37 | import CardFooter from "@/vui/components/CardFooter"
 38 | import Checkbox from "@/vui/components/Checkbox"
 39 | import Container from "@/vui/components/Container"
 40 | import DataTable from "@/vui/components/DataTable"
 41 | import Dtable from "@/vui/components/Dtable"
 42 | import Dthead from "@/vui/components/Dthead"
 43 | import DataTableBody from "@/vui/components/DataTableBody"
 44 | import DataTableRow from "@/vui/components/DataTableRow"
 45 | import DtheadCol from "@/vui/components/DtheadCol"
 46 | import DataTableCaption from "@/vui/components/DataTableCaption"
 47 | import Datepicker from "@/vui/components/Datepicker"
 48 | import DropdownItem from "@/vui/components/DropdownItem"
 49 | import DropdownItemText from "@/vui/components/DropdownItemText"
 50 | import DropdownItemHeader from "@/vui/components/DropdownItemHeader"
 51 | import DropdownDivider from "@/vui/components/DropdownDivider"
 52 | import DropdownButton from "@/vui/components/DropdownButton"
 53 | import DropdownButtonSplit from "@/vui/components/DropdownButtonSplit"
 54 | import DropdownLink from "@/vui/components/DropdownLink"
 55 | import DropdownSelect from "@/vui/components/DropdownSelect"
 56 | import DropdownSelectOption from "@/vui/components/DropdownSelectOption"
 57 | 
 58 | import Fieldset from "@/vui/components/Fieldset"
 59 | import Form from "@/vui/components/Form"
 60 | import FormLabel from "@/vui/components/FormLabel"
 61 | import FormHelpText from "@/vui/components/FormHelpText"
 62 | import FormRow from "@/vui/components/FormRow"
 63 | import FormCol from "@/vui/components/FormCol"
 64 | import FormGroup from "@/vui/components/FormGroup"
 65 | import FormGroupRow from "@/vui/components/FormGroupRow"
 66 | import Icon from "@/vui/components/Icon"
 67 | import IconStack from "@/vui/components/IconStack"
 68 | import ImgPlaceholder from "@/vui/components/ImgPlaceholder"
 69 | import InputGroup from "@/vui/components/InputGroup"
 70 | import InputGroupPrepend from "@/vui/components/InputGroupPrepend"
 71 | import InputGroupAppend from "@/vui/components/InputGroupAppend"
 72 | import Input from "@/vui/components/Input"
 73 | import InputFile from "@/vui/components/InputFile"
 74 | import InputFileButton from "@/vui/components/InputFileButton"
 75 | import Jumbotron from "@/vui/components/Jumbotron"
 76 | import Legend from "@/vui/components/Legend"
 77 | import ListGroup from "@/vui/components/ListGroup"
 78 | import ListGroupItem from "@/vui/components/ListGroupItem"
 79 | import Modal from "@/vui/components/Modal"
 80 | import Nav from "@/vui/components/Nav"
 81 | import Navbar from "@/vui/components/Navbar"
 82 | import NavbarBrand from "@/vui/components/NavbarBrand"
 83 | import NavbarToggler from "@/vui/components/NavbarToggler"
 84 | import NavbarCollapse from "@/vui/components/NavbarCollapse"
 85 | import NavbarNav from "@/vui/components/NavbarNav"
 86 | import NavItem from "@/vui/components/NavItem"
 87 | import NavbarItem from "@/vui/components/NavbarItem"
 88 | import NavbarItemDropdown from "@/vui/components/NavbarItemDropdown"
 89 | import NavbarText from "@/vui/components/NavbarText"
 90 | import Option from "@/vui/components/Option"
 91 | import Pagination from '@/vui/components/Pagination'
 92 | import Progress from '@/vui/components/Progress'
 93 | import ProgressBar from '@/vui/components/ProgressBar'
 94 | import Radio from "@/vui/components/Radio"
 95 | import Row from "@/vui/components/Row"
 96 | import Select from "@/vui/components/Select"
 97 | import Textarea from "@/vui/components/Textarea"
 98 | 
 99 | /*** IMPORT GLOBAL WIDGETS ****************************/
100 | import CodePanel from "@/vui/widgets/CodePanel"
101 | //import LoginPanel from "@/vui/widgets/LoginPanel"
102 | //import TabsPanel from "@/vui/widgets/TabsPanel"
103 | 
104 | 
105 | /*** REGISTER GLOBAL COMPONENTS ************************/
106 | Vue.component('vuiAccordion', Accordion)
107 | Vue.component('vuiAccordionPanel', AccordionPanel)
108 | Vue.component('vuiAlert', Alert)
109 | Vue.component('vuiAlertLink', AlertLink)
110 | Vue.component('vuiBadge', Badge)
111 | Vue.component('vuiBreadcrumb', Breadcrumb)
112 | Vue.component('vuiBreadcrumbItem', BreadcrumbItem)
113 | Vue.component('vuiButton', Button)
114 | Vue.component('vuiButtonGroup', ButtonGroup)
115 | 
116 | Vue.component('vuiCallout', Callout)
117 | Vue.component('vuiCard', Card)
118 | Vue.component('vuiCardHeader', CardHeader)
119 | Vue.component('vuiCardBody', CardBody)
120 | Vue.component('vuiCardTitle', CardTitle)
121 | Vue.component('vuiCardSubtitle', CardSubtitle)
122 | Vue.component('vuiCardText', CardText)
123 | Vue.component('vuiCardLink', CardLink)
124 | Vue.component('vuiCardImage', CardImage)
125 | Vue.component('vuiCardFooter', CardFooter)
126 | Vue.component('vuiCheckbox', Checkbox)
127 | Vue.component('vuiContainer', Container)
128 | 
129 | Vue.component('vuiDataTable', DataTable)
130 | Vue.component('vuiDtable', Dtable)
131 | Vue.component('vuiDthead', Dthead)
132 | Vue.component('vuiDataTableBody', DataTableBody)
133 | Vue.component('vuiDataTableRow', DataTableRow)
134 | Vue.component('vuiDtheadCol', DtheadCol)
135 | Vue.component('vuiDataTableCaption', DataTableCaption)
136 | 
137 | Vue.component('vuiDatepicker', Datepicker)
138 | Vue.component('vuiDropdownButton', DropdownButton)
139 | Vue.component('vuiDropdownButtonSplit', DropdownButtonSplit)
140 | Vue.component('vuiDropdownItem', DropdownItem)
141 | Vue.component('vuiDropdownItemHeader', DropdownItemHeader)
142 | Vue.component('vuiDropdownItemText', DropdownItemText)
143 | Vue.component('vuiDropdownDivider', DropdownDivider)
144 | Vue.component('vuiDropdownLink', DropdownLink)
145 | Vue.component('vuiDropdownSelect', DropdownSelect)
146 | Vue.component('vuiDropdownSelectOption', DropdownSelectOption)
147 | 
148 | Vue.component('vuiFieldset', Fieldset)
149 | Vue.component('vuiForm', Form)
150 | Vue.component('vuiFormLabel', FormLabel)
151 | Vue.component('vuiFormHelpText', FormHelpText)
152 | Vue.component('vuiFormRow', FormRow)
153 | Vue.component('vuiFormCol', FormCol)
154 | Vue.component('vuiFormGroup', FormGroup)
155 | Vue.component('vuiFormGroupRow', FormGroupRow)
156 | Vue.component('vuiIcon', Icon)
157 | Vue.component('vuiIconStack', IconStack)
158 | Vue.component('vuiImgPlaceholder', ImgPlaceholder)
159 | Vue.component('vuiInputGroup', InputGroup)
160 | Vue.component('vuiInputGroupPrepend', InputGroupPrepend)
161 | Vue.component('vuiInputGroupAppend', InputGroupAppend)
162 | Vue.component('vuiInput', Input)
163 | Vue.component('vuiInputFile', InputFile)
164 | Vue.component('vuiInputFileButton', InputFileButton)
165 | Vue.component('vuiJumbotron', Jumbotron)
166 | Vue.component('vuiLegend', Legend)
167 | Vue.component('vuiListGroup', ListGroup)
168 | Vue.component('vuiListGroupItem', ListGroupItem)
169 | Vue.component('vuiModal', Modal)
170 | Vue.component('vuiNav', Nav)
171 | Vue.component('vuiNavbar', Navbar)
172 | Vue.component('vuiNavbarBrand', NavbarBrand)
173 | Vue.component('vuiNavbarToggler', NavbarToggler)
174 | Vue.component('vuiNavbarCollapse', NavbarCollapse)
175 | Vue.component('vuiNavbarNav', NavbarNav)
176 | Vue.component('vuiNavItem', NavItem)
177 | Vue.component('vuiNavbarItem', NavbarItem)
178 | Vue.component('vuiNavbarItemDropdown', NavbarItemDropdown)
179 | Vue.component('vuiNavbarText', NavbarText)
180 | 
181 | Vue.component('vuiOption', Option)
182 | Vue.component('vuiPagination', Pagination)
183 | Vue.component('vuiProgress', Progress)
184 | Vue.component('vuiProgressBar', ProgressBar)
185 | Vue.component('vuiRadio', Radio)
186 | Vue.component('vuiRow', Row)
187 | Vue.component('vuiSelect', Select)
188 | Vue.component('vuiTextarea', Textarea)
189 | 
190 | /*** REGISTER GLOBAL WIDGETS ****************************/
191 | Vue.component('vuiCodePanel', CodePanel)
192 | //Vue.component('vuiLoginPanel', LoginPanel)
193 | //Vue.component('vuiTabsPanel', TabsPanel)


--------------------------------------------------------------------------------
/vui/components/Dtable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div style="margin-bottom:-80px;">
  3 | 		<!-- DataTable ToolBar -->
  4 | 		<div class="d-flex flex-row-reverse mb-3" v-if="showToolBar">
  5 | 			<!-- DT-HIDE-SHOW-COLUMNS -->
  6 | 			<vui-dropdown-link icon="icon-th-list" text="Columns" outline v-show="hasColShowHide">
  7 | 				<vui-dropdown-item v-for="(header, index) in headerCols" :key="index">
  8 | 					<label>
  9 | 						<input type="checkbox" v-model="header.selected" :value="header.selected">
 10 | 							{{ header.label }}
 11 | 					</label>
 12 | 				</vui-dropdown-item>
 13 | 			</vui-dropdown-link>
 14 | 			
 15 | 			<!-- FILTERING -->
 16 | 			<vui-input-group :class="{ 'mr-3': hasColShowHide }" v-show="hasFilter">
 17 | 				<vui-input-group-prepend>
 18 | 					<vui-dropdown-select placeholder="Filter by" v-model="searchBy">
 19 | 						<vui-dropdown-select-option 
 20 | 							v-for="(header, index) in headers" 
 21 | 							:key="index"
 22 | 							v-show="header.selected"
 23 | 						>
 24 | 							{{ header.label }}
 25 | 						</vui-dropdown-select-option>
 26 | 					</vui-dropdown-select>
 27 | 				</vui-input-group-prepend>
 28 | 				<vui-input 
 29 | 					type="text" 
 30 | 					class="form-control form-control-sm" 
 31 | 					v-model="searchQuery"
 32 | 					placeholder="Type to Search..."
 33 | 				/>
 34 | 			</vui-input-group>
 35 | 			
 36 | 		</div>
 37 | 
 38 | 		<!-- DataTable -->
 39 | 		<table
 40 | 			:id="`table-${id}`" 
 41 | 			class="table mt-0 pt-0"
 42 | 			:class="[hasTableColor, {
 43 | 				'shadow': hasShadow,
 44 | 				'text-dark': hasTableColor === 'table-warning',  
 45 | 				'table-striped': isStriped,
 46 | 				'table-bordered': isBordered,
 47 | 				'border-top': !isBordered,
 48 | 				'border-sides': !isBordered,
 49 | 				'table-borderless': isBorderless,
 50 | 				'table-hover': isHoverable,
 51 | 				'table-sm': isSmall,
 52 | 				'scroll': isScrollable
 53 | 			}]"
 54 | 		>
 55 | 			<!-- DT HEADERS -->
 56 | 			<thead :class="hasHeaderColor">
 57 | 				<tr>
 58 | 					<th 
 59 | 						v-for="(header, key) in headers" 
 60 | 						:key="key"
 61 | 						@click="header.sortable === true ? sortBy(header.value, key, id) : null"
 62 | 						:class="{ 'pointer': header.sortable === true }"
 63 | 						v-show="header.selected"
 64 | 					>
 65 | 						{{ header.label }}
 66 | 						<i
 67 | 							:id="`sortIcon${key}_${id}`" 
 68 | 							class="ml-1 fa"
 69 | 							:class="{ 
 70 | 								'icon-sort': orderBy !== header.value,
 71 | 								'icon-caret-up': orderBy == header.value && direction == 'asc', 
 72 | 								'icon-caret-down': orderBy == header.value && direction == 'desc'
 73 | 							}"
 74 | 							v-show="header.sortable === true"
 75 | 						></i>
 76 | 					</th>
 77 | 					<th class="spacer" v-if="isScrollable"></th>
 78 | 				</tr>
 79 | 			</thead>
 80 | 
 81 | 			<!-- DT ROWS -->
 82 | 			<tbody :style="isScrollable ? `height: ${49 * pageSize}px` : null" :class="{ 'editable': isEditable }">
 83 | 				<tr 
 84 | 					v-show="hasTemplateRow === false"
 85 | 					v-for="(row, index) in sortedRows"
 86 | 					:key="index"
 87 | 					:class="{ 'pointer': isEditable }"
 88 | 					@click="getRowData(row)"
 89 | 				>
 90 | 					<td 
 91 | 						v-for="(key, idx) in Object.keys(row)" 
 92 | 						:key="idx"
 93 | 						v-show="showColumns(key)"
 94 | 					>
 95 | 						{{ row[key] }}
 96 | 					</td>
 97 | 				</tr>
 98 | 
 99 | 				<!-- ROW TEMPLATE SLOT -->
100 | 				<slot
101 | 					name="rowTemplate" 
102 | 					v-show="hasTemplateRow === true"
103 | 					v-for="row in sortedRows" 
104 | 					:row="row" 
105 | 					:showColumns="showColumns"
106 | 					:getRowData="getRowData"
107 | 				></slot>
108 | 			</tbody>
109 | 		</table>
110 | 
111 | 		<!-- PAGINATION -->
112 | 		<nav class="mt-3" v-if="hasPagination">
113 | 			<span>Showing {{ pageSize }} of {{ totalRows }} records</span>
114 | 
115 | 			<ul class="pagination" style="float: right">
116 | 				<li class="page-item" :class="{ 'disabled': currentPage === 1 }">
117 | 					<a class="page-link" @click="prevPage">
118 | 						<span>&laquo;</span>
119 | 					</a>
120 | 				</li>
121 | 				
122 | 				<li 
123 | 					v-for="(page, index) in (totalRows / pageSize)" 
124 | 					:key="index"
125 | 					class="page-item"
126 | 					:class="{ 'active': currentPage === index + 1 }" 
127 | 					@click="thisPage(index + 1)"
128 | 				>
129 | 					<a class="page-link">{{ index + 1 }}</a>
130 | 				</li>
131 | 				
132 | 				<li 
133 | 					class="page-item" 
134 | 					:class="{ 'disabled': currentPage === (totalRows / pageSize) }"
135 | 				>
136 | 					<a class="page-link" @click="nextPage">
137 | 						<span>&raquo;</span>
138 | 					</a>
139 | 				</li>
140 | 			</ul>
141 | 		</nav>
142 | 
143 | 		<br><br><br><br>
144 | 
145 | 		<!-- ROW EDIT FORM -->
146 | 		<div class="lightbox" v-if="showEditForm">
147 | 			<vui-card 
148 | 				class="edit-form shadow" 
149 | 				style="width:18rem"  
150 | 			>
151 | 				<div class="header" :class="`bg-${formHasColor}`">
152 | 					<span :class="{
153 | 						'text-dark': formHasColor === 'warning' || formHasColor === 'light', 
154 | 						'text-white': formHasColor !== 'warning'
155 | 						}"
156 | 					>
157 | 						<strong>Edit Form</strong>
158 | 					</span>
159 | 					<i 
160 | 						class="fa icon-remove"
161 | 						:class="{
162 | 							'text-dark': formHasColor === 'warning' || formHasColor === 'light', 
163 | 							'text-white': formHasColor !== 'warning'
164 | 						}" 
165 | 						style="float:right; font-size:1.3em; cursor:pointer;"
166 | 						@click="showEditForm = false"
167 | 					></i>
168 | 				</div>
169 | 				<vui-card-body>
170 | 
171 | 					<vui-form-group 
172 | 						v-for="(value, key, index) in selectedRow" 
173 | 						:key="index"
174 | 						v-if="!hasTemplateForm"
175 | 					>
176 | 						<vui-form-label>{{ key | capFirst }}</vui-form-label>
177 | 						<vui-input :value="String(value)" />
178 | 					</vui-form-group>
179 | 					<vui-button 
180 | 						:color="formHasColor" 
181 | 						style="width:100%;" 
182 | 						@click="updateRow"
183 | 						v-if="!hasTemplateForm"
184 | 					>
185 | 						Update
186 | 					</vui-button>
187 | 
188 | 					<slot 
189 | 						name="formTemplate" 
190 | 						:selectedRow="selectedRow"
191 | 						v-if="hasTemplateForm"
192 | 					></slot>
193 | 
194 | 				</vui-card-body>
195 | 			</vui-card>
196 | 		</div>
197 | 	</div>
198 | </template>
199 | 
200 | <script>
201 | export default {
202 | 	name: 'vui-dtable',
203 | 	props: {
204 | 		'id': { type: String },
205 | 		'rows': { type: Array },
206 | 		'headers': { type: Array },
207 | 
208 | 		'color': { type: String, default: null },
209 | 		'headerColor': { type: String, default: null },
210 | 		'striped': { type: Boolean, default: false },
211 | 		'border': { type: Boolean, default: false },
212 | 		'borderless': { type: Boolean, default: false },
213 | 		'hover': { type: Boolean, default: false },
214 | 		'small': { type: Boolean, default: false },
215 | 		'shadow': { type: Boolean, default: false },
216 | 
217 | 		'scroll': { type: Boolean, default: false },
218 | 		'pageSize': { type: String, default: '10' },
219 | 		'pagination': { type: Boolean, default: false },
220 | 		'toolbar': { type: Boolean, default: false },
221 | 		'filter': { type: Boolean, default: false },
222 | 		'colShowHide': { type: Boolean, default: false },
223 | 		'rowTemplate': { type: Boolean, default: false },
224 | 		'editable': { type: Boolean, default: false },
225 | 		'formTemplate': { type: Boolean, default: false }
226 | 	},
227 | 	data() {
228 | 		let dataRows = this.rows.map(row => { return row })
229 | 		let headerCols = this.headers.map(col => { return col })
230 | 		let orderBy = this.headers[0].value
231 | 		return {
232 | 			dataRows: dataRows,
233 | 			headerCols: headerCols,
234 | 			orderBy: orderBy,
235 | 			direction: 'asc',
236 |   		currentPage: 1,
237 | 			totalRows: '',
238 | 			searchBy: '',
239 | 			searchQuery: '',
240 | 			selectedRow: [],
241 | 			showEditForm: false
242 | 		}
243 | 	},
244 | 	filters: {
245 | 		capFirst: function (value) {
246 | 			if (!value) return ''
247 | 			value = value.toString()
248 | 			return value.charAt(0).toUpperCase() + value.slice(1)
249 | 		}
250 | 	},
251 | 	created() {
252 | 		this.totalRows = this.rows.length
253 | 	},
254 | 	computed: {
255 | 		hasTableColor() {
256 | 			return this.color ? `table-${this.color}` : 'table-light'
257 | 		},
258 | 		hasHeaderColor() {
259 | 			return this.headerColor ? `thead-${this.headerColor}` : null
260 | 		},
261 | 		formHasColor() {
262 | 			if (this.color) {
263 | 				return this.color
264 | 			}
265 | 			else if (this.headerColor) {
266 | 				return this.headerColor
267 | 			}
268 | 			else {
269 | 				return 'secondary'
270 | 			}
271 | 		},
272 | 		isStriped() {
273 | 			return !!this.striped
274 | 		},
275 | 		isBordered() {
276 | 			return !!this.border
277 | 		},
278 | 		isBorderless() {
279 | 			return !!this.borderless
280 | 		},
281 | 		isHoverable() {
282 | 			return !!this.hover
283 | 		},
284 | 		isSmall() {
285 | 			return !!this.small
286 | 		},
287 | 		hasShadow() {
288 | 			return !!this.shadow
289 | 		},
290 | 
291 | 		isScrollable() {
292 | 			return !!this.scroll
293 | 		},
294 | 		hasPagination() {
295 | 			return !!this.pagination
296 | 		},
297 | 		showToolBar() {
298 | 			return this.filter || this.colShowHide ? true : false
299 | 		},
300 | 		hasFilter() {
301 | 			return !!this.filter
302 | 		},
303 | 		hasColShowHide() {
304 | 			return !!this.colShowHide
305 | 		},
306 | 		hasTemplateRow() {
307 | 			return !!this.rowTemplate
308 | 		},
309 | 		isEditable() {
310 | 			return !!this.editable
311 | 		},
312 | 		hasTemplateForm() {
313 | 			return !!this.formTemplate
314 | 		},
315 | 
316 | 		sortedRows() {
317 | 			/**
318 | 			* Special thanks to Raymond Camden for his contribution
319 | 			* of the code used for column sorting and pagination.
320 | 			* https://www.raymondcamden.com/
321 | 			*/
322 | 			return this.dataRows.sort((a, b) => {
323 | 				let modifier = 1
324 | 				if (this.direction == 'desc') modifier = -1
325 | 
326 | 				if (typeof this.orderBy === 'string') {
327 | 					if (a[this.orderBy] < b[this.orderBy]) return -1 * modifier
328 | 					if (a[this.orderBy] > b[this.orderBy]) return 1 * modifier
329 | 				}
330 | 				else if (typeof this.orderBy === 'number') {
331 | 					if (a[this.orderBy] - b[this.orderBy]) return -1 * modifier
332 | 					if (b[this.orderBy] - a[this.orderBy]) return 1 * modifier
333 | 				}
334 | 				return false
335 | 			}).filter((row, index) => {
336 | 				if (this.hasPagination) {
337 | 					let start = (this.currentPage - 1) * this.pageSize
338 | 					let end = this.currentPage * this.pageSize
339 | 					if (index >= start && index < end) return true
340 | 				}
341 | 				else {
342 | 					return true
343 | 				}
344 | 			}).filter((row, index) => {
345 | 				if (this.searchBy !== '') {
346 | 					let searchBy = this.searchBy.toLowerCase()
347 | 					return String(row[`${searchBy}`]).toLowerCase().indexOf(this.searchQuery) > -1
348 | 				}
349 | 				else {
350 | 					return true
351 | 				}
352 | 			})
353 | 		}
354 | 	},
355 | 	methods: {
356 | 		showColumns(col) {
357 |       return this.headers.find(h => h.value === col).selected
358 |     },
359 | 		sortBy(value, key, id) {
360 | 			// update the current sort direction
361 |       if (value == this.orderBy) {
362 | 				this.direction = this.direction == 'asc' ? 'desc' : 'asc'
363 | 			}
364 | 
365 | 			// set the curentSort to this value
366 | 			this.orderBy = value
367 |     },
368 | 		prevPage() {
369 | 			if (this.currentPage > 1) {
370 | 				this.currentPage--
371 | 			}
372 | 		},
373 | 		thisPage(page) {
374 | 			this.currentPage = page
375 | 		},
376 | 		nextPage() {
377 | 			if ((this.currentPage * this.pageSize) < this.rows.length) {
378 | 				this.currentPage++
379 | 			}
380 | 		},
381 | 		getRowData(row) {
382 | 			if (this.isEditable) {
383 | 				this.selectedRow = row
384 | 				this.showEditForm = true
385 | 			}
386 | 		},
387 | 		updateRow() {
388 | 			this.$root.$emit('update')
389 | 		}
390 | 	}
391 | }
392 | </script>
393 | 
394 | <style scoped>
395 | .card {
396 | 	margin-bottom: 0 !important;
397 | }
398 | 
399 | .pointer {
400 | 	cursor: pointer;
401 | }
402 | 
403 | .dark {
404 | 	color: #fff;
405 |   background-color: #212529;
406 | }
407 | 
408 | .disabled, .disabled:hover {
409 | 	cursor: default;
410 | }
411 | 
412 | .border-top {
413 | 	border-top: 1px solid #ccc !important;
414 | }
415 | 
416 | .border-sides {
417 | 	border-left: 1px solid #ccc !important;
418 | 	border-right: 1px solid #ccc !important;
419 | }
420 | 
421 | .border-bottom {
422 | 	border-bottom: 1px solid #ccc !important;
423 | }
424 | 
425 | 
426 | /** Table: Primary *******************************/
427 | .table-primary {
428 |   color: #fff;
429 |   background-color: #007bff;
430 | }
431 | .table-primary td, .table-primary th, .table-primary thead th {
432 |   border-color: #1e82ed;
433 | }
434 | table .thead-primary th {
435 | 	color: #fff;
436 | 	background-color: #007bff;
437 | 	border-color: #1e82ed;
438 | }
439 | 
440 | /** Table: Secondary *******************************/
441 | .table-secondary {
442 | 	color: #fff;
443 | 	background-color: #6c757d;
444 | }
445 | .table-secondary td, .table-secondary th, .table-secondary thead th {
446 |   border-color: #a0adba;
447 | }
448 | table .thead-secondary th {
449 | 	color: #fff;
450 | 	background-color: #6c757d;
451 | 	border-color: #a0adba;
452 | }
453 | 
454 | 
455 | /** Table: Success *******************************/
456 | .table-success {
457 | 	color: #fff;
458 | 	background-color: #28a745;
459 | }
460 | .table-success td, .table-success th, .table-success thead th {
461 |   border-color: #59f27c;
462 | }
463 | table .thead-success th {
464 | 	color: #fff;
465 | 	background-color: #28a745;
466 | 	border-color: #59f27c;
467 | }
468 | 
469 | 
470 | /** Table: Info *******************************/
471 | .table-info {
472 | 	color: #fff;
473 | 	background-color: #17a2b8;
474 | }
475 | .table-info td, .table-info th, .table-info thead th {
476 |   border-color: #45d1e8;
477 | }
478 | table .thead-info th {
479 | 	color: #fff;
480 | 	background-color: #17a2b8;
481 | 	border-color: #45d1e8;
482 | }
483 | 
484 | 
485 | /** Table: Warning *******************************/
486 | .table-warning {
487 | 	color: #fff;
488 | 	background-color: #ffc107;
489 | }
490 | .table-warning td, .table-warning th, .table-warning thead th {
491 |   border-color: #f2c94d;
492 | }
493 | table .thead-warning th {
494 | 	color: #000;
495 | 	background-color: #ffc107;
496 | 	border-color: #f2c94d;
497 | }
498 | 
499 | 
500 | /** Table: Danger *******************************/
501 | .table-danger {
502 | 	color: #fff;
503 | 	background-color: #dc3545;
504 | }
505 | .table-danger td, .table-danger th, .table-danger thead th {
506 |   border-color: #ed7d88;
507 | }
508 | table .thead-danger th {
509 | 	color: #ffffff;
510 | 	background-color: #dc3545;
511 | 	border-color: #ed7d88;
512 | }
513 | 
514 | 
515 | /* TABLE STYLES *****************************/
516 | table {
517 | 	margin-top: 0;
518 | 	margin-bottom: 0;
519 | 	border-bottom: 1px solid #ccc;
520 | }
521 | 
522 | table th {
523 | 	border-top: 0px !important;
524 | 	padding-top: 10px;
525 | }
526 | 
527 | table tbody.editable tr {
528 | 	cursor: pointer;
529 | }
530 | 
531 | /* SCROLL TABLE STYLES *********************/
532 | table.scroll tbody {
533 | 	scrollbar-face-color: #007bff;
534 | 	scrollbar-shadow-color: #FFFFFF;
535 | 	scrollbar-highlight-color: #FFFFFF;
536 | 	scrollbar-3dlight-color: #FFFFFF;
537 | 	scrollbar-darkshadow-color: #FFFFFF;
538 | 	scrollbar-track-color: #ccc;
539 | 	scrollbar-arrow-color: #FFFFFF;
540 | }
541 | 
542 | /* Let's get this party started */
543 | table.scroll tbody::-webkit-scrollbar {
544 |     width: 15px;
545 | }
546 |  
547 | /* Track */
548 | table.scroll tbody::-webkit-scrollbar-track {
549 | 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
550 | 	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
551 | 	-webkit-border-radius: 10px;
552 | 	border-radius: 10px;
553 | }
554 |  
555 | /* Handle */
556 | table.scroll tbody::-webkit-scrollbar-thumb {
557 | 	-webkit-border-radius: 10px;
558 | 	border-radius: 10px;
559 | 	
560 | 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
561 | 	box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
562 | }
563 | 
564 | /* Handle: Primary */
565 | table.scroll.table-primary tbody::-webkit-scrollbar-thumb {
566 | 	background: #0056b3;
567 | }
568 | 
569 | /* Handle: Secondary */
570 | table.scroll.table-secondary tbody::-webkit-scrollbar-thumb {
571 | 	background: #474747;
572 | }
573 | 
574 | /* Handle: Success */
575 | table.scroll.table-success tbody::-webkit-scrollbar-thumb {
576 | 	background: #1e7e34;
577 | }
578 | 
579 | /* Handle: Info */
580 | table.scroll.table-info tbody::-webkit-scrollbar-thumb {
581 | 	background: #19afc8;
582 | }
583 | 
584 | /* Handle: Warning */
585 | table.scroll.table-warning tbody::-webkit-scrollbar-thumb {
586 | 	background: #ba8b00;
587 | }
588 | 
589 | /* Handle: Danger */
590 | table.scroll.table-danger tbody::-webkit-scrollbar-thumb {
591 | 	background: #a71d2a;
592 | }
593 | 
594 | table.scroll {
595 | 	display: table;
596 | }
597 | 
598 | /* THEAD */
599 | table.scroll thead tr {
600 | 	display: table;
601 | 	width: 100%;
602 | 	table-layout: fixed;
603 | }
604 | 
605 | table.scroll thead tr th:nth-last-child(2) {
606 | 	border-right: 0px !important;
607 | }
608 | 
609 | table.scroll thead tr th.spacer {
610 | 	width: 15px;
611 | 	border-left: 0px !important;
612 | 	padding: 0 !important;
613 | }
614 | 
615 | /* TBODY */
616 | table.scroll tbody {
617 | 	overflow-y: auto;
618 | 	overflow-x: hidden;
619 | 	display: block;
620 | 	width: 100%;
621 | }
622 | 
623 | table.scroll tbody tr {
624 | 	display: table;
625 | 	width: 100%;
626 | 	table-layout: fixed;
627 | }
628 | 
629 | /* ROW EDIT FORM STYLES *********************/
630 | .lightbox {
631 | 	position: fixed;
632 | 	top: 0;
633 | 	left: 0;
634 | 	right: 0;
635 | 	bottom: 0;
636 | 	background-color: rgba(0,0,0,.5);
637 | 	z-index: 1;
638 | }
639 | .edit-form {
640 | 	position: fixed;
641 | 	top: 50%;
642 | 	left: 50%;
643 | 	transform: translate(-50%, -50%);
644 | 	z-index: 10;
645 | }
646 | 
647 | .edit-form .header {
648 | 	padding: 10px;
649 | }
650 | </style>
651 | 


--------------------------------------------------------------------------------