Skip to content

L
Learning-Project
Commit 3be931bc authored by Radu Florin's avatar Radu Florin
Browse files
Options

First commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 18951 additions and 0 deletions
.babelrc 0 → 100644
View file @ 3be931bc
{
"presets": [
[
"env",
{
"modules": false
}
],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
}
.dockerignore 0 → 100644
View file @ 3be931bc
node_modules/
dist/
.git/
.dockerignore
.gitattributes
.gitignore
Dockerfile
README.md
.editorconfig 0 → 100644
View file @ 3be931bc
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintignore 0 → 100644
View file @ 3be931bc
build/*.js
config/*.js
.eslintrc.js 0 → 100644
View file @ 3be931bc
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
'comma-dangle': 'off',
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
'no-multiple-empty-lines': 0,
'no-mixed-operators': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
.gitignore 0 → 100644
View file @ 3be931bc
.DS_Store
node_modules/
dist/
npm-debug.log
package-lock.json
/yarn-error.log
.idea/
.postcssrc.js 0 → 100644
View file @ 3be931bc
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
Dockerfile 0 → 100644
View file @ 3be931bc
FROM node:8
WORKDIR /app
COPY . /app
EXPOSE 8080
RUN npm install http-server -g
RUN npm install && npm run build
CMD http-server ./dist
LICENSE 0 → 100644
View file @ 3be931bc
MIT License
Copyright (c) 2017 Dream Support LLC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
README.md 0 → 100644
View file @ 3be931bc
# Vuestic Admin Dashboard
Responsive admin dashboard template built with [Vue.js](https://vuejs.org) and [Bootstrap 4](https://v4-alpha.getbootstrap.com). Developed by [Epicmax](http://epicmax.co). Designed by [Vasili Savitski](https://xxsavitski.myportfolio.com/)
<p align="center">
<a href="http://vuestic.epicmax.co" target="_blank">
<img src="http://i.imgur.com/pMuJVVc.png" align="center" width="888px"/>
</a>
</p>
## Demo
Check it out [live](http://vuestic.epicmax.co)!
## Prerequisites:
- [Node.js](https://nodejs.org/en/) (at least 4.x, 8.x recommended)
- npm version 3+ and [Git](https://git-scm.com/).
- [vuestic-installer](https://github.com/epicmaxco/vuestic-installer) `npm install vuestic-installer -g`.
## Browser Support
* Latest Chrome, Firefox, Safari, Edge, IE11+
## Installation
``` bash
# create new project via vuestic-installer command.
$ vuestic myproject
or
# clone the repo
$ git clone https://github.com/epicmaxco/vuestic-admin.git myproject
# go into app's directory and install dependencies:
$ cd myproject
$ npm install
# serve with hot reload at localhost:8080.
$ npm run dev
# build for production with minification
$ npm run build
# build for production and view the bundle analyzer report.
$ npm run build --report
```
## Documentation
Got stuck? Check out our [documentation](https://github.com/epicmaxco/vuestic-admin/wiki) 🤓
## Features
* Vue.js
* Bootstrap 4
* Webpack
* Responsive layout
* Charts (Chart.js)
* Maps (Google, Leaflet, amMap)
* Progress bars
* Material forms with beautiful validation
* 4 Form wizard types
* Static tables and datatables
* Login/signup pages templates
* Medium editor
* Toasts, tooltips, popovers,
* i18n
* and many more!
## How can I support developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on [Twitter](https://twitter.com/epicmaxco) :feet:
- Like our page on [Facebook](https://www.facebook.com/epicmaxco) :thumbsup:
## Can I hire you guys?
Yes! Visit [our homepage](http://epicmax.co/) or simply leave us a message to [hello@epicmax.co](mailto:hello@epicmax.co). We will be happy to work with you!
## License
[MIT](https://github.com/epicmaxco/vuestic-admin/blob/master/LICENSE) license.
build/build.js 0 → 100644
View file @ 3be931bc
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
build/check-versions.js 0 → 100644
View file @ 3be931bc
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
build/dev-client.js 0 → 100644
View file @ 3be931bc
/* eslint-disable */
'use strict'
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
build/dev-server.js 0 → 100644
View file @ 3be931bc
'use strict'
require('./check-versions')()
const config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
const opn = require('opn')
const path = require('path')
const express = require('express')
const webpack = require('webpack')
const proxyMiddleware = require('http-proxy-middleware')
const webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
const port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
const autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
const proxyTable = config.dev.proxyTable
const app = express()
const compiler = webpack(webpackConfig)
const devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
const hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
// force page reload when html-webpack-plugin template changes
// currently disabled until this is resolved:
// https://github.com/jantimon/html-webpack-plugin/issues/680
// compiler.plugin('compilation', function (compilation) {
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// hotMiddleware.publish({ action: 'reload' })
// cb()
// })
// })
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// load the favicon
app.use('/favicon.ico', express.static(__dirname + '/../favicon.ico'));
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
let options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// serve pure static assets
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
const uri = 'http://localhost:' + port
var _resolve
var _reject
var readyPromise = new Promise((resolve, reject) => {
_resolve = resolve
_reject = reject
})
var server
var portfinder = require('portfinder')
portfinder.basePort = port
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
portfinder.getPort((err, port) => {
if (err) {
_reject(err)
}
process.env.PORT = port
var uri = 'http://localhost:' + port
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
server = app.listen(port)
_resolve()
})
})
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
build/utils.js 0 → 100644
View file @ 3be931bc
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
build/vue-loader.conf.js 0 → 100644
View file @ 3be931bc
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
build/webpack.base.conf.js 0 → 100644
View file @ 3be931bc
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'services': resolve('src/services'),
'directives': resolve('src/directives'),
'vuestic-mixins': resolve('src/vuestic-theme/vuestic-mixins'),
'vuestic-components': resolve('src/vuestic-theme/vuestic-components'),
'vuestic-directives': resolve('src/vuestic-theme/vuestic-directives'),
'vuestic-theme': resolve('src/vuestic-theme'),
'data': resolve('src/data'),
'vuex-store': resolve('src/store')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
build/webpack.dev.conf.js 0 → 100644
View file @ 3be931bc
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
build/webpack.prod.conf.js 0 → 100644
View file @ 3be931bc
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const env = config.build.env
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
// copy favicon
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../favicon.ico'),
to: config.build.assetsRoot
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
config/dev.env.js 0 → 100644
View file @ 3be931bc
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
config/index.js 0 → 100644
View file @ 3be931bc
'use strict'
const path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
config/prod.env.js 0 → 100644
View file @ 3be931bc
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
index.html 0 → 100644
View file @ 3be931bc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Vuestic Admin</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
package.json 0 → 100644
View file @ 3be931bc
{
"name": "vuestic-admin",
"version": "1.6.0",
"description": "Vue.js admin template",
"author": "smartapant <smartapant@gmail.com>",
"private": false,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"repository": {
"type": "git",
"url": "https://github.com/epicmaxco/vuestic-admin.git"
},
"license": "MIT",
"dependencies": {
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"awesome-bootstrap-checkbox": "1.0.0-alpha.5",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.0.0",
"chart.js": "^2.6.0",
"detect-browser": "^1.7.1",
"element-resize-detector": "^1.1.12",
"epic-spinners": "^1.0.1",
"flag-icon-css": "^2.9.0",
"font-awesome": "^4.7.0",
"gemini-scrollbar": "^1.5.1",
"google-maps": "^3.3.0",
"ionicons": "^3.0.0",
"kewler": "^1.0.8",
"leaflet-map": "^0.2.1",
"medium-editor": "^5.23.3",
"normalize.css": "7.0.0",
"v-tooltip": "^2.0.0-rc.30",
"vee-validate": "2.0.0-rc.7",
"vue": "2.5.2",
"vue-axios": "^2.1.1",
"vue-bulma-expanding": "0.0.1",
"vue-chartjs": "^2.8.1",
"vue-router": "^3.0.1",
"vue-slider-component": "2.3.3",
"vue-toasted": "^1.1.24",
"vue-yandex-maps": "^0.7.9",
"vue2-circle-progress": "^1.0.3",
"vuetable-2": "1.7.5",
"vuex": "^3.0.1",
"vuex-i18n": "^1.7.0",
"vuex-router-sync": "5.0.0"
},
"devDependencies": {
"autoprefixer": "7.1.2",
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-loader": "7.1.1",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-2": "6.22.0",
"babel-register": "6.22.0",
"chalk": "2.3.0",
"connect-history-api-fallback": "1.3.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.0",
"es6-promise": "^4.2.4",
"eslint": "3.19.0",
"eslint-config-standard": "10.2.1",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.7.1",
"eslint-plugin-html": "3.0.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "0.9.6",
"express": "4.14.1",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "1.1.4",
"friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.3",
"node-sass": "4.7.1",
"opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.2.0",
"portfinder": "1.0.13",
"rimraf": "2.6.0",
"sass-loader": "6.0.6",
"semver": "5.3.0",
"shelljs": "0.7.6",
"url-loader": "0.5.8",
"vue-component-tree": "^2.2.1",
"vue-flatpickr-component": "^7.0.1",
"vue-loader": "13.3.0",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.5.2",
"webpack": "3.6.0",
"webpack-bundle-analyzer": "2.9.0",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
src/App.vue 0 → 100644
View file @ 3be931bc
<template>
<div id="app" class="app">
<layout v-if="isAuth"/>
<auth-layout v-else></auth-layout>
</div>
</template>
<script>
import Layout from 'components/layout/Layout'
import AuthLayout from 'components/layout/AuthLayout'
import store from './store'
import VuesticPreLoader from 'vuestic-components/vuestic-preloader/VuesticPreLoader.vue'
export default {
name: 'app',
components: {
VuesticPreLoader,
AuthLayout,
Layout
},
store,
vuex: {
getters: {
auth: ({ auth }) => auth.auth,
route: ({ route }) => route
}
},
computed: {
isAuth () {
let stateItem = localStorage.getItem('access_token')
store.dispatch('LOGIN', { access_token: stateItem })
if (stateItem) {
this.$router.push('/')
} else {
this.$router.push('/auth/login')
}
return stateItem != null
}
}
}
</script>
<style lang="scss">
@import "sass/main";
body {
height: 100%;
#app {
height: 100%;
}
}
</style>
src/assets/icons/menu-collapsed.svg 0 → 100644
View file @ 3be931bc
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 20" style="enable-background:new 0 0 24 20;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<path class="st0" d="M23,11h-6c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1C24,10.6,23.6,11,23,11z M23,2H1C0.4,2,0,1.6,0,1
c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1C24,1.6,23.6,2,23,2z M1,9h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1
C0,9.4,0.4,9,1,9z M1,18h4c0.6,0,1,0.4,1,1s-0.4,1-1,1H1c-0.6,0-1-0.4-1-1S0.4,18,1,18z M9.8,15.3l1.2,1.2V10c0-0.6,0.4-1,1-1
c0.6,0,1,0.4,1,1v6.5l1.2-1.2c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-2.9,2.9C12.6,19.9,12.3,20,12,20c0,0-0.1,0-0.1,0
c0,0,0,0,0,0c-0.2,0-0.5-0.1-0.7-0.3l-2.9-2.9c-0.4-0.4-0.4-1.1,0-1.5C8.7,14.9,9.4,14.9,9.8,15.3z M19,18h4c0.6,0,1,0.4,1,1
s-0.4,1-1,1h-4c-0.6,0-1-0.4-1-1S18.4,18,19,18z"/>
</svg>
src/assets/icons/menu-expanded.svg 0 → 100644
View file @ 3be931bc
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 20" style="enable-background:new 0 0 24 20;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<path class="st0" d="M23,11h-4c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1C24,10.6,23.6,11,23,11z M23,2H1C0.4,2,0,1.6,0,1
c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1C24,1.6,23.6,2,23,2z M1,9h4c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1
C0,9.4,0.4,9,1,9z M1,18h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1C0,18.4,0.4,18,1,18z M11.3,9.3
C11.3,9.3,11.3,9.3,11.3,9.3C11.5,9.1,11.7,9,12,9c0.1,0,0.3,0,0.4,0.1c0.1,0,0.1,0,0.1,0.1c0,0,0,0,0.1,0c0.1,0,0.1,0.1,0.2,0.1
l2.9,2.9c0.4,0.4,0.4,1.1,0,1.5c-0.4,0.4-1.1,0.4-1.5,0L13,12.5V19c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1v-6.5l-1.2,1.2
c-0.4,0.4-1.1,0.4-1.5,0c-0.4-0.4-0.4-1.1,0-1.5L11.3,9.3z M17,18h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1h-6c-0.6,0-1-0.4-1-1
C16,18.4,16.4,18,17,18z"/>
</svg>
src/assets/icons/vuestic-clean-code.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.02 50.34"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:#34495e;}</style></defs><title>overview_icon_4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M38.23,16.17a10,10,0,1,0-17.67,6.42V47.5l7.33-5,8,5V22.58A10,10,0,0,0,38.23,16.17Z"/><path class="cls-2" d="M28.23,0a13.15,13.15,0,0,0-9.17,22.6V50.34l8.87-6,9.46,5.92V22.6A13.15,13.15,0,0,0,28.23,0ZM34.4,44.79l-6.54-4.08-5.8,4V24.79a13.11,13.11,0,0,0,12.33,0ZM28.23,23.33A10.17,10.17,0,1,1,38.4,13.17,10.18,10.18,0,0,1,28.23,23.33Z"/><path class="cls-2" d="M28.23,5.67a7.5,7.5,0,1,0,7.5,7.5A7.51,7.51,0,0,0,28.23,5.67Zm0,12a4.5,4.5,0,1,1,4.5-4.5A4.5,4.5,0,0,1,28.23,17.67Z"/><polygon class="cls-2" points="9.51 15.11 0 24.61 9.51 34.12 11.63 32 4.24 24.61 11.63 17.23 9.51 15.11"/><polygon class="cls-2" points="46.52 15.11 44.39 17.23 51.78 24.61 44.39 32 46.52 34.12 56.02 24.61 46.52 15.11"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic-free.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.99 51.04"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:none;stroke:#34495e;stroke-miterlimit:10;stroke-width:3px;}.cls-3{fill:#34495e;}</style></defs><title>overview_icon_2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M1.08,28.21C1.08,13.62,8.38,6.29,19,6.29S37,13.69,37,28.21,29.66,50.54,19,50.54,1.08,42.8,1.08,28.21Zm23.56,0c0-11.3-2.58-16.9-5.62-16.9s-5.62,5.6-5.62,16.9S16,41.66,19,41.66,24.65,39.51,24.65,28.21Z"/><line class="cls-2" x1="39.83" y1="47.62" x2="39.83" y2="50.96"/><path class="cls-3" d="M18.73,9.64c-4.9,0-6.9,4.54-6.9,15.66,0,11.29,2.06,16.1,6.9,16.1s6.9-4.81,6.9-16.1C25.63,14.17,23.63,9.64,18.73,9.64Zm0,28.76c-1.07,0-3.9,0-3.9-13.1,0-12.66,2.64-12.66,3.9-12.66s3.9,0,3.9,12.66C22.63,38.4,19.8,38.4,18.73,38.4Z"/><path class="cls-3" d="M42.9,43.74A3.76,3.76,0,0,1,40.17,45c-1.95,0-3.24-1.57-3.24-4.4s1.53-4.35,3.29-4.35a3.67,3.67,0,0,1,2.5,1.11l2.08-2.55A6.8,6.8,0,0,0,41.33,33V31h-3v2.12a7.09,7.09,0,0,0-1.64.63,43.71,43.71,0,0,0,.77-8.41c0-15.84-7-25.3-18.73-25.3S0,9.46,0,25.3,7.18,51,18.73,51A16.4,16.4,0,0,0,33.12,43.1,6.77,6.77,0,0,0,40,48.46a6.35,6.35,0,0,0,5-2.22ZM18.73,48C8.88,48,3,39.54,3,25.3S8.73,3,18.73,3s15.73,8.13,15.73,22.3S28.58,48,18.73,48Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic-fresh.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.98 47.66"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:#34495e;}</style></defs><title>overview_icon_5</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M6,19C11,12.66,26.33,3,46.33,6c-3.67,17-8.67,26-8.67,26s-7,14-19.67-3.67C5.67,26.33,9,22.33,6,19Z"/><path class="cls-2" d="M48.33.49l-.77,0c-11.22-1.88-30.21,1.46-39,9-3.38,2.89-5,6.11-4.69,9.59a11.06,11.06,0,0,0,4.77,8,11,11,0,0,0,6.24,1.82q.53,0,1.09,0A55.51,55.51,0,0,0,13.2,39.21C9.48,33.07,2.35,30.83,0,30.83v3c.12,0,12.18,1.95,12.5,13.54h0c0,.1,0,.19,0,.29h3a50.57,50.57,0,0,1,3.12-17.21c2.48,5.09,6.36,8,10.91,8.13,5.3.07,10.1-3.85,11.91-9.81.94-3.12,1.88-6.37,2.78-9.51C46.32,11.9,48.31,5,49.62,2.76L51,.49ZM10.28,24.61a8.06,8.06,0,0,1-3.45-5.73c-.19-2.47,1-4.85,3.65-7.08,5.9-5,17.25-8.12,27-8.7-8.35,4-15.7,12.31-20.23,22.51l-.38.1h0A8.82,8.82,0,0,1,10.28,24.61Zm31-6.18c-.9,3.13-1.82,6.37-2.76,9.47-1.4,4.62-4.95,7.69-8.86,7.69h-.13c-4-.07-7.45-3.43-9.33-9.09C25.83,14.27,35.67,4.94,45.92,3.65,44.6,7,43.06,12.39,41.33,18.42Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic-responsive.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 49"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:#34495e;}</style></defs><title>overview_icon_3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="37 26 37 7 11 7 11 18 3 18 3 46 11 46 15 46 30 46 37 46 45 46 45 26 37 26"/><path class="cls-2" d="M40,19V0H8V11H0V49H47.5V19ZM3,46V14H8V46Zm34,0H11V3H37Zm7.5,0H40V22h4.5Z"/><circle class="cls-2" cx="24" cy="41" r="2.67"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic-rich.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.99 55"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:#34495e;}</style></defs><title>overview_icon_6</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="10.31" y="30.5" width="37.33" height="23"/><path class="cls-2" d="M57,41.18l-7.85-16V24H8.81v1.11L0,41.11l2.63,1.45L8.81,31.33V55H49.15V32L54.3,42.5ZM46.15,52H11.81V27H46.15Z"/><polygon class="cls-2" points="35.3 1.8 32.9 0 28.12 6.39 26.16 4.63 24.16 6.87 28.56 10.8 35.3 1.8"/><polygon class="cls-2" points="22.3 12.46 19.9 10.67 15.12 17.05 13.16 15.3 11.16 17.54 15.56 21.47 22.3 12.46"/><polygon class="cls-2" points="38.89 21.14 45.64 12.13 43.23 10.33 38.45 16.72 36.49 14.97 34.49 17.2 38.89 21.14"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic-vue.svg 0 → 100644
View file @ 3be931bc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.05 47.8"><defs><style>.cls-1{fill:#4ae387;}.cls-2{fill:#34495e;}</style></defs><title>overview_icon_1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="27.75 21.19 18.48 6.18 4.78 6.18 27.75 42.92 50.89 6.18 36.13 6.18 27.75 21.19"/><path class="cls-2" d="M33.08,0,27.44,9.76,21.84,0H0L27.43,47.8,55,0ZM27.43,15.77,34.81,3h4.6l-12,20.72L15.55,3h4.55ZM5.18,3h6.91L27.43,29.73,42.88,3h7L27.44,41.78Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/vuestic.svg 0 → 100644
View file @ 3be931bc
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 129 15.4" style="enable-background:new 0 0 129 15.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4AE387;}
</style>
<g>
<path class="st0" d="M0,0.5h3.7l2.9,6.9l2.9-6.9h3.7L6.8,15.4H6.4L0,0.5z"/>
<path class="st0" d="M22.2,0.5h3.5v9c0,1.9,0.9,2.6,2.1,2.6c1.3,0,2.2-0.7,2.2-2.6v-9h3.5V10c0,3.4-2.5,5.3-5.7,5.3
c-3.3,0-5.6-2-5.6-5.3V0.5z"/>
<path class="st0" d="M43.9,0.5h9.5v3.1h-6v2.6H53v3.1h-5.5v2.6h6.3v3h-9.8V0.5z"/>
<path class="st0" d="M66.7,10.7c0,0.8,0.7,1.5,1.5,1.5c0.9,0,1.4-0.5,1.4-1.2c0-1.1-1.4-1.4-2.6-1.8c-2.4-0.9-3.8-2-3.8-4.5
c0-2.5,2.2-4.7,4.9-4.7c3.2,0,4.7,2,4.9,4.7h-3.3c0-0.8-0.5-1.5-1.5-1.5c-0.8,0-1.5,0.5-1.5,1.4c0,1.1,1.3,1.3,2.5,1.6
C71.8,7,73,8.4,73,10.7c0,2.5-2.2,4.7-4.9,4.7c-3.1,0-4.9-2.1-4.9-4.7H66.7z"/>
<path class="st0" d="M85.4,3.6h-3.2V0.5h10v3.1H89v11.3h-3.6V3.6z"/>
<path class="st0" d="M101.5,0.5h3.5v14.4h-3.5V0.5z"/>
<path class="st0" d="M122.8,0c2.7,0,4.6,1,6.2,2.6l-2.4,2.3c-1-1-2.3-1.6-3.7-1.6c-2.6,0-4.2,1.9-4.2,4.3s1.7,4.3,4.2,4.3
c1.4,0,2.7-0.6,3.7-1.6l2.4,2.3c-1.4,1.5-3.4,2.6-6.1,2.6c-4.6,0-7.8-3.4-7.8-7.7S118.2,0,122.8,0z"/>
</g>
</svg>
src/backend/vue-axios/axios.js 0 → 100644
View file @ 3be931bc
import axios from 'axios'
const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1'
export default axios.create({
baseURL: API_URL,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.token
}
})
src/backend/vue-axios/index.js 0 → 100644
View file @ 3be931bc
import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from './axios'
Vue.use(VueAxios, axios)
src/components/auth/login/Login.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="login">
<form id="loginForm">
<h2>{{'auth.welcome' | translate}}</h2>
<div class="form-group">
<div class="input-group">
<input type="text" id="email" required="required" v-model="email" />
<label class="control-label" for="email">{{'auth.email' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" id="password" required="required" v-model="password" />
<label class="control-label" for="password">{{'auth.password' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-between down-container">
<button class="btn btn-primary" type="submit" v-on:click="showAlert(email, password)">
{{'auth.login' | translate}}
</button>
</div>
</form>
</div>
</template>
<script>
import store from '@/store'
import router from '@/router'
let authService = require('@/services/auth')
export default {
name: 'login',
store,
router,
vuex: {
getters: {
auth: ({ auth }) => auth.auth,
route: ({ route }) => route
}
},
data () {
return {
email: '',
password: ''
}
},
methods: {
showAlert: (email, password) => {
if (email && password) {
authService.default.requestToken(email, password, store, router)
}
}
}
}
</script>
<style lang="scss">
@import '../../../sass/variables';
@import '~bootstrap/scss/mixins/breakpoints';
@import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables';
.login {
@include media-breakpoint-down(md) {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
.down-container {
.link {
margin-top: 2relogim;
}
}
}
h2 {
text-align: center;
}
width: 21.375rem;
.down-container {
margin-top: 3.125rem;
}
}
</style>
src/components/auth/signup/Signup.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="signup">
<h2>{{'auth.createNewAccount' | translate}}</h2>
<form method="post" action="/auth/signup" name="signup">
<div class="form-group">
<div class="input-group">
<input type="text" id="email" required="required"/>
<label class="control-label" for="email">{{'auth.email' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" id="password" required="required"/>
<label class="control-label" for="password">{{'auth.password' | translate}}</label><i class="bar"></i>
</div>
</div>
<vuestic-checkbox
:id="'checkbox1'"
v-model="checkboxOneModel">
<template slot="label">{{'auth.agree' | translate}}
<router-link to="">{{'auth.termsOfUse' | translate}}</router-link>
</template>
</vuestic-checkbox>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-between down-container">
<button class="btn btn-primary" type="submit">
{{'auth.signUp' | translate}}
</button>
<router-link class='link' :to="{name: 'Login'}">{{'auth.alreadyJoined' | translate}}</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'signup',
data () {
return {
checkboxOneModel: true
}
}
}
</script>
<style lang="scss">
@import '../../../sass/variables';
@import '~bootstrap/scss/mixins/breakpoints';
@import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables';
.signup {
@include media-breakpoint-down(md) {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
.down-container {
.link {
margin-top: 2rem;
}
}
}
h2 {
text-align: center;
}
width: 21.375rem;
.down-container {
margin-top: 2.6875rem;
}
}
</style>
src/components/dashboard/Dashboard.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="dashboard">
<dashboard-info-widgets></dashboard-info-widgets>
<vuestic-widget class="no-padding no-v-padding">
<vuestic-tabs
:names="[$t('dashboard.dataVisualization'), $t('dashboard.usersAndMembers'), $t('dashboard.setupProfile'), $t('dashboard.features')]"
ref="tabs">
<div :slot="$t('dashboard.dataVisualization')">
<data-visualisation-tab></data-visualisation-tab>
</div>
<div :slot="$t('dashboard.usersAndMembers')">
<users-members-tab></users-members-tab>
</div>
<div :slot="$t('dashboard.setupProfile')">
<setup-profile-tab></setup-profile-tab>
</div>
<div :slot="$t('dashboard.features')">
<features-tab></features-tab>
</div>
</vuestic-tabs>
</vuestic-widget>
<dashboard-bottom-widgets></dashboard-bottom-widgets>
</div>
</template>
<script>
import DashboardInfoWidgets from './DashboardInfoWidgets'
import UsersMembersTab from './users-and-members-tab/UsersMembersTab.vue'
import SetupProfileTab from './setup-profile-tab/SetupProfileTab.vue'
import FeaturesTab from './features-tab/FeaturesTab.vue'
import DataVisualisationTab from './data-visualisation-tab/DataVisualisation.vue'
import DashboardBottomWidgets from './DashboardBottomWidgets.vue'
export default {
name: 'dashboard',
components: {
DataVisualisationTab,
DashboardInfoWidgets,
UsersMembersTab,
SetupProfileTab,
FeaturesTab,
DashboardBottomWidgets
},
methods: {
launchEpicmaxToast () {
this.showToast(`Let's work together!`, {
icon: 'fa-star-o',
position: 'top-right',
duration: Infinity,
action: {
text: 'Hire us',
href: 'http://epicmax.co/#/contact',
class: 'vuestic-toasted-link'
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import "../../sass/_variables.scss";
</style>
src/components/dashboard/DashboardBottomWidgets.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="row bottom-widgets">
<div class="col-md-6 d-flex">
<vuestic-widget class="no-h-padding no-v-padding">
<vuestic-feed :initialPosts="posts"></vuestic-feed>
</vuestic-widget>
</div>
<div class="col-md-6 d-flex">
<vuestic-widget class="business-posts">
<vuestic-social-news class="vuestic-social-news" :news="news" :url="'http://instagram.com/smartapant'"></vuestic-social-news>
</vuestic-widget>
</div>
</div>
</template>
<script>
export default {
name: 'dashboard-bottom-widgets',
data () {
return {
posts: [
{
name: 'Irina Myatelskaya',
text: 'joined the network',
photoURL: 'http://i.imgur.com/VuTDC8u.png'
},
{
name: 'Andrei Hrabouski',
text: 'has just started a live video',
photoURL: 'http://i.imgur.com/W3mGrmW.png'
},
{
name: 'Evan You',
text: 'joined the network',
photoURL: 'http://i.imgur.com/D7DOGBH.jpg'
}
],
news: [
{
photoURL: 'http://i.imgur.com/PiTDDcA.png'
},
{
photoURL: 'http://i.imgur.com/M6GugaM.png'
},
{
photoURL: 'http://i.imgur.com/vEy3fRU.png'
},
{
photoURL: 'http://i.imgur.com/Xrywphx.png'
},
{
photoURL: 'http://i.imgur.com/dqVtQGY.png'
},
{
photoURL: 'http://i.imgur.com/qP7rTCy.png'
},
{
photoURL: 'http://i.imgur.com/6YLsM43.png'
},
{
photoURL: 'http://i.imgur.com/9PAOx55.png'
},
{
photoURL: 'http://i.imgur.com/mVpc04D.png'
},
{
photoURL: 'http://i.imgur.com/WdbTSLn.png'
},
{
photoURL: 'http://i.imgur.com/ZXRIHfk.png'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.bottom-widgets {
> div[class^='col'] {
& > div {
width: 100%;
}
}
}
</style>
src/components/dashboard/DashboardInfoWidgets.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="row dashboard-info-widgets">
<div class="col-md-6 col-xl-3">
<vuestic-widget class="info-widget">
<div class="info-widget-inner">
<div class="stats">
<div class="stats-number">
<i class="ion ion-md-arrow-up text-primary stats-icon"></i>
59
</div>
<div class="stats-title">{{'dashboard.elements' | translate}}</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-6 col-xl-3">
<vuestic-widget class="info-widget">
<div class="info-widget-inner">
<div class="stats">
<div class="stats-number">
<i class="ion ion-md-arrow-down text-danger stats-icon"></i>
12
</div>
<div class="stats-title">{{'dashboard.versions' | translate}}</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-6 col-xl-3">
<vuestic-widget class="info-widget brand-danger">
<div class="info-widget-inner">
<div class="info-widget-inner has-chart">
<div class="stats">
<div class="stats-number">
425
</div>
<div class="stats-title">Commits</div>
</div>
<div class="chart-container">
<vuestic-progress-bar type="circle" ref="circleProgress" :colorName="'white'" :backgroundColorName="'danger'"
:startColorName="'danger'"></vuestic-progress-bar>
</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-6 col-xl-3">
<vuestic-widget class="info-widget brand-info">
<div class="info-widget-inner">
<div class="stats">
<div class="stats-number">
<i class="ion ion-md-people stats-icon icon-wide"></i>
5
</div>
<div class="stats-title">{{'dashboard.teamMembers' | translate}}</div>
</div>
</div>
</vuestic-widget>
</div>
</div>
</template>
<script>
export default {
name: 'dashboard-info-widgets',
mounted () {
this.$refs.circleProgress.$data.value = 70
}
}
</script>
<style lang="scss" scoped>
@import "../../sass/_variables.scss";
.stats-number, .stats-title {
line-height: 1;
}
.info-widget-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
&.has-chart {
justify-content: space-between;
}
.stats {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
}
.stats-number {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 2.625rem;
margin-bottom: 0.5rem;
.stats-icon {
font-size: 1.5625rem;
position: absolute;
top: 0.625rem;
left: -1.25rem;
&.icon-wide {
left: -1.875rem;
}
}
}
</style>
src/components/dashboard/data-visualisation-tab/DataVisualisation.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="data-visualisation-tab dashboard-tab">
<div class="row">
<div class="col-md-6">
<div class="chart-container">
<vuestic-chart v-bind:data="donutChartData" type="donut"></vuestic-chart>
</div>
</div>
<div class="col-md-6">
<vuestic-data-table
:apiMode="apiMode"
:tableData="tableData"
:tableFields="tableFields"
:itemsPerPage="itemsPerPage"
:onEachSide="onEachSide"
:sortFunctions="sortFunctions"
:dataModeFilterableFields="dataModeFilterableFields"
/>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import BadgeColumn from 'components/tables/BadgeColumn.vue'
import TableData from './TableData'
import DonutChartData from './DonutChartData'
import FieldsDef from './fields-definition'
Vue.component('badge-column', BadgeColumn)
export default {
name: 'data-visualisation-tab',
data () {
return {
donutChartData: DonutChartData,
apiMode: false,
sortFunctions: FieldsDef.sortFunctions,
tableData: TableData,
onEachSide: 1,
tableFields: FieldsDef.tableFields,
dataModeFilterableFields: ['name'],
itemsPerPage: [
{
value: 5
},
{
value: 6
}
],
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.chart-container {
padding: 0 2rem;
height: 24rem;
}
</style>
src/components/dashboard/data-visualisation-tab/DonutChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['North America', 'South America', 'Australia'],
datasets: [{
label: 'Population (millions)',
backgroundColor: [palette.info, palette.warning, palette.primary],
data: [3000, 6000, 1500]
}]
}
src/components/dashboard/data-visualisation-tab/TableData.js 0 → 100644
View file @ 3be931bc
export default {
'data': [
{
'id': 1,
'name': 'Noelia O\'Kon',
'nickname': 'asperiores',
'email': 'otho.smitham@example.com',
'birthdate': '1978-06-28 00:00:00',
'gender': 'F',
'salary': '13098.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 38,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 1,
'user_id': 1,
'line1': '0888 Aniyah Locks\nLake Bridie, NJ 51086',
'line2': 'Cayman Islands',
'zipcode': '92991-2805',
'mobile': '1-742-816-9238x848',
'fax': '(484)438-4697x8638'
}
},
{
'id': 2,
'name': 'Mr. Enid Von PhD',
'nickname': 'alias',
'email': 'pollich.cecilia@example.com',
'birthdate': '1990-09-18 00:00:00',
'gender': 'M',
'salary': '35978.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 26,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 2,
'user_id': 2,
'line1': '59732 Iva Spur Suite 468\nEast Hortenseton, VA 70087',
'line2': 'Cayman Islands',
'zipcode': '41967',
'mobile': '1-913-407-7558x503',
'fax': '(388)906-8002'
}
},
{
'id': 3,
'name': 'Colton Koch',
'nickname': 'id',
'email': 'little.myrna@example.net',
'birthdate': '1968-10-29 00:00:00',
'gender': 'F',
'salary': '26278.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 48,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 3,
'user_id': 3,
'line1': '539 Conn Locks Suite 801\nTobinfort, IL 37047-5508',
'line2': 'Antigua and Barbuda',
'zipcode': '51722-4502',
'mobile': '557.845.1830x844',
'fax': '1-831-304-7444x73027'
}
},
{
'id': 4,
'name': 'Gregory Vandervort',
'nickname': 'vel',
'email': 'dock47@example.org',
'birthdate': '1989-12-12 00:00:00',
'gender': 'M',
'salary': '25537.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 27,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 4,
'user_id': 4,
'line1': '916 Rosemary Forge\nKreigerton, MT 24207',
'line2': 'Uganda',
'zipcode': '67639-6707',
'mobile': '766.431.9121',
'fax': '(154)336-3674x08451'
}
},
{
'id': 5,
'name': 'Miss Rahsaan Heaney IV',
'nickname': 'qui',
'email': 'ugrady@example.org',
'birthdate': '1995-11-27 00:00:00',
'gender': 'F',
'salary': '49003.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 21,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 5,
'user_id': 5,
'line1': '91792 Kertzmann Prairie Apt. 376\nLake Nakiaville, DC 98189',
'line2': 'Jamaica',
'zipcode': '10101-1450',
'mobile': '07507519787',
'fax': '+24(9)5120507985'
}
},
{
'id': 6,
'name': 'Ms. Crystel Zemlak IV',
'nickname': 'reiciendis',
'email': 'amari.rau@example.com',
'birthdate': '1968-09-12 00:00:00',
'gender': 'F',
'salary': '12383.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 48,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 6,
'user_id': 6,
'line1': '97650 Scot Haven Apt. 160\nCrawfordmouth, ME 39767-7003',
'line2': 'Finland',
'zipcode': '88917',
'mobile': '1-851-069-9234x9566',
'fax': '(048)445-4691x33356'
}
},
{
'id': 7,
'name': 'Nona McDermott',
'nickname': 'quaerat',
'email': 'adrien.baumbach@example.org',
'birthdate': '1985-10-01 00:00:00',
'gender': 'F',
'salary': '18512.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 31,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 7,
'user_id': 7,
'line1': '4332 Alvina Radial\nPort Darbyville, IA 63357',
'line2': 'Barbados',
'zipcode': '79679',
'mobile': '(736)058-1324',
'fax': '002.234.8466x49816'
}
},
{
'id': 8,
'name': 'Miss Genoveva Murazik V',
'nickname': 'rerum',
'email': 'ohettinger@example.net',
'birthdate': '1988-10-19 00:00:00',
'gender': 'F',
'salary': '31209.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 28,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 8,
'user_id': 8,
'line1': '96418 Ritchie Mall Apt. 215\nLake Jessyca, VT 65970-8256',
'line2': 'Netherlands Antilles',
'zipcode': '94649-6628',
'mobile': '472.825.7183',
'fax': '400-507-7463'
}
},
{
'id': 9,
'name': 'Beulah Huels',
'nickname': 'non',
'email': 'stefan99@example.com',
'birthdate': '1963-09-04 00:00:00',
'gender': 'F',
'salary': '36920.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 53,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 9,
'user_id': 9,
'line1': '18890 Carroll Lakes Suite 355\nUptonchester, UT 94878-0739',
'line2': 'Hong Kong',
'zipcode': '91204',
'mobile': '831.652.0832',
'fax': '(688)788-8947'
}
},
{
'id': 10,
'name': 'Zoe Klein',
'nickname': 'ex',
'email': 'ejacobson@example.org',
'birthdate': '1990-04-19 00:00:00',
'gender': 'F',
'salary': '35616.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 27,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 10,
'user_id': 10,
'line1': '6721 Nader Summit\nLake Alana, MS 84476',
'line2': 'Reunion',
'zipcode': '77124-1459',
'mobile': '1-129-438-6148',
'fax': '(913)441-3846'
}
},
{
'id': 11,
'name': 'Vickie Kiehn',
'nickname': 'assumenda',
'email': 'ayost@example.com',
'birthdate': '1988-04-20 00:00:00',
'gender': 'F',
'salary': '30790.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 29,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 11,
'user_id': 11,
'line1': '763 McCullough Ville\nNew Thomasstad, HI 64611',
'line2': 'Oman',
'zipcode': '00642',
'mobile': '1-296-172-2126x275',
'fax': '(559)203-8694'
}
},
{
'id': 12,
'name': 'Elwyn Herzog',
'nickname': 'praesentium',
'email': 'ckassulke@example.net',
'birthdate': '1990-01-22 00:00:00',
'gender': 'M',
'salary': '35785.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 27,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 12,
'user_id': 12,
'line1': '65641 Baron Spurs Suite 988\nNorth Ivah, IA 92235',
'line2': 'Nepal',
'zipcode': '90316-7411',
'mobile': '064.482.9432x9456',
'fax': '05936098280'
}
},
{
'id': 13,
'name': 'Selena Hettinger',
'nickname': 'et',
'email': 'bashirian.hyman@example.net',
'birthdate': '1981-10-01 00:00:00',
'gender': 'F',
'salary': '31836.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 35,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 13,
'user_id': 13,
'line1': '42272 Stoltenberg Points Suite 006\nLake Dustin, NH 70213-2043',
'line2': 'Uganda',
'zipcode': '60996-2982',
'mobile': '(508)122-5892',
'fax': '356-682-2023x07379'
}
},
{
'id': 14,
'name': 'Edwin Beier',
'nickname': 'eos',
'email': 'janis71@example.org',
'birthdate': '1978-10-13 00:00:00',
'gender': 'M',
'salary': '11902.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 38,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 14,
'user_id': 14,
'line1': '362 Trantow Loop Apt. 150\nLake Marafurt, DC 27926',
'line2': 'Gabon',
'zipcode': '36943-1099',
'mobile': '033-386-4972x26066',
'fax': '1-363-037-1381'
}
},
{
'id': 15,
'name': 'Lexi Braun MD',
'nickname': 'autem',
'email': 'dusty74@example.net',
'birthdate': '1971-12-07 00:00:00',
'gender': 'F',
'salary': '11927.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 45,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 15,
'user_id': 15,
'line1': '6737 Schimmel Crossing Suite 720\nShieldsberg, AK 44558',
'line2': 'Tanzania',
'zipcode': '75615',
'mobile': '338.920.3112',
'fax': '(467)912-6668'
}
},
{
'id': 16,
'name': 'Jovany Spencer',
'nickname': 'fugit',
'email': 'gbogisich@example.org',
'birthdate': '1974-04-23 00:00:00',
'gender': 'F',
'salary': '44686.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 43,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 16,
'user_id': 16,
'line1': '97237 Emory Mission\nWelchview, DE 65827-8746',
'line2': 'Turkmenistan',
'zipcode': '17948',
'mobile': '(163)991-1609x963',
'fax': '104.893.7648'
}
},
{
'id': 17,
'name': 'Prof. Maci Anderson DVM',
'nickname': 'dolorem',
'email': 'btorp@example.com',
'birthdate': '1988-03-30 00:00:00',
'gender': 'M',
'salary': '25055.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 29,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 17,
'user_id': 17,
'line1': '7584 Lucinda Mill\nNew Kaitlyn, WV 63380-4289',
'line2': 'Gibraltar',
'zipcode': '51150-2800',
'mobile': '(977)115-7349',
'fax': '652-788-4860x1180'
}
},
{
'id': 18,
'name': 'Joel Kulas MD',
'nickname': 'sed',
'email': 'phoebe.sauer@example.org',
'birthdate': '1992-10-26 00:00:00',
'gender': 'F',
'salary': '11650.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 24,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 18,
'user_id': 18,
'line1': '992 Williamson Passage Apt. 910\nBradleyborough, MO 93100-9439',
'line2': 'Cambodia',
'zipcode': '20591-3066',
'mobile': '+64(7)3402369877',
'fax': '08960801902'
}
},
{
'id': 19,
'name': 'Mr. Dawson Greenholt',
'nickname': 'nostrum',
'email': 'asawayn@example.org',
'birthdate': '1963-08-23 00:00:00',
'gender': 'F',
'salary': '46962.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 53,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 19,
'user_id': 19,
'line1': '8444 Abraham Isle\nEast Chaunceychester, HI 78625-4417',
'line2': 'Qatar',
'zipcode': '47870-8012',
'mobile': '797-274-3187x45557',
'fax': '(461)432-8205'
}
},
{
'id': 20,
'name': 'Prof. Lloyd Green',
'nickname': 'velit',
'email': 'laila.hintz@example.org',
'birthdate': '1970-10-31 00:00:00',
'gender': 'M',
'salary': '12928.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 46,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 20,
'user_id': 20,
'line1': '89766 O\'Connell Falls\nSouth Kadenshire, NJ 78754-6650',
'line2': 'Nigeria',
'zipcode': '37859',
'mobile': '1-457-536-1138',
'fax': '+98(5)0101745942'
}
},
{
'id': 21,
'name': 'Shayna Morar',
'nickname': 'rerum',
'email': 'wfay@example.org',
'birthdate': '1991-01-24 00:00:00',
'gender': 'F',
'salary': '22638.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 26,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 21,
'user_id': 21,
'line1': '6066 Weissnat Run Apt. 578\nMurazikmouth, SD 62877-3174',
'line2': 'Brunei Darussalam',
'zipcode': '69261',
'mobile': '(487)423-0151x5127',
'fax': '784-058-9197'
}
},
{
'id': 22,
'name': 'Krista Schulist',
'nickname': 'qui',
'email': 'gregoria.jakubowski@example.com',
'birthdate': '1974-08-16 00:00:00',
'gender': 'F',
'salary': '49345.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 42,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 22,
'user_id': 22,
'line1': '331 Gerlach Course Suite 090\nKovacekchester, RI 18017',
'line2': 'Sri Lanka',
'zipcode': '37165',
'mobile': '653-487-3061x91119',
'fax': '370-709-1750'
}
},
{
'id': 23,
'name': 'Leone Lemke',
'nickname': 'repellat',
'email': 'ltorphy@example.com',
'birthdate': '1975-06-27 00:00:00',
'gender': 'M',
'salary': '17560.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 41,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 23,
'user_id': 23,
'line1': '4371 Ward Village Suite 848\nLake Madalynton, IN 44643',
'line2': 'Ukraine',
'zipcode': '71848',
'mobile': '174-502-0881x50649',
'fax': '02683328099'
}
},
{
'id': 24,
'name': 'Dr. Willie Kemmer II',
'nickname': 'quasi',
'email': 'ivy51@example.net',
'birthdate': '1987-04-06 00:00:00',
'gender': 'F',
'salary': '35370.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 30,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 24,
'user_id': 24,
'line1': '235 Hassie Mountain\nAnikaborough, ID 20678-4354',
'line2': 'Thailand',
'zipcode': '94264-9132',
'mobile': '624.042.8382x12243',
'fax': '274.716.7226x171'
}
},
{
'id': 25,
'name': 'Deonte Lebsack',
'nickname': 'nesciunt',
'email': 'alisa83@example.net',
'birthdate': '1993-01-26 00:00:00',
'gender': 'M',
'salary': '32725.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 24,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 25,
'user_id': 25,
'line1': '793 Lakin Haven\nLake Citlalliborough, DE 85031-4862',
'line2': 'Chad',
'zipcode': '52396-8822',
'mobile': '(950)170-8013',
'fax': '119.675.5485x79062'
}
},
{
'id': 26,
'name': 'Prof. Shayne Nader',
'nickname': 'voluptas',
'email': 'bosco.shaina@example.net',
'birthdate': '1993-10-26 00:00:00',
'gender': 'F',
'salary': '9844.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 23,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 26,
'user_id': 26,
'line1': '0330 Smith Mountains\nLorinetown, NY 96547-9723',
'line2': 'Syrian Arab Republic',
'zipcode': '85415',
'mobile': '1-212-704-6685',
'fax': '516-893-8515'
}
},
{
'id': 27,
'name': 'Prof. Kennith Kertzmann',
'nickname': 'alias',
'email': 'satterfield.jonathan@example.com',
'birthdate': '1992-01-31 00:00:00',
'gender': 'F',
'salary': '41950.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 25,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 27,
'user_id': 27,
'line1': '901 Hauck Extensions\nKeaganborough, VA 47392',
'line2': 'Comoros',
'zipcode': '54147-7615',
'mobile': '1-274-179-2031x915',
'fax': '867-583-0812x6728'
}
},
{
'id': 28,
'name': 'Miss Meagan O\'Keefe',
'nickname': 'corporis',
'email': 'tracy.barrows@example.com',
'birthdate': '1967-05-04 00:00:00',
'gender': 'M',
'salary': '41803.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 50,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 28,
'user_id': 28,
'line1': '29077 Avis Isle Apt. 208\nGrahamberg, MI 62485-6694',
'line2': 'Cocos (Keeling) Islands',
'zipcode': '56090-7671',
'mobile': '(718)856-9319x55184',
'fax': '(777)055-4685x56167'
}
},
{
'id': 29,
'name': 'Prof. Edward Pagac MD',
'nickname': 'quia',
'email': 'gerhard65@example.org',
'birthdate': '1973-09-22 00:00:00',
'gender': 'F',
'salary': '22896.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 43,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 29,
'user_id': 29,
'line1': '697 Crona Mall\nPeteville, WA 54497',
'line2': 'Saudi Arabia',
'zipcode': '07560-8569',
'mobile': '788-579-8208',
'fax': '041-521-9215'
}
},
{
'id': 30,
'name': 'Samantha Weissnat',
'nickname': 'est',
'email': 'crystel66@example.net',
'birthdate': '1974-07-11 00:00:00',
'gender': 'M',
'salary': '18805.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 42,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 30,
'user_id': 30,
'line1': '79984 Deckow Run\nEast Victoria, UT 33736',
'line2': 'Lithuania',
'zipcode': '95964-8864',
'mobile': '681.200.3099',
'fax': '(567)652-4322x61475'
}
},
{
'id': 31,
'name': 'Dr. Gilbert Ward',
'nickname': 'dolorum',
'email': 'sandrine06@example.net',
'birthdate': '1984-08-22 00:00:00',
'gender': 'F',
'salary': '16644.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 32,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 31,
'user_id': 31,
'line1': '996 Schuppe Glen\nTurcottetown, ID 40821-7190',
'line2': 'Thailand',
'zipcode': '09965-7576',
'mobile': '1-938-263-0257x47178',
'fax': '1-997-727-3198x4363'
}
},
{
'id': 32,
'name': 'Mike West',
'nickname': 'laudantium',
'email': 'jborer@example.net',
'birthdate': '1974-11-07 00:00:00',
'gender': 'M',
'salary': '35728.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 42,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 32,
'user_id': 32,
'line1': '69942 Leannon Glen\nEast Mathilde, IL 89584-5633',
'line2': 'Afghanistan',
'zipcode': '02041-8706',
'mobile': '(506)349-9443x7244',
'fax': '1-357-689-8479x3729'
}
},
{
'id': 33,
'name': 'Prof. Isabell Cruickshank I',
'nickname': 'recusandae',
'email': 'ondricka.lurline@example.org',
'birthdate': '1982-06-15 00:00:00',
'gender': 'F',
'salary': '44574.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 34,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 33,
'user_id': 33,
'line1': '875 Logan Summit Suite 033\nJerodport, NY 45166',
'line2': 'Kiribati',
'zipcode': '64763',
'mobile': '1-548-943-8405x460',
'fax': '+88(4)9493664736'
}
},
{
'id': 34,
'name': 'Prof. Lonny Rath',
'nickname': 'nihil',
'email': 'rfeest@example.net',
'birthdate': '1969-04-23 00:00:00',
'gender': 'F',
'salary': '19949.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 48,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 34,
'user_id': 34,
'line1': '43006 Gaylord Drives\nCummerataville, MA 14032-6378',
'line2': 'Georgia',
'zipcode': '88459',
'mobile': '(877)526-6771',
'fax': '(724)630-5418'
}
},
{
'id': 35,
'name': 'Santina Medhurst MD',
'nickname': 'suscipit',
'email': 'ila24@example.net',
'birthdate': '1965-11-04 00:00:00',
'gender': 'F',
'salary': '36323.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 51,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 35,
'user_id': 35,
'line1': '47345 Imelda Mission Suite 257\nAllyshire, IA 85430-2783',
'line2': 'Gambia',
'zipcode': '26853',
'mobile': '(441)229-8922',
'fax': '(789)908-0620x15912'
}
},
{
'id': 36,
'name': 'Jeff Lehner',
'nickname': 'quo',
'email': 'jarred77@example.com',
'birthdate': '1975-05-18 00:00:00',
'gender': 'F',
'salary': '48462.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 41,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 36,
'user_id': 36,
'line1': '49133 Tremaine Cape Suite 189\nQuitzonview, SC 07967-6920',
'line2': 'Serbia',
'zipcode': '96642',
'mobile': '313.254.8635x06428',
'fax': '194.681.7297x74202'
}
},
{
'id': 37,
'name': 'Samanta Pfeffer',
'nickname': 'officia',
'email': 'fgoyette@example.net',
'birthdate': '1974-08-27 00:00:00',
'gender': 'F',
'salary': '19601.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 42,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 37,
'user_id': 37,
'line1': '1313 Verdie Square\nNorth Giovanna, MI 27962',
'line2': 'Guyana',
'zipcode': '77776',
'mobile': '(321)705-8910',
'fax': '(392)460-5663x665'
}
},
{
'id': 38,
'name': 'Ofelia Torp',
'nickname': 'a',
'email': 'ericka44@example.net',
'birthdate': '1981-09-01 00:00:00',
'gender': 'M',
'salary': '33149.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 35,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 38,
'user_id': 38,
'line1': '45335 Albina View\nCharlottefort, AK 57789',
'line2': 'Afghanistan',
'zipcode': '54947-9310',
'mobile': '09097085723',
'fax': '1-567-446-3094'
}
},
{
'id': 39,
'name': 'Mrs. Margarete Raynor',
'nickname': 'quia',
'email': 'jlegros@example.net',
'birthdate': '1977-03-12 00:00:00',
'gender': 'M',
'salary': '21951.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 40,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 39,
'user_id': 39,
'line1': '288 Hamill Knolls\nMaximoburgh, NC 50971',
'line2': 'Zimbabwe',
'zipcode': '00474',
'mobile': '1-165-445-8956x699',
'fax': '164-395-7526x1304'
}
},
{
'id': 40,
'name': 'Mr. Brant Howell V',
'nickname': 'perspiciatis',
'email': 'franecki.gerald@example.org',
'birthdate': '1964-03-01 00:00:00',
'gender': 'M',
'salary': '41552.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 53,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 40,
'user_id': 40,
'line1': '3411 Deckow Crossing\nVernonport, MI 32272-8542',
'line2': 'Bolivia',
'zipcode': '00960',
'mobile': '(998)729-9537',
'fax': '(606)461-9736'
}
},
{
'id': 41,
'name': 'Reilly Ruecker DVM',
'nickname': 'ad',
'email': 'ldeckow@example.net',
'birthdate': '1975-07-17 00:00:00',
'gender': 'M',
'salary': '22709.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 41,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 41,
'user_id': 41,
'line1': '39181 Runolfsson Pines Apt. 102\nCedrickchester, MD 73430-4755',
'line2': 'Haiti',
'zipcode': '08208-7956',
'mobile': '625-483-9111x773',
'fax': '196-367-9338'
}
},
{
'id': 42,
'name': 'Zachery McDermott',
'nickname': 'molestiae',
'email': 'gladyce84@example.com',
'birthdate': '1992-04-17 00:00:00',
'gender': 'F',
'salary': '32354.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 25,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 42,
'user_id': 42,
'line1': '18735 Quigley Springs\nCarterview, NE 29126-7625',
'line2': 'Chad',
'zipcode': '61676-5075',
'mobile': '172.676.4844x42744',
'fax': '129.383.7365x233'
}
},
{
'id': 43,
'name': 'Heloise Kulas',
'nickname': 'aut',
'email': 'kessler.helen@example.net',
'birthdate': '1962-12-11 00:00:00',
'gender': 'M',
'salary': '45086.00',
'group_id': 5,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 54,
'group': {
'id': 5,
'name': 'Emp',
'description': 'Employees'
},
'address': {
'id': 43,
'user_id': 43,
'line1': '38208 Dolores Turnpike Apt. 887\nWintheiserton, FL 72054-2578',
'line2': 'Lithuania',
'zipcode': '51634-6449',
'mobile': '1-161-626-3235x57765',
'fax': '360-278-9045x9316'
}
},
{
'id': 44,
'name': 'Norma Dibbert',
'nickname': 'amet',
'email': 'eudora36@example.net',
'birthdate': '1971-01-21 00:00:00',
'gender': 'F',
'salary': '15661.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 46,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 44,
'user_id': 44,
'line1': '15405 Haag Haven Suite 047\nBrakusland, WV 81778',
'line2': 'British Virgin Islands',
'zipcode': '56087-0885',
'mobile': '08227730599',
'fax': '1-079-566-2337x670'
}
},
{
'id': 45,
'name': 'Immanuel Auer',
'nickname': 'quia',
'email': 'halvorson.theodora@example.org',
'birthdate': '1978-06-06 00:00:00',
'gender': 'M',
'salary': '15862.00',
'group_id': 3,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 38,
'group': {
'id': 3,
'name': 'Mgr',
'description': 'Managers'
},
'address': {
'id': 45,
'user_id': 45,
'line1': '59888 Dare Ridge\nSouth Annamaeton, CA 94659',
'line2': 'Mexico',
'zipcode': '56689-3824',
'mobile': '523.579.8757x9825',
'fax': '688.695.5156x073'
}
},
{
'id': 46,
'name': 'Lamont Borer',
'nickname': 'expedita',
'email': 'trantow.neoma@example.com',
'birthdate': '1992-06-26 00:00:00',
'gender': 'M',
'salary': '12544.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 24,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 46,
'user_id': 46,
'line1': '974 Brannon Circle Suite 674\nSchroedermouth, NM 66911',
'line2': 'Malawi',
'zipcode': '74027',
'mobile': '887.196.2530x875',
'fax': '220.398.6969'
}
},
{
'id': 47,
'name': 'Brooke Purdy',
'nickname': 'cupiditate',
'email': 'bhermiston@example.net',
'birthdate': '1966-11-19 00:00:00',
'gender': 'M',
'salary': '14457.00',
'group_id': 4,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 50,
'group': {
'id': 4,
'name': 'Sup',
'description': 'Supervisors'
},
'address': {
'id': 47,
'user_id': 47,
'line1': '916 Durgan Harbor\nWest Tonyborough, MN 08368',
'line2': 'Serbia',
'zipcode': '25234',
'mobile': '(821)777-8137x4048',
'fax': '(398)917-7496x84537'
}
},
{
'id': 48,
'name': 'Dr. Leo Dach',
'nickname': 'et',
'email': 'camila.ward@example.com',
'birthdate': '1968-01-11 00:00:00',
'gender': 'F',
'salary': '40278.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 49,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 48,
'user_id': 48,
'line1': '434 Dariana Terrace\nSouth Brettbury, NC 66080-2445',
'line2': 'Latvia',
'zipcode': '81749-2523',
'mobile': '1-988-628-9566x4627',
'fax': '916.932.2071x569'
}
},
{
'id': 49,
'name': 'Krystal Langosh',
'nickname': 'voluptatum',
'email': 'pacocha.yesenia@example.org',
'birthdate': '1983-02-18 00:00:00',
'gender': 'M',
'salary': '9305.00',
'group_id': 2,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 34,
'group': {
'id': 2,
'name': 'Exec',
'description': 'Executives'
},
'address': {
'id': 49,
'user_id': 49,
'line1': '012 Josiane Flats Suite 650\nKatelynntown, MD 70053',
'line2': 'Rwanda',
'zipcode': '75946-8166',
'mobile': '(556)620-0323x81232',
'fax': '1-466-040-3197x6274'
}
},
{
'id': 50,
'name': 'Florence Greenfelder',
'nickname': 'odit',
'email': 'kenyatta.oconnell@example.com',
'birthdate': '1978-08-20 00:00:00',
'gender': 'F',
'salary': '36980.00',
'group_id': 1,
'created_at': '2017-01-01 07:21:10',
'updated_at': '2017-01-01 07:21:10',
'age': 38,
'group': {
'id': 1,
'name': 'Admin',
'description': 'Administrators'
},
'address': {
'id': 50,
'user_id': 50,
'line1': '295 Donna Plaza Apt. 186\nHintzview, GA 44706',
'line2': 'Greenland',
'zipcode': '03127',
'mobile': '1-044-098-3635x9446',
'fax': '1-753-472-6796'
}
}
],
'filterableFields': ['name']
}
src/components/dashboard/data-visualisation-tab/fields-definition.js 0 → 100644
View file @ 3be931bc
export default {
tableFields: [
{
name: '__component:badge-column',
title: '',
dataClass: 'text-center'
},
{
name: 'name',
title: 'user',
sortField: 'name'
},
{
name: 'salary',
title: 'score'
}
],
sortFunctions: {
'name': function (item1, item2) {
return item1 >= item2 ? 1 : -1
}
}
}
src/components/dashboard/features-tab/FeaturesTab.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="overview-tab dashboard-tab">
<div class="d-flex overview-row flex-row w-100 justify-content-sm-around justify-content-xs-start">
<div class="overview-col">
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-vue"></i>
</div>
Built with Vue.js framework
</div>
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-free"></i>
</div>
Absolutely free for everyone
</div>
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-fresh"></i>
</div>
Fresh and crisp design
</div>
</div>
<div class="overview-col">
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-responsive"></i>
</div>
Responsive and optimized for mobile
</div>
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-rich"></i>
</div>
Tons of useful components
</div>
<div class="overview-item">
<div class="overview-icon-container">
<i class="i-vuestic-clean-code"></i>
</div>
Completely jQuery free
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'features-tab'
}
</script>
<style lang="scss" scoped>
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.overview-item {
display: flex;
align-items: center;
height: 55px;
margin-bottom: 3rem;
padding-right: 1rem;
font-size: 1.25rem;
font-weight: bold;
.overview-icon-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
min-width: 85px;
max-width: 85px;
height: 100%;
}
}
.overview-row {
@include media-breakpoint-down(xs) {
flex-wrap: wrap;
}
}
.overview-col:first-child {
margin-left: 2rem;
@include media-breakpoint-down(md) {
margin-left: 0;
}
}
.explore-btn {
margin-top: 6rem;
margin-bottom: 1rem;
}
</style>
src/components/dashboard/setup-profile-tab/SetupProfileTab.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="setup-profile-tab dashboard-tab">
<vuestic-wizard
:steps="steps"
wizard-layout="vertical"
:wizard-type="wizardType">
<div slot="page1" class="form-wizard-tab-content">
<h4>Type your name</h4>
<p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
<div class="form-group with-icon-right" :class="{'has-error': errors.has('name'), 'valid': isFormFieldValid('name')}">
<div class="input-group">
<input
type="text"
name="name"
v-model="name"
v-validate="'required'"
required="required"/>
<i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label">Name</label><i class="bar"></i>
<small v-show="errors.has('name')" class="help text-danger">{{ errors.first('name') }}</small>
</div>
</div>
</div>
<div slot="page2" class="form-wizard-tab-content">
<h4>Select your country</h4>
<p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
<vuestic-simple-select
label="Select country"
v-model="selectedCountry"
name="country"
:required="true"
ref="selectedCountrySelect"
v-bind:options="countriesList">
</vuestic-simple-select>
</div>
<div slot="page3" class="form-wizard-tab-content">
<h4>Confirm selection</h4>
<p>
Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
</p>
</div>
<div slot="wizardCompleted" class="form-wizard-tab-content wizard-completed-tab">
<h4>Wizard completed!</h4>
<p>
Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
</p>
</div>
</vuestic-wizard>
</div>
</template>
<script>
import CountriesList from 'data/CountriesList'
export default {
name: 'setup-profile-tab',
props: {
wizardType: {
default: 'rich'
}
},
data () {
return {
steps: [
{
label: 'Step 1. Name',
slot: 'page1',
onNext: () => {
this.validateFormField('name')
},
isValid: () => {
return this.isFormFieldValid('name')
}
},
{
label: 'Step 2. Country',
slot: 'page2',
onNext: () => {
this.$refs.selectedCountrySelect.validate()
},
isValid: () => {
return this.$refs.selectedCountrySelect.isValid()
}
},
{
label: 'Step 3. Confirm',
slot: 'page3'
}
],
name: '',
selectedCountry: '',
countriesList: CountriesList
}
},
methods: {
isFormFieldValid (field) {
let isValid = false
if (this.formFields[field]) {
isValid = this.formFields[field].validated && this.formFields[field].valid
}
return isValid
},
validateFormField (fieldName) {
this.$validator.validate(fieldName, this[fieldName])
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.form-group {
min-width: 200px;
max-width: 360px;
width: 80%;
}
.wizard-completed-tab {
@include media-breakpoint-up(md) {
margin-top: -$tab-content-pt;
}
}
</style>
src/components/dashboard/users-and-members-tab/UsersMembersTab.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="users-members-tab dashboard-tab">
<div class="row">
<div class="col-md-3 d-flex justify-content-center align-items-center">
<vuestic-profile-card :name="'Veronique Lee'" :location="'Malaga, Spain'" photoSource="http://i.imgur.com/NLrdqsk.png"
:social="{twitter: 'twitter.com', facebook: 'facebook.com',
instagram: 'instagram.com'}">
</vuestic-profile-card>
</div>
<div class="col-md-9 d-flex">
<vuestic-chat v-model="chatMessages"></vuestic-chat>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'users-members-tab',
data () {
return {
chatMessages: [
{
text: 'Hello! So glad you liked my work. Do you want me to shoot you?',
yours: false
},
{
text: 'Yeah, that would be cool. Maybe this Sunday at 3 pm?',
yours: true
},
{
text: 'Sounds great! See you later!',
yours: false
},
{
text: 'Should I bring a lightbox with me?',
yours: true
},
{
text: 'No, thanks. There is no need. Can we set up a meeting earlier?',
yours: false
},
{
text: 'I\'m working on Vuestic, so let\'s meet at 3pm. Thanks!',
yours: true
}
]
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.vuestic-profile-card {
margin-left: 1rem;
@include media-breakpoint-up(md) {
margin-top: -$tab-content-pt;
}
@include media-breakpoint-down(md) {
margin-bottom: $tab-content-pt;
margin-left: 0;
}
}
</style>
src/components/extra/Extra.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="extra">
<vuestic-widget :headerText="'extra.tabs.title' | translate" class="no-v-padding">
<vuestic-tabs class="tabs" :names="[$t('extra.tabs.maps'), $t('extra.tabs.setupProfile'), $t('extra.tabs.overview')]">
<div :slot="'extra.tabs.overview' | translate" class="d-flex justify-content-center">
<overview-tab></overview-tab>
</div>
<div :slot="'extra.tabs.maps' | translate" class="maps-tab">
<leaflet-map></leaflet-map>
</div>
<div :slot="'extra.tabs.setupProfile' | translate" class="d-flex justify-content-center">
<setup-profile-tab wizardType="simple"></setup-profile-tab>
</div>
</vuestic-tabs>
</vuestic-widget>
<div class="row">
<div class="col-md-4 d-flex">
<vuestic-widget :headerText="$t('extra.profileCard')" class="profile-card-widget">
<vuestic-profile-card :name="'Veronique Lee'" :location="'Malaga, Spain'" photoSource="http://i.imgur.com/NLrdqsk.png"
:social="{twitter: 'twitter.com', facebook: 'facebook.com',
instagram: 'instagram.com'}">
</vuestic-profile-card>
</vuestic-widget>
</div>
<div class="col-md-8 d-flex">
<vuestic-widget :headerText="$t('extra.chat')" class="chat-widget">
<vuestic-chat v-model="chatMessages"></vuestic-chat>
</vuestic-widget>
</div>
</div>
<div class="row bottom-widgets">
<div class="col-md-6 d-flex">
<vuestic-widget class="no-h-padding no-v-padding">
<vuestic-feed :initialPosts="posts"></vuestic-feed>
</vuestic-widget>
</div>
<div class="col-md-6 d-flex">
<vuestic-widget class="business-posts">
<vuestic-social-news :news="news" :url="'http://instagram.com/smartapant'"></vuestic-social-news>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import OverviewTab from 'components/dashboard/features-tab/FeaturesTab.vue'
import SetupProfileTab from 'components/dashboard/setup-profile-tab/SetupProfileTab.vue'
import LeafletMap from 'components/maps/leaflet-maps/LeafletMap.vue'
export default {
name: 'extra',
components: {
LeafletMap,
SetupProfileTab,
OverviewTab
},
data () {
return {
chatMessages: [
{
text: 'Hello! So glad you liked my work. Do you want me to shoot you?',
yours: false
},
{
text: 'Yeah, that would be cool. Maybe this Sunday at 3 pm?',
yours: true
},
{
text: 'Sounds great! See you later!',
yours: false
},
{
text: 'Should I bring a lightbox with me?',
yours: true
},
{
text: 'No, thanks. There is no need. Can we set up a meeting earlier?',
yours: false
},
{
text: 'I\'m working on Vuestic, so let\'s meet at 3pm. Thanks!',
yours: true
}
],
posts: [
{
name: 'Irina Myatelskaya',
text: 'joined the network',
photoURL: 'http://i.imgur.com/VuTDC8u.png'
},
{
name: 'Andrei Hrabouski',
text: 'has just started a live video',
photoURL: 'http://i.imgur.com/W3mGrmW.png'
},
{
name: 'Evan You',
text: 'joined the network',
photoURL: 'http://i.imgur.com/D7DOGBH.jpg'
}
],
news: [
{
photoURL: 'http://i.imgur.com/PiTDDcA.png'
},
{
photoURL: 'http://i.imgur.com/M6GugaM.png'
},
{
photoURL: 'http://i.imgur.com/vEy3fRU.png'
},
{
photoURL: 'http://i.imgur.com/Xrywphx.png'
},
{
photoURL: 'http://i.imgur.com/dqVtQGY.png'
},
{
photoURL: 'http://i.imgur.com/qP7rTCy.png'
},
{
photoURL: 'http://i.imgur.com/6YLsM43.png'
},
{
photoURL: 'http://i.imgur.com/9PAOx55.png'
},
{
photoURL: 'http://i.imgur.com/mVpc04D.png'
},
{
photoURL: 'http://i.imgur.com/WdbTSLn.png'
},
{
photoURL: 'http://i.imgur.com/ZXRIHfk.png'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.tabs {
.overview-tab {
.explore-row {
display: none !important;
}
}
.maps-tab {
height: 500px;
}
}
.profile-card-widget, .chat-widget {
width: 100%;
.widget-body {
display: flex;
justify-content: center;
align-items: center;
& > div {
width: 100%;
}
}
}
.bottom-widgets {
> div[class^='col'] {
& > div {
width: 100%;
}
}
}
</style>
src/components/forms/form-elements/FormElements.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-elements">
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.inputs.title' | translate">
<form>
<div class="row">
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<input id="simple-input" required/>
<label class="control-label" for="simple-input">{{'forms.inputs.textInput'
| translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('successfulEmail'), 'valid': isSuccessfulEmailValid}">
<div class="input-group">
<input
id="successfulEmail"
name="successfulEmail"
v-model="successfulEmail"
v-validate="'required|email'"
required/>
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i
class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label" for="successfulEmail">{{'forms.inputs.emailValidatedSuccess'
| translate}} </label><i
class="bar"></i>
<small v-show="errors.has('successfulEmail')"
class="help text-danger">
{{ errors.first('successfulEmail') }}
</small>
</div>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('wrongEmail')}">
<div class="input-group">
<input
id="wrongEmail"
name="wrongEmail"
v-model="wrongEmail"
v-validate="'required|email'"
required/>
<i
class="fa fa-exclamation-triangle icon-right input-icon"
v-show="errors.has('wrongEmail')"></i>
<label class="control-label" for="wrongEmail">{{'forms.inputs.emailValidated'
| translate}}</label><i class="bar"></i>
<small v-show="errors.has('wrongEmail')"
class="help text-danger">{{
errors.first('wrongEmail')
}}
</small>
</div>
</div>
<div class="form-group">
<div class="input-group">
<textarea type="text" id="simple-textarea"
required></textarea>
<label class="control-label" for="simple-textarea">{{'forms.inputs.textArea'
| translate}}</label><i class="bar"></i>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group with-icon-left">
<div class="input-group">
<input id="input-icon-left" name="input-icon-left"
required/>
<i class="fa fa-envelope-o icon-left input-icon"></i>
<label class="control-label" for="input-icon-left">{{'forms.inputs.inputWithIcon'
| translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group with-icon-right">
<div class="input-group">
<input v-model="clearableText" id="clear-input"
name="clear-input" required/>
<i class="fa fa-times icon-right input-icon pointer"
@click="clear('clearableText')"></i>
<label class="control-label" for="clear-input"
role="button">{{'forms.inputs.inputWithClearButton'
| translate}}</label><i
class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="inputWithDescription" required title=""/>
<label class="control-label" for="simple-input">{{'forms.inputs.textInputWithDescription'
| translate}}</label><i
class="bar"></i>
<small class="help text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</small>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group form-group-w-btn">
<div class="input-group">
<input id="input-w-btn" required/>
<label class="control-label" for="input-w-btn">{{'forms.inputs.inputWithButton'
| translate}}</label><i class="bar"></i>
</div>
<div class="btn btn-micro btn-primary">
{{'forms.inputs.upload' | translate}}
</div>
</div>
<div class="form-group form-group-w-btn">
<div class="input-group">
<input id="input-w-btn-round" required/>
<label class="control-label" for="input-w-btn-round">{{'forms.inputs.inputWithRoundButton'
| translate }}</label><i
class="bar"></i>
</div>
<div
class="btn btn-primary btn-with-icon btn-micro rounded-icon">
<div class="btn-with-icon-content">
<i class="ion-md-cloud-outline ion"></i>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('forms.dateTimePicker.title')">
<form>
<div class="row">
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-basic"
v-model="datepicker.simple"
/>
<label class="control-label" for="date-picker-basic">
{{ $t('forms.dateTimePicker.basic') }}
</label>
<i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-time"
:config="{enableTime: true}"
v-model="datepicker.time"
/>
<label class="control-label" for="date-picker-time">
{{ $t('forms.dateTimePicker.time') }}
</label>
<i class="bar"></i>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-disabled"
:config="{disable: datePickerDisabled}"
v-model="datepicker.disabled"
/>
<label class="control-label" for="date-picker-disabled">
{{ $t('forms.dateTimePicker.disabled') }}
</label>
<i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-multiple"
:config="{mode: 'multiple'}"
v-model="datepicker.multiple"
/>
<label class="control-label" for="date-picker-multiple">
{{ $t('forms.dateTimePicker.multiple') }}
</label>
<i class="bar"></i>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-range"
:config="{mode: 'range', inline: true}"
v-model="datepicker.range"
/>
<label class="control-label" for="date-picker-range">
{{ $t('forms.dateTimePicker.range') }}
</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.selects.title' | translate">
<form>
<div class="row">
<div class="col-md-4">
<fieldset>
<vuestic-simple-select
:label="'forms.selects.simple' | translate"
v-model="simpleSelectModel"
option-key="description"
v-bind:options="simpleOptions">
</vuestic-simple-select>
<vuestic-simple-select
:label="'forms.selects.country' | translate"
v-model="chosenCountry"
v-bind:options="countriesList">
</vuestic-simple-select>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<vuestic-multi-select
:label="'forms.selects.multi' | translate"
v-model="multiSelectModel"
option-key="description"
v-bind:options="simpleOptions">
</vuestic-multi-select>
<vuestic-multi-select
:label="'forms.selects.countryMulti' | translate"
v-model="multiSelectCountriesModel"
v-bind:options="countriesList">
</vuestic-multi-select>
</fieldset>
</div>
</div>
</form>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.controls.title' | translate">
<form>
<div class="row">
<div class="col-md-3">
<fieldset>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox1'"
v-model="checkboxOneModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox2'"
v-model="checkboxTwoModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox3'"
:disabled="true"
v-model="checkboxThreeModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox4'"
:disabled="true"
v-model="checkboxFourModel"/>
</fieldset>
</div>
<div class="col-md-3">
<fieldset>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox5'"
:isCircle="true"
v-model="checkboxFiveModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox6'"
:isCircle="true"
v-model="checkboxSixModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox7'"
:disabled="true"
:isCircle="true"
v-model="checkboxSevenModel"/>
<vuestic-checkbox
:label="'forms.controls.subscribe' | translate"
:id="'checkbox8'"
:disabled="true"
:isCircle="true"
v-model="checkboxEightModel"/>
</fieldset>
</div>
<div class="col-md-3">
<fieldset>
<vuestic-radio-button
:label="'forms.controls.radio' | translate"
:id="'radio1'"
:value="'option1'"
:name="'radio'"
v-model="radioModel"/>
<vuestic-radio-button
:label="'forms.controls.radio' | translate"
:id="'radio2'"
:value="'option2'"
:name="'radio'"
v-model="radioModel"/>
</fieldset>
<fieldset>
<vuestic-radio-button
:label="'forms.controls.radioDisabled' | translate"
:id="'radio3'"
:value="'option3'"
:name="'disabled-radio'"
:disabled="true"
v-model="radioDisabledModel"/>
<vuestic-radio-button
:label="'forms.controls.radioDisabled' | translate"
:id="'radio4'"
:value="'option4'"
:name="'disabled-radio'"
:disabled="true"
v-model="radioDisabledModel"/>
</fieldset>
</div>
<div class="col-md-3">
<fieldset>
<vuestic-switch v-model="isMale">
<span
slot="trueTitle">{{'forms.controls.male' | translate}}</span>
<span slot="falseTitle">{{'forms.controls.female' | translate}}</span>
</vuestic-switch>
</fieldset>
</div>
</div>
</form>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import CountriesList from 'data/CountriesList'
export default {
name: 'form-elements',
computed: {
datePickerDisabled: () => [date => !(date.getDate() % 5)],
isSuccessfulEmailValid () {
let isValid = false
if (this.formFields.successfulEmail) {
isValid = this.formFields.successfulEmail.validated && this.formFields.successfulEmail.valid
}
return isValid
},
},
data () {
return {
isMale: true,
countriesList: CountriesList,
chosenCountry: '',
clearableText: '',
successfulEmail: 'andrei@dreamsupport.io',
wrongEmail: 'andrei@dreamsupport',
simpleOptions: [
{
id: 1,
description: 'First option',
},
{
id: 2,
description: 'Second option',
},
{
id: 3,
description: 'Third option',
},
],
simpleSelectModel: '',
multiSelectModel: [],
multiSelectCountriesModel: [],
radioModel: 'option1',
radioDisabledModel: 'option4',
checkboxOneModel: false,
checkboxTwoModel: true,
checkboxThreeModel: false,
checkboxFourModel: true,
checkboxFiveModel: false,
checkboxSixModel: true,
checkboxSevenModel: false,
checkboxEightModel: true,
datepicker: {
simple: '2018-05-09',
time: '2018-05-08 14:10',
range: '2018-05-08 to 2018-05-23',
disabled: '2018-05-09',
multiple: '2018-04-25, 2018-04-27',
},
}
},
methods: {
clear (field) {
this[field] = ''
},
},
created () {
this.$nextTick(() => {
this.$validator.validateAll()
})
},
}
</script>
<style lang="scss">
input[type=checkbox]:disabled + label, input[type=radio]:disabled + label,
input[type=checkbox]:disabled, input[type=radio]:disabled {
cursor: not-allowed;
}
</style>
src/components/forms/form-wizard/FormWizard.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-wizard-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="no-h-padding"
:headerText="$t('forms.wizard.simple')">
<vuestic-wizard
:steps="hsSteps">
<div slot="page1" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('hsName'), 'valid': isFormFieldValid('hsName')}">
<div class="input-group">
<input
name="hsName"
data-vv-as="Name"
v-model="hsName"
v-validate="'required'"
required title=""/>
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label">{{'forms.wizard.name' |
translate}}</label><i class="bar"></i>
<small v-show="errors.has('hsName')" class="help text-danger">
{{ errors.first('hsName') }}
</small>
</div>
</div>
</div>
<div slot="page2" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<vuestic-simple-select
label="Select country"
v-model="hsCountry"
name="country"
:required="true"
ref="hsCountrySelect"
v-bind:options="countriesList">
</vuestic-simple-select>
</div>
<div slot="page3" class="form-wizard-tab-content">
<h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
<div slot="wizardCompleted" class="form-wizard-tab-content">
<h4>{{'forms.wizard.completed' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
</vuestic-wizard>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget class="no-h-padding"
:headerText="$t('forms.wizard.rich')">
<vuestic-wizard
:steps="hrSteps"
wizard-type="rich">
<div slot="page1" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('hrName'), 'valid': isFormFieldValid('hrName')}">
<div class="input-group">
<input
name="hrName"
data-vv-as="Name"
v-model="hrName"
v-validate="'required'"
required title=""/>
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label">{{'forms.wizard.name' |
translate}}</label><i class="bar"></i>
<small v-show="errors.has('hrName')" class="help text-danger">
{{ errors.first('hrName') }}
</small>
</div>
</div>
</div>
<div slot="page2" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<vuestic-simple-select
label="Select country"
v-model="hrCountry"
name="country"
:required="true"
ref="hrCountrySelect"
v-bind:options="countriesList">
</vuestic-simple-select>
</div>
<div slot="page3" class="form-wizard-tab-content">
<h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
<div slot="wizardCompleted" class="form-wizard-tab-content">
<h4>{{'forms.wizard.completed' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
</vuestic-wizard>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('forms.wizard.verticalRich')">
<vuestic-wizard
:steps="vrSteps"
wizard-layout="vertical"
wizard-type="rich">
<div slot="page1" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('vrName'), 'valid': isFormFieldValid('vrName')}">
<div class="input-group">
<input
name="vrName"
data-vv-as="Name"
v-model="vrName"
v-validate="'required'"
required title=""/>
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label">{{'forms.wizard.name' |
translate}}</label><i class="bar"></i>
<small v-show="errors.has('vrName')" class="help text-danger">
{{ errors.first('vrName') }}
</small>
</div>
</div>
</div>
<div slot="page2" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<vuestic-simple-select
label="Select country"
v-model="vrCountry"
name="country"
:required="true"
ref="vrCountrySelect"
v-bind:options="countriesList">
</vuestic-simple-select>
</div>
<div slot="page3" class="form-wizard-tab-content">
<h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
<div slot="wizardCompleted" class="form-wizard-tab-content">
<h4>{{'forms.wizard.completed' | translate}}</h4>
<p>
Zebras communicate with facial expressions and sounds. They make
loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide open
their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back means
trouble, or "you better follow orders!"
</p>
</div>
</vuestic-wizard>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget class="simple-vertical-wizard-widget"
:headerText="$t('forms.wizard.verticalSimple')">
<vuestic-wizard
:steps="vsSteps"
wizard-layout="vertical"
wizard-type="simple">
<div slot="page1" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('vsName'), 'valid': isFormFieldValid('vsName')}">
<div class="input-group">
<input
name="vsName"
data-vv-as="Name"
v-model="vsName"
v-validate="'required'"
required title=""/>
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label">{{'forms.wizard.name' |
translate}}</label><i class="bar"></i>
<small v-show="errors.has('vsName')" class="help text-danger">
{{ errors.first('vsName') }}
</small>
</div>
</div>
</div>
<div slot="page2" class="form-wizard-tab-content">
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
<vuestic-simple-select
label="Select country"
v-model="vsCountry"
name="country"
:required="true"
ref="vsCountrySelect"
v-bind:options="countriesList">
</vuestic-simple-select>
</div>
<div slot="page3" class="form-wizard-tab-content">
<h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
</div>
<div slot="wizardCompleted" class="form-wizard-tab-content">
<h4>{{'forms.wizard.completed' | translate}}</h4>
<div class="form-wizard-tab-content-text">
<p>Zebras communicate with facial expressions and sounds. They
make loud braying or barking sounds and
soft snorting sounds. The position of their ears, how wide
open their eyes are, and whether they show
their teeth all send a signal. For example, ears flat back
means trouble, or "you better follow orders!"</p>
</div>
</div>
</vuestic-wizard>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import CountriesList from 'data/CountriesList'
export default {
name: 'form-wizard',
computed: {
hsSteps () {
return [
{
label: this.$t('forms.wizard.stepOne'),
slot: 'page1',
onNext: () => {
this.validateFormField('hsName')
},
isValid: () => {
return this.isFormFieldValid('hsName')
},
},
{
label: this.$t('forms.wizard.stepTwo'),
slot: 'page2',
onNext: () => {
this.$refs.hsCountrySelect.validate()
},
isValid: () => {
return this.$refs.hsCountrySelect.isValid()
},
},
{
label: this.$t('forms.wizard.stepThree'),
slot: 'page3',
},
]
},
hrSteps () {
return [
{
label: this.$t('forms.wizard.stepOne'),
slot: 'page1',
onNext: () => {
this.validateFormField('hrName')
},
isValid: () => {
return this.isFormFieldValid('hrName')
},
},
{
label: this.$t('forms.wizard.stepTwo'),
slot: 'page2',
onNext: () => {
this.$refs.hrCountrySelect.validate()
},
isValid: () => {
return this.$refs.hrCountrySelect.isValid()
},
},
{
label: this.$t('forms.wizard.stepThree'),
slot: 'page3',
},
]
},
vrSteps () {
return [
{
label: this.$t('forms.wizard.stepOne'),
slot: 'page1',
onNext: () => {
this.validateFormField('vrName')
},
isValid: () => {
return this.isFormFieldValid('vrName')
},
},
{
label: this.$t('forms.wizard.stepTwo'),
slot: 'page2',
onNext: () => {
this.$refs.vrCountrySelect.validate()
},
isValid: () => {
return this.$refs.vrCountrySelect.isValid()
},
},
{
label: this.$t('forms.wizard.stepThree'),
slot: 'page3',
},
]
},
vsSteps () {
return [
{
label: this.$t('forms.wizard.stepOne'),
slot: 'page1',
onNext: () => {
this.validateFormField('vsName')
},
isValid: () => {
return this.isFormFieldValid('vsName')
},
},
{
label: this.$t('forms.wizard.stepTwo'),
slot: 'page2',
onNext: () => {
this.$refs.vsCountrySelect.validate()
},
isValid: () => {
return this.$refs.vsCountrySelect.isValid()
},
},
{
label: this.$t('forms.wizard.stepThree'),
slot: 'page3',
},
]
},
},
data () {
return {
hsName: '',
hsCountry: '',
hrName: '',
hrCountry: '',
vrName: '',
vrCountry: '',
vsName: '',
vsCountry: '',
email: '',
countriesList: CountriesList,
chosenCountry: '',
}
},
methods: {
isFormFieldValid (field) {
let isValid = false
if (this.formFields[field]) {
isValid = this.formFields[field].validated && this.formFields[field].valid
}
return isValid
},
validateFormField (fieldName) {
this.$validator.validate(fieldName, this[fieldName])
},
},
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.widget.simple-vertical-wizard-widget {
.widget-body {
padding: 0 $widget-padding;
@include media-breakpoint-down(sm) {
padding: $widget-padding 0;
}
}
}
.form-wizard-page {
.form-group {
min-width: 200px;
max-width: 360px;
width: 80%;
}
}
.form-wizard-tab-content-text {
width: 100%; // IE11 only
}
</style>
src/components/forms/medium-editor/MediumEditor.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="medium-editor">
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.mediumEditor.title' | translate">
<vuestic-medium-editor @initialized="handleEditorInitialization" :editor-options="editorOptions">
<h1>Girl, no you don’t</h1>
<p>
<i>Every time a straight girl tells me “I wish I was a lesbian”, I want to light myself on fire.</i>
</p>
<p>
Picture it. Walk with me for a second.
</p>
<p>
You enter into your favorite local bar looking <b class="default-selection">good</b> as hell, but you know the only heads you want to turn — spicy & stylish alpha bitches — are heavily
fixated on the D. The hot girl talks to you, but she only wants to be your best friend. Her nonthreatening and attentive best friend. Receiver of sexy
selfies, listener of stories. Meanwhile, you attract unwanted attention from straight men, pudgy and greasy moths to your emotionally distant flame.
</p>
<h3>
The only place you can go out and feel desired is a <i>lesbian</i> party. There is a reason lesbian bars no longer exist. Women aren’t taught to approach each
other. We’re taught to cross our arms and judge. You worry about the shape of your eyebrows now? The stage of your roots? You haven’t felt fully judged
until you’ve been in a room full of scowling women who want to fuck each other.
</h3>
<p>
For years, your friends, family members, and medical professionals will doubt your continued homosexual confessions. They will tell you that you “haven’t
met the right man.” Sex with women is fine. That’s allowed. You can be “experimental,” a titillating object of the male gaze. You can be fluid. But you
want to partner with a woman? No no. You must be mistaken. You tend to believe them, because you’ve been conditioned to disbelieve yourself, to instead
defer to the voices of others.
</p>
<p>
You will experience years of confusion about your sexuality, because you haven’t been taught to prioritize your own sexual desire. None of your female
friends orgasm anyway. And if they do, it’s definitely not from penetration. Everyone’s a little in love with their best friend, right? Maybe you just
haven’t met the right man.
</p>
<p>
The word “crazy” continues to come up whenever you discuss your love life, because mainstream society still associates lesbian love with mental
instability. If you’re femme-presenting, you will hear wildly homophobic statements in your presence. You will hear people opine about single brothers,
cousins, uncles who are “obviously gay,” which doesn’t bother you. But then you’ll hear them mention their unhinged friend, about whom they express a
performative concern, tinged with excitement: “She went to rehab and then she dated a woman…. That’s just Crazy Carrie for you!”
</p>
<p>
A family member to tell you that your your “alarming lifestyle” has required them to seek therapy. Your mom will tell you that she “supports you no
matter what” but that it would be “much easier for everyone if you dated a man.” Your love life will become a burden, something that frightens people.
You will go to the Deep South for the holidays and your Grandmother will quite literally scream when you confirm her suspicions that you do, in fact,
have a girlfriend...
</p>
<p>
Read full article on <a href="https://medium.com/@dorn.anna/girl-no-you-dont-2e21e826c62c">Medium</a>
</p>
</vuestic-medium-editor>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'medium-editor',
data () {
return {
editor: {},
editorOptions: {
buttonLabels: 'fontawesome',
autoLink: true,
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'anchor',
'h1',
'h2',
'h3'
]
}
}
}
},
methods: {
handleEditorInitialization (editor) {
this.editor = editor
this.$nextTick(() => {
this.highlightSampleText()
})
},
highlightSampleText () {
let sampleText = document.getElementsByClassName('default-selection')[0]
this.editor.selectElement(sampleText)
}
}
}
</script>
<style lang="scss">
</style>
src/components/layout/AuthLayout.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="auth-layout">
<div class="nav d-lg-none"><router-link class="i-vuestic" :to="{path: '/auth/login'}"></router-link></div>
<div class="main row">
<div class="auth-content col-lg-6 col-12">
<router-view></router-view>
</div>
<div class="auth-wallpaper col-6 d-none d-lg-flex">
<div class="oblique"></div>
<router-link class="i-vuestic" :to="{path: '/auth/login'}"></router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AuthLayout'
}
</script>
<style lang="scss">
@import '../../sass/variables';
@import '~bootstrap/scss/mixins/breakpoints';
@import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables';
.auth-layout {
height: 100vh;
margin: 0;
.nav {
display: flex;
align-items: center;
justify-content: center;
height: $top-mobile-nav-height;
background-color: $top-nav-bg;
.i-vuestic {
height: $auth-mobile-nav-ivuestic-h;
width: 100%;
}
}
.main {
margin: 0;
height: 100%;
.auth-content {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.auth-wallpaper {
background-color: $top-nav-bg;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.i-vuestic {
z-index: 2;
height: $auth-wallpaper-ivuestic-h;
width: 100%;
}
.oblique {
position: absolute;
background-color: $auth-wallpaper-oblique-line;
left: calc(50% - 27%/2);
transform: rotate(15deg);
width: 27%;
height: 115%;
}
}
}
@include media-breakpoint-down(md) {
.main {
height: $auth-mobile-main-h;
.auth-content {
align-items: flex-start;
padding-top: $auth-content-padding-t;
}
}
}
}
</style>
src/components/layout/Layout.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="layout" :class="classObject" v-resize>
<navbar></navbar>
<sidebar></sidebar>
<div class="content-wrap" id="content-wrap">
<main id="content" class="content" role="main">
<vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
<vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
<router-view v-show="!isLoading"></router-view>
</main>
</div>
<div class="made-by-footer">
©2018. Made by&nbsp;<a href="https://tourpaq.com/" target="_blank">Tourpaq ApS </a>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import Navbar from './navbar/Navbar'
import Sidebar from './sidebar/Sidebar'
import Resize from 'directives/ResizeHandler'
export default {
name: 'layout',
components: {
Navbar,
Sidebar
},
directives: {
resize: Resize
},
props: {
fixed: {
type: Boolean,
default: false,
}
},
computed: {
...mapGetters([
'sidebarOpened',
'toggleWithoutAnimation',
'isLoading'
]),
classObject: function () {
return {
'layout-fixed': this.fixed,
'sidebar-hidden': !this.toggleWithoutAnimation && !this.sidebarOpened,
'sidebar-hidden sidebar-hidden_without-animation': this.toggleWithoutAnimation && !this.sidebarOpened
}
},
breadcrumbs () {
return this.$store.getters.breadcrumbs(this.$route.name)
},
}
}
</script>
<style lang="scss">
@import "../../sass/_variables.scss";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.layout {
&-fixed {
.content-wrap {
padding-right: $layout-padding-right;
padding-top: $sidebar-top;
@include media-breakpoint-down(md) {
padding: $content-mobile-wrap-fixed-layout;
margin-left: 0;
}
}
}
}
.content-wrap {
margin-left: $content-wrap-ml;
transition: margin-left 0.3s ease;
padding-right: $layout-padding-right;
padding-top: $layout-padding;
padding-bottom: $content-wrap-pb;
.pre-loader {
position: absolute;
left: $vuestic-preloader-left;
top: $vuestic-preloader-top;
}
.sidebar-hidden & {
margin-left: $sidebar-left;
}
@include media-breakpoint-down(md) {
padding: $content-mobile-wrap;
margin-left: 0;
.sidebar-hidden & {
margin-left: 0;
padding-top: $content-mobile-wrap-sb-top;
}
}
}
.made-by-footer {
padding-top:25px;
position: absolute;
bottom: 0;
padding-bottom: $made-by-footer-pb;
height: calc(#{$layout-padding} + #{$widget-mb});
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/components/layout/navbar/LanguageSelector.vue 0 → 100644
View file @ 3be931bc
<template>
</template>
<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
export default {
name: 'language-selector',
props: {
options: {
type: Array,
required: true
}
},
methods: {
...mapActions(['closeMenu']),
setLanguage (locale) {
Vue.i18n.set(locale)
},
currentLanguage () {
return Vue.i18n.locale() === 'en' ? 'gb' : Vue.i18n.locale()
},
flagIconClass (code) {
return `flag-icon-${code}`
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.language-selector {
display: flex;
max-width: 100%;
height: 100%;
padding: 0;
flex-basis: 0;
flex-grow: 1;
align-items: center;
justify-content: center;
.language-selector-button {
display: flex;
align-items: center;
justify-content: center;
}
.flag-icon-large {
width: 31px;
height: 23px;
}
.flag-icon-small {
min-width: 22px;
height: 17px;
}
.dropdown-toggle {
padding: 0;
&:after {
display: none;
}
}
&.show {
&:after {
position: absolute;
right: calc(50% - 10px);
bottom: -$dropdown-mobile-show-b;
display: block;
width: 0;
height: 0;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $darkest-gray;
z-index: 2;
}
.dropdown-menu {
left: auto;
margin-top: $dropdown-mobile-show-b;
&.last {
right: 0;
}
@include media-breakpoint-up(lg) {
right: auto;
left: 12px;
margin-top: 12px;
}
}
}
.dropdown-menu {
min-width: 8rem;
max-width: 11rem;
margin-top: $dropdown-show-b;
padding: 0;
background-color: $dropdown-background;
box-shadow: $dropdown-box-shadow;
@include media-breakpoint-up(lg) {
top: 42px;
}
}
.dropdown-item {
display: flex;
align-items: center;
height: 38px;
padding: 9px 12px;
&.active {
color: $vue-green;
background-color: $darkest-gray;
}
&:hover {
background-color: $almost-black;
}
&:last-child {
padding-top: 8px;
padding-bottom: 10px;
}
}
.dropdown-item-text {
padding-left: 12px;
font-size: $font-size-base;
line-height: 1.25;
}
}
</style>
src/components/layout/navbar/Navbar.vue 0 → 100644
View file @ 3be931bc
<template>
<nav class="navbar app-navbar navbar-toggleable-md">
<div class="navbar-brand-container d-flex align-items-center justify-content-start">
<router-link class="navbar-brand" to="/dashboard">
<i class="i-vuestic"></i>
</router-link>
</div>
<div class="row navbar-container">
<div class="menu-icon-container d-flex align-items-center justify-content-center justify-content-lg-start col">
<a class="menu-icon i-menu-expanded" href="#" @click.prevent="toggleSidebar(false)" v-if="sidebarOpened"></a>
<a class="menu-icon i-menu-collapsed" href="#" @click.prevent="toggleSidebar(true)" v-else></a>
</div>
<language-selector :options="langs"></language-selector>
<div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
<a class="nav-link dropdown-toggle d-flex align-items-center justify-content" style="position:absolute;right:0;" href="#"
@click.prevent="closeMenu">
<span class="avatar-container">
<img src="http://i.imgur.com/nfa5itq.png"/>
</span>
</a>
<div class="dropdown-menu last">
<div class="dropdown-menu-content">
<div class="dropdown-item plain-link-item">
<a class="plain-link" href="#">{{'user.profile' | translate}}</a>
</div>
<div class="dropdown-item plain-link-item">
<a class="plain-link" href="javascript:;" v-on:click="logout">{{'user.logout' | translate}}</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import LanguageSelector from './LanguageSelector'
import store from '@/store'
import router from '@/router'
export default {
name: 'navbar',
components: {
LanguageSelector
},
store,
router,
data () {
return {
langs: [
{
code: 'gb',
name: 'english'
},
{
code: 'es',
name: 'spanish'
}
]
}
},
computed: {
...mapGetters([
'sidebarOpened',
'toggleWithoutAnimation'
])
},
methods: {
...mapActions([
'closeMenu',
'toggleSidebar',
'isToggleWithoutAnimation'
]),
logout: () => {
store.dispatch('LOGOUT')
router.go(0)
}
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.navbar {
.layout-fixed & {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
}
.navbar.app-navbar {
.navbar-container {
width: 100%;
height: 100%;
margin: 0;
}
height: $top-nav-height;
padding-left: $nav-padding-left;
padding-right: $nav-padding-right;
background-color: $top-nav-bg;
.avatar-container {
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
border: 2px solid $lighter-gray;
overflow: hidden;
img {
height: 100%;
width: 100%;
}
}
.menu-icon-container {
padding: 0;
font-size: $font-size-base;
}
.navbar-brand-container {
position: absolute;
z-index: 3;
height: 100%;
left: $navbar-brand-container-left;
top: 0;
}
.nav-item {
padding: 0;
height: 100%;
}
.dropdown.navbar-dropdown {
.dropdown-toggle {
padding: 0;
&:after {
display: none;
}
}
&.show {
@include media-breakpoint-up(lg) {
.dropdown-menu {
left: auto;
right: 0;
}
}
&:after {
position: absolute;
bottom: -$dropdown-show-b;
right: calc(50% - 10px);
width: 0;
height: 0;
display: block;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $darkest-gray;
}
}
.dropdown-menu {
margin-top: $dropdown-show-b;
padding-top: 0;
width: 100%;
}
.dropdown-item {
height: $navbar-dd-item-height;
cursor: pointer;
font-size: $font-size-base;
&:hover, &:active, &:focus, &.active {
outline: none;
}
&.plain-link-item {
color: $brand-primary;
&:hover, &:active, &:focus {
background: $dropdown-background;
}
.plain-link {
text-decoration: none;
}
}
}
}
.notify {
position: relative;
&::after {
content: '';
position: absolute;
right: -6px;
top: -6px;
background-color: $brand-primary;
height: 12px;
width: 12px;
border-radius: 50%;
}
}
.i-nav-notification.notify::after {
right: -4px;
top: 0;
}
@include media-breakpoint-down(md) {
height: $top-mobile-nav-height;
padding: $nav-mobile-pt $nav-mobile-padding-h $nav-mobile-pb $nav-mobile-padding-h;
.navbar-brand-container {
width: $nav-mobile-brand-width;
top: $nav-mobile-brand-top;
left: $nav-mobile-brand-left;
height: auto;
.navbar-brand {
height: $font-size-smaller;
padding: 0;
font-size: $font-size-smaller;
}
}
.dropdown.navbar-dropdown {
&.show {
display: flex;
&:after {
bottom: -$dropdown-mobile-show-b;
z-index: 2;
}
.dropdown-menu {
margin-top: $dropdown-mobile-show-b;
left: auto;
&.last {
right: 0;
}
}
}
}
}
}
</style>
src/components/layout/sidebar/Sidebar.vue 0 → 100644
View file @ 3be931bc
<template>
<aside class="sidebar">
<vuestic-scrollbar>
<ul class="sidebar-menu">
<li v-for="(item, index) in menuItems" :key="item.name">
<router-link
class="sidebar-link"
:to="item.path"
:target="item.meta.newWindow ? '_blank' : '_self'"
@click="toggleMenuItem(item)"
v-if="item.path">
<i class="sidebar-menu-item-icon" v-bind:class="item.meta.iconClass"></i>
{{item.meta.title | translate}}
</router-link>
<a href="#"
@click.prevent="toggleMenuItem(item)"
class="sidebar-link"
v-bind:class="{expanded: item.meta.expanded}"
v-else>
<i class="sidebar-menu-item-icon" v-bind:class="item.meta.iconClass"></i>
{{item.meta.title | translate}}
<i class="expand-icon fa fa-angle-down"></i>
</a>
<expanding>
<ul class="sidebar-submenu in" v-show="item.meta.expanded">
<li v-for="childItem in item.children" :key="childItem.name">
<router-link
class="sidebar-link sidebar-submenu-link"
:to="childItem.path"
:target="childItem.meta.newWindow ? '_blank' : '_self'">
<i class="sidebar-menu-item-icon"
v-bind:class="childItem.meta.iconClass"
v-if="childItem.meta.iconClass"
></i>
{{childItem.meta.title | translate}}
</router-link>
</li>
</ul>
</expanding>
</li>
</ul>
</vuestic-scrollbar>
</aside>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import Expanding from 'vue-bulma-expanding/src/Expanding'
export default {
name: 'sidebar',
components: {
Expanding
},
methods: {
...mapActions({
expand: 'toggleExpandMenuItem'
}),
toggleMenuItem (item) {
if (item.children) {
this.expand({ // TODO: check default prop
menuItem: item,
expand: !item.meta.expanded
})
}
}
},
computed: {
...mapGetters({
'menuItems': 'menuItems'
})
},
watch: {
$route (route) {
let parent = _findMatchingParentMenuItem.call(this, route.name) || {}
this.menuItems.forEach((item) => {
this.expand({
menuItem: item,
expand: parent.name === item.name
})
})
}
},
data () {
return {
show: false
}
}
}
function _findMatchingParentMenuItem (itemName) {
let parentItem
this.menuItems.forEach((item) => {
parentItem = (item.children && item.children.find((child) => child.name === itemName)) ? item : parentItem
})
return parentItem
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.sidebar {
@include media-breakpoint-down(md) {
top: $sidebar-mobile-top;
left: $sidebar-mobile-left;
width: $sidebar-mobile-width;
z-index: $sidebar-mobile-z-index;
}
height: $sidebar-viewport-height;
.vuestic-scrollbar {
height: 100%;
.scrollbar-wrapper {
box-shadow: $sidebar-box-shadow;
}
.scrollbar-content {
background: $sidebar-bg;
}
}
position: absolute;
width: $sidebar-width;
top: $sidebar-top;
left: $sidebar-left;
transition: all 0.2s ease;
opacity: 1;
.sidebar-hidden_without-animation & {
transition: none;
}
.sidebar-hidden & {
@include media-breakpoint-down(md) {
top: $sidebar-hidden-top-mobile;
opacity: 0;
z-index: $sidebar-mobile-z-index;
height: $sidebar-hidden-height-mobile;
}
top: $sidebar-hidden-top;
opacity: 0;
z-index: $min-z-index;
}
.layout-fixed & {
position: fixed;
}
.sidebar-link {
position: relative;
height: $sidebar-link-height;
padding-left: $sidebar-link-pl;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
text-decoration: none;
&.router-link-active,
&:hover {
color: $white;
background-color: $sidebar-link-active-bg;
.sidebar-menu-item-icon,
.expand-icon {
color: $white;
}
}
.expand-icon {
position: absolute;
right: $sidebar-arrow-right;
top: calc(50% - #{$font-size-root} / 2);
font-weight: bold;
transition: transform 0.3s ease;
}
&.expanded {
.expand-icon {
transform: rotate(180deg);
}
}
.sidebar-menu-item-icon {
font-size: $sidebar-menu-item-icon-size;
color: $vue-green;
margin-right: 14px;
&.fa-dashboard {
/* Temp fix */
position: relative;
top: -2px;
}
}
}
.sidebar-submenu-link {
height: $sidebar-submenu-link-height;
}
.sidebar-menu,
.sidebar-submenu {
list-style: none;
padding-left: 0;
li {
display: block;
padding-left: 0;
}
}
.sidebar-submenu {
.sidebar-link {
padding-left: $sidebar-submenu-link-pl;
font-size: $font-size-smaller;
}
}
.sidebar-menu {
max-height: 100%;
margin-bottom: 0;
}
.expand-icon {
color: $vue-green;
}
a {
color: $white;
text-decoration: none;
}
}
</style>
src/components/maps/bubble-maps/BubbleMap.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="bubble-map"></div>
</template>
<script>
import 'amcharts3'
import 'amcharts3/amcharts/plugins/responsive/responsive.js'
import 'amcharts3/amcharts/serial.js'
import 'amcharts3/amcharts/themes/light'
import 'ammap3'
import 'ammap3/ammap/maps/js/worldLow'
export default {
name: 'bubble-map',
props: ['mapData'],
methods: {
drawMap () {
/* global AmCharts */
let map
let minBulletSize = 3
let maxBulletSize = 70
let min = Infinity
let max = -Infinity
AmCharts.theme = AmCharts.themes.light
// get min and max values
this.mapData.data.forEach((dataItem) => {
let value = dataItem.value
if (value < min) {
min = value
}
if (value > max) {
max = value
}
})
// build map
map = new AmCharts.AmMap()
map.projection = 'winkel3'
map.addTitle('Population of the World in 2011', 14, 1, 1, false)
map.addTitle('source: Gapminder', 11, 1, 1, 1, false)
map.areasSettings = {
unlistedAreasColor: '#eee',
unlistedAreasAlpha: 1,
outlineColor: '#fff',
outlineThickness: 2
}
map.imagesSettings = {
balloonText: '<span style="font-size:14px"><b>[[title]]</b>: [[value]]</span>',
alpha: 0.75
}
let dataProvider = {
mapVar: AmCharts.maps.worldLow,
images: []
}
// create circle for each country
// it's better to use circle square to show difference between values, not a radius
var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI
// create circle for each country
this.mapData.data.forEach((dataItem) => {
var value = dataItem.value
// calculate size of a bubble
var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare
if (square < minSquare) {
square = minSquare
}
var size = Math.sqrt(square / (Math.PI * 2))
var id = dataItem.code
dataProvider.images.push({
type: 'circle',
width: size,
height: size,
color: dataItem.color,
longitude: this.mapData.latlong[id].longitude,
latitude: this.mapData.latlong[id].latitude,
title: dataItem.name,
value: value
})
})
map.dataProvider = dataProvider
map.write(this.$el)
}
},
mounted () {
this.drawMap()
}
}
</script>
<style lang='scss'>
@import '../../../sass/_variables.scss';
@import '~ammap3/ammap/ammap.css';
.bubble-map {
height: 100%;
}
</style>
src/components/maps/bubble-maps/BubbleMapsPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="bubble-maps-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="widget-viewport-height" headerText="Bubble Maps">
<bubble-map v-bind:map-data="bubbleMapData"></bubble-map>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import BubbleMap from './BubbleMap'
import BubbleMapData from 'data/maps/BubbleMapData'
export default {
name: 'bubble-maps-page',
components: {
BubbleMap
},
data: function () {
return {
bubbleMapData: BubbleMapData
}
}
}
</script>
<style lang="scss">
</style>
src/components/maps/google-maps/GoogleMap.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="google-map">
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as GoogleMapsLoader from 'google-maps'
export default {
name: 'google-map',
computed: mapGetters({
config: 'config'
}),
mounted () {
GoogleMapsLoader.KEY = this.config.googleMaps.apiKey
GoogleMapsLoader.load((google) => {
/* eslint-disable no-new */
new google.maps.Map(this.$el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
})
})
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.google-map {
height: 100%;
}
</style>
src/components/maps/google-maps/GoogleMapsPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="google-maps-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="widget-viewport-height" headerText="Google Maps">
<google-map></google-map>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import GoogleMap from './GoogleMap'
export default {
name: 'google-maps-page',
components: {
GoogleMap
}
}
</script>
<style lang="scss">
</style>
src/components/maps/leaflet-maps/LeafletMap.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="leaflet-map">
</div>
</template>
<script>
import 'leaflet-map'
import * as L from 'leaflet'
export default {
name: 'leaflet-map',
mounted () {
// L.Icon.Default.imagePath = 'assets/vendor/leaflet' TODO: make it work with webpack
L.Icon.Default.imagePath = 'https://unpkg.com/leaflet@1.0.3/dist/images'
var map = L.map(this.$el).setView([51.505, -0.09], 13)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup()
}
}
</script>
<style lang="scss">
@import "~leaflet/dist/leaflet.css";
@import "../../../sass/_variables.scss";
.leaflet-map {
height: 100%;
}
</style>
src/components/maps/leaflet-maps/LeafletMapsPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="google-maps-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="widget-viewport-height" headerText="Leaflet Maps">
<leaflet-map></leaflet-map>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import LeafletMap from './LeafletMap'
export default {
name: 'leaflet-maps-page',
components: {
LeafletMap
}
}
</script>
<style lang="scss">
</style>
src/components/maps/line-maps/LineMap.vue 0 → 100644
View file @ 3be931bc
<template>
<div class='line-map'>
Line Map
</div>
</template>
<script>
import 'amcharts3'
import 'amcharts3/amcharts/plugins/responsive/responsive.js'
import 'amcharts3/amcharts/serial.js'
import 'amcharts3/amcharts/themes/light'
import 'ammap3'
import 'ammap3/ammap/maps/js/worldLow'
export default {
name: 'line-map',
props: ['mapData'],
methods: {
drawMap () {
/* global AmCharts */
let map
map = new AmCharts.AmMap()
let dataProvider = {
mapVar: AmCharts.maps.worldLow
}
map.areasSettings = {
unlistedAreasColor: '#eee',
unlistedAreasAlpha: 1,
outlineColor: '#fff',
outlineThickness: 2
}
map.imagesSettings = {
color: '#6bbfe4',
rollOverColor: '#6bbfe4',
selectedColor: '#6be59c'
}
map.linesSettings = {
color: '#6bbfe4',
alpha: 0.4
}
dataProvider.linkToObject = this.mapData.mainCity
dataProvider.images = this.mapData.cities
map.dataProvider = dataProvider
map.backgroundZoomsToTop = true
map.linesAboveImages = true
map.write(this.$el)
}
},
mounted () {
this.drawMap()
}
}
</script>
<style lang='scss'>
@import '../../../sass/_variables.scss';
@import '~ammap3/ammap/ammap.css';
.line-map {
height: 100%;
}
</style>
src/components/maps/line-maps/LineMapsPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="bubble-maps-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="widget-viewport-height" headerText="Line Maps">
<line-map v-bind:map-data="lineMapData"></line-map>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import LineMap from './LineMap'
import LineMapData from 'data/maps/LineMapData'
export default {
name: 'line-maps-page',
components: {
LineMap
},
data: function () {
return {
lineMapData: LineMapData
}
}
}
</script>
<style lang="scss">
</style>
src/components/maps/yandex-maps/YandexMapsPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="yandex-maps-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="widget-viewport-height" headerText="Yandex Maps">
<yandex-map
:use-object-manager:="true"
:coords="[55.8, 37.8]"
:zoom="8"
style="width: 100%; height: 100%"
:behaviors="['default']"
:controls="['trafficControl','zoomControl', 'geolocationControl','fullscreenControl', 'searchControl']"
:placemarks="placemarks"
map-type="hybrid" >
</yandex-map>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
export default {
name: 'yandex-maps-page',
components: {
yandexMap,
ymapMarker
},
data () {
return {
placemarks: [
{
coords: [54.8, 39.8],
properties: {},
options: {},
clusterName: '1',
balloonTemplate: '<div>"Your custom template"</div>',
callbacks: { click: function () {} }
}
]
}
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.yandex-maps-page {
height: 100%;
position: relative;
overflow: hidden;
}
</style>
src/components/statistics/charts/Charts.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="charts-page">
<div class="row">
<div class="col-md-6">
<vuestic-widget class="chart-widget" :headerText="'charts.verticalBarChart' | translate">
<vuestic-chart :data="verticalBarChartData" type="vertical-bar"></vuestic-chart>
</vuestic-widget>
</div>
<div class="col-md-6">
<vuestic-widget class="chart-widget" :headerText="'charts.horizontalBarChart' | translate">
<vuestic-chart :data="horizontalBarChartData" type="horizontal-bar"></vuestic-chart>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget class="chart-widget" :headerText="'charts.lineChart' | translate">
<vuestic-chart :data="lineChartData" type="line"></vuestic-chart>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-6">
<vuestic-widget class="chart-widget" :headerText="'charts.pieChart' | translate">
<vuestic-chart :data="pieChartData" type="pie"></vuestic-chart>
</vuestic-widget>
</div>
<div class="col-md-6">
<vuestic-widget class="chart-widget" :headerText="'charts.donutChart' | translate">
<vuestic-chart :data="donutChartData" type="donut"></vuestic-chart>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget class="chart-widget" :headerText="'charts.bubbleChart' | translate">
<vuestic-chart :data="bubbleChartData" type="bubble"></vuestic-chart>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import LineChartData from 'data/charts/LineChartData'
import BubbleChartData from 'data/charts/BubbleChartData'
import PieChartData from 'data/charts/PieChartData'
import DonutChartData from 'data/charts/DonutChartData'
import VerticalBarChartData from 'data/charts/VerticalBarChartData'
import HorizontalBarChartData from 'data/charts/HorizontalBarChartData'
export default {
name: 'charts',
data: function () {
return {
bubbleChartData: BubbleChartData,
lineChartData: LineChartData,
pieChartData: PieChartData,
donutChartData: DonutChartData,
verticalBarChartData: VerticalBarChartData,
horizontalBarChartData: HorizontalBarChartData
}
},
}
</script>
<style lang="scss">
.widget.chart-widget {
.widget-body {
height: 550px;
}
}
</style>
src/components/statistics/progress-bars/ProgressBars.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="progress-bars">
<div class="row">
<div class="col-md-12">
<standard-bars/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<colorful-bars/>
</div>
</div>
</div>
</template>
<script>
import ColorfulBars from './Widgets/ColorfulBars'
import StandardBars from './Widgets/StandardBars'
export default {
name: 'progress-bars',
components: { StandardBars, ColorfulBars },
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "../../../sass/mixins";
// HACK Shouldn't be here.
.progress-bars {
.vuestic-progress-bar {
.progress.thick {
margin-top: calc(#{$progress-bar-width-thick} / 2 - .125rem);
}
.progress.thin {
margin-top: .125rem;
}
}
.vertical, .circle {
margin-top: 1.25rem;
margin-left: .125rem;
}
}
</style>
src/components/statistics/progress-bars/Widgets/ColorfulBars.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-widget headerText="Colorful Bars">
<div class="row">
<div class="col-sm-4 col-12">
{{'progressBars.basic' | translate}}
<div class="pb-container">
<vuestic-progress-bar ref="chBasic" colorName="danger"/>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thin' | translate}}
<div class="pb-container">
<vuestic-progress-bar size="thin" ref="chThin" colorName="info"/>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thick' | translate}}
<div class="pb-container">
<vuestic-progress-bar size="thick" ref="chThick" colorName="warning"/>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.basicVertical' | translate}}
<div class="pb-container">
<div>
<vuestic-progress-bar type="vertical" ref="cvBasic"
colorName="success"/>
</div>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thinVertical' | translate}}
<div class="pb-container">
<vuestic-progress-bar size="thin" type="vertical" ref="cvThin"
colorName="black"/>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.circle' | translate}}
<div class="pb-container">
<vuestic-progress-bar type="circle" ref="ccircle"/>
</div>
</div>
</div>
</vuestic-widget>
</template>
<script>
export default {
name: 'standard-bars',
mounted () {
for (let ref in this.$refs) {
this.$refs[ref].value = 100
}
},
}
</script>
src/components/statistics/progress-bars/Widgets/StandardBars.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-widget headerText="Progress Bars">
<div class="row">
<div class="col-sm-4 col-12">
{{'progressBars.basic' | translate}}
<div class="pb-container">
<vuestic-progress-bar ref="hBasic">
</vuestic-progress-bar>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thin' | translate}}
<div class="pb-container">
<vuestic-progress-bar size="thin" ref="hThin">
</vuestic-progress-bar>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thick' | translate}}
<div class="pb-container">
<vuestic-progress-bar size="thick" ref="hThick">
</vuestic-progress-bar>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.basicVertical' | translate}}
<div class="pb-container">
<div>
<vuestic-progress-bar type="vertical"
ref="vBasic"></vuestic-progress-bar>
</div>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.thinVertical' | translate}}
<div>
<vuestic-progress-bar size="thin" type="vertical" ref="vThin">
</vuestic-progress-bar>
</div>
</div>
<div class="col-sm-4 col-12">
{{'progressBars.circle' | translate}}
<div>
<vuestic-progress-bar type="circle"
ref="circle"></vuestic-progress-bar>
</div>
</div>
</div>
</vuestic-widget>
</template>
<script>
export default {
name: 'standard-bars',
data () {
return {
valueAnimationInterval: 3000
}
},
mounted () {
let delay = 0
for (let ref in this.$refs) {
this.$refs[ref].$data.valueAnimationInterval = this.valueAnimationInterval
let timeout = setTimeout(() => {
if (!this.$refs[ref]) {
clearTimeout(timeout)
return
}
this.$refs[ref].$data.value = 100
}, delay)
delay += this.valueAnimationInterval
}
},
}
</script>
src/components/tables/BadgeColumn.vue 0 → 100644
View file @ 3be931bc
<template>
<span class="circle" :class="classObject"></span>
</template>
<script>
export default {
name: 'badgeColumn',
props: {
rowData: {
type: Object,
required: true
},
rowIndex: {
type: Number
}
},
computed: {
classObject: function () {
return {
'badge-warning': this.rowIndex % 6 === 0,
'badge-primary': this.rowIndex % 6 === 1,
'badge-danger': this.rowIndex % 6 === 2,
'badge-info': this.rowIndex % 6 === 3,
'badge-violet': this.rowIndex % 6 === 4,
'badge-dark-blue': this.rowIndex % 6 === 5
}
}
}
}
</script>
<style lang="scss" scoped>
.circle {
width: .75rem;
height: .75rem;
border-radius: 50%;
display: inline-block;
}
</style>
src/components/tables/Table.vue 0 → 100644
View file @ 3be931bc
<template>
<div>
<div class="row">
<div class="col-xs-12 col-md-12">
<vuestic-widget :headerText="$t('tables.basic')">
<div class="table-responsive">
<table class="table table-striped first-td-padding">
<thead>
<tr>
<td>{{'tables.headings.name' | translate}}</td>
<td>{{'tables.headings.email' | translate}}</td>
<td>{{'tables.headings.city' | translate}}</td>
<td align="right">{{'tables.headings.score' | translate}}</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>Matthew McCormick</td>
<td>matthew30@mail.ol</td>
<td>Vancouver</td>
<td align="right">93</td>
<td></td>
</tr>
<tr>
<td>Nancy Bo</td>
<td>nancy@boonweb.com</td>
<td>Washington</td>
<td align="right">280</td>
<td></td>
</tr>
<tr>
<td>Frederiko Lopez</td>
<td>fr.lopez@webmail.sp</td>
<td>Barcelona</td>
<td align="right">16</td>
<td></td>
</tr>
<tr>
<td>Stanley Hummer</td>
<td>mr_winner_2999@gmail.cb</td>
<td>Manchester</td>
<td align="right">57</td>
<td></td>
</tr>
<tr>
<td>Lendley Wintz</td>
<td>9938198146@mailster.io</td>
<td>Wien</td>
<td align="right">113</td>
<td></td>
</tr>
<tr>
<td>Barbara Noz</td>
<td>barbaranoz@mailster.io</td>
<td>Brussels</td>
<td align="right">68</td>
<td></td>
</tr>
<tr>
<td>Matthew McCormick</td>
<td>matthew30@mail.ol</td>
<td>Vancouver</td>
<td align="right">93</td>
<td></td>
</tr>
<tr>
<td>Nancy Bo</td>
<td>nancy@boonweb.com</td>
<td>Washington</td>
<td align="right">280</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('tables.styled')">
<div class="table-responsive">
<table class="table table-striped table-sm color-icon-label-table">
<thead>
<tr>
<td></td>
<td>{{'tables.headings.name' | translate}}</td>
<td>{{'tables.headings.email' | translate}}</td>
<td>{{'tables.headings.city' | translate}}</td>
<td align="right">{{'tables.headings.score' | translate}}</td>
<td align="middle"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Matthew McCormick</td>
<td>matthew30@mail.ol</td>
<td>Vancouver</td>
<td align="right">93</td>
<td align="middle"></td>
</tr>
<tr>
<td></td>
<td>Nancy Bo</td>
<td>nancy@boonweb.com</td>
<td>Washington</td>
<td align="right">280</td>
<td align="middle"></td>
</tr>
<tr>
<td></td>
<td>Frederiko Lopez</td>
<td>fr.lopez@webmail.sp</td>
<td>Barcelona</td>
<td align="right">16</td>
<td align="middle"></td>
</tr>
<tr class="table-danger">
<td>
<span class="badge badge-pill badge-danger">DANGER</span>
</td>
<td>Stanley Hummer</td>
<td>mr_winner_2999@gmail.cb</td>
<td>Manchester</td>
<td align="right">57</td>
<td align="middle">
<i class="fa fa-exclamation-triangle icon-right input-icon error-icon"></i>
</td>
</tr>
<tr class="table-success">
<td>
<span class="badge badge-pill badge-primary">SUCCESS</span>
</td>
<td>Lendley Wintz</td>
<td>9938198146@mailster.io</td>
<td>Wien</td>
<td align="right">113</td>
<td align="middle" class="valid">
<i class="fa fa-check success-icon icon-right input-icon"></i>
</td>
</tr>
<tr class="table-warning">
<td>
<span class="badge badge-pill badge-warning">WARNING</span>
</td>
<td>Barbara Noz</td>
<td>barbaranoz@mailster.io</td>
<td>Brussels</td>
<td align="right">68</td>
<td align="middle"></td>
</tr>
<tr>
<td></td>
<td>Matthew McCormick</td>
<td>matthew30@mail.ol</td>
<td>Vancouver</td>
<td align="right">93</td>
<td align="middle"></td>
</tr>
<tr class="table-info">
<td>
<span class="badge badge-pill badge-info">INFO</span>
</td>
<td>Nancy Bo</td>
<td>nancy@boonweb.com</td>
<td>Washington</td>
<td align="right">280</td>
<td align="middle"></td>
</tr>
</tbody>
</table>
</div>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('tables.advanced')">
<vuestic-data-table
:apiUrl="apiUrl"
:tableFields="tableFields"
:itemsPerPage="itemsPerPage"
:defaultPerPage="defaultTablePerPage"
:sortFunctions="sortFunctions"
:apiMode="apiMode"
:paginationPath="paginationPath"
:queryParams="queryParams"
/>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import BadgeColumn from './BadgeColumn.vue'
import FieldsDef from 'vuestic-components/vuestic-datatable/data/fields-definition'
import ItemsPerPageDef from 'vuestic-components/vuestic-datatable/data/items-per-page-definition'
import QueryParams from 'vuestic-components/vuestic-datatable/data/query-params'
Vue.component('badge-column', BadgeColumn)
export default {
name: 'Table',
data () {
return {
apiUrl: 'https://vuetable.ratiw.net/api/users',
apiMode: true,
tableFields: FieldsDef.tableFields,
itemsPerPage: ItemsPerPageDef.itemsPerPage,
sortFunctions: FieldsDef.sortFunctions,
paginationPath: '',
defaultTablePerPage: 6,
queryParams: QueryParams
}
}
}
</script>
<style lang="scss">
.color-icon-label-table {
td:first-child {
width: 1rem;
}
}
</style>
src/components/ui/buttons/Buttons.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="buttons-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="primary-secondary-buttons larger-padding"
:headerText="$t('buttons.main')">
<div class="row btn-margin-row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary hover">
{{'buttons.hover' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary focus">
{{'buttons.pressed' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary" disabled>
{{'buttons.disabled' | translate}}
</button>
</div>
</div>
<div class="row btn-margin-row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-secondary">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-secondary hover">
{{'buttons.hover' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-secondary focus">
{{'buttons.pressed' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-secondary" disabled>
{{'buttons.disabled' | translate}}
</button>
</div>
</div>
<div class="row btn-margin-row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary btn-sm">
{{'buttons.small' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center align-items-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary btn-micro">
{{'buttons.micro' | translate}}
</button>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-12">
<vuestic-widget class="color-buttons" :headerText="$t('buttons.advanced')">
<div class="row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary btn-with-icon">
<div class="btn-with-icon-content">
<i class="ion-md-close ion"></i>
{{'buttons.button' | translate}}
</div>
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<div class="dropdown d-inline-flex" v-dropdown>
<button class="btn btn-primary dropdown-toggle theme-toggle " type="button" id="dropdownMenuButton"
data-toggle="dropdown">
DROPDOWN
<i class="ion-ios-arrow-down arrow-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu-content">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-4' : sidebarOpened, 'col-lg-4' : !sidebarOpened }">
<div class="btn-toolbar d-inline-flex" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary focus">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-2' : sidebarOpened, 'col-lg-2' : !sidebarOpened }">
<button class="btn btn-primary btn-with-icon rounded-icon">
<div class="btn-with-icon-content">
<i class="ion-md-close ion"></i>
</div>
</button>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-12">
<vuestic-widget class="color-buttons" :headerText="$t('buttons.colors')">
<div class="row btn-margin-row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-danger">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-info">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-dark">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-warning">
{{'buttons.button' | translate}}
</button>
</div>
</div>
<div class="row btn-margin-row">
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-success">
{{'buttons.button' | translate}}
</button>
</div>
<div class="col-sm-6 d-flex justify-content-center"
:class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-pale">
{{'buttons.button' | translate}}
</button>
</div>
</div>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'buttons',
computed: {
...mapGetters([
'sidebarOpened'
])
}
}
</script>
<style lang="scss">
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.buttons-page {
@include media-breakpoint-only(xl) {
.btn-margin-row {
margin-right: -35px;
margin-left: -40px;
}
}
.btn, .btn-group {
margin-bottom: 45px;
}
.btn-group .btn {
margin-bottom: 0;
}
.dropdown-menu {
margin-top: -43px;
}
.smaller-buttons {
display: flex;
flex-direction: row;
align-items: center;
.btn-micro {
margin-left: 20px;
}
}
.widget .widget-body {
padding-bottom: 0;
}
}
</style>
src/components/ui/grid/Grid.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="ui-grid row">
<div class="col-md-12">
<vuestic-widget headerText="Fixed Grid">
<div class="row">
<div v-for="i in 3" class="col">
<div>.col</div>
</div>
</div>
<div class="row">
<div v-for="i in 6" class="col">
<div>.col</div>
</div>
</div>
<div class="row">
<div v-for="i in 12" class="col">
<div>.col</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-12">
<vuestic-widget headerText="Desktop Grid">
<div class="row">
<div v-for="i in 3" class="col-md-4">
<div>.col-md-4</div>
</div>
</div>
<div class="row">
<div v-for="i in 6" class="col-md-2">
<div>.col-md-2</div>
</div>
</div>
<div class="row">
<div v-for="i in 12" class="col-md-1">
<div>.col-md-1</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-12">
<vuestic-widget headerText="Mobile and Desktop Grid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div>.col-md-3 .col-sm-8</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-8">
<div>.col-md-3 .col-sm-8</div>
</div>
<div class="col-md-9 col-sm-4">
<div>.col-md-9 .col-sm-4</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">
<div>.col-md-4 .col-sm-2</div>
</div>
<div class="col-md-4 col-sm-8">
<div>.col-md-4 .col-sm-8</div>
</div>
<div class="col-md-4 col-sm-2">
<div>.col-md-4 .col-sm-2</div>
</div>
</div>
</vuestic-widget>
</div>
<div class="col-md-12">
<vuestic-widget headerText="Offsets">
<div class="row">
<div class="col-md-6 offset-md-6 col-sm-6">
<div>.col-md-6 .offset-md-6 .col-sm-6</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div>.col-md-6 .offset-md-3</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div>.col-4</div>
</div>
<div class="col-4 offset-4">
<div>.col-4 .offset-8</div>
</div>
</div>
</vuestic-widget>
</div>
</div>
</template>
<script>
export default {
name: 'grid'
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.ui-grid {
.row {
div[class^=col] {
padding: 0;
div {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: .5rem .25rem;
min-height: 3rem;
color: $white;
background-color: $brand-primary;
border-radius: 0.5rem;
}
}
}
}
</style>
src/components/ui/icons/Icons.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="ui-icons">
<router-view :sets="sets"></router-view>
</div>
</template>
<script>
import FullSet from './Set'
export default {
name: 'icons',
components: {
FullSet
},
computed: {
sets () {
let sets = []
require(this.setsPath + 'names.json').forEach(name => {
let set = require(this.setsPath + name + '.json')
this.addfilteredListsTo(set)
sets.push(set)
})
return sets
}
},
methods: {
addfilteredListsTo (set) {
let list = set.lists[0].icons
let filteredLists = []
filteredLists.push(list.slice(0, 6))
filteredLists.push(list.slice(6, 8))
filteredLists.push(list.slice(8, 14))
set.filteredLists = filteredLists
}
},
data () {
return {
setsPath: './sets/'
}
}
}
</script>
<style lang="scss">
.ui-icons {
@import "../../../sass/icons-styles";
padding-left: 15px;
padding-right: 15px;
.widget-body {
padding: 1.9375rem 2.6875rem 1.9375rem 2.125rem;
}
}
</style>
src/components/ui/icons/Set.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="set row">
<div class="header col-12">
<div class="row">
<div class="header-text col-lg-4">
<h2>{{ set.name }}</h2>
<router-link :to="{ path: '/ui/icons' }">
{{ 'icons.back' | translate }}
</router-link>
</div>
<div class="search col-lg-4">
<div class="form-group with-icon-left">
<div class="input-group">
<input
v-model="selector"
id="input-icon-left"
name="input-icon-left"
required
/>
<i class="fa fa-search icon-left input-icon"></i>
<label class="control-label" for="input-icon-left">
{{ 'icons.search' | translate }}
</label>
<i class="bar"></i>
</div>
</div>
</div>
<div class="range col-lg-4">
<h4>A</h4>
<vuestic-slider
:options="slider"
v-model="iconSize"
>
</vuestic-slider>
<h2>A</h2>
</div>
</div>
</div>
<template v-for="list in validatedLists">
<vuestic-widget
:headerText="list.name"
class="col-12"
>
<span v-if="list.icons.length === 0">
{{ 'icons.none' | translate }}
</span>
<template v-for="i in Math.floor(list.icons.length / 8 + 1)">
<div class="row">
<div
v-for="j in 8"
v-if="list.icons[(i - 1) * 8 + j - 1]"
class="col-8-custom icon-grid-container"
>
<div class="icon">
<span
:class="iconClass(list.icons[(i - 1) * 8 + j - 1])"
:style="`font-size: ${iconSize}px`"
aria-hidden="true"
/>
</div>
<div class="iconText">
{{ list.icons[(i - 1) * 8 + j - 1] }}
</div>
</div>
</div>
</template>
</vuestic-widget>
</template>
</div>
</template>
<script>
export default {
name: 'set',
props: {
name: {
type: String
},
sets: {
type: Array
}
},
data: function () {
return {
selector: '',
iconSize: 30,
slider: {
formatter: v => `${v}px`,
min: 20,
max: 40
}
}
},
computed: {
set () {
for (let set of this.sets) {
if (set.href === this.name) return set
}
},
validatedLists () {
if (this.selector === '') {
return this.set.lists
}
let result = [
{
name: 'Found Icons',
icons: []
}
]
this.set.lists.forEach(list => {
list.icons.forEach(icon => {
if (icon.match(this.selector)) {
result[0].icons.push(icon)
}
})
})
return result
}
},
methods: {
iconClass (icon) {
return `${this.set.prefix} ${this.set.prefix}-${icon}`
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.set {
.header {
padding: 1.75rem 0 1.125rem;
background-color: white;
.header-text {
padding-left: 2.5rem;
text-align: left;
h2 {
margin-bottom: 0;
}
}
.search {
display: flex;
align-items: center;
justify-content: center;
.input-group {
width: 13.25rem;
}
}
.range {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.vue-slider-wrap {
width: 9.3rem !important;
}
h2, h4 {
margin: .5rem;
}
}
margin-bottom: 2rem;
}
.row {
.icon-grid-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
float: left;
height: 6rem;
min-height: 1px;
margin: 0 0 .5rem;
text-align: center;
&:hover {
color: white;
background-color: $brand-primary;
cursor: pointer;
}
.icon {
margin: 0 0 1rem;
padding: 1rem 0 0;
}
.iconText {
font-size: .6rem;
text-align: center;
}
}
}
}
</style>
src/components/ui/icons/SetsList.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="sets-list row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('icons.title')">
<div class="row">
<div class="small-set col-lg-6" v-for="set in sets">
<div class="set-content">
<div class="overlay">
<router-link :to="{path: set.href}" append>
<div class="btn btn-primary btn">{{set.name.toUpperCase()}}</div>
</router-link>
</div>
<div>
<template v-for="filteredList in set.filteredLists">
<div v-if="filteredList.length !== 2" class="row">
<div class="col-sm-2" v-for="icon in filteredList">
<div class="icon">
<i :class="iconClass(set, icon)" aria-hidden="true"></i>
</div>
</div>
</div>
<div v-if="filteredList.length === 2" class="row">
<div class="col-sm-2">
<div class="icon">
<i :class="iconClass(set, filteredList[0])" aria-hidden="true"></i>
</div>
</div>
<div class="col-sm-8"></div>
<div class="col-sm-2">
<div class="icon">
<i :class="iconClass(set, filteredList[1])" aria-hidden="true"></i>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</vuestic-widget>
</div>
</div>
</template>
<script>
export default {
name: 'iconsList',
props: ['sets'],
methods: {
iconClass (set, icon) {
return set.prefix + ' ' + set.prefix + '-' + icon
}
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.sets-list {
.small-set {
.btn {
width: 13.75rem;
padding-left: 0;
padding-right: 0;
text-align: center;
}
margin: 0 0 1.5rem;
.set-content {
background-color: $light-gray;
height: 100%;
position: relative;
> div {
padding: 1rem;
div[class^="col"] {
padding: 0;
margin: 1rem 0;
.icon {
font-size: .85rem;
text-align: center;
}
}
}
.overlay {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
/*visibility: hidden;*/
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
}
}
}
</style>
src/components/ui/icons/sets/brandico.json 0 → 100644
View file @ 3be931bc
{
"name": "Brandico",
"href": "brandico",
"prefix": "brandico",
"lists": [
{
"name": "Icons",
"icons": ["facebook","facebook-rect","twitter","twitter-bird","vimeo","vimeo-rect","tumblr","tumblr-rect","googleplus-rect","github-text","github","skype","icq","yandex","yandex-rect","vkontakte-rect","odnoklassniki","odnoklassniki-rect","friendfeed","friendfeed-rect","blogger","blogger-rect","deviantart","jabber","lastfm","lastfm-rect","linkedin","linkedin-rect","picasa","wordpress","instagram","instagram-filled"]
}
]
}
src/components/ui/icons/sets/entypo.json 0 → 100644
View file @ 3be931bc
{
"name": "Entypo",
"href": "entypo",
"prefix": "entypo",
"lists": [
{
"name": "Main Icons",
"icons": ["note","logo-db","music","search","flashlight","mail","heart","heart-empty","star","star-empty","user","users","user-add","video","picture","camera","layout","menu","check","cancel","cancel-circled","cancel-squared","plus","plus-circled","plus-squared","minus","minus-circled","minus-squared","help","help-circled","info","info-circled","back","home","link","attach","lock","lock-open","eye","tag","bookmark","bookmarks","flag","thumbs-up","thumbs-down","download","upload","upload-cloud","reply","reply-all","forward","quote","code","export","pencil","feather","print","retweet","keyboard","comment","chat","bell","attention","alert","vcard","address","location","map","direction","compass","cup","trash","doc","docs","doc-landscape","doc-text","doc-text-inv","newspaper","book-open","book","folder","archive","box","rss","phone","cog","tools","share","shareable","basket","bag","calendar","login","logout","mic","mute","sound","volume","clock","hourglass","lamp","light-down","light-up","adjust","block","resize-full","resize-small","popup","publish","window","arrow-combo","down-circled","left-circled","right-circled","up-circled","down-open","left-open","right-open","up-open","down-open-mini","left-open-mini","right-open-mini","up-open-mini","down-open-big","left-open-big","right-open-big","up-open-big","down","left","right","up","down-dir","left-dir","right-dir","up-dir","down-bold","left-bold","right-bold","up-bold","down-thin","left-thin","right-thin","note-beamed","ccw","cw","arrows-ccw","level-down","level-up","shuffle","loop","switch","play","stop","pause","record","to-end","to-start","fast-forward","fast-backward","progress-0","progress-1","progress-2","progress-3","target","palette","list","list-add","signal","trophy","battery","back-in-time","monitor","mobile","network","cd","inbox","install","globe","cloud","cloud-thunder","flash","moon","flight","paper-plane","leaf","lifebuoy","mouse","briefcase","suitcase","dot","dot-2","dot-3","brush","magnet","infinity","erase","chart-pie","chart-line","chart-bar","chart-area","tape","graduation-cap","language","ticket","water","droplet","air","credit-card","floppy","clipboard","megaphone","database","drive","bucket","thermometer","key","flow-cascade","flow-branch","flow-tree","flow-line","flow-parallel","rocket","gauge","traffic-cone","cc","cc-by","cc-nc","cc-nc-eu","cc-nc-jp","cc-sa","cc-nd","cc-pd","cc-zero","cc-share","cc-remix"]
},
{
"name": "Social Icons",
"icons": ["github","github-circled","flickr","flickr-circled","vimeo","vimeo-circled","twitter","twitter-circled","facebook","facebook-circled","facebook-squared","gplus","gplus-circled","pinterest","pinterest-circled","tumblr","tumblr-circled","linkedin","linkedin-circled","dribbble","dribbble-circled","stumbleupon","stumbleupon-circled","lastfm","lastfm-circled","rdio","rdio-circled","spotify","spotify-circled","qq","instagram","dropbox","evernote","flattr","skype","skype-circled","renren","sina-weibo","paypal","picasa","soundcloud","mixi","behance","google-circles","vkontakte","smashing","sweden","db-shape","up-thin"]
}
]
}
src/components/ui/icons/sets/font-awesome.json 0 → 100644
View file @ 3be931bc
{
"name": "Font Awesome",
"href": "font-awesome",
"prefix": "fa",
"lists": [
{
"name": "Web Applications Icons",
"icons": ["address-book","address-book-o","address-card","address-card-o","adjust","american-sign-language-interpreting","anchor","archive","area-chart","arrows","arrows-h","arrows-v","asl-interpreting","assistive-listening-systems","asterisk","at","audio-description","automobile","balance-scale","ban","bank","bar-chart","bar-chart-o","barcode","bars","bath","bathtub","battery","battery-0","battery-1","battery-2","battery-3","battery-4","battery-empty","battery-full","battery-half","battery-quarter","battery-three-quarters","bed","beer","bell","bell-o","bell-slash","bell-slash-o","bicycle","binoculars","birthday-cake","blind","bluetooth","bluetooth-b","bolt","bomb","book","bookmark","bookmark-o","braille","briefcase","bug","building","building-o","bullhorn","bullseye","bus","cab","calculator","calendar","calendar-check-o","calendar-minus-o","calendar-o","calendar-plus-o","calendar-times-o","camera","camera-retro","car","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","cart-arrow-down","cart-plus","cc","certificate","check","check-circle","check-circle-o","check-square","check-square-o","child","circle","circle-o","circle-o-notch","circle-thin","clock-o","clone","close","cloud","cloud-download","cloud-upload","code","code-fork","coffee","cog","cogs","comment","comment-o","commenting","commenting-o","comments","comments-o","compass","copyright","creative-commons","credit-card","credit-card-alt","crop","crosshairs","cube","cubes","cutlery","dashboard","database","deaf","deafness","desktop","diamond","dot-circle-o","download","drivers-license","drivers-license-o","edit","ellipsis-h","ellipsis-v","envelope","envelope-o","envelope-open","envelope-open-o","envelope-square","eraser","exchange","exclamation","exclamation-circle","exclamation-triangle","external-link","external-link-square","eye","eye-slash","eyedropper","fax","feed","female","fighter-jet","file-archive-o","file-audio-o","file-code-o","file-excel-o","file-image-o","file-movie-o","file-pdf-o","file-photo-o","file-picture-o","file-powerpoint-o","file-sound-o","file-video-o","file-word-o","file-zip-o","film","filter","fire","fire-extinguisher","flag","flag-checkered","flag-o","flash","flask","folder","folder-o","folder-open","folder-open-o","frown-o","futbol-o","gamepad","gavel","gear","gears","gift","glass","globe","graduation-cap","group","hand-grab-o","hand-lizard-o","hand-paper-o","hand-peace-o","hand-pointer-o","hand-rock-o","hand-scissors-o","hand-spock-o","hand-stop-o","handshake-o","hard-of-hearing","hashtag","hdd-o","headphones","heart","heart-o","heartbeat","history","home","hotel","hourglass","hourglass-1","hourglass-2","hourglass-3","hourglass-end","hourglass-half","hourglass-o","hourglass-start","i-cursor","id-badge","id-card","id-card-o","image","inbox","industry","info","info-circle","institution","key","keyboard-o","language","laptop","leaf","legal","lemon-o","level-down","level-up","life-bouy","life-buoy","life-ring","life-saver","lightbulb-o","line-chart","location-arrow","lock","low-vision","magic","magnet","mail-forward","mail-reply","mail-reply-all","male","map","map-marker","map-o","map-pin","map-signs","meh-o","microchip","microphone","microphone-slash","minus","minus-circle","minus-square","minus-square-o","mobile","mobile-phone","money","moon-o","mortar-board","motorcycle","mouse-pointer","music","navicon","newspaper-o","object-group","object-ungroup","paint-brush","paper-plane","paper-plane-o","paw","pencil","pencil-square","pencil-square-o","percent","phone","phone-square","photo","picture-o","pie-chart","plane","plug","plus","plus-circle","plus-square","plus-square-o","podcast","power-off","print","puzzle-piece","qrcode","question","question-circle","question-circle-o","quote-left","quote-right","random","recycle","refresh","registered","remove","reorder","reply","reply-all","retweet","road","rocket","rss","rss-square","s15","search","search-minus","search-plus","send","send-o","server","share","share-alt","share-alt-square","share-square","share-square-o","shield","ship","shopping-bag","shopping-basket","shopping-cart","shower","sign-in","sign-language","sign-out","signal","signing","sitemap","sliders","smile-o","snowflake-o","soccer-ball-o","sort","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-asc","sort-desc","sort-down","sort-numeric-asc","sort-numeric-desc","sort-up","space-shuttle","spinner","spoon","square","square-o","star","star-half","star-half-empty","star-half-full","star-half-o","star-o","sticky-note","sticky-note-o","street-view","suitcase","sun-o","support","tablet","tachometer","tag","tags","tasks","taxi","television","terminal","thermometer","thermometer-0","thermometer-1","thermometer-2","thermometer-3","thermometer-4","thermometer-empty","thermometer-full","thermometer-half","thermometer-quarter","thermometer-three-quarters","thumb-tack","thumbs-down","thumbs-o-down","thumbs-o-up","thumbs-up","ticket","times","times-circle","times-circle-o","times-rectangle","times-rectangle-o","tint","toggle-down","toggle-left","toggle-off","toggle-on","toggle-right","toggle-up","trademark","trash","trash-o","tree","trophy","truck","tty","tv","umbrella","universal-access","university","unlock","unlock-alt","unsorted","upload","user","user-circle","user-circle-o","user-o","user-plus","user-secret","user-times","users","vcard","vcard-o","video-camera","volume-control-phone","volume-down","volume-off","volume-up","warning","wheelchair","wheelchair-alt","wifi","window-close","window-close-o","window-maximize","window-minimize","window-restore","wrench"]
},
{
"name": "Accessibility Icons",
"icons": ["american-sign-language-interpreting","asl-interpreting","assistive-listening-systems","audio-description","blind","braille","cc","deaf","deafness","hard-of-hearing","low-vision","question-circle-o","sign-language","signing","tty","universal-access","volume-control-phone","wheelchair","wheelchair-alt"]
},
{
"name": "Hand Icons",
"icons": ["hand-grab-o","hand-lizard-o","hand-o-down","hand-o-left","hand-o-right","hand-o-up","hand-paper-o","hand-peace-o","hand-pointer-o","hand-rock-o","hand-scissors-o","hand-spock-o","hand-stop-o","thumbs-down","thumbs-o-down","thumbs-o-up","thumbs-up"]
},
{
"name": "Transportation Icons",
"icons": ["ambulance","automobile","bicycle","bus","cab","car","fighter-jet","motorcycle","plane","rocket","ship","space-shuttle","subway","taxi","train","truck","wheelchair","wheelchair-alt"]
},
{
"name": "Gender Icons",
"icons": ["genderless","intersex","mars","mars-double","mars-stroke","mars-stroke-h","mars-stroke-v","mercury","neuter","transgender","transgender-alt","venus","venus-double","venus-mars"]
},
{
"name": "File Type Icons",
"icons": ["file","file-archive-o","file-audio-o","file-code-o","file-excel-o","file-image-o","file-movie-o","file-o","file-pdf-o","file-photo-o","file-picture-o","file-powerpoint-o","file-sound-o","file-text","file-text-o","file-video-o","file-word-o","file-zip-o"]
},
{
"name": "Spinner Icons",
"icons": ["circle-o-notch","cog","gear","refresh","spinner"]
},
{
"name": "Form Control Icons",
"icons": ["check-square","check-square-o","circle","circle-o","dot-circle-o","minus-square","minus-square-o","plus-square","plus-square-o","square","square-o"]
},
{
"name": "Payment Icons",
"icons": ["cc-amex","cc-diners-club","cc-discover","cc-jcb","cc-mastercard","cc-paypal","cc-stripe","cc-visa","credit-card","credit-card-alt","google-wallet","paypal"]
},
{
"name": "Chart Icons",
"icons": ["area-chart","bar-chart","bar-chart-o","line-chart","pie-chart"]
},
{
"name": "Currency Icons",
"icons": ["bitcoin","btc","cny","dollar","eur","euro","gbp","gg","gg-circle","ils","inr","jpy","krw","money","rmb","rouble","rub","ruble","rupee","shekel","sheqel","try","turkish-lira","usd","won","yen"]
},
{
"name": "Text Editor Icons",
"icons": ["align-center","align-justify","align-left","align-right","bold","chain","chain-broken","clipboard","columns","copy","cut","dedent","eraser","file","file-o","file-text","file-text-o","files-o","floppy-o","font","header","indent","italic","link","list","list-alt","list-ol","list-ul","outdent","paperclip","paragraph","paste","repeat","rotate-left","rotate-right","save","scissors","strikethrough","subscript","superscript","table","text-height","text-width","th","th-large","th-list","underline","undo","unlink"]
},
{
"name": "Directional Icons",
"icons": ["angle-double-down","angle-double-left","angle-double-right","angle-double-up","angle-down","angle-left","angle-right","angle-up","arrow-circle-down","arrow-circle-left","arrow-circle-o-down","arrow-circle-o-left","arrow-circle-o-right","arrow-circle-o-up","arrow-circle-right","arrow-circle-up","arrow-down","arrow-left","arrow-right","arrow-up","arrows","arrows-alt","arrows-h","arrows-v","caret-down","caret-left","caret-right","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","caret-up","chevron-circle-down","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-down","chevron-left","chevron-right","chevron-up","exchange","hand-o-down","hand-o-left","hand-o-right","hand-o-up","long-arrow-down","long-arrow-left","long-arrow-right","long-arrow-up","toggle-down","toggle-left","toggle-right","toggle-up"]
},
{
"name": "Video Player Icons",
"icons": ["arrows-alt","backward","compress","eject","expand","fast-backward","fast-forward","forward","pause","pause-circle","pause-circle-o","play","play-circle","play-circle-o","random","step-backward","step-forward","stop","stop-circle","stop-circle-o","youtube-play"]
},
{
"name": "Brand Icons",
"icons": ["500px","adn","amazon","android","angellist","apple","bandcamp","behance","behance-square","bitbucket","bitbucket-square","bitcoin","black-tie","bluetooth","bluetooth-b","btc","buysellads","cc-amex","cc-diners-club","cc-discover","cc-jcb","cc-mastercard","cc-paypal","cc-stripe","cc-visa","chrome","codepen","codiepie","connectdevelop","contao","css3","dashcube","delicious","deviantart","digg","dribbble","dropbox","drupal","edge","eercast","empire","envira","etsy","expeditedssl","fa","facebook","facebook-f","facebook-official","facebook-square","firefox","first-order","flickr","font-awesome","fonticons","fort-awesome","forumbee","foursquare","free-code-camp","ge","get-pocket","gg","gg-circle","git","git-square","github","github-alt","github-square","gitlab","gittip","glide","glide-g","google","google-plus","google-plus-circle","google-plus-official","google-plus-square","google-wallet","gratipay","grav","hacker-news","houzz","html5","imdb","instagram","internet-explorer","ioxhost","joomla","jsfiddle","lastfm","lastfm-square","leanpub","linkedin","linkedin-square","linode","linux","maxcdn","meanpath","medium","meetup","mixcloud","modx","odnoklassniki","odnoklassniki-square","opencart","openid","opera","optin-monster","pagelines","paypal","pied-piper","pied-piper-alt","pied-piper-pp","pinterest","pinterest-p","pinterest-square","product-hunt","qq","quora","ra","ravelry","rebel","reddit","reddit-alien","reddit-square","renren","resistance","safari","scribd","sellsy","share-alt","share-alt-square","shirtsinbulk","simplybuilt","skyatlas","skype","slack","slideshare","snapchat","snapchat-ghost","snapchat-square","soundcloud","spotify","stack-exchange","stack-overflow","steam","steam-square","stumbleupon","stumbleupon-circle","superpowers","telegram","tencent-weibo","themeisle","trello","tripadvisor","tumblr","tumblr-square","twitch","twitter","twitter-square","usb","viacoin","viadeo","viadeo-square","vimeo","vimeo-square","vine","vk","wechat","weibo","weixin","whatsapp","wikipedia-w","windows","wordpress","wpbeginner","wpexplorer","wpforms","xing","xing-square","y-combinator","y-combinator-square","yahoo","yc","yc-square","yelp","yoast","youtube","youtube-play","youtube-square"]
},
{
"name": "Medical Icons",
"icons": ["ambulance","h-square","heart","heart-o","heartbeat","hospital-o","medkit","plus-square","stethoscope","user-md","wheelchair","wheelchair-alt"]
}
]
}
src/components/ui/icons/sets/fontelico.json 0 → 100644
View file @ 3be931bc
{
"name": "Fontelico",
"href": "fontelico",
"prefix": "fontelico",
"lists": [
{
"name": "Icons",
"icons": ["emo-happy","emo-wink","emo-wink2","emo-unhappy","emo-sleep","emo-thumbsup","emo-devil","emo-surprised","emo-tongue","emo-coffee","emo-sunglasses","emo-displeased","emo-beer","emo-grin","emo-angry","emo-saint","emo-cry","emo-shoot","emo-squint","emo-laugh","spin1","spin2","spin3","spin4","spin5","spin6","firefox","chrome","opera","ie"]
}
]
}
src/components/ui/icons/sets/glyphicons.json 0 → 100644
View file @ 3be931bc
{
"name": "GlyphIcons",
"href": "glyphicons",
"prefix": "glyphicon",
"lists": [
{
"name": "Icons",
"icons": ["asterisk","plus","minus","eur","euro","cloud","envelope","pencil","glass","music","search","heart","star","star-empty","user","film","th-large","th","th-list","ok","remove","zoom-in","zoom-out","off","signal","cog","trash","home","file","time","road","download-alt","download","upload","inbox","play-circle","repeat","refresh","list-alt","lock","flag","headphones","volume-off","volume-down","volume-up","qrcode","barcode","tag","tags","book","bookmark","print","camera","font","bold","italic","text-height","text-width","align-left","align-center","align-right","align-justify","list","indent-left","indent-right","facetime-video","picture","map-marker","adjust","tint","edit","share","check","move","step-backward","fast-backward","backward","play","pause","stop","forward","fast-forward","step-forward","eject","chevron-left","chevron-right","plus-sign","minus-sign","remove-sign","ok-sign","question-sign","info-sign","screenshot","remove-circle","ok-circle","ban-circle","arrow-left","arrow-right","arrow-up","arrow-down","share-alt","resize-full","resize-small","exclamation-sign","gift","leaf","fire","eye-open","eye-close","warning-sign","plane","calendar","random","comment","magnet","chevron-up","chevron-down","retweet","shopping-cart","folder-close","folder-open","resize-vertical","resize-horizontal","hdd","bullhorn","bell","certificate","thumbs-up","thumbs-down","hand-right","hand-left","hand-up","hand-down","circle-arrow-right","circle-arrow-left","circle-arrow-up","circle-arrow-down","globe","wrench","tasks","filter","briefcase","fullscreen","dashboard","paperclip","heart-empty","link","phone","pushpin","usd","gbp","sort","sort-by-alphabet","sort-by-alphabet-alt","sort-by-order","sort-by-order-alt","sort-by-attributes","sort-by-attributes-alt","unchecked","expand","collapse-down","collapse-up","log-in","flash","log-out","new-window","record","save","open","saved","import","export","send","floppy-disk","floppy-saved","floppy-remove","floppy-save","floppy-open","credit-card","transfer","cutlery","header","compressed","earphone","phone-alt","tower","stats","sd-video","hd-video","subtitles","sound-stereo","sound-dolby","sound-5-1","sound-6-1","sound-7-1","copyright-mark","registration-mark","cloud-download","cloud-upload","tree-conifer","tree-deciduous","cd","save-file","open-file","level-up","copy","paste","alert","equalizer","king","queen","pawn","bishop","knight","baby-formula","tent","blackboard","bed","apple","erase","hourglass","lamp","duplicate","piggy-bank","scissors","bitcoin","yen","ruble","scale","ice-lolly","ice-lolly-tasted","education","option-horizontal","option-vertical","menu-hamburger","modal-window","oil","grain","sunglasses","text-size","text-color","text-background","object-align-top","object-align-bottom","object-align-horizontal","object-align-left","object-align-vertical","object-align-right","triangle-right","triangle-left","triangle-bottom","triangle-top","console","superscript","subscript","menu-left","menu-right","menu-down","menu-up"]
}
]
}
src/components/ui/icons/sets/iconic-stroke.json 0 → 100644
View file @ 3be931bc
{
"name": "Iconic Stroke",
"href": "iconic-stroke",
"prefix": "iconicstroke",
"lists": [
{
"name": "Icons",
"icons":["hash","question-mark","at","pilcrow","info","arrow-left","arrow-up","arrow-right","arrow-down","home","sun-stroke","cloud","umbrella","star","moon-stroke","heart-stroke","cog","bolt","key-stroke","rain","denied","mail","pen","check","check-alt","x","x-alt","left-quote","right-quote","plus","minus","curved-arrow","document-alt-stroke","calendar","map-pin-alt","comment-alt1-stroke","comment-alt2-stroke","pen-alt-stroke","pen-alt2","chat-alt-stroke","plus-alt","minus-alt","bars-alt","book-alt","aperture-alt","beaker-alt","left-quote-alt","right-quote-alt","arrow-left-alt1","arrow-up-alt1","arrow-right-alt1","arrow-down-alt1","arrow-left-alt2","arrow-up-alt2","arrow-right-alt2","arrow-down-alt2","brush","brush-alt","eyedropper","layers","layers-alt","compass","award-stroke","beaker","steering-wheel","eye","aperture","image","chart","chart-alt","target","tag-stroke","rss","rss-alt","share","undo","reload","reload-alt","loop-alt1","loop-alt2","loop-alt3","loop-alt4","spin","spin-alt","move-horizontal","move-horizontal-alt1","move-horizontal-alt2","move-vertical","move-vertical-alt1","move-vertical-alt2","move","move-alt1","move-alt2","transfer","download","upload","cloud-download","cloud-upload","fork","play","play-alt","pause","stop","eject","first","last","fullscreen","fullscreen-alt","fullscreen-exit","fullscreen-exit-alt","equalizer","article","read-more","list","list-nested","cursor","dial","new-window","trash-stroke","battery-half","battery-empty","battery-charging","chat","mic","movie","headphones","user","lightbulb","cd","folder-stroke","document-stroke","pin","map-pin-stroke","book","book-alt2","box","calendar-alt-stroke","comment-stroke","iphone","bars","camera","volume-mute","volume","battery-full","magnifying-glass","lock-stroke","unlock-stroke","link","wrench","clock","paperclip"]
}
]
}
src/components/ui/icons/sets/ionicons.json 0 → 100644
View file @ 3be931bc
{
"name": "Ionicons",
"href": "ionicons",
"prefix": "ion",
"lists": [
{
"name": "Icons",
"icons": ["ios-add", "ios-add-circle", "ios-add-circle-outline", "ios-add-outline", "ios-alarm", "ios-alarm-outline", "ios-albums", "ios-albums-outline", "ios-alert", "ios-alert-outline", "ios-american-football", "ios-american-football-outline", "ios-analytics", "ios-analytics-outline", "ios-aperture", "ios-aperture-outline", "ios-apps", "ios-apps-outline", "ios-appstore", "ios-appstore-outline", "ios-archive", "ios-archive-outline", "ios-arrow-back", "ios-arrow-back-outline", "ios-arrow-down", "ios-arrow-down-outline", "ios-arrow-dropdown", "ios-arrow-dropdown-circle", "ios-arrow-dropdown-circle-outline", "ios-arrow-dropdown-outline", "ios-arrow-dropleft", "ios-arrow-dropleft-circle", "ios-arrow-dropleft-circle-outline", "ios-arrow-dropleft-outline", "ios-arrow-dropright", "ios-arrow-dropright-circle", "ios-arrow-dropright-circle-outline", "ios-arrow-dropright-outline", "ios-arrow-dropup", "ios-arrow-dropup-circle", "ios-arrow-dropup-circle-outline", "ios-arrow-dropup-outline", "ios-arrow-forward", "ios-arrow-forward-outline", "ios-arrow-round-back", "ios-arrow-round-back-outline", "ios-arrow-round-down", "ios-arrow-round-down-outline", "ios-arrow-round-forward", "ios-arrow-round-forward-outline", "ios-arrow-round-up", "ios-arrow-round-up-outline", "ios-arrow-up", "ios-arrow-up-outline", "ios-at", "ios-at-outline", "ios-attach", "ios-attach-outline", "ios-backspace", "ios-backspace-outline", "ios-barcode", "ios-barcode-outline", "ios-baseball", "ios-baseball-outline", "ios-basket", "ios-basket-outline", "ios-basketball", "ios-basketball-outline", "ios-battery-charging", "ios-battery-charging-outline", "ios-battery-dead", "ios-battery-dead-outline", "ios-battery-full", "ios-battery-full-outline", "ios-beaker", "ios-beaker-outline", "ios-beer", "ios-beer-outline", "ios-bicycle", "ios-bicycle-outline", "ios-bluetooth", "ios-bluetooth-outline", "ios-boat", "ios-boat-outline", "ios-body", "ios-body-outline", "ios-bonfire", "ios-bonfire-outline", "ios-book", "ios-book-outline", "ios-bookmark", "ios-bookmark-outline", "ios-bookmarks", "ios-bookmarks-outline", "ios-bowtie", "ios-bowtie-outline", "ios-briefcase", "ios-briefcase-outline", "ios-browsers", "ios-browsers-outline", "ios-brush", "ios-brush-outline", "ios-bug", "ios-bug-outline", "ios-build", "ios-build-outline", "ios-bulb", "ios-bulb-outline", "ios-bus", "ios-bus-outline", "ios-cafe", "ios-cafe-outline", "ios-calculator", "ios-calculator-outline", "ios-calendar", "ios-calendar-outline", "ios-call", "ios-call-outline", "ios-camera", "ios-camera-outline", "ios-car", "ios-car-outline", "ios-card", "ios-card-outline", "ios-cart", "ios-cart-outline", "ios-cash", "ios-cash-outline", "ios-chatboxes", "ios-chatboxes-outline", "ios-chatbubbles", "ios-chatbubbles-outline", "ios-checkbox", "ios-checkbox-outline", "ios-checkmark", "ios-checkmark-circle", "ios-checkmark-circle-outline", "ios-checkmark-outline", "ios-clipboard", "ios-clipboard-outline", "ios-clock", "ios-clock-outline", "ios-close", "ios-close-circle", "ios-close-circle-outline", "ios-close-outline", "ios-closed-captioning", "ios-closed-captioning-outline", "ios-cloud", "ios-cloud-circle", "ios-cloud-circle-outline", "ios-cloud-done", "ios-cloud-done-outline", "ios-cloud-download", "ios-cloud-download-outline", "ios-cloud-outline", "ios-cloud-upload", "ios-cloud-upload-outline", "ios-cloudy", "ios-cloudy-night", "ios-cloudy-night-outline", "ios-cloudy-outline", "ios-code", "ios-code-download", "ios-code-download-outline", "ios-code-outline", "ios-code-working", "ios-code-working-outline", "ios-cog", "ios-cog-outline", "ios-color-fill", "ios-color-fill-outline", "ios-color-filter", "ios-color-filter-outline", "ios-color-palette", "ios-color-palette-outline", "ios-color-wand", "ios-color-wand-outline", "ios-compass", "ios-compass-outline", "ios-construct", "ios-construct-outline", "ios-contact", "ios-contact-outline", "ios-contacts", "ios-contacts-outline", "ios-contract", "ios-contract-outline", "ios-contrast", "ios-contrast-outline", "ios-copy", "ios-copy-outline", "ios-create", "ios-create-outline", "ios-crop", "ios-crop-outline", "ios-cube", "ios-cube-outline", "ios-cut", "ios-cut-outline", "ios-desktop", "ios-desktop-outline", "ios-disc", "ios-disc-outline", "ios-document", "ios-document-outline", "ios-done-all", "ios-done-all-outline", "ios-download", "ios-download-outline", "ios-easel", "ios-easel-outline", "ios-egg", "ios-egg-outline", "ios-exit", "ios-exit-outline", "ios-expand", "ios-expand-outline", "ios-eye", "ios-eye-off", "ios-eye-off-outline", "ios-eye-outline", "ios-fastforward", "ios-fastforward-outline", "ios-female", "ios-female-outline", "ios-filing", "ios-filing-outline", "ios-film", "ios-film-outline", "ios-finger-print", "ios-finger-print-outline", "ios-flag", "ios-flag-outline", "ios-flame", "ios-flame-outline", "ios-flash", "ios-flash-outline", "ios-flask", "ios-flask-outline", "ios-flower", "ios-flower-outline", "ios-folder", "ios-folder-open", "ios-folder-open-outline", "ios-folder-outline", "ios-football", "ios-football-outline", "ios-funnel", "ios-funnel-outline", "ios-game-controller-a", "ios-game-controller-a-outline", "ios-game-controller-b", "ios-game-controller-b-outline", "ios-git-branch", "ios-git-branch-outline", "ios-git-commit", "ios-git-commit-outline", "ios-git-compare", "ios-git-compare-outline", "ios-git-merge", "ios-git-merge-outline", "ios-git-network", "ios-git-network-outline", "ios-git-pull-request", "ios-git-pull-request-outline", "ios-glasses", "ios-glasses-outline", "ios-globe", "ios-globe-outline", "ios-grid", "ios-grid-outline", "ios-hammer", "ios-hammer-outline", "ios-hand", "ios-hand-outline", "ios-happy", "ios-happy-outline", "ios-headset", "ios-headset-outline", "ios-heart", "ios-heart-outline", "ios-help", "ios-help-buoy", "ios-help-buoy-outline", "ios-help-circle", "ios-help-circle-outline", "ios-help-outline", "ios-home", "ios-home-outline", "ios-ice-cream", "ios-ice-cream-outline", "ios-image", "ios-image-outline", "ios-images", "ios-images-outline", "ios-infinite", "ios-infinite-outline", "ios-information", "ios-information-circle", "ios-information-circle-outline", "ios-information-outline", "ios-ionic", "ios-ionic-outline", "ios-ionitron", "ios-ionitron-outline", "ios-jet", "ios-jet-outline", "ios-key", "ios-key-outline", "ios-keypad", "ios-keypad-outline", "ios-laptop", "ios-laptop-outline", "ios-leaf", "ios-leaf-outline", "ios-link", "ios-link-outline", "ios-list", "ios-list-box", "ios-list-box-outline", "ios-list-outline", "ios-locate", "ios-locate-outline", "ios-lock", "ios-lock-outline", "ios-log-in", "ios-log-in-outline", "ios-log-out", "ios-log-out-outline", "ios-magnet", "ios-magnet-outline", "ios-mail", "ios-mail-open", "ios-mail-open-outline", "ios-mail-outline", "ios-male", "ios-male-outline", "ios-man", "ios-man-outline", "ios-map", "ios-map-outline", "ios-medal", "ios-medal-outline", "ios-medical", "ios-medical-outline", "ios-medkit", "ios-medkit-outline", "ios-megaphone", "ios-megaphone-outline", "ios-menu", "ios-menu-outline", "ios-mic", "ios-mic-off", "ios-mic-off-outline", "ios-mic-outline", "ios-microphone", "ios-microphone-outline", "ios-moon", "ios-moon-outline", "ios-more", "ios-more-outline", "ios-move", "ios-move-outline", "ios-musical-note", "ios-musical-note-outline", "ios-musical-notes", "ios-musical-notes-outline", "ios-navigate", "ios-navigate-outline", "ios-no-smoking", "ios-no-smoking-outline", "ios-notifications", "ios-notifications-off", "ios-notifications-off-outline", "ios-notifications-outline", "ios-nuclear", "ios-nuclear-outline", "ios-nutrition", "ios-nutrition-outline", "ios-open", "ios-open-outline", "ios-options", "ios-options-outline", "ios-outlet", "ios-outlet-outline", "ios-paper", "ios-paper-outline", "ios-paper-plane", "ios-paper-plane-outline", "ios-partly-sunny", "ios-partly-sunny-outline", "ios-pause", "ios-pause-outline", "ios-paw", "ios-paw-outline", "ios-people", "ios-people-outline", "ios-person", "ios-person-add", "ios-person-add-outline", "ios-person-outline", "ios-phone-landscape", "ios-phone-landscape-outline", "ios-phone-portrait", "ios-phone-portrait-outline", "ios-photos", "ios-photos-outline", "ios-pie", "ios-pie-outline", "ios-pin", "ios-pin-outline", "ios-pint", "ios-pint-outline", "ios-pizza", "ios-pizza-outline", "ios-plane", "ios-plane-outline", "ios-planet", "ios-planet-outline", "ios-play", "ios-play-outline", "ios-podium", "ios-podium-outline", "ios-power", "ios-power-outline", "ios-pricetag", "ios-pricetag-outline", "ios-pricetags", "ios-pricetags-outline", "ios-print", "ios-print-outline", "ios-pulse", "ios-pulse-outline", "ios-qr-scanner", "ios-qr-scanner-outline", "ios-quote", "ios-quote-outline", "ios-radio", "ios-radio-button-off", "ios-radio-button-off-outline", "ios-radio-button-on", "ios-radio-button-on-outline", "ios-radio-outline", "ios-rainy", "ios-rainy-outline", "ios-recording", "ios-recording-outline", "ios-redo", "ios-redo-outline", "ios-refresh", "ios-refresh-circle", "ios-refresh-circle-outline", "ios-refresh-outline", "ios-remove", "ios-remove-circle", "ios-remove-circle-outline", "ios-remove-outline", "ios-reorder", "ios-reorder-outline", "ios-repeat", "ios-repeat-outline", "ios-resize", "ios-resize-outline", "ios-restaurant", "ios-restaurant-outline", "ios-return-left", "ios-return-left-outline", "ios-return-right", "ios-return-right-outline", "ios-reverse-camera", "ios-reverse-camera-outline", "ios-rewind", "ios-rewind-outline", "ios-ribbon", "ios-ribbon-outline", "ios-rose", "ios-rose-outline", "ios-sad", "ios-sad-outline", "ios-school", "ios-school-outline", "ios-search", "ios-search-outline", "ios-send", "ios-send-outline", "ios-settings", "ios-settings-outline", "ios-share", "ios-share-alt", "ios-share-alt-outline", "ios-share-outline", "ios-shirt", "ios-shirt-outline", "ios-shuffle", "ios-shuffle-outline", "ios-skip-backward", "ios-skip-backward-outline", "ios-skip-forward", "ios-skip-forward-outline", "ios-snow", "ios-snow-outline", "ios-speedometer", "ios-speedometer-outline", "ios-square", "ios-square-outline", "ios-star", "ios-star-half", "ios-star-half-outline", "ios-star-outline", "ios-stats", "ios-stats-outline", "ios-stopwatch", "ios-stopwatch-outline", "ios-subway", "ios-subway-outline", "ios-sunny", "ios-sunny-outline", "ios-swap", "ios-swap-outline", "ios-switch", "ios-switch-outline", "ios-sync", "ios-sync-outline", "ios-tablet-landscape", "ios-tablet-landscape-outline", "ios-tablet-portrait", "ios-tablet-portrait-outline", "ios-tennisball", "ios-tennisball-outline", "ios-text", "ios-text-outline", "ios-thermometer", "ios-thermometer-outline", "ios-thumbs-down", "ios-thumbs-down-outline", "ios-thumbs-up", "ios-thumbs-up-outline", "ios-thunderstorm", "ios-thunderstorm-outline", "ios-time", "ios-time-outline", "ios-timer", "ios-timer-outline", "ios-train", "ios-train-outline", "ios-transgender", "ios-transgender-outline", "ios-trash", "ios-trash-outline", "ios-trending-down", "ios-trending-down-outline", "ios-trending-up", "ios-trending-up-outline", "ios-trophy", "ios-trophy-outline", "ios-umbrella", "ios-umbrella-outline", "ios-undo", "ios-undo-outline", "ios-unlock", "ios-unlock-outline", "ios-videocam", "ios-videocam-outline", "ios-volume-down", "ios-volume-down-outline", "ios-volume-mute", "ios-volume-mute-outline", "ios-volume-off", "ios-volume-off-outline", "ios-volume-up", "ios-volume-up-outline", "ios-walk", "ios-walk-outline", "ios-warning", "ios-warning-outline", "ios-watch", "ios-watch-outline", "ios-water", "ios-water-outline", "ios-wifi", "ios-wifi-outline", "ios-wine", "ios-wine-outline", "ios-woman", "ios-woman-outline", "logo-android", "logo-angular", "logo-apple", "logo-bitcoin", "logo-buffer", "logo-chrome", "logo-codepen", "logo-css3", "logo-designernews", "logo-dribbble", "logo-dropbox", "logo-euro", "logo-facebook", "logo-foursquare", "logo-freebsd-devil", "logo-github", "logo-google", "logo-googleplus", "logo-hackernews", "logo-html5", "logo-instagram", "logo-javascript", "logo-linkedin", "logo-markdown", "logo-nodejs", "logo-octocat", "logo-pinterest", "logo-playstation", "logo-python", "logo-reddit", "logo-rss", "logo-sass", "logo-skype", "logo-snapchat", "logo-steam", "logo-tumblr", "logo-tux", "logo-twitch", "logo-twitter", "logo-usd", "logo-vimeo", "logo-whatsapp", "logo-windows", "logo-wordpress", "logo-xbox", "logo-yahoo", "logo-yen", "logo-youtube", "md-add", "md-add-circle", "md-alarm", "md-albums", "md-alert", "md-american-football", "md-analytics", "md-aperture", "md-apps", "md-appstore", "md-archive", "md-arrow-back", "md-arrow-down", "md-arrow-dropdown", "md-arrow-dropdown-circle", "md-arrow-dropleft", "md-arrow-dropleft-circle", "md-arrow-dropright", "md-arrow-dropright-circle", "md-arrow-dropup", "md-arrow-dropup-circle", "md-arrow-forward", "md-arrow-round-back", "md-arrow-round-down", "md-arrow-round-forward", "md-arrow-round-up", "md-arrow-up", "md-at", "md-attach", "md-backspace", "md-barcode", "md-baseball", "md-basket", "md-basketball", "md-battery-charging", "md-battery-dead", "md-battery-full", "md-beaker", "md-beer", "md-bicycle", "md-bluetooth", "md-boat", "md-body", "md-bonfire", "md-book", "md-bookmark", "md-bookmarks", "md-bowtie", "md-briefcase", "md-browsers", "md-brush", "md-bug", "md-build", "md-bulb", "md-bus", "md-cafe", "md-calculator", "md-calendar", "md-call", "md-camera", "md-car", "md-card", "md-cart", "md-cash", "md-chatboxes", "md-chatbubbles", "md-checkbox", "md-checkbox-outline", "md-checkmark", "md-checkmark-circle", "md-checkmark-circle-outline", "md-clipboard", "md-clock", "md-close", "md-close-circle", "md-closed-captioning", "md-cloud", "md-cloud-circle", "md-cloud-done", "md-cloud-download", "md-cloud-outline", "md-cloud-upload", "md-cloudy", "md-cloudy-night", "md-code", "md-code-download", "md-code-working", "md-cog", "md-color-fill", "md-color-filter", "md-color-palette", "md-color-wand", "md-compass", "md-construct", "md-contact", "md-contacts", "md-contract", "md-contrast", "md-copy", "md-create", "md-crop", "md-cube", "md-cut", "md-desktop", "md-disc", "md-document", "md-done-all", "md-download", "md-easel", "md-egg", "md-exit", "md-expand", "md-eye", "md-eye-off", "md-fastforward", "md-female", "md-filing", "md-film", "md-finger-print", "md-flag", "md-flame", "md-flash", "md-flask", "md-flower", "md-folder", "md-folder-open", "md-football", "md-funnel", "md-game-controller-a", "md-game-controller-b", "md-git-branch", "md-git-commit", "md-git-compare", "md-git-merge", "md-git-network", "md-git-pull-request", "md-glasses", "md-globe", "md-grid", "md-hammer", "md-hand", "md-happy", "md-headset", "md-heart", "md-heart-outline", "md-help", "md-help-buoy", "md-help-circle", "md-home", "md-ice-cream", "md-image", "md-images", "md-infinite", "md-information", "md-information-circle", "md-ionic", "md-ionitron", "md-jet", "md-key", "md-keypad", "md-laptop", "md-leaf", "md-link", "md-list", "md-list-box", "md-locate", "md-lock", "md-log-in", "md-log-out", "md-magnet", "md-mail", "md-mail-open", "md-male", "md-man", "md-map", "md-medal", "md-medical", "md-medkit", "md-megaphone", "md-menu", "md-mic", "md-mic-off", "md-microphone", "md-moon", "md-more", "md-move", "md-musical-note", "md-musical-notes", "md-navigate", "md-no-smoking", "md-notifications", "md-notifications-off", "md-notifications-outline", "md-nuclear", "md-nutrition", "md-open", "md-options", "md-outlet", "md-paper", "md-paper-plane", "md-partly-sunny", "md-pause", "md-paw", "md-people", "md-person", "md-person-add", "md-phone-landscape", "md-phone-portrait", "md-photos", "md-pie", "md-pin", "md-pint", "md-pizza", "md-plane", "md-planet", "md-play", "md-podium", "md-power", "md-pricetag", "md-pricetags", "md-print", "md-pulse", "md-qr-scanner", "md-quote", "md-radio", "md-radio-button-off", "md-radio-button-on", "md-rainy", "md-recording", "md-redo", "md-refresh", "md-refresh-circle", "md-remove", "md-remove-circle", "md-reorder", "md-repeat", "md-resize", "md-restaurant", "md-return-left", "md-return-right", "md-reverse-camera", "md-rewind", "md-ribbon", "md-rose", "md-sad", "md-school", "md-search", "md-send", "md-settings", "md-share", "md-share-alt", "md-shirt", "md-shuffle", "md-skip-backward", "md-skip-forward", "md-snow", "md-speedometer", "md-square", "md-square-outline", "md-star", "md-star-half", "md-star-outline", "md-stats", "md-stopwatch", "md-subway", "md-sunny", "md-swap", "md-switch", "md-sync", "md-tablet-landscape", "md-tablet-portrait", "md-tennisball", "md-text", "md-thermometer", "md-thumbs-down", "md-thumbs-up", "md-thunderstorm", "md-time", "md-timer", "md-train", "md-transgender", "md-trash", "md-trending-down", "md-trending-up", "md-trophy", "md-umbrella", "md-undo", "md-unlock", "md-videocam", "md-volume-down", "md-volume-mute", "md-volume-off", "md-volume-up", "md-walk", "md-warning", "md-watch", "md-water", "md-wifi", "md-wine", "md-woman"]
}
]
}
src/components/ui/icons/sets/maki.json 0 → 100644
View file @ 3be931bc
{
"name": "Maki",
"href": "maki",
"prefix": "maki",
"lists": [
{
"name": "Icons",
"icons": ["aboveground-rail","airfield","airport","art-gallery","bar","baseball","basketball","beer","belowground-rail","bicycle","bus","cafe","campsite","cemetery","cinema","college","commerical-building","credit-card","cricket","embassy","fast-food","ferry","fire-station","football","fuel","garden","giraffe","golf","grocery-store","harbor","heliport","hospital","industrial-building","library","lodging","london-underground","minefield","monument","museum","pharmacy","pitch","police","post","prison","rail","religious-christian","religious-islam","religious-jewish","restaurant","roadblock","school","shop","skiing","soccer","swimming","tennis","theatre","toilet","town-hall","trash","tree-1","tree-2","warehouse"] }
]
}
src/components/ui/icons/sets/names.json 0 → 100644
View file @ 3be931bc
[
"vuestic",
"brandico",
"entypo",
"font-awesome",
"fontelico",
"glyphicons",
"iconic-stroke",
"ionicons",
"maki",
"openweb"
]
src/components/ui/icons/sets/openweb.json 0 → 100644
View file @ 3be931bc
{
"name": "OpenWeb Icons",
"href": "openweb",
"prefix": "openwebicons",
"lists": [
{
"name": "Icons",
"icons": ["apml","open-share","share","feed","ostatus","opml","activity","geo","opensearch","oauth","openid","rdf","dataportability","federated","open-web","web-intents","xmpp","qr","epub","opengraph","foaf","info-card","browserid","persona","remote-storage","odata","markdown","tosdr"]
}
]
}
src/components/ui/icons/sets/typicons.json 0 → 100644
View file @ 3be931bc
{
"name": "Typicons",
"href": "typicons",
"prefix": "typicons",
"lists": [
{
"name": "Icons",
"icons": ["adjust-brightness","adjust-contrast","anchor-outline","anchor","archive","arrow-back-outline","arrow-back","arrow-down-outline","arrow-down-thick","arrow-down","arrow-forward-outline","arrow-forward","arrow-left-outline","arrow-left-thick","arrow-left","arrow-loop-outline","arrow-loop","arrow-maximise-outline","arrow-maximise","arrow-minimise-outline","arrow-minimise","arrow-move-outline","arrow-move","arrow-repeat-outline","arrow-repeat","arrow-right-outline","arrow-right-thick","arrow-right","arrow-shuffle","arrow-sorted-down","arrow-sorted-up","arrow-sync-outline","arrow-sync","arrow-unsorted","arrow-up-outline","arrow-up-thick","arrow-up","at","attachment-outline","attachment","backspace-outline","backspace","battery-charge","battery-full","battery-high","battery-low","battery-mid","beaker","beer","bell","book","bookmark","briefcase","brush","business-card","calculator","calendar-outline","calendar","camera-outline","camera","cancel-outline","cancel","chart-area-outline","chart-area","chart-bar-outline","chart-bar","chart-line-outline","chart-line","chart-pie-outline","chart-pie","chevron-left-outline","chevron-left","chevron-right-outline","chevron-right","clipboard","cloud-storage","cloud-storage-outline","code-outline","code","coffee","cog-outline","cog","compass","contacts","credit-card","css3","database","delete-outline","delete","device-desktop","device-laptop","device-phone","device-tablet","directions","divide-outline","divide","document-add","document-delete","document-text","document","download-outline","download","dropbox","edit","eject-outline","eject","equals-outline","equals","export-outline","export","eye-outline","eye","feather","film","filter","flag-outline","flag","flash-outline","flash","flow-children","flow-merge","flow-parallel","flow-switch","folder-add","folder-delete","folder-open","folder","gift","globe-outline","globe","group-outline","group","headphones","heart-full-outline","heart-half-outline","heart-outline","heart","home-outline","home","html5","image-outline","image","infinity-outline","infinity","info-large-outline","info-large","info-outline","info","input-checked-outline","input-checked","key-outline","key","keyboard","leaf","lightbulb","link-outline","link","location-arrow-outline","location-arrow","location-outline","location","lock-closed-outline","lock-closed","lock-open-outline","lock-open","mail","map","media-eject-outline","media-eject","media-fast-forward-outline","media-fast-forward","media-pause-outline","media-pause","media-play-outline","media-play-reverse-outline","media-play-reverse","media-play","media-record-outline","media-record","media-rewind-outline","media-rewind","media-stop-outline","media-stop","message-typing","message","messages","microphone-outline","microphone","minus-outline","minus","mortar-board","news","notes-outline","notes","pen","pencil","phone-outline","phone","pi-outline","pi","pin-outline","pin","pipette","plane-outline","plane","plug","plus-outline","plus","point-of-interest-outline","point-of-interest","power-outline","power","printer","puzzle-outline","puzzle","radar-outline","radar","refresh-outline","refresh","rss-outline","rss","scissors-outline","scissors","shopping-bag","shopping-cart","social-at-circular","social-dribbble-circular","social-dribbble","social-facebook-circular","social-facebook","social-flickr-circular","social-flickr","social-github-circular","social-github","social-google-plus-circular","social-google-plus","social-instagram-circular","social-instagram","social-last-fm-circular","social-last-fm","social-linkedin-circular","social-linkedin","social-pinterest-circular","social-pinterest","social-skype-outline","social-skype","social-tumbler-circular","social-tumbler","social-twitter-circular","social-twitter","social-vimeo-circular","social-vimeo","social-youtube-circular","social-youtube","sort-alphabetically-outline","sort-alphabetically","sort-numerically-outline","sort-numerically","spanner-outline","spanner","spiral","star-full-outline","star-half-outline","star-half","star-outline","star","starburst-outline","starburst","stopwatch","support","tabs-outline","tag","tags","th-large-outline","th-large","th-list-outline","th-list","th-menu-outline","th-menu","th-small-outline","th-small","thermometer","thumbs-down","thumbs-ok","thumbs-up","tick-outline","tick","ticket","time","times-outline","times","trash","tree","upload-outline","upload","user-add-outline","user-add","user-delete-outline","user-delete","user-outline","user","vendor-android","vendor-apple","vendor-microsoft","video-outline","video","volume-down","volume-mute","volume-up","volume","warning-outline","warning","watch","waves-outline","waves","weather-cloudy","weather-downpour","weather-night","weather-partly-sunny","weather-shower","weather-snow","weather-stormy","weather-sunny","weather-windy-cloudy","weather-windy","wi-fi-outline","wi-fi","wine","world-outline","world","zoom-in-outline","zoom-in","zoom-out-outline","zoom-out","zoom-outline"] }
]
}
src/components/ui/icons/sets/vuestic.json 0 → 100644
View file @ 3be931bc
{
"name": "Vuestic",
"href": "vuestic",
"prefix": "vuestic-icon",
"lists": [
{
"name": "Icons",
"icons": ["comments","components","dashboard","extras","files","forms","graph","auth","image","maps","music","settings","statistics","tables","time","ui-elements","user","video"]
}
]
}
src/components/ui/modals/Modals.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="modals-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget class="modals-list larger-padding" :header-text="$t('modal.title')">
<button class="btn btn-danger" @click="showSmallModal()">
{{'modal.small' | translate }}
</button>
<button class="btn btn-info" @click="showMediumModal()">
{{'modal.medium' | translate }}
</button>
<button class="btn btn-warning" @click="showLargeModal()">
{{'modal.large' | translate }}
</button>
<button class="btn btn-success" @click="showStaticModal()">
{{'modal.static' | translate }}
</button>
</vuestic-widget>
</div>
</div>
<!--//Modals-->
<vuestic-modal :show.sync="show" ref="smallModal" v-bind:small="true" :cancelClass="'none'"
:okText="'modal.confirm' | translate" :cancelText="'modal.cancel' | translate">
<div slot="title">{{'modal.smallTitle' | translate}}</div>
<div>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</div>
</vuestic-modal>
<vuestic-modal :show.sync="show" ref="mediumModal" :okText="'modal.confirm' | translate"
:cancelText="'modal.cancel' | translate">
<div slot="title">{{'modal.mediumTitle' | translate}}</div>
<div>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</div>
</vuestic-modal>
<vuestic-modal :show.sync="show" v-bind:large="true" ref="largeModal" :okText="'modal.confirm' | translate"
:cancelText="'modal.cancel' | translate">
<div slot="title">{{'modal.largeTitle' | translate}}</div>
<div>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</div>
</vuestic-modal>
<vuestic-modal :show.sync="show" v-bind:small="true" v-bind:force="true" ref="staticModal" :cancelClass="'none'"
:okText="'modal.close' | translate">
<div slot="title">{{'modal.staticTitle' | translate}}</div>
<div>
{{'modal.staticMessage' | translate}}
</div>
</vuestic-modal>
</div>
</template>
<script>
export default {
name: 'modals',
data () {
return {
show: true
}
},
methods: {
showSmallModal () {
this.$refs.smallModal.open()
},
showMediumModal () {
this.$refs.mediumModal.open()
},
showLargeModal () {
this.$refs.largeModal.open()
},
showStaticModal () {
this.$refs.staticModal.open()
}
}
}
</script>
<style lang="scss">
.modals-page {
.modals-list {
.btn {
margin-right: 20px;
margin-bottom: 25px;
}
}
}
</style>
src/components/ui/notifications/Notifications.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="notifications-page">
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'notificationsPage.popovers.title' | translate">
<div class="row">
<div class="col-md-6">
<fieldset>
<div class="form-group">
<div class="input-group">
<input id="popover-title" v-model="popoverTitle" @input="checkPopoverContents" required/>
<label class="control-label" for="popover-title">{{'notificationsPage.popovers.popoverTitleLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="popover-text" v-model="popoverText" @input="checkPopoverContents" required/>
<label class="control-label" for="popover-text">{{'notificationsPage.popovers.popoverTextLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="popover-icon" v-model="popoverIcon" @input="checkPopoverContents" required/>
<label class="control-label" for="popover-icon">{{'notificationsPage.popovers.popoverIconLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<vuestic-popover popover-class="vuestic-tooltip" placement="right" :disabled="isPopoverDisabled">
<button slot="trigger" class="btn btn-sm btn-primary">
{{'notificationsPage.popovers.showPopover' | translate}}
</button>
<i
slot="icon"
class="fa"
:class="popoverIcon">
</i>
<span slot="header">{{popoverTitle}}</span>
<span slot="body">{{popoverText}}</span>
</vuestic-popover>
</fieldset>
</div>
<div class="col-md-6">
<p>
Any text can be used for
<vuestic-tooltip :options="topTooltipOptions"><a href="#">{{'notificationsPage.popovers.topTooltip' | translate}}</a></vuestic-tooltip>
showcase. Just anything you can possibly imagine to test
<vuestic-tooltip :options="rightTooltipOptions"><a href="#">{{'notificationsPage.popovers.rightTooltip' | translate}}</a></vuestic-tooltip>.
But it can appear on the
<vuestic-tooltip :options="leftTooltipOptions"><a href="#">{{'notificationsPage.popovers.leftTooltip' | translate}}</a></vuestic-tooltip>.
Or just
<vuestic-tooltip :options="bottomTooltipOptions"><a href="#">{{'notificationsPage.popovers.bottomTooltip' | translate}}</a></vuestic-tooltip>
the item.
</p>
</div>
</div>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'notificationsPage.alerts.title' | translate">
<vuestic-alert type="success" :withCloseBtn="true">
<span class="badge badge-pill badge-success">{{'notificationsPage.alerts.success' | translate}}</span>
{{'notificationsPage.alerts.successMessage' | translate}}
<i class="fa fa-close alert-close"></i>
</vuestic-alert>
<vuestic-alert type="info" :withCloseBtn="true">
<span class="badge badge-pill badge-info">{{'notificationsPage.alerts.info' | translate}}</span>
{{'notificationsPage.alerts.infoMessage' | translate}}
</vuestic-alert>
<vuestic-alert type="warning" :withCloseBtn="true">
<span class="badge badge-pill badge-warning">{{'notificationsPage.alerts.warning' | translate}}</span>
{{'notificationsPage.alerts.warningMessage' | translate}}
</vuestic-alert>
<vuestic-alert type="danger" :withCloseBtn="true">
<span class="badge badge-pill badge-danger">{{'notificationsPage.alerts.danger' | translate}}</span>
{{'notificationsPage.alerts.dangerMessage' | translate}}
</vuestic-alert>
</vuestic-widget>
</div>
</div>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'notificationsPage.toasts.title' | translate">
<div class="row">
<div class="col-md-6">
<fieldset>
<div class="form-group">
<div class="input-group">
<input id="toast-text" v-model="toastText" required/>
<label class="control-label" for="toast-text">{{'notificationsPage.toasts.textLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="toast-duration" type="number" v-model="toastDuration" required/>
<label class="control-label" for="toast-duration">{{'notificationsPage.toasts.durationLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="toast-icon" v-model="toastIcon" required/>
<label class="control-label" for="toast-icon">{{'notificationsPage.toasts.iconLabel' | translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group toasts-position-group d-flex flex-row">
<toast-position-picker v-model="toastPosition" />
<vuestic-checkbox
:label="'notificationsPage.toasts.fullWidthLabel' | translate"
:id="'toast-fullwidth'"
v-model="isToastFullWidth"/>
</div>
<button slot="trigger" class="btn btn-sm btn-primary" @click="launchToast">
{{'notificationsPage.toasts.launchToast' | translate}}
</button>
</fieldset>
</div>
<div class="col-md-6 justify-content-center align-items-center d-none d-md-flex">
<div class="toasted-container sample-toasted-container" v-if="isToastContentPresent">
<div class="toasted vuestic-toast none default">
<i class="fa" :class="toastIcon" v-if="toastIcon"></i>{{toastText}}
</div>
</div>
</div>
</div>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
import ToastPositionPicker from './ToastPositionPicker.vue'
export default {
name: 'notifications',
components: {ToastPositionPicker},
data () {
return {
popoverTitle: 'Hey!',
popoverText: 'This popover is amazing',
popoverIcon: 'fa-image',
isPopoverDisabled: false,
topTooltipOptions: {
content: 'Top tooltip text',
placement: 'top'
},
leftTooltipOptions: {
content: 'Left tooltip text',
placement: 'left'
},
rightTooltipOptions: {
content: 'Right tooltip text',
placement: 'right'
},
bottomTooltipOptions: {
content: 'Bottom tooltip text',
placement: 'bottom'
},
toastText: 'This toast is awesome!',
toastDuration: 2500,
toastIcon: 'fa-star-o',
toastPosition: 'bottom-right',
isToastFullWidth: false
}
},
computed: {
isToastContentPresent () {
return !!(this.toastText || this.toastIcon)
}
},
methods: {
checkPopoverContents () {
if (!(this.popoverTitle || this.popoverText || this.popoverIcon)) {
this.isPopoverDisabled = true
} else {
this.isPopoverDisabled = false
}
},
launchToast () {
this.showToast(this.toastText, {
icon: this.toastIcon,
position: this.toastPosition,
duration: this.toastDuration,
fullWidth: this.isToastFullWidth
})
}
}
}
</script>
<style lang="scss" scoped>
.toast-position-picker {
margin-right: 2rem;
}
.toasted-container.sample-toasted-container {
position: static;
transform: translateX(0);
.toasted {
position: static;
transform: translateY(0);
}
}
</style>
src/components/ui/notifications/ToastPositionPicker.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="toast-position-picker">
<div class="position-boxes-row">
<div class="position-box"
@click="updatePosition('top-left')"
:class="{'selected': isBoxSelected('top-left')}">
</div>
<div class="position-box"
@click="updatePosition('top-center')"
:class="{'selected': isBoxSelected('top-center')}">
</div>
<div class="position-box"
@click="updatePosition('top-right')"
:class="{'selected': isBoxSelected('top-right')}">
</div>
</div>
<div class="position-boxes-row">
<div class="position-box"
@click="updatePosition('bottom-left')"
:class="{'selected': isBoxSelected('bottom-left')}">
</div>
<div class="position-box"
@click="updatePosition('bottom-center')"
:class="{'selected': isBoxSelected('bottom-center')}">
</div>
<div class="position-box"
@click="updatePosition('bottom-right')"
:class="{'selected': isBoxSelected('bottom-right')}">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'toast-position-picker',
props: {
value: {
type: String,
default: 'bottom-center'
}
},
methods: {
updatePosition (position) {
this.$emit('input', position)
},
isBoxSelected (position) {
return this.value === position
}
}
}
</script>
<style lang='scss' scoped>
@import '../../../sass/_variables.scss';
.toast-position-picker {
width: 112px;
height: 76px;
}
.position-boxes-row {
display: flex;
flex-direction: row;
&:first-child {
margin-bottom: 2px;
}
}
.position-box {
height: 36px;
width: 36px;
margin-right: 2px;
cursor: pointer;
background-color: $brand-primary;
opacity: 0.3;
&:last-child {
margin-right: 0;
}
&:hover {
opacity: 0.6;
}
&.selected {
opacity: 1;
}
}
</style>
src/components/ui/spinners/Spinners.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('spinners.title')">
<div v-for="(group, i) in groups" :key="i" class="row">
<div v-for="item in group" :key="item" class="col-sm-12 col-md-3">
<div class="spinner-box-container">
<div class="spinner-box">
<component
:is="item"
:color="palette.primary"
:size="config.size">
</component>
</div>
<span>{{item | displayName}}</span>
</div>
</div>
</div>
<div class="row align-center">
<div class="col text-center">
{{'spinners.poweredBy' | translate}}
<a :href="'http://epic-spinners.epicmax.co/'" target="_blank">Epic Spinners</a>
</div>
</div>
</vuestic-widget>
</div>
</div>
</template>
<script>
import * as spinners from 'epic-spinners'
import {mapGetters} from 'vuex'
export default {
components: {
...spinners
},
data: function () {
return {
config: {
size: 80,
group: 4
}
}
},
computed: {
...mapGetters(['palette']),
groups () {
return this.groupItems(Object.keys(spinners), this.config.group)
}
},
filters: {
displayName (name) {
return name.replace('Spinner', '').match(/[A-Z][a-z]+/g).join(' ')
}
},
methods: {
groupItems (items, groupSize) {
let grouped = []
for (let i = 0; i < items.length; i += groupSize) {
grouped.push(items.slice(i, i + groupSize))
}
return grouped
}
}
}
</script>
<style lang="scss" scoped>
.spinner-box-container {
text-align: center;
padding-bottom: 40px;
span {
font-size: .8rem;
}
}
.spinner-box {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
src/components/ui/tree-view/TreeView.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="sets-list row">
<div class="col-md-12">
<div class="row">
<div class="small-set col-lg-6">
<vuestic-widget :headerText="$t('treeView.basic')">
<tree-view-basic-preview/>
</vuestic-widget>
</div>
<div class="small-set col-lg-6">
<vuestic-widget :headerText="$t('treeView.icons')">
<tree-view-icons-preview/>
</vuestic-widget>
</div>
<div class="small-set col-lg-6">
<vuestic-widget :headerText="$t('treeView.advanced')">
<tree-view-advanced-preview/>
</vuestic-widget>
</div>
<div class="small-set col-lg-6">
<vuestic-widget :headerText="$t('treeView.editable')">
<tree-view-editable-preview/>
</vuestic-widget>
</div>
<div class="small-set col-lg-6">
<vuestic-widget :headerText="$t('treeView.selectable')">
<tree-view-selectable-preview/>
</vuestic-widget>
</div>
</div>
</div>
</div>
</template>
<script>
import VuesticWidget
from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue'
import TreeViewBasicPreview from './TreeViewBasicPreview'
import TreeViewIconsPreview from './TreeViewIconsPreview'
import TreeViewSelectablePreview from './TreeViewSelectablePreview'
import TreeViewAdvancedPreview from './TreeViewAdvancedPreview'
import TreeViewEditablePreview from './TreeViewEditablePreview'
export default {
name: 'tree-view',
components: {
TreeViewEditablePreview,
TreeViewAdvancedPreview,
TreeViewSelectablePreview,
TreeViewIconsPreview,
TreeViewBasicPreview,
VuesticWidget
},
data () {
return {
treeViewData: {}
}
}
}
</script>
<style lang="scss">
</style>
src/components/ui/tree-view/TreeViewAdvancedPreview.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="tree-view-advanced-preview">
<div class="row mb-4">
<div class="small-set col-sm-6 d-flex justify-content-center">
<button class="btn btn-primary btn-micro"
@click="$refs.treeView.expand()"
>
EXPAND ALL
</button>
</div>
<div class="small-set col-sm-6 d-flex justify-content-center">
<button class="btn btn-primary btn-micro"
@click="$refs.treeView.collapse()"
>
COLLAPSE ALL
</button>
</div>
</div>
<vuestic-tree-root ref="treeView">
<vuestic-tree-category label="Electronics">
<vuestic-tree-node>Cellphones</vuestic-tree-node>
<vuestic-tree-node>Camera Body Kits</vuestic-tree-node>
<vuestic-tree-node>External HDDs</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category isOpen label="Products">
<vuestic-tree-category label="Cables">
<vuestic-tree-node>Audio</vuestic-tree-node>
<vuestic-tree-node>Video</vuestic-tree-node>
<vuestic-tree-node>Optical</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-node>Monitors</vuestic-tree-node>
<vuestic-tree-node>Keyboards</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category label="Apparel">
<vuestic-tree-node>Jackets</vuestic-tree-node>
<vuestic-tree-node>Pants</vuestic-tree-node>
<vuestic-tree-node>Skirts</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</div>
</template>
<script>
export default {
name: 'tree-view-advanced-preview',
}
</script>
src/components/ui/tree-view/TreeViewBasicPreview.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-tree-root>
<vuestic-tree-category label="Electronics">
<vuestic-tree-node>Cellphones</vuestic-tree-node>
<vuestic-tree-node>Camera Body Kits</vuestic-tree-node>
<vuestic-tree-node>External HDDs</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category isOpen label="Products">
<vuestic-tree-category label="Cables">
<vuestic-tree-node>Audio</vuestic-tree-node>
<vuestic-tree-node>Video</vuestic-tree-node>
<vuestic-tree-node>Optical</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-node>Monitors</vuestic-tree-node>
<vuestic-tree-node>Keyboards</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category label="Apparel">
<vuestic-tree-node>Jackets</vuestic-tree-node>
<vuestic-tree-node>Pants</vuestic-tree-node>
<vuestic-tree-node>Skirts</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</template>
<script>
export default {
name: 'tree-view-basic-preview',
}
</script>
src/components/ui/tree-view/TreeViewEditablePreview.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-tree-root>
<vuestic-tree-category label="Electronics">
<vuestic-tree-node v-for="electronic in electronics" :key="electronic.id">
<div class="form-group">
<div class="input-group">
<input v-model="electronic.name">
<i class="bar"></i>
</div>
</div>
</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category isOpen label="Products">
<vuestic-tree-node v-for="product in products" :key="product.id">
<div class="form-group">
<div class="input-group">
<input v-model="product.name">
<i class="bar"></i>
</div>
</div>
<div slot="iconRight" class="icon" @click="removeProduct(product)">
<span aria-hidden="true" class="ion ion-md-close"/>
</div>
</vuestic-tree-node>
<vuestic-tree-node>
<button class="btn btn-primary btn-micro mb-2"
@click="addProduct()"
>
Add new product
</button>
</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</template>
<script>
export default {
name: 'tree-view-editable-preview',
data () {
return {
electronics: [
{ id: 1, name: 'Cellphones' },
{ id: 2, name: 'Camera Body Kits' },
{ id: 3, name: 'External HDDs' },
],
products: [
{ id: 4, name: 'Cables' },
{ id: 5, name: 'Monitors' },
{ id: 6, name: 'Keyboards' },
],
}
},
methods: {
addProduct () {
this.products.push({
id: Math.floor(Math.random() * 100000),
name: 'New product'
})
},
removeProduct (product) {
this.products = this.products.filter(productToFilter => productToFilter !== product)
}
},
}
</script>
<style scoped>
</style>
src/components/ui/tree-view/TreeViewIconsPreview.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-tree-root>
<vuestic-tree-category label="Images">
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-images"/>
</div>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-image"/>
</div>
sick_catz_cuddling.jpg
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-image"/>
</div>
pins-and-needles.jpg
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-image"/>
</div>
avatar_50x50.jpg
</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category label="Music" isOpen>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-star-outline"/>
</div>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-musical-notes"/>
</div>
Taylor_swift_hello.mp3
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-musical-notes"/>
</div>
straight_to_the_bank.wav
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-musical-notes"/>
</div>
imagine_dragons_promo.mp3
</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category label="Miscellaneous">
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-list"/>
</div>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-grid"/>
</div>
dump.sql
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-help"/>
</div>
unknown-file
</vuestic-tree-node>
<vuestic-tree-node>
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-key"/>
</div>
secure.key
</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</template>
<script>
export default {
name: 'tree-view-icons-preview',
}
</script>
src/components/ui/tree-view/TreeViewSelectablePreview.vue 0 → 100644
View file @ 3be931bc
<template>
<vuestic-tree-root>
<vuestic-tree-category label="Products">
<vuestic-tree-node v-for="product in products" :key="product.id">
<vuestic-checkbox
slot="checkbox"
v-model="product.selected"
/>
{{ product.name }}
</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category isOpen label="Electronics">
<vuestic-tree-node v-for="electronic in electronics" :key="electronic.id">
<vuestic-checkbox
slot="checkbox"
v-model="electronic.selected"
/>
{{ electronic.name }}
</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</template>
<script>
export default {
name: 'tree-view-selectable-preview',
data () {
return {
electronics: [
{ id: 1, name: 'Cellphones', selected: false },
{ id: 2, name: 'Camera Body Kits', selected: false },
{ id: 3, name: 'External HDDs', selected: false },
],
products: [
{ id: 4, name: 'Cables', selected: false },
{ id: 5, name: 'Monitors', selected: false },
{ id: 6, name: 'Keyboards', selected: false },
]
}
},
}
</script>
src/components/ui/typography/Typography.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="ui-typography">
<div class="row">
<div class="col-md-12">
<vuestic-widget>
<div class="typo-headers">
<h1>Very Important Information H1</h1>
<h2>Sections & Modal Names H2</h2>
<h3>Articles & Block Headings H3</h3>
<h4>Random Tiny Heading H4</h4>
</div>
<div class="typo-articles">
<p>
The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas,
<a href="#">woodlands</a>, thorny scrublands, <a href="#">mountains</a>,
and coastal hills. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain <span
class="vue-highlighted-text">highlighted text</span> zebra are endangered.</p>
<blockquote class="blockquote">
<p>
Blockquotes. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins. </p>
<footer class="blockquote-footer">Jefferey Lebowski</footer>
</blockquote>
<p>
lthough zebra species may have overlapping ranges, they do not interbreed. In captivity, plains zebras have been crossed with mountain zebras. The hybrid foals <span
class="vue-selected-text">selected text</span> lacked a dewlap and resembled their
</p>
</div>
<div class="vue-lists">
<h2>Lists</h2>
<div class="row">
<div class="col-md-6">
<h3>Unordered</h3>
<ul class="vue-unordered">
<li>
A wide variety of hypotheses have been proposed to account for the evolution of the striking stripes of zebras.
</li>
<li>The more traditional of these (1 and 2, below) relate to camouflage.</li>
<li>The vertical striping may help the zebra hide in the grass by disrupting its outline.</li>
<li>
In addition, even at moderate distances, the striking striping merges to an apparent grey.
<ul class="vue-list-inner">
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.</li>
<li>Such as lions and hyenas cannot see well at a distance.</li>
<li>More likely to have smelled or heard a zebra.</li>
</ul>
</li>
<li>Before seeing it from a distance, especially at night.</li>
</ul>
</div>
<div class="col-md-6 text-left">
<div>
<h3>Ordered</h3>
<ol class="vue-ordered">
<li>
A wide variety of hypotheses have been proposed to account for the evolution of the striking stripes of zebras.
</li>
<li>The more traditional of these (1 and 2, below) relate to camouflage.</li>
<li>The vertical striping may help the zebra hide in the grass by disrupting its outline.</li>
<li>
In addition, even at moderate distances, the striking striping merges to an apparent grey.
<ul class="vue-list-inner">
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.
</li>
<li>Such as lions and hyenas cannot see well at a distance.</li>
<li>More likely to have smelled or heard a zebra.</li>
</ul>
</li>
<li>Before seeing it from a distance, especially at night.</li>
</ol>
</div>
</div>
</div>
</div>
<div class="vue-misc">
<h2>Misc</h2>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<address>
<strong>SJØNNA</strong><br>
Nezalezhnasti Ave, 13 - 28A<br>
Minsk, Belarus, 220141<br>
+375 29 319-53-98<br>
<br>
<b>Vasili Savitski</b><br>
<a href="mailto">hello@sjonja.by</a>
</address>
</div>
<div class="col-md-6">
<h3>Well</h3>
<div class="well">
Zebras have excellent eyesight. It is believed that they can see in color. Like most ungulates, the zebra's eyes are on the sides of its head, giving it a wide field of view.
</div>
</div>
</div>
</div>
</vuestic-widget>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'typography'
}
</script>
<style lang="scss">
.ui-typography {
.typo-articles {
margin-bottom: 6.25rem;
width: 90%;
}
.widget-body {
padding: 3.75rem 4.7rem 0 2.2rem !important;
}
.col-md-6 {
padding-right: 0;
}
.vue-lists ul, ol {
width: 85%;
}
}
</style>
src/config/api.js 0 → 100644
View file @ 3be931bc
export const API_CLIENT = 'primotours.webbooking.live'
export const API_SECRET = 'b3040fce7715a2a1fa0ce1c4c770912d'
export const API_ROUTE = 'https://staging-api.tourpaq.com/api/'
src/data/CountriesList.js 0 → 100644
View file @ 3be931bc
export default ['Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegowina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'Brunei Darussalam', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Congo, the Democratic Republic of the', 'Cook Islands', 'Costa Rica', 'Cote d\'Ivoire', 'Croatia (Hrvatska)', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands (Malvinas)', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'France Metropolitan', 'French Guiana', 'French Polynesia', 'French Southern Territories', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard and Mc Donald Islands', 'Holy See (Vatican City State)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran (Islamic Republic of)', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, Democratic People\'s Republic of', 'Korea, Republic of', 'Kuwait', 'Kyrgyzstan', 'Lao, People\'s Democratic Republic', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia, The Former Yugoslav Republic of', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States of', 'Moldova, Republic of', 'Monaco', 'Mongolia', 'Montserrat', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russian Federation', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia (Slovak Republic)', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Sri Lanka', 'St. Helena', 'St. Pierre and Miquelon', 'Sudan', 'Suriname', 'Svalbard and Jan Mayen Islands', 'Swaziland', 'Sweden', 'Switzerland', 'Syrian Arab Republic', 'Taiwan, Province of China', 'Tajikistan', 'Tanzania, United Republic of', 'Thailand', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'United States Minor Outlying Islands', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands (British)', 'Virgin Islands (U.S.)', 'Wallis and Futuna Islands', 'Western Sahara', 'Yemen', 'Yugoslavia', 'Zambia', 'Zimbabwe']
src/data/charts/BubbleChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
import utils from 'services/utils'
let palette = store.getters.palette
export default {
datasets: [
{
label: 'USA',
backgroundColor: utils.hex2rgb(palette.danger, 0.9).css,
borderColor: palette.transparent,
data: [
{
x: 23,
y: 25,
r: 15
},
{
x: 40,
y: 10,
r: 10
},
{
x: 30,
y: 22,
r: 30
},
{
x: 7,
y: 43,
r: 40
},
{
x: 23,
y: 27,
r: 120
},
{
x: 20,
y: 15,
r: 11
},
{
x: 7,
y: 10,
r: 35
},
{
x: 10,
y: 20,
r: 40
}
]
},
{
label: 'Russia',
backgroundColor: utils.hex2rgb(palette.primary, 0.9).css,
borderColor: palette.transparent,
data: [
{
x: 0,
y: 30,
r: 15
},
{
x: 20,
y: 20,
r: 20
},
{
x: 15,
y: 15,
r: 50
},
{
x: 31,
y: 46,
r: 30
},
{
x: 20,
y: 14,
r: 25
},
{
x: 34,
y: 17,
r: 30
},
{
x: 44,
y: 44,
r: 10
},
{
x: 39,
y: 25,
r: 35
}
]
},
{
label: 'Canada',
backgroundColor: utils.hex2rgb(palette.warning, 0.9).css,
borderColor: palette.transparent,
data: [
{
x: 10,
y: 30,
r: 45
},
{
x: 10,
y: 50,
r: 20
},
{
x: 5,
y: 5,
r: 30
},
{
x: 40,
y: 30,
r: 20
},
{
x: 33,
y: 15,
r: 18
},
{
x: 40,
y: 20,
r: 40
},
{
x: 33,
y: 33,
r: 40
}
]
},
{
label: 'Belarus',
backgroundColor: utils.hex2rgb(palette.info, 0.9).css,
borderColor: palette.transparent,
data: [
{
x: 35,
y: 30,
r: 45
},
{
x: 25,
y: 40,
r: 35
},
{
x: 5,
y: 5,
r: 30
},
{
x: 5,
y: 20,
r: 40
},
{
x: 10,
y: 40,
r: 15
},
{
x: 3,
y: 10,
r: 10
},
{
x: 15,
y: 40,
r: 40
},
{
x: 7,
y: 15,
r: 10
}
]
},
{
label: 'Ukraine',
backgroundColor: utils.hex2rgb(palette.success, 0.9).css,
borderColor: palette.transparent,
data: [
{
x: 25,
y: 10,
r: 40
},
{
x: 17,
y: 40,
r: 40
},
{
x: 35,
y: 10,
r: 20
},
{
x: 3,
y: 40,
r: 10
},
{
x: 40,
y: 40,
r: 40
},
{
x: 20,
y: 10,
r: 10
},
{
x: 10,
y: 27,
r: 35
},
{
x: 7,
y: 26,
r: 40
}
]
}
]
}
src/data/charts/DonutChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['North America', 'South America', 'Australia'],
datasets: [{
label: 'Population (millions)',
backgroundColor: [palette.danger, palette.info, palette.success],
data: [2478, 5267, 734]
}]
}
src/data/charts/HorizontalBarChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Vuestic Satisfaction Score',
backgroundColor: palette.warning,
borderColor: palette.transparent,
data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93]
},
{
label: 'Bulma Satisfaction Score',
backgroundColor: palette.danger,
borderColor: palette.transparent,
data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53]
}
]
}
src/data/charts/LineChartData.js 0 → 100644
View file @ 3be931bc
import utils from 'services/utils'
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Debit',
backgroundColor: utils.hex2rgb(palette.primary, 0.6).css,
borderColor: palette.transparent,
data: [40, 39, 10, 40, 39, 80, 40]
},
{
label: 'Credit',
backgroundColor: utils.hex2rgb(palette.info, 0.6).css,
borderColor: palette.transparent,
data: [50, 20, 70, 30, 10, 5, 70]
}
],
}
src/data/charts/PieChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['Africa', 'Asia', 'Europe'],
datasets: [{
label: 'Population (millions)',
backgroundColor: [palette.primary, palette.warning, palette.danger],
data: [2478, 5267, 734]
}]
}
src/data/charts/VerticalBarChartData.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'USA',
backgroundColor: palette.primary,
borderColor: palette.transparent,
data: [50, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
},
{
label: 'USSR',
backgroundColor: palette.info,
borderColor: palette.transparent,
data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30]
}
]
}
src/data/maps/BubbleMapData.js 0 → 100644
View file @ 3be931bc
let latlong = {}
latlong['AD'] = {
'latitude': 42.5,
'longitude': 1.5
}
latlong['AE'] = {
'latitude': 24,
'longitude': 54
}
latlong['AF'] = {
'latitude': 33,
'longitude': 65
}
latlong['AG'] = {
'latitude': 17.05,
'longitude': -61.8
}
latlong['AI'] = {
'latitude': 18.25,
'longitude': -63.1667
}
latlong['AL'] = {
'latitude': 41,
'longitude': 20
}
latlong['AM'] = {
'latitude': 40,
'longitude': 45
}
latlong['AN'] = {
'latitude': 12.25,
'longitude': -68.75
}
latlong['AO'] = {
'latitude': -12.5,
'longitude': 18.5
}
latlong['AP'] = {
'latitude': 35,
'longitude': 105
}
latlong['AQ'] = {
'latitude': -90,
'longitude': 0
}
latlong['AR'] = {
'latitude': -34,
'longitude': -64
}
latlong['AS'] = {
'latitude': -14.3333,
'longitude': -170
}
latlong['AT'] = {
'latitude': 47.3333,
'longitude': 13.3333
}
latlong['AU'] = {
'latitude': -27,
'longitude': 133
}
latlong['AW'] = {
'latitude': 12.5,
'longitude': -69.9667
}
latlong['AZ'] = {
'latitude': 40.5,
'longitude': 47.5
}
latlong['BA'] = {
'latitude': 44,
'longitude': 18
}
latlong['BB'] = {
'latitude': 13.1667,
'longitude': -59.5333
}
latlong['BD'] = {
'latitude': 24,
'longitude': 90
}
latlong['BE'] = {
'latitude': 50.8333,
'longitude': 4
}
latlong['BF'] = {
'latitude': 13,
'longitude': -2
}
latlong['BG'] = {
'latitude': 43,
'longitude': 25
}
latlong['BH'] = {
'latitude': 26,
'longitude': 50.55
}
latlong['BI'] = {
'latitude': -3.5,
'longitude': 30
}
latlong['BJ'] = {
'latitude': 9.5,
'longitude': 2.25
}
latlong['BM'] = {
'latitude': 32.3333,
'longitude': -64.75
}
latlong['BN'] = {
'latitude': 4.5,
'longitude': 114.6667
}
latlong['BO'] = {
'latitude': -17,
'longitude': -65
}
latlong['BR'] = {
'latitude': -10,
'longitude': -55
}
latlong['BS'] = {
'latitude': 24.25,
'longitude': -76
}
latlong['BT'] = {
'latitude': 27.5,
'longitude': 90.5
}
latlong['BV'] = {
'latitude': -54.4333,
'longitude': 3.4
}
latlong['BW'] = {
'latitude': -22,
'longitude': 24
}
latlong['BY'] = {
'latitude': 53,
'longitude': 28
}
latlong['BZ'] = {
'latitude': 17.25,
'longitude': -88.75
}
latlong['CA'] = {
'latitude': 54,
'longitude': -100
}
latlong['CC'] = {
'latitude': -12.5,
'longitude': 96.8333
}
latlong['CD'] = {
'latitude': 0,
'longitude': 25
}
latlong['CF'] = {
'latitude': 7,
'longitude': 21
}
latlong['CG'] = {
'latitude': -1,
'longitude': 15
}
latlong['CH'] = {
'latitude': 47,
'longitude': 8
}
latlong['CI'] = {
'latitude': 8,
'longitude': -5
}
latlong['CK'] = {
'latitude': -21.2333,
'longitude': -159.7667
}
latlong['CL'] = {
'latitude': -30,
'longitude': -71
}
latlong['CM'] = {
'latitude': 6,
'longitude': 12
}
latlong['CN'] = {
'latitude': 35,
'longitude': 105
}
latlong['CO'] = {
'latitude': 4,
'longitude': -72
}
latlong['CR'] = {
'latitude': 10,
'longitude': -84
}
latlong['CU'] = {
'latitude': 21.5,
'longitude': -80
}
latlong['CV'] = {
'latitude': 16,
'longitude': -24
}
latlong['CX'] = {
'latitude': -10.5,
'longitude': 105.6667
}
latlong['CY'] = {
'latitude': 35,
'longitude': 33
}
latlong['CZ'] = {
'latitude': 49.75,
'longitude': 15.5
}
latlong['DE'] = {
'latitude': 51,
'longitude': 9
}
latlong['DJ'] = {
'latitude': 11.5,
'longitude': 43
}
latlong['DK'] = {
'latitude': 56,
'longitude': 10
}
latlong['DM'] = {
'latitude': 15.4167,
'longitude': -61.3333
}
latlong['DO'] = {
'latitude': 19,
'longitude': -70.6667
}
latlong['DZ'] = {
'latitude': 28,
'longitude': 3
}
latlong['EC'] = {
'latitude': -2,
'longitude': -77.5
}
latlong['EE'] = {
'latitude': 59,
'longitude': 26
}
latlong['EG'] = {
'latitude': 27,
'longitude': 30
}
latlong['EH'] = {
'latitude': 24.5,
'longitude': -13
}
latlong['ER'] = {
'latitude': 15,
'longitude': 39
}
latlong['ES'] = {
'latitude': 40,
'longitude': -4
}
latlong['ET'] = {
'latitude': 8,
'longitude': 38
}
latlong['EU'] = {
'latitude': 47,
'longitude': 8
}
latlong['FI'] = {
'latitude': 62,
'longitude': 26
}
latlong['FJ'] = {
'latitude': -18,
'longitude': 175
}
latlong['FK'] = {
'latitude': -51.75,
'longitude': -59
}
latlong['FM'] = {
'latitude': 6.9167,
'longitude': 158.25
}
latlong['FO'] = {
'latitude': 62,
'longitude': -7
}
latlong['FR'] = {
'latitude': 46,
'longitude': 2
}
latlong['GA'] = {
'latitude': -1,
'longitude': 11.75
}
latlong['GB'] = {
'latitude': 54,
'longitude': -2
}
latlong['GD'] = {
'latitude': 12.1167,
'longitude': -61.6667
}
latlong['GE'] = {
'latitude': 42,
'longitude': 43.5
}
latlong['GF'] = {
'latitude': 4,
'longitude': -53
}
latlong['GH'] = {
'latitude': 8,
'longitude': -2
}
latlong['GI'] = {
'latitude': 36.1833,
'longitude': -5.3667
}
latlong['GL'] = {
'latitude': 72,
'longitude': -40
}
latlong['GM'] = {
'latitude': 13.4667,
'longitude': -16.5667
}
latlong['GN'] = {
'latitude': 11,
'longitude': -10
}
latlong['GP'] = {
'latitude': 16.25,
'longitude': -61.5833
}
latlong['GQ'] = {
'latitude': 2,
'longitude': 10
}
latlong['GR'] = {
'latitude': 39,
'longitude': 22
}
latlong['GS'] = {
'latitude': -54.5,
'longitude': -37
}
latlong['GT'] = {
'latitude': 15.5,
'longitude': -90.25
}
latlong['GU'] = {
'latitude': 13.4667,
'longitude': 144.7833
}
latlong['GW'] = {
'latitude': 12,
'longitude': -15
}
latlong['GY'] = {
'latitude': 5,
'longitude': -59
}
latlong['HK'] = {
'latitude': 22.25,
'longitude': 114.1667
}
latlong['HM'] = {
'latitude': -53.1,
'longitude': 72.5167
}
latlong['HN'] = {
'latitude': 15,
'longitude': -86.5
}
latlong['HR'] = {
'latitude': 45.1667,
'longitude': 15.5
}
latlong['HT'] = {
'latitude': 19,
'longitude': -72.4167
}
latlong['HU'] = {
'latitude': 47,
'longitude': 20
}
latlong['ID'] = {
'latitude': -5,
'longitude': 120
}
latlong['IE'] = {
'latitude': 53,
'longitude': -8
}
latlong['IL'] = {
'latitude': 31.5,
'longitude': 34.75
}
latlong['IN'] = {
'latitude': 20,
'longitude': 77
}
latlong['IO'] = {
'latitude': -6,
'longitude': 71.5
}
latlong['IQ'] = {
'latitude': 33,
'longitude': 44
}
latlong['IR'] = {
'latitude': 32,
'longitude': 53
}
latlong['IS'] = {
'latitude': 65,
'longitude': -18
}
latlong['IT'] = {
'latitude': 42.8333,
'longitude': 12.8333
}
latlong['JM'] = {
'latitude': 18.25,
'longitude': -77.5
}
latlong['JO'] = {
'latitude': 31,
'longitude': 36
}
latlong['JP'] = {
'latitude': 36,
'longitude': 138
}
latlong['KE'] = {
'latitude': 1,
'longitude': 38
}
latlong['KG'] = {
'latitude': 41,
'longitude': 75
}
latlong['KH'] = {
'latitude': 13,
'longitude': 105
}
latlong['KI'] = {
'latitude': 1.4167,
'longitude': 173
}
latlong['KM'] = {
'latitude': -12.1667,
'longitude': 44.25
}
latlong['KN'] = {
'latitude': 17.3333,
'longitude': -62.75
}
latlong['KP'] = {
'latitude': 40,
'longitude': 127
}
latlong['KR'] = {
'latitude': 37,
'longitude': 127.5
}
latlong['KW'] = {
'latitude': 29.3375,
'longitude': 47.6581
}
latlong['KY'] = {
'latitude': 19.5,
'longitude': -80.5
}
latlong['KZ'] = {
'latitude': 48,
'longitude': 68
}
latlong['LA'] = {
'latitude': 18,
'longitude': 105
}
latlong['LB'] = {
'latitude': 33.8333,
'longitude': 35.8333
}
latlong['LC'] = {
'latitude': 13.8833,
'longitude': -61.1333
}
latlong['LI'] = {
'latitude': 47.1667,
'longitude': 9.5333
}
latlong['LK'] = {
'latitude': 7,
'longitude': 81
}
latlong['LR'] = {
'latitude': 6.5,
'longitude': -9.5
}
latlong['LS'] = {
'latitude': -29.5,
'longitude': 28.5
}
latlong['LT'] = {
'latitude': 55,
'longitude': 24
}
latlong['LU'] = {
'latitude': 49.75,
'longitude': 6
}
latlong['LV'] = {
'latitude': 57,
'longitude': 25
}
latlong['LY'] = {
'latitude': 25,
'longitude': 17
}
latlong['MA'] = {
'latitude': 32,
'longitude': -5
}
latlong['MC'] = {
'latitude': 43.7333,
'longitude': 7.4
}
latlong['MD'] = {
'latitude': 47,
'longitude': 29
}
latlong['ME'] = {
'latitude': 42.5,
'longitude': 19.4
}
latlong['MG'] = {
'latitude': -20,
'longitude': 47
}
latlong['MH'] = {
'latitude': 9,
'longitude': 168
}
latlong['MK'] = {
'latitude': 41.8333,
'longitude': 22
}
latlong['ML'] = {
'latitude': 17,
'longitude': -4
}
latlong['MM'] = {
'latitude': 22,
'longitude': 98
}
latlong['MN'] = {
'latitude': 46,
'longitude': 105
}
latlong['MO'] = {
'latitude': 22.1667,
'longitude': 113.55
}
latlong['MP'] = {
'latitude': 15.2,
'longitude': 145.75
}
latlong['MQ'] = {
'latitude': 14.6667,
'longitude': -61
}
latlong['MR'] = {
'latitude': 20,
'longitude': -12
}
latlong['MS'] = {
'latitude': 16.75,
'longitude': -62.2
}
latlong['MT'] = {
'latitude': 35.8333,
'longitude': 14.5833
}
latlong['MU'] = {
'latitude': -20.2833,
'longitude': 57.55
}
latlong['MV'] = {
'latitude': 3.25,
'longitude': 73
}
latlong['MW'] = {
'latitude': -13.5,
'longitude': 34
}
latlong['MX'] = {
'latitude': 23,
'longitude': -102
}
latlong['MY'] = {
'latitude': 2.5,
'longitude': 112.5
}
latlong['MZ'] = {
'latitude': -18.25,
'longitude': 35
}
latlong['NA'] = {
'latitude': -22,
'longitude': 17
}
latlong['NC'] = {
'latitude': -21.5,
'longitude': 165.5
}
latlong['NE'] = {
'latitude': 16,
'longitude': 8
}
latlong['NF'] = {
'latitude': -29.0333,
'longitude': 167.95
}
latlong['NG'] = {
'latitude': 10,
'longitude': 8
}
latlong['NI'] = {
'latitude': 13,
'longitude': -85
}
latlong['NL'] = {
'latitude': 52.5,
'longitude': 5.75
}
latlong['NO'] = {
'latitude': 62,
'longitude': 10
}
latlong['NP'] = {
'latitude': 28,
'longitude': 84
}
latlong['NR'] = {
'latitude': -0.5333,
'longitude': 166.9167
}
latlong['NU'] = {
'latitude': -19.0333,
'longitude': -169.8667
}
latlong['NZ'] = {
'latitude': -41,
'longitude': 174
}
latlong['OM'] = {
'latitude': 21,
'longitude': 57
}
latlong['PA'] = {
'latitude': 9,
'longitude': -80
}
latlong['PE'] = {
'latitude': -10,
'longitude': -76
}
latlong['PF'] = {
'latitude': -15,
'longitude': -140
}
latlong['PG'] = {
'latitude': -6,
'longitude': 147
}
latlong['PH'] = {
'latitude': 13,
'longitude': 122
}
latlong['PK'] = {
'latitude': 30,
'longitude': 70
}
latlong['PL'] = {
'latitude': 52,
'longitude': 20
}
latlong['PM'] = {
'latitude': 46.8333,
'longitude': -56.3333
}
latlong['PR'] = {
'latitude': 18.25,
'longitude': -66.5
}
latlong['PS'] = {
'latitude': 32,
'longitude': 35.25
}
latlong['PT'] = {
'latitude': 39.5,
'longitude': -8
}
latlong['PW'] = {
'latitude': 7.5,
'longitude': 134.5
}
latlong['PY'] = {
'latitude': -23,
'longitude': -58
}
latlong['QA'] = {
'latitude': 25.5,
'longitude': 51.25
}
latlong['RE'] = {
'latitude': -21.1,
'longitude': 55.6
}
latlong['RO'] = {
'latitude': 46,
'longitude': 25
}
latlong['RS'] = {
'latitude': 44,
'longitude': 21
}
latlong['RU'] = {
'latitude': 60,
'longitude': 100
}
latlong['RW'] = {
'latitude': -2,
'longitude': 30
}
latlong['SA'] = {
'latitude': 25,
'longitude': 45
}
latlong['SB'] = {
'latitude': -8,
'longitude': 159
}
latlong['SC'] = {
'latitude': -4.5833,
'longitude': 55.6667
}
latlong['SD'] = {
'latitude': 15,
'longitude': 30
}
latlong['SE'] = {
'latitude': 62,
'longitude': 15
}
latlong['SG'] = {
'latitude': 1.3667,
'longitude': 103.8
}
latlong['SH'] = {
'latitude': -15.9333,
'longitude': -5.7
}
latlong['SI'] = {
'latitude': 46,
'longitude': 15
}
latlong['SJ'] = {
'latitude': 78,
'longitude': 20
}
latlong['SK'] = {
'latitude': 48.6667,
'longitude': 19.5
}
latlong['SL'] = {
'latitude': 8.5,
'longitude': -11.5
}
latlong['SM'] = {
'latitude': 43.7667,
'longitude': 12.4167
}
latlong['SN'] = {
'latitude': 14,
'longitude': -14
}
latlong['SO'] = {
'latitude': 10,
'longitude': 49
}
latlong['SR'] = {
'latitude': 4,
'longitude': -56
}
latlong['ST'] = {
'latitude': 1,
'longitude': 7
}
latlong['SV'] = {
'latitude': 13.8333,
'longitude': -88.9167
}
latlong['SY'] = {
'latitude': 35,
'longitude': 38
}
latlong['SZ'] = {
'latitude': -26.5,
'longitude': 31.5
}
latlong['TC'] = {
'latitude': 21.75,
'longitude': -71.5833
}
latlong['TD'] = {
'latitude': 15,
'longitude': 19
}
latlong['TF'] = {
'latitude': -43,
'longitude': 67
}
latlong['TG'] = {
'latitude': 8,
'longitude': 1.1667
}
latlong['TH'] = {
'latitude': 15,
'longitude': 100
}
latlong['TJ'] = {
'latitude': 39,
'longitude': 71
}
latlong['TK'] = {
'latitude': -9,
'longitude': -172
}
latlong['TM'] = {
'latitude': 40,
'longitude': 60
}
latlong['TN'] = {
'latitude': 34,
'longitude': 9
}
latlong['TO'] = {
'latitude': -20,
'longitude': -175
}
latlong['TR'] = {
'latitude': 39,
'longitude': 35
}
latlong['TT'] = {
'latitude': 11,
'longitude': -61
}
latlong['TV'] = {
'latitude': -8,
'longitude': 178
}
latlong['TW'] = {
'latitude': 23.5,
'longitude': 121
}
latlong['TZ'] = {
'latitude': -6,
'longitude': 35
}
latlong['UA'] = {
'latitude': 49,
'longitude': 32
}
latlong['UG'] = {
'latitude': 1,
'longitude': 32
}
latlong['UM'] = {
'latitude': 19.2833,
'longitude': 166.6
}
latlong['US'] = {
'latitude': 38,
'longitude': -97
}
latlong['UY'] = {
'latitude': -33,
'longitude': -56
}
latlong['UZ'] = {
'latitude': 41,
'longitude': 64
}
latlong['VA'] = {
'latitude': 41.9,
'longitude': 12.45
}
latlong['VC'] = {
'latitude': 13.25,
'longitude': -61.2
}
latlong['VE'] = {
'latitude': 8,
'longitude': -66
}
latlong['VG'] = {
'latitude': 18.5,
'longitude': -64.5
}
latlong['VI'] = {
'latitude': 18.3333,
'longitude': -64.8333
}
latlong['VN'] = {
'latitude': 16,
'longitude': 106
}
latlong['VU'] = {
'latitude': -16,
'longitude': 167
}
latlong['WF'] = {
'latitude': -13.3,
'longitude': -176.2
}
latlong['WS'] = {
'latitude': -13.5833,
'longitude': -172.3333
}
latlong['YE'] = {
'latitude': 15,
'longitude': 48
}
latlong['YT'] = {
'latitude': -12.8333,
'longitude': 45.1667
}
latlong['ZA'] = {
'latitude': -29,
'longitude': 24
}
latlong['ZM'] = {
'latitude': -15,
'longitude': 30
}
latlong['ZW'] = {
'latitude': -20,
'longitude': 30
}
let data = [{
'code': 'AF',
'name': 'Afghanistan',
'value': 32358260,
'color': '#eea638'
}, {
'code': 'AL',
'name': 'Albania',
'value': 3215988,
'color': '#6bbfe4'
}, {
'code': 'DZ',
'name': 'Algeria',
'value': 35980193,
'color': '#e96e6e'
}, {
'code': 'AO',
'name': 'Angola',
'value': 19618432,
'color': '#e96e6e'
}, {
'code': 'AR',
'name': 'Argentina',
'value': 40764561,
'color': '#6be59c'
}, {
'code': 'AM',
'name': 'Armenia',
'value': 3100236,
'color': '#6bbfe4'
}, {
'code': 'AU',
'name': 'Australia',
'value': 22605732,
'color': '#8aabb0'
}, {
'code': 'AT',
'name': 'Austria',
'value': 8413429,
'color': '#6bbfe4'
}, {
'code': 'AZ',
'name': 'Azerbaijan',
'value': 9306023,
'color': '#6bbfe4'
}, {
'code': 'BH',
'name': 'Bahrain',
'value': 1323535,
'color': '#eea638'
}, {
'code': 'BD',
'name': 'Bangladesh',
'value': 150493658,
'color': '#eea638'
}, {
'code': 'BY',
'name': 'Belarus',
'value': 9559441,
'color': '#6bbfe4'
}, {
'code': 'BE',
'name': 'Belgium',
'value': 10754056,
'color': '#6bbfe4'
}, {
'code': 'BJ',
'name': 'Benin',
'value': 9099922,
'color': '#e96e6e'
}, {
'code': 'BT',
'name': 'Bhutan',
'value': 738267,
'color': '#eea638'
}, {
'code': 'BO',
'name': 'Bolivia',
'value': 10088108,
'color': '#6be59c'
}, {
'code': 'BA',
'name': 'Bosnia and Herzegovina',
'value': 3752228,
'color': '#6bbfe4'
}, {
'code': 'BW',
'name': 'Botswana',
'value': 2030738,
'color': '#e96e6e'
}, {
'code': 'BR',
'name': 'Brazil',
'value': 196655014,
'color': '#6be59c'
}, {
'code': 'BN',
'name': 'Brunei',
'value': 405938,
'color': '#eea638'
}, {
'code': 'BG',
'name': 'Bulgaria',
'value': 7446135,
'color': '#6bbfe4'
}, {
'code': 'BF',
'name': 'Burkina Faso',
'value': 16967845,
'color': '#e96e6e'
}, {
'code': 'BI',
'name': 'Burundi',
'value': 8575172,
'color': '#e96e6e'
}, {
'code': 'KH',
'name': 'Cambodia',
'value': 14305183,
'color': '#eea638'
}, {
'code': 'CM',
'name': 'Cameroon',
'value': 20030362,
'color': '#e96e6e'
}, {
'code': 'CA',
'name': 'Canada',
'value': 34349561,
'color': '#f6d35b'
}, {
'code': 'CV',
'name': 'Cape Verde',
'value': 500585,
'color': '#e96e6e'
}, {
'code': 'CF',
'name': 'Central African Rep.',
'value': 4486837,
'color': '#e96e6e'
}, {
'code': 'TD',
'name': 'Chad',
'value': 11525496,
'color': '#e96e6e'
}, {
'code': 'CL',
'name': 'Chile',
'value': 17269525,
'color': '#6be59c'
}, {
'code': 'CN',
'name': 'China',
'value': 1347565324,
'color': '#eea638'
}, {
'code': 'CO',
'name': 'Colombia',
'value': 46927125,
'color': '#6be59c'
}, {
'code': 'KM',
'name': 'Comoros',
'value': 753943,
'color': '#e96e6e'
}, {
'code': 'CD',
'name': 'Congo, Dem. Rep.',
'value': 67757577,
'color': '#e96e6e'
}, {
'code': 'CG',
'name': 'Congo, Rep.',
'value': 4139748,
'color': '#e96e6e'
}, {
'code': 'CR',
'name': 'Costa Rica',
'value': 4726575,
'color': '#f6d35b'
}, {
'code': 'CI',
'name': 'Cote d\'Ivoire',
'value': 20152894,
'color': '#e96e6e'
}, {
'code': 'HR',
'name': 'Croatia',
'value': 4395560,
'color': '#6bbfe4'
}, {
'code': 'CU',
'name': 'Cuba',
'value': 11253665,
'color': '#f6d35b'
}, {
'code': 'CY',
'name': 'Cyprus',
'value': 1116564,
'color': '#6bbfe4'
}, {
'code': 'CZ',
'name': 'Czech Rep.',
'value': 10534293,
'color': '#6bbfe4'
}, {
'code': 'DK',
'name': 'Denmark',
'value': 5572594,
'color': '#6bbfe4'
}, {
'code': 'DJ',
'name': 'Djibouti',
'value': 905564,
'color': '#e96e6e'
}, {
'code': 'DO',
'name': 'Dominican Rep.',
'value': 10056181,
'color': '#f6d35b'
}, {
'code': 'EC',
'name': 'Ecuador',
'value': 14666055,
'color': '#6be59c'
}, {
'code': 'EG',
'name': 'Egypt',
'value': 82536770,
'color': '#e96e6e'
}, {
'code': 'SV',
'name': 'El Salvador',
'value': 6227491,
'color': '#f6d35b'
}, {
'code': 'GQ',
'name': 'Equatorial Guinea',
'value': 720213,
'color': '#e96e6e'
}, {
'code': 'ER',
'name': 'Eritrea',
'value': 5415280,
'color': '#e96e6e'
}, {
'code': 'EE',
'name': 'Estonia',
'value': 1340537,
'color': '#6bbfe4'
}, {
'code': 'ET',
'name': 'Ethiopia',
'value': 84734262,
'color': '#e96e6e'
}, {
'code': 'FJ',
'name': 'Fiji',
'value': 868406,
'color': '#8aabb0'
}, {
'code': 'FI',
'name': 'Finland',
'value': 5384770,
'color': '#6bbfe4'
}, {
'code': 'FR',
'name': 'France',
'value': 63125894,
'color': '#6bbfe4'
}, {
'code': 'GA',
'name': 'Gabon',
'value': 1534262,
'color': '#e96e6e'
}, {
'code': 'GM',
'name': 'Gambia',
'value': 1776103,
'color': '#e96e6e'
}, {
'code': 'GE',
'name': 'Georgia',
'value': 4329026,
'color': '#6bbfe4'
}, {
'code': 'DE',
'name': 'Germany',
'value': 82162512,
'color': '#6bbfe4'
}, {
'code': 'GH',
'name': 'Ghana',
'value': 24965816,
'color': '#e96e6e'
}, {
'code': 'GR',
'name': 'Greece',
'value': 11390031,
'color': '#6bbfe4'
}, {
'code': 'GT',
'name': 'Guatemala',
'value': 14757316,
'color': '#f6d35b'
}, {
'code': 'GN',
'name': 'Guinea',
'value': 10221808,
'color': '#e96e6e'
}, {
'code': 'GW',
'name': 'Guinea-Bissau',
'value': 1547061,
'color': '#e96e6e'
}, {
'code': 'GY',
'name': 'Guyana',
'value': 756040,
'color': '#6be59c'
}, {
'code': 'HT',
'name': 'Haiti',
'value': 10123787,
'color': '#f6d35b'
}, {
'code': 'HN',
'name': 'Honduras',
'value': 7754687,
'color': '#f6d35b'
}, {
'code': 'HK',
'name': 'Hong Kong, China',
'value': 7122187,
'color': '#eea638'
}, {
'code': 'HU',
'name': 'Hungary',
'value': 9966116,
'color': '#6bbfe4'
}, {
'code': 'IS',
'name': 'Iceland',
'value': 324366,
'color': '#6bbfe4'
}, {
'code': 'IN',
'name': 'India',
'value': 1241491960,
'color': '#eea638'
}, {
'code': 'ID',
'name': 'Indonesia',
'value': 242325638,
'color': '#eea638'
}, {
'code': 'IR',
'name': 'Iran',
'value': 74798599,
'color': '#eea638'
}, {
'code': 'IQ',
'name': 'Iraq',
'value': 32664942,
'color': '#eea638'
}, {
'code': 'IE',
'name': 'Ireland',
'value': 4525802,
'color': '#6bbfe4'
}, {
'code': 'IL',
'name': 'Israel',
'value': 7562194,
'color': '#eea638'
}, {
'code': 'IT',
'name': 'Italy',
'value': 60788694,
'color': '#6bbfe4'
}, {
'code': 'JM',
'name': 'Jamaica',
'value': 2751273,
'color': '#f6d35b'
}, {
'code': 'JP',
'name': 'Japan',
'value': 126497241,
'color': '#eea638'
}, {
'code': 'JO',
'name': 'Jordan',
'value': 6330169,
'color': '#eea638'
}, {
'code': 'KZ',
'name': 'Kazakhstan',
'value': 16206750,
'color': '#eea638'
}, {
'code': 'KE',
'name': 'Kenya',
'value': 41609728,
'color': '#e96e6e'
}, {
'code': 'KR',
'name': 'Korea, Dem. Rep.',
'value': 24451285,
'color': '#eea638'
}, {
'code': 'KP',
'name': 'Korea, Rep.',
'value': 48391343,
'color': '#eea638'
}, {
'code': 'KW',
'name': 'Kuwait',
'value': 2818042,
'color': '#eea638'
}, {
'code': 'KG',
'name': 'Kyrgyzstan',
'value': 5392580,
'color': '#eea638'
}, {
'code': 'LA',
'name': 'Laos',
'value': 6288037,
'color': '#eea638'
}, {
'code': 'LV',
'name': 'Latvia',
'value': 2243142,
'color': '#6bbfe4'
}, {
'code': 'LB',
'name': 'Lebanon',
'value': 4259405,
'color': '#eea638'
}, {
'code': 'LS',
'name': 'Lesotho',
'value': 2193843,
'color': '#e96e6e'
}, {
'code': 'LR',
'name': 'Liberia',
'value': 4128572,
'color': '#e96e6e'
}, {
'code': 'LY',
'name': 'Libya',
'value': 6422772,
'color': '#e96e6e'
}, {
'code': 'LT',
'name': 'Lithuania',
'value': 3307481,
'color': '#6bbfe4'
}, {
'code': 'LU',
'name': 'Luxembourg',
'value': 515941,
'color': '#6bbfe4'
}, {
'code': 'MK',
'name': 'Macedonia, FYR',
'value': 2063893,
'color': '#6bbfe4'
}, {
'code': 'MG',
'name': 'Madagascar',
'value': 21315135,
'color': '#e96e6e'
}, {
'code': 'MW',
'name': 'Malawi',
'value': 15380888,
'color': '#e96e6e'
}, {
'code': 'MY',
'name': 'Malaysia',
'value': 28859154,
'color': '#eea638'
}, {
'code': 'ML',
'name': 'Mali',
'value': 15839538,
'color': '#e96e6e'
}, {
'code': 'MR',
'name': 'Mauritania',
'value': 3541540,
'color': '#e96e6e'
}, {
'code': 'MU',
'name': 'Mauritius',
'value': 1306593,
'color': '#e96e6e'
}, {
'code': 'MX',
'name': 'Mexico',
'value': 114793341,
'color': '#f6d35b'
}, {
'code': 'MD',
'name': 'Moldova',
'value': 3544864,
'color': '#6bbfe4'
}, {
'code': 'MN',
'name': 'Mongolia',
'value': 2800114,
'color': '#eea638'
}, {
'code': 'ME',
'name': 'Montenegro',
'value': 632261,
'color': '#6bbfe4'
}, {
'code': 'MA',
'name': 'Morocco',
'value': 32272974,
'color': '#e96e6e'
}, {
'code': 'MZ',
'name': 'Mozambique',
'value': 23929708,
'color': '#e96e6e'
}, {
'code': 'MM',
'name': 'Myanmar',
'value': 48336763,
'color': '#eea638'
}, {
'code': 'NA',
'name': 'Namibia',
'value': 2324004,
'color': '#e96e6e'
}, {
'code': 'NP',
'name': 'Nepal',
'value': 30485798,
'color': '#eea638'
}, {
'code': 'NL',
'name': 'Netherlands',
'value': 16664746,
'color': '#6bbfe4'
}, {
'code': 'NZ',
'name': 'New Zealand',
'value': 4414509,
'color': '#8aabb0'
}, {
'code': 'NI',
'name': 'Nicaragua',
'value': 5869859,
'color': '#f6d35b'
}, {
'code': 'NE',
'name': 'Niger',
'value': 16068994,
'color': '#e96e6e'
}, {
'code': 'NG',
'name': 'Nigeria',
'value': 162470737,
'color': '#e96e6e'
}, {
'code': 'NO',
'name': 'Norway',
'value': 4924848,
'color': '#6bbfe4'
}, {
'code': 'OM',
'name': 'Oman',
'value': 2846145,
'color': '#eea638'
}, {
'code': 'PK',
'name': 'Pakistan',
'value': 176745364,
'color': '#eea638'
}, {
'code': 'PA',
'name': 'Panama',
'value': 3571185,
'color': '#f6d35b'
}, {
'code': 'PG',
'name': 'Papua New Guinea',
'value': 7013829,
'color': '#8aabb0'
}, {
'code': 'PY',
'name': 'Paraguay',
'value': 6568290,
'color': '#6be59c'
}, {
'code': 'PE',
'name': 'Peru',
'value': 29399817,
'color': '#6be59c'
}, {
'code': 'PH',
'name': 'Philippines',
'value': 94852030,
'color': '#eea638'
}, {
'code': 'PL',
'name': 'Poland',
'value': 38298949,
'color': '#6bbfe4'
}, {
'code': 'PT',
'name': 'Portugal',
'value': 10689663,
'color': '#6bbfe4'
}, {
'code': 'PR',
'name': 'Puerto Rico',
'value': 3745526,
'color': '#f6d35b'
}, {
'code': 'QA',
'name': 'Qatar',
'value': 1870041,
'color': '#eea638'
}, {
'code': 'RO',
'name': 'Romania',
'value': 21436495,
'color': '#6bbfe4'
}, {
'code': 'RU',
'name': 'Russia',
'value': 142835555,
'color': '#6bbfe4'
}, {
'code': 'RW',
'name': 'Rwanda',
'value': 10942950,
'color': '#e96e6e'
}, {
'code': 'SA',
'name': 'Saudi Arabia',
'value': 28082541,
'color': '#eea638'
}, {
'code': 'SN',
'name': 'Senegal',
'value': 12767556,
'color': '#e96e6e'
}, {
'code': 'RS',
'name': 'Serbia',
'value': 9853969,
'color': '#6bbfe4'
}, {
'code': 'SL',
'name': 'Sierra Leone',
'value': 5997486,
'color': '#e96e6e'
}, {
'code': 'SG',
'name': 'Singapore',
'value': 5187933,
'color': '#eea638'
}, {
'code': 'SK',
'name': 'Slovak Republic',
'value': 5471502,
'color': '#6bbfe4'
}, {
'code': 'SI',
'name': 'Slovenia',
'value': 2035012,
'color': '#6bbfe4'
}, {
'code': 'SB',
'name': 'Solomon Islands',
'value': 552267,
'color': '#8aabb0'
}, {
'code': 'SO',
'name': 'Somalia',
'value': 9556873,
'color': '#e96e6e'
}, {
'code': 'ZA',
'name': 'South Africa',
'value': 50459978,
'color': '#e96e6e'
}, {
'code': 'ES',
'name': 'Spain',
'value': 46454895,
'color': '#6bbfe4'
}, {
'code': 'LK',
'name': 'Sri Lanka',
'value': 21045394,
'color': '#eea638'
}, {
'code': 'SD',
'name': 'Sudan',
'value': 34735288,
'color': '#e96e6e'
}, {
'code': 'SR',
'name': 'Suriname',
'value': 529419,
'color': '#6be59c'
}, {
'code': 'SZ',
'name': 'Swaziland',
'value': 1203330,
'color': '#e96e6e'
}, {
'code': 'SE',
'name': 'Sweden',
'value': 9440747,
'color': '#6bbfe4'
}, {
'code': 'CH',
'name': 'Switzerland',
'value': 7701690,
'color': '#6bbfe4'
}, {
'code': 'SY',
'name': 'Syria',
'value': 20766037,
'color': '#eea638'
}, {
'code': 'TW',
'name': 'Taiwan',
'value': 23072000,
'color': '#eea638'
}, {
'code': 'TJ',
'name': 'Tajikistan',
'value': 6976958,
'color': '#eea638'
}, {
'code': 'TZ',
'name': 'Tanzania',
'value': 46218486,
'color': '#e96e6e'
}, {
'code': 'TH',
'name': 'Thailand',
'value': 69518555,
'color': '#eea638'
}, {
'code': 'TG',
'name': 'Togo',
'value': 6154813,
'color': '#e96e6e'
}, {
'code': 'TT',
'name': 'Trinidad and Tobago',
'value': 1346350,
'color': '#f6d35b'
}, {
'code': 'TN',
'name': 'Tunisia',
'value': 10594057,
'color': '#e96e6e'
}, {
'code': 'TR',
'name': 'Turkey',
'value': 73639596,
'color': '#6bbfe4'
}, {
'code': 'TM',
'name': 'Turkmenistan',
'value': 5105301,
'color': '#eea638'
}, {
'code': 'UG',
'name': 'Uganda',
'value': 34509205,
'color': '#e96e6e'
}, {
'code': 'UA',
'name': 'Ukraine',
'value': 45190180,
'color': '#6bbfe4'
}, {
'code': 'AE',
'name': 'United Arab Emirates',
'value': 7890924,
'color': '#eea638'
}, {
'code': 'GB',
'name': 'United Kingdom',
'value': 62417431,
'color': '#6bbfe4'
}, {
'code': 'US',
'name': 'United States',
'value': 313085380,
'color': '#f6d35b'
}, {
'code': 'UY',
'name': 'Uruguay',
'value': 3380008,
'color': '#6be59c'
}, {
'code': 'UZ',
'name': 'Uzbekistan',
'value': 27760267,
'color': '#eea638'
}, {
'code': 'VE',
'name': 'Venezuela',
'value': 29436891,
'color': '#6be59c'
}, {
'code': 'PS',
'name': 'West Bank and Gaza',
'value': 4152369,
'color': '#eea638'
}, {
'code': 'VN',
'name': 'Vietnam',
'value': 88791996,
'color': '#eea638'
}, {
'code': 'YE',
'name': 'Yemen, Rep.',
'value': 24799880,
'color': '#eea638'
}, {
'code': 'ZM',
'name': 'Zambia',
'value': 13474959,
'color': '#e96e6e'
}, {
'code': 'ZW',
'name': 'Zimbabwe',
'value': 12754378,
'color': '#e96e6e'
}]
export default {
data,
latlong
}
src/data/maps/LineMapData.js 0 → 100644
View file @ 3be931bc
var targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z'
// svg path for plane icon
var planeSVG = 'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z'
var london = {
id: 'london',
color: '#6be59c',
svgPath: targetSVG,
title: 'London',
latitude: 51.5002,
longitude: -0.1262,
scale: 1.5,
zoomLevel: 2.74,
zoomLongitude: -20.1341,
zoomLatitude: 49.1712,
lines: [
{
latitudes: [51.5002, 50.4422],
longitudes: [-0.1262, 30.5367]},
{
latitudes: [51.5002, 46.9480],
longitudes: [-0.1262, 7.4481]},
{
latitudes: [51.5002, 59.3328],
longitudes: [-0.1262, 18.0645]},
{
latitudes: [51.5002, 40.4167],
longitudes: [-0.1262, -3.7033]},
{
latitudes: [51.5002, 46.0514],
longitudes: [-0.1262, 14.5060]},
{
latitudes: [51.5002, 48.2116],
longitudes: [-0.1262, 17.1547]},
{
latitudes: [51.5002, 44.8048],
longitudes: [-0.1262, 20.4781]},
{
latitudes: [51.5002, 55.7558],
longitudes: [-0.1262, 37.6176]},
{
latitudes: [51.5002, 38.7072],
longitudes: [-0.1262, -9.1355]},
{
latitudes: [51.5002, 54.6896],
longitudes: [-0.1262, 25.2799]},
{
latitudes: [51.5002, 64.1353],
longitudes: [-0.1262, -21.8952]},
{
latitudes: [51.5002, 40.4300],
longitudes: [-0.1262, -74.0000]}
],
images: [
{
label: 'Flights from London',
svgPath: planeSVG,
left: 100,
top: 45,
color: '#6bbfe4',
labelColor: '#6bbfe4',
labelRollOverColor: '#6bbfe4',
labelFontSize: 20},
{
label: 'show flights from Vilnius',
left: 110,
top: 70,
labelColor: '#6be59c',
labelRollOverColor: '#6bbfe4',
labelFontSize: 11,
linkToObject: 'vilnius'
}
]
}
// VILNIUS
var vilnius = {
id: 'vilnius',
color: '#6be59c',
svgPath: targetSVG,
title: 'Vilnius',
latitude: 54.6896,
longitude: 25.2799,
scale: 1.5,
zoomLevel: 4.92,
zoomLongitude: 15.4492,
zoomLatitude: 50.2631,
lines: [
{
latitudes: [54.6896, 50.8371],
longitudes: [25.2799, 4.3676]
},
{
latitudes: [54.6896, 59.9138],
longitudes: [25.2799, 10.7387]
},
{
latitudes: [54.6896, 40.4167],
longitudes: [25.2799, -3.7033]
},
{
latitudes: [54.6896, 50.0878],
longitudes: [25.2799, 14.4205]
},
{
latitudes: [54.6896, 48.2116],
longitudes: [25.2799, 17.1547]
},
{
latitudes: [54.6896, 44.8048],
longitudes: [25.2799, 20.4781]
},
{
latitudes: [54.6896, 55.7558],
longitudes: [25.2799, 37.6176]
},
{
latitudes: [54.6896, 37.9792],
longitudes: [25.2799, 23.7166]
},
{
latitudes: [54.6896, 54.6896],
longitudes: [25.2799, 25.2799]
},
{
latitudes: [54.6896, 51.5002],
longitudes: [25.2799, -0.1262]
},
{
latitudes: [54.6896, 53.3441],
longitudes: [25.2799, -6.2675]
}
],
images: [
{
label: 'Flights from Vilnius',
svgPath: planeSVG,
left: 100,
top: 45,
color: '#6bbfe4',
labelColor: '#6bbfe4',
labelRollOverColor: '#6bbfe4',
labelFontSize: 20},
{
label: 'show flights from London',
left: 110,
top: 70,
labelColor: '#6be59c',
labelRollOverColor: '#6bbfe4',
labelFontSize: 11,
linkToObject: 'london'
}
]
}
// cities
var cities = [
london,
vilnius,
{
svgPath: targetSVG,
title: 'Brussels',
latitude: 50.8371,
longitude: 4.3676},
{
svgPath: targetSVG,
title: 'Prague',
latitude: 50.0878,
longitude: 14.4205},
{
svgPath: targetSVG,
title: 'Athens',
latitude: 37.9792,
longitude: 23.7166},
{
svgPath: targetSVG,
title: 'Reykjavik',
latitude: 64.1353,
longitude: -21.8952},
{
svgPath: targetSVG,
title: 'Dublin',
latitude: 53.3441,
longitude: -6.2675},
{
svgPath: targetSVG,
title: 'Oslo',
latitude: 59.9138,
longitude: 10.7387},
{
svgPath: targetSVG,
title: 'Lisbon',
latitude: 38.7072,
longitude: -9.1355},
{
svgPath: targetSVG,
title: 'Moscow',
latitude: 55.7558,
longitude: 37.6176},
{
svgPath: targetSVG,
title: 'Belgrade',
latitude: 44.8048,
longitude: 20.4781},
{
svgPath: targetSVG,
title: 'Bratislava',
latitude: 48.2116,
longitude: 17.1547},
{
svgPath: targetSVG,
title: 'Ljubljana',
latitude: 46.0514,
longitude: 14.5060},
{
svgPath: targetSVG,
title: 'Madrid',
latitude: 40.4167,
longitude: -3.7033},
{
svgPath: targetSVG,
title: 'Stockholm',
latitude: 59.3328,
longitude: 18.0645},
{
svgPath: targetSVG,
title: 'Bern',
latitude: 46.9480,
longitude: 7.4481},
{
svgPath: targetSVG,
title: 'Kiev',
latitude: 50.4422,
longitude: 30.5367},
{
svgPath: targetSVG,
title: 'Paris',
latitude: 48.8567,
longitude: 2.3510},
{
svgPath: targetSVG,
title: 'New York',
latitude: 40.43,
longitude: -74
}
]
export default {
cities,
mainCity: london
}
src/directives/ResizeHandler.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
export default {
inserted: function (el) {
let getWindowMatch = () => {
return window.matchMedia(store.getters.config.windowMatchSizeLg).matches
}
let prevMatchlg = getWindowMatch()
el.addEventListener('transitionend', function () {
store.dispatch('isToggleWithoutAnimation', false)
})
window.addEventListener('resize', function () {
if (getWindowMatch() && !prevMatchlg) {
store.dispatch('toggleSidebar', true)
} else if (!getWindowMatch() && prevMatchlg) {
store.dispatch('isToggleWithoutAnimation', true)
store.dispatch('toggleSidebar', false)
}
prevMatchlg = getWindowMatch()
})
}
}
src/fonts/Glyphter.svg 0 → 100644
View file @ 3be931bc
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg xmlns="http://www.w3.org/2000/svg"><metadata>Generated by Glyphter</metadata><defs><font id="Glyphter" horiz-adv-x="0"><font-face units-per-em="1024" ascent="1024" descent="0" font-family="Glyphter" font-weight="normal" /><missing-glyph horiz-adv-x="0" /><glyph unicode="&#x0041;" d="M884.364,1005.099C884.364,1005.099,139.636,1005.099,139.636,1005.099C62.511,1005.099,0,942.588,0,865.462C0,865.462,0,400.008,0,400.008C0,322.882,62.511,260.371,139.636,260.371C139.636,260.371,186.182,260.371,186.182,260.371C186.182,260.371,186.182,114.219,186.182,114.219C185.018,42.585,261.865,-3.448,324.515,31.368C339.735,39.839,352.303,52.406,360.727,67.673C360.727,67.673,465.455,260.371,465.455,260.371C465.455,260.371,884.364,260.371,884.364,260.371C961.489,260.371,1024,322.882,1024,400.008C1024,400.008,1024,865.462,1024,865.462C1024,942.588,961.489,1005.099,884.364,1005.099C884.364,1005.099,884.364,1005.099,884.364,1005.099M930.909,400.008C930.909,374.315,910.057,353.462,884.364,353.462C884.364,353.462,412.393,353.462,412.393,353.462C412.393,353.462,279.273,114.219,279.273,114.219C279.273,114.219,279.273,353.462,279.273,353.462C279.273,353.462,139.636,353.462,139.636,353.462C113.943,353.462,93.091,374.315,93.091,400.008C93.091,400.008,93.091,865.462,93.091,865.462C93.091,891.155,113.943,912.008,139.636,912.008C139.636,912.008,884.364,912.008,884.364,912.008C910.057,912.008,930.909,891.155,930.909,865.462C930.909,865.462,930.909,400.008,930.909,400.008M698.182,679.28C698.182,679.28,325.818,679.28,325.818,679.28C289.978,679.28,267.59,640.508,285.51,609.462C293.841,595.08,309.201,586.19,325.818,586.19C325.818,586.19,698.182,586.19,698.182,586.19C734.022,586.19,756.41,624.962,738.49,656.008C730.159,670.39,714.799,679.28,698.182,679.28C698.182,679.28,698.182,679.28,698.182,679.28" class="icon-comments"/><glyph unicode="&#x0042;" d="M992.565,774.183C979.655,799.914,955.125,817.811,926.678,822.263C926.678,822.263,551.829,1014.584,551.829,1014.584C526.765,1027.139,497.204,1027.139,472.14,1014.584C472.14,1014.584,97.292,822.263,97.292,822.263C54.242,815.273,22.589,778.145,22.5,734.561C22.5,734.561,22.5,291.598,22.5,291.598C22.5,291.598,512.207,0,512.207,0C512.207,0,1001.914,293.824,1001.914,293.824C1001.914,293.824,1001.914,734.561,1001.914,734.561C1001.914,748.317,998.709,761.895,992.565,774.183C992.565,774.183,992.565,774.183,992.565,774.183M512.207,934.896C512.207,934.896,813.155,784.422,813.155,784.422C813.155,784.422,512.207,633.948,512.207,633.948C512.207,633.948,211.26,784.422,211.26,784.422C211.26,784.422,512.207,934.896,512.207,934.896M111.538,733.67C111.538,733.67,126.674,726.993,126.674,726.993C126.674,726.993,467.688,556.485,467.688,556.485C467.688,556.485,467.688,128.214,467.688,128.214C467.688,128.214,111.538,341.905,111.538,341.905C111.538,341.905,111.538,733.67,111.538,733.67M912.877,342.35C912.877,342.35,556.726,128.659,556.726,128.659C556.726,128.659,556.726,556.485,556.726,556.485C556.726,556.485,912.877,734.561,912.877,734.561C912.877,734.561,912.877,342.35,912.877,342.35" class="icon-components"/><glyph unicode="&#x0043;" d="M930.909,1024C930.909,1024,93.091,1024,93.091,1024C41.658,1024,0,982.342,0,930.909C0,930.909,0,372.364,0,372.364C0,320.931,41.658,279.273,93.091,279.273C93.091,279.273,372.364,279.273,372.364,279.273C372.364,279.273,372.364,93.091,372.364,93.091C372.364,93.091,232.727,93.091,232.727,93.091C196.887,93.091,174.499,54.319,192.419,23.273C200.751,8.89,216.111,0,232.727,0C232.727,0,791.273,0,791.273,0C827.113,0,849.501,38.772,831.581,69.818C823.249,84.201,807.889,93.091,791.273,93.091C791.273,93.091,651.636,93.091,651.636,93.091C651.636,93.091,651.636,279.273,651.636,279.273C651.636,279.273,930.909,279.273,930.909,279.273C982.342,279.273,1024,320.931,1024,372.364C1024,372.364,1024,930.909,1024,930.909C1024,982.342,982.342,1024,930.909,1024C930.909,1024,930.909,1024,930.909,1024M558.545,93.091C558.545,93.091,465.455,93.091,465.455,93.091C465.455,93.091,465.455,279.273,465.455,279.273C465.455,279.273,558.545,279.273,558.545,279.273C558.545,279.273,558.545,93.091,558.545,93.091M930.909,372.364C930.909,372.364,93.091,372.364,93.091,372.364C93.091,372.364,93.091,930.909,93.091,930.909C93.091,930.909,930.909,930.909,930.909,930.909C930.909,930.909,930.909,372.364,930.909,372.364M639.535,763.811C639.535,763.811,639.535,763.811,639.535,763.811C618.589,778.938,589.359,774.144,574.371,753.105C574.371,753.105,521.775,679.098,521.775,679.098C521.775,679.098,468.713,753.105,468.713,753.105C453.725,774.144,424.495,778.938,403.549,763.811C403.549,763.811,403.549,763.811,403.549,763.811C382.231,748.777,377.391,719.174,392.844,698.182C392.844,698.182,485.935,571.578,485.935,571.578C504.506,545.466,543.232,545.466,561.804,571.578C561.804,571.578,651.636,698.182,651.636,698.182C666.81,719.546,661.318,749.242,639.535,763.811C639.535,763.811,639.535,763.811,639.535,763.811" class="icon-dashboard"/><glyph unicode="&#x0044;" d="M818.334,370.673C818.334,370.673,863.788,127.947,863.788,127.947C875.651,58.993,808.379,3.039,742.743,27.266C739.061,28.629,735.47,30.22,731.97,32.039C731.97,32.039,514.244,146.583,514.244,146.583C514.244,146.583,294.246,32.039,294.246,32.039C232.291,-0.461,158.337,46.311,161.201,116.22C161.337,120.174,161.746,124.083,162.428,127.947C162.428,127.947,204.246,370.673,204.246,370.673C204.246,370.673,27.429,542.49,27.429,542.49C-22.616,591.399,-0.98,676.126,66.383,695.035C70.156,696.126,74.02,696.944,77.883,697.489C77.883,697.489,321.518,731.58,321.518,731.58C321.518,731.58,430.609,952.488,430.609,952.488C461.472,1015.306,548.744,1021.124,587.699,962.988C589.971,959.624,592.017,956.124,593.789,952.488C593.789,952.488,702.425,731.58,702.425,731.58C702.425,731.58,946.06,696.126,946.06,696.126C1015.333,686.08,1047.696,604.808,1004.378,549.854C1001.923,546.763,999.333,543.854,996.514,541.127C996.514,541.127,818.334,370.673,818.334,370.673M469.699,227.037C496.154,240.946,527.79,240.946,554.244,227.037C554.244,227.037,772.879,112.493,772.879,112.493C772.879,112.493,722.88,402.036,722.88,402.036C722.88,402.036,933.333,607.035,933.333,607.035C933.333,607.035,642.426,649.308,642.426,649.308C642.426,649.308,511.972,913.397,511.972,913.397C511.972,913.397,381.972,649.762,381.972,649.762C381.972,649.762,91.065,607.49,91.065,607.49C91.065,607.49,301.518,402.491,301.518,402.491C301.518,402.491,251.973,112.493,251.973,112.493C251.973,112.493,469.699,227.037,469.699,227.037" class="icon-extras"/><glyph unicode="&#x0045;" d="M838.273,1024C838.273,1024,186.636,1024,186.636,1024C109.511,1024,47,961.489,47,884.364C47,884.364,47,139.636,47,139.636C47,62.511,109.511,0,186.636,0C186.636,0,838.273,0,838.273,0C915.399,0,977.909,62.511,977.909,139.636C977.909,139.636,977.909,884.364,977.909,884.364C977.909,961.489,915.399,1024,838.273,1024C838.273,1024,838.273,1024,838.273,1024M884.818,139.636C884.818,113.943,863.966,93.091,838.273,93.091C838.273,93.091,186.636,93.091,186.636,93.091C160.943,93.091,140.091,113.943,140.091,139.636C140.091,139.636,140.091,884.364,140.091,884.364C140.091,910.057,160.943,930.909,186.636,930.909C186.636,930.909,838.273,930.909,838.273,930.909C863.966,930.909,884.818,910.057,884.818,884.364C884.818,884.364,884.818,139.636,884.818,139.636M698.636,791.273C698.636,791.273,326.273,791.273,326.273,791.273C290.433,791.273,268.044,752.5,285.964,721.455C294.296,707.072,309.656,698.182,326.273,698.182C326.273,698.182,698.636,698.182,698.636,698.182C734.476,698.182,756.865,736.954,738.945,768C730.613,782.383,715.253,791.273,698.636,791.273C698.636,791.273,698.636,791.273,698.636,791.273M698.636,558.545C698.636,558.545,326.273,558.545,326.273,558.545C290.433,558.545,268.044,519.773,285.964,488.727C294.296,474.345,309.656,465.455,326.273,465.455C326.273,465.455,698.636,465.455,698.636,465.455C734.476,465.455,756.865,504.227,738.945,535.273C730.613,549.655,715.253,558.545,698.636,558.545C698.636,558.545,698.636,558.545,698.636,558.545M698.636,325.818C698.636,325.818,326.273,325.818,326.273,325.818C290.433,325.818,268.044,287.046,285.964,256C294.296,241.617,309.656,232.727,326.273,232.727C326.273,232.727,698.636,232.727,698.636,232.727C734.476,232.727,756.865,271.5,738.945,302.545C730.613,316.928,715.253,325.818,698.636,325.818C698.636,325.818,698.636,325.818,698.636,325.818" class="icon-files"/><glyph unicode="&#x0046;" d="M930.909,1024C930.909,1024,93.091,1024,93.091,1024C41.658,1024,0,982.342,0,930.909C0,930.909,0,93.091,0,93.091C0,41.658,41.658,0,93.091,0C93.091,0,930.909,0,930.909,0C982.342,0,1024,41.658,1024,93.091C1024,93.091,1024,930.909,1024,930.909C1024,982.342,982.342,1024,930.909,1024C930.909,1024,930.909,1024,930.909,1024M930.909,930.909C930.909,930.909,930.909,744.727,930.909,744.727C930.909,744.727,93.091,744.727,93.091,744.727C93.091,744.727,93.091,930.909,93.091,930.909C93.091,930.909,930.909,930.909,930.909,930.909M93.091,93.091C93.091,93.091,93.091,651.636,93.091,651.636C93.091,651.636,930.909,651.636,930.909,651.636C930.909,651.636,930.909,93.091,930.909,93.091C930.909,93.091,93.091,93.091,93.091,93.091M662.342,588.335C662.342,588.335,462.196,348.16,462.196,348.16C462.196,348.16,358.865,451.956,358.865,451.956C331.636,475.276,289.42,460.381,282.857,425.146C280.25,411.322,284.067,397.033,293.236,386.327C293.236,386.327,468.713,210.851,468.713,210.851C468.713,210.851,734.022,529.222,734.022,529.222C756.969,556.823,741.423,598.9,706.048,604.951C689.664,607.744,673.001,601.6,662.342,588.8C662.342,588.8,662.342,588.335,662.342,588.335" class="icon-forms"/><glyph unicode="&#x0047;" d="M976.787,163.02C976.787,163.02,46.582,163.02,46.582,163.02C10.769,163.02,-11.603,124.277,6.304,93.255C14.629,78.883,29.978,70,46.582,70C46.582,70,976.787,70,976.787,70C1012.6,70,1034.971,108.743,1017.065,139.765C1008.739,154.137,993.391,163.02,976.787,163.02C976.787,163.02,976.787,163.02,976.787,163.02M139.602,395.572C174.252,396.269,207.414,409.897,232.623,433.71C232.623,433.71,422.85,403.013,422.85,403.013C460.988,302.598,593.542,281.11,661.447,364.317C692.935,402.967,701.446,455.477,683.772,502.08C683.772,502.08,859.116,677.424,859.116,677.424C964.787,658.076,1051.761,760.305,1015.716,861.511C979.67,962.671,847.581,986.903,778.002,905.091C734.282,853.698,733.585,778.444,776.328,726.26C776.328,726.26,618.193,567.66,618.193,567.66C547.172,600.17,463.314,568.125,432.152,496.499C432.152,496.499,279.133,521.149,279.133,521.149C279.366,525.8,279.366,530.451,279.133,535.102C279.133,642.495,162.857,709.655,69.837,655.936C-23.184,602.217,-23.184,467.988,69.837,414.269C91.046,402.037,115.091,395.572,139.602,395.572C139.602,395.572,139.602,395.572,139.602,395.572M883.766,860.674C919.579,860.674,941.951,821.931,924.044,790.909C906.138,759.886,861.395,759.886,843.488,790.909C839.395,797.978,837.256,805.978,837.256,814.164C837.256,839.838,858.093,860.674,883.766,860.674C883.766,860.674,883.766,860.674,883.766,860.674M558.195,488.592C594.007,488.592,616.379,449.849,598.472,418.827C580.566,387.805,535.823,387.805,517.917,418.827C513.824,425.896,511.684,433.896,511.684,442.082C511.684,467.756,532.521,488.592,558.195,488.592C558.195,488.592,558.195,488.592,558.195,488.592M139.602,581.613C175.415,581.613,197.787,542.87,179.88,511.847C161.974,480.825,117.231,480.825,99.324,511.847C95.232,518.917,93.092,526.917,93.092,535.102C93.092,560.776,113.929,581.613,139.602,581.613C139.602,581.613,139.602,581.613,139.602,581.613" class="icon-graph"/><glyph unicode="&#x0048;" d="M418.912,359.772C418.912,359.772,484.53,294.154,484.53,294.154C484.53,294.154,702.327,512.416,702.327,512.416C702.327,512.416,486.392,726.49,486.392,726.49C486.392,726.49,418.912,660.871,418.912,660.871C418.912,660.871,522.226,558.954,522.226,558.954C522.226,558.954,46.609,558.954,46.609,558.954C10.775,558.954,-11.609,520.188,6.308,489.147C14.638,474.767,29.995,465.878,46.609,465.878C46.609,465.878,526.414,465.878,526.414,465.878C526.414,465.878,418.912,359.772,418.912,359.772M930.828,1024.332C930.828,1024.332,465.45,1024.332,465.45,1024.332C429.615,1024.332,407.231,985.566,425.148,954.525C433.478,940.145,448.836,931.256,465.45,931.256C465.45,931.256,930.828,931.256,930.828,931.256C930.828,931.256,930.828,931.256,930.828,921.948C930.828,921.948,930.828,102.883,930.828,102.883C930.828,95.902,930.828,93.576,930.828,93.576C930.828,93.576,465.45,93.576,465.45,93.576C429.615,93.576,407.231,54.81,425.148,23.769C433.478,9.389,448.836,0.5,465.45,0.5C465.45,0.5,930.828,0.5,930.828,0.5C984.718,3.246,1026.277,48.992,1023.903,102.883C1023.903,102.883,1023.903,921.948,1023.903,921.948C1026.277,975.839,984.718,1021.586,930.828,1024.332C930.828,1024.332,930.828,1024.332,930.828,1024.332" class="icon-auth"/><glyph unicode="&#x0049;" d="M884.364,977.909C884.364,977.909,139.636,977.909,139.636,977.909C62.511,977.909,0,915.399,0,838.273C0,838.273,0,186.636,0,186.636C0,109.511,62.511,47,139.636,47C139.636,47,884.364,47,884.364,47C961.489,47,1024,109.511,1024,186.636C1024,186.636,1024,838.273,1024,838.273C1024,915.399,961.489,977.909,884.364,977.909C884.364,977.909,884.364,977.909,884.364,977.909M139.636,884.818C139.636,884.818,884.364,884.818,884.364,884.818C910.057,884.818,930.909,863.966,930.909,838.273C930.909,838.273,930.909,623.698,930.909,623.698C930.909,623.698,822.458,660.004,822.458,660.004C822.458,660.004,589.731,380.731,589.731,380.731C589.731,380.731,365.847,471.96,365.847,471.96C365.847,471.96,93.091,276.935,93.091,276.935C93.091,276.935,93.091,838.273,93.091,838.273C93.091,863.966,113.943,884.818,139.636,884.818C139.636,884.818,139.636,884.818,139.636,884.818M884.364,140.091C884.364,140.091,139.636,140.091,139.636,140.091C121.996,140.231,105.984,150.331,98.211,166.156C98.211,166.156,377.484,366.302,377.484,366.302C377.484,366.302,619.055,270.418,619.055,270.418C619.055,270.418,851.782,549.691,851.782,549.691C851.782,549.691,930.909,525.487,930.909,525.487C930.909,525.487,930.909,186.636,930.909,186.636C930.909,160.943,910.057,140.091,884.364,140.091C884.364,140.091,884.364,140.091,884.364,140.091M372.364,559C479.837,559,547.049,675.364,493.289,768.455C439.529,861.545,305.199,861.545,251.439,768.455C239.197,747.23,232.727,723.166,232.727,698.636C232.727,621.511,295.238,559,372.364,559C372.364,559,372.364,559,372.364,559M372.364,745.182C408.204,745.182,430.592,706.409,412.672,675.364C394.752,644.318,349.975,644.318,332.055,675.364C327.959,682.439,325.818,690.444,325.818,698.636C325.818,724.329,346.671,745.182,372.364,745.182C372.364,745.182,372.364,745.182,372.364,745.182" class="icon-image"/><glyph unicode="&#x004a;" d="M918.663,918.986C918.663,918.986,105.486,587.634,105.486,587.634C105.486,587.634,495.035,503.747,495.035,503.747C495.035,503.747,586.262,102.664,586.262,102.664C586.262,102.664,918.663,918.986,918.663,918.986M83.466,484.873C4.56,501.807,-26.478,597.805,27.629,657.679C38.272,669.476,51.432,678.703,66.164,684.628C66.164,684.628,879.341,1015.98,879.341,1015.98C954,1046.651,1033.902,984.995,1023.101,904.988C1021.896,896.127,1019.589,887.424,1016.181,879.14C1016.181,879.14,682.207,63.342,682.207,63.342C650.225,-10.793,550.033,-22.485,501.798,42.266C493.409,53.538,487.328,66.435,484.025,80.119C484.025,80.119,408.002,415.666,408.002,415.666C408.002,415.666,83.466,484.873,83.466,484.873" class="icon-maps"/><glyph unicode="&#x004b;" d="M321.317,798.079C321.317,798.079,321.317,272.68,321.317,272.68C298.582,282.042,274.27,286.866,249.672,287.009C164.032,293.314,89.378,229.311,82.5,143.719C89.378,58.127,164.032,-5.876,249.672,0.429C335.312,-5.876,409.966,58.127,416.844,143.719C416.844,143.719,416.844,540.156,416.844,540.156C416.844,540.156,846.716,696.342,846.716,696.342C846.716,696.342,846.716,368.207,846.716,368.207C823.98,377.569,799.669,382.393,775.071,382.536C689.431,388.841,614.776,324.838,607.898,239.246C614.776,153.654,689.431,89.651,775.071,95.955C860.71,89.651,935.365,153.654,942.243,239.246C942.243,239.246,942.243,1024,942.243,1024C942.243,1024,321.317,798.079,321.317,798.079M249.672,95.955C208.118,95.955,178.027,119.837,178.027,143.719C178.027,167.601,208.118,191.482,249.672,191.482C291.226,191.482,321.317,167.601,321.317,143.719C321.317,119.837,291.226,95.955,249.672,95.955C249.672,95.955,249.672,95.955,249.672,95.955M416.844,641.892C416.844,641.892,416.844,731.21,416.844,731.21C416.844,731.21,846.716,887.396,846.716,887.396C846.716,887.396,846.716,798.079,846.716,798.079C846.716,798.079,416.844,641.892,416.844,641.892M775.071,191.482C733.516,191.482,703.425,215.364,703.425,239.246C703.425,263.128,733.516,287.009,775.071,287.009C816.625,287.009,846.716,263.128,846.716,239.246C846.716,215.364,816.625,191.482,775.071,191.482C775.071,191.482,775.071,191.482,775.071,191.482" class="icon-music"/><glyph unicode="&#x004c;" d="M512,700.975C366.545,700.975,275.596,543.511,348.346,417.513C421.097,291.514,602.903,291.514,675.654,417.513C692.224,446.231,700.975,478.813,700.975,512C700.975,616.355,616.355,700.975,512,700.975C512,700.975,512,700.975,512,700.975M512,416.116C438.179,416.116,392.052,496.035,428.963,559.942C465.873,623.849,558.127,623.849,595.037,559.942C603.462,545.373,607.884,528.849,607.884,512C607.884,459.031,564.969,416.116,512,416.116C512,416.116,512,416.116,512,416.116M930.909,651.636C924.113,671.93,915.875,691.665,906.24,710.749C941.708,746.961,941.708,804.864,906.24,841.076C906.24,841.076,841.076,907.171,841.076,907.171C804.864,942.639,746.961,942.639,710.749,907.171C691.665,916.48,671.884,924.439,651.636,930.909C651.636,982.342,609.978,1024,558.545,1024C558.545,1024,465.455,1024,465.455,1024C414.022,1024,372.364,982.342,372.364,930.909C352.07,924.113,332.335,915.875,313.251,906.24C277.039,941.708,219.136,941.708,182.924,906.24C182.924,906.24,116.829,841.076,116.829,841.076C81.361,804.864,81.361,746.961,116.829,710.749C107.52,691.665,99.561,671.884,93.091,651.636C41.658,651.636,0,609.978,0,558.545C0,558.545,0,465.455,0,465.455C0,414.022,41.658,372.364,93.091,372.364C99.887,352.07,108.125,332.335,117.76,313.251C82.292,277.039,82.292,219.136,117.76,182.924C117.76,182.924,183.389,117.295,183.389,117.295C219.601,81.827,277.504,81.827,313.716,117.295C332.66,107.846,352.256,99.747,372.364,93.091C372.364,41.658,414.022,0,465.455,0C465.455,0,558.545,0,558.545,0C609.978,0,651.636,41.658,651.636,93.091C671.93,99.887,691.665,108.125,710.749,117.76C746.961,82.292,804.864,82.292,841.076,117.76C841.076,117.76,906.705,183.389,906.705,183.389C942.173,219.601,942.173,277.504,906.705,313.716C916.154,332.66,924.253,352.256,930.909,372.364C982.342,372.364,1024,414.022,1024,465.455C1024,465.455,1024,558.545,1024,558.545C1024,609.978,982.342,651.636,930.909,651.636C930.909,651.636,930.909,651.636,930.909,651.636M930.909,465.455C930.909,465.455,861.091,465.455,861.091,465.455C861.091,465.455,852.713,429.615,852.713,429.615C844.241,394.147,830.278,360.215,811.287,329.076C811.287,329.076,791.273,297.891,791.273,297.891C791.273,297.891,840.611,248.553,840.611,248.553C840.611,248.553,774.982,182.924,774.982,182.924C774.982,182.924,726.109,232.727,726.109,232.727C726.109,232.727,694.924,213.644,694.924,213.644C663.785,194.653,629.853,180.689,594.385,172.218C594.385,172.218,558.545,162.909,558.545,162.909C558.545,162.909,558.545,93.091,558.545,93.091C558.545,93.091,465.455,93.091,465.455,93.091C465.455,93.091,465.455,162.909,465.455,162.909C465.455,162.909,429.615,171.287,429.615,171.287C394.147,179.759,360.215,193.722,329.076,212.713C329.076,212.713,297.891,232.727,297.891,232.727C297.891,232.727,248.553,182.924,248.553,182.924C248.553,182.924,182.924,248.553,182.924,248.553C182.924,248.553,232.727,297.891,232.727,297.891C232.727,297.891,213.644,329.076,213.644,329.076C194.653,360.215,180.689,394.147,172.218,429.615C172.218,429.615,162.909,465.455,162.909,465.455C162.909,465.455,93.091,465.455,93.091,465.455C93.091,465.455,93.091,558.545,93.091,558.545C93.091,558.545,162.909,558.545,162.909,558.545C162.909,558.545,171.287,594.385,171.287,594.385C179.759,629.853,193.722,663.785,212.713,694.924C212.713,694.924,232.727,726.109,232.727,726.109C232.727,726.109,182.924,775.447,182.924,775.447C182.924,775.447,248.553,841.076,248.553,841.076C248.553,841.076,297.891,791.273,297.891,791.273C297.891,791.273,329.076,810.356,329.076,810.356C360.215,829.347,394.147,843.311,429.615,851.782C429.615,851.782,465.455,861.091,465.455,861.091C465.455,861.091,465.455,930.909,465.455,930.909C465.455,930.909,558.545,930.909,558.545,930.909C558.545,930.909,558.545,861.091,558.545,861.091C558.545,861.091,594.385,852.713,594.385,852.713C629.853,844.241,663.785,830.278,694.924,811.287C694.924,811.287,726.109,791.273,726.109,791.273C726.109,791.273,775.447,840.611,775.447,840.611C775.447,840.611,841.076,774.982,841.076,774.982C841.076,774.982,791.273,726.109,791.273,726.109C791.273,726.109,810.356,694.924,810.356,694.924C829.347,663.785,843.311,629.853,851.782,594.385C851.782,594.385,860.16,558.545,860.16,558.545C860.16,558.545,930.909,558.545,930.909,558.545C930.909,558.545,930.909,465.455,930.909,465.455" class="icon-settings"/><glyph unicode="&#x004d;" d="M186.182,395.864C186.182,395.864,93.091,395.864,93.091,395.864C41.658,395.864,0,354.205,0,302.773C0,302.773,0,116.591,0,116.591C0,65.158,41.658,23.5,93.091,23.5C93.091,23.5,186.182,23.5,186.182,23.5C237.615,23.5,279.273,65.158,279.273,116.591C279.273,116.591,279.273,302.773,279.273,302.773C279.273,354.205,237.615,395.864,186.182,395.864C186.182,395.864,186.182,395.864,186.182,395.864M186.182,116.591C186.182,116.591,93.091,116.591,93.091,116.591C93.091,116.591,93.091,302.773,93.091,302.773C93.091,302.773,186.182,302.773,186.182,302.773C186.182,302.773,186.182,116.591,186.182,116.591M558.545,628.591C558.545,628.591,465.455,628.591,465.455,628.591C414.022,628.591,372.364,586.933,372.364,535.5C372.364,535.5,372.364,116.591,372.364,116.591C372.364,65.158,414.022,23.5,465.455,23.5C465.455,23.5,558.545,23.5,558.545,23.5C609.978,23.5,651.636,65.158,651.636,116.591C651.636,116.591,651.636,535.5,651.636,535.5C651.636,586.933,609.978,628.591,558.545,628.591C558.545,628.591,558.545,628.591,558.545,628.591M558.545,116.591C558.545,116.591,465.455,116.591,465.455,116.591C465.455,116.591,465.455,535.5,465.455,535.5C465.455,535.5,558.545,535.5,558.545,535.5C558.545,535.5,558.545,116.591,558.545,116.591M930.909,1000.955C930.909,1000.955,837.818,1000.955,837.818,1000.955C786.385,1000.955,744.727,959.296,744.727,907.864C744.727,907.864,744.727,116.591,744.727,116.591C744.727,65.158,786.385,23.5,837.818,23.5C837.818,23.5,930.909,23.5,930.909,23.5C982.342,23.5,1024,65.158,1024,116.591C1024,116.591,1024,907.864,1024,907.864C1024,959.296,982.342,1000.955,930.909,1000.955C930.909,1000.955,930.909,1000.955,930.909,1000.955M930.909,116.591C930.909,116.591,837.818,116.591,837.818,116.591C837.818,116.591,837.818,907.864,837.818,907.864C837.818,907.864,930.909,907.864,930.909,907.864C930.909,907.864,930.909,116.591,930.909,116.591" class="icon-statistics"/><glyph unicode="&#x004e;" d="M930.909,1024C930.909,1024,93.091,1024,93.091,1024C41.658,1024,0,982.342,0,930.909C0,930.909,0,744.727,0,744.727C0,744.727,1024,744.727,1024,744.727C1024,744.727,1024,930.909,1024,930.909C1024,982.342,982.342,1024,930.909,1024C930.909,1024,930.909,1024,930.909,1024M930.909,837.818C930.909,837.818,93.091,837.818,93.091,837.818C93.091,837.818,93.091,930.909,93.091,930.909C93.091,930.909,930.909,930.909,930.909,930.909C930.909,930.909,930.909,837.818,930.909,837.818M0,93.091C0,41.658,41.658,0,93.091,0C93.091,0,930.909,0,930.909,0C982.342,0,1024,41.658,1024,93.091C1024,93.091,1024,651.636,1024,651.636C1024,651.636,0,651.636,0,651.636C0,651.636,0,93.091,0,93.091M93.091,279.273C93.091,279.273,186.182,279.273,186.182,279.273C186.182,279.273,186.182,93.091,186.182,93.091C186.182,93.091,93.091,93.091,93.091,93.091C93.091,93.091,93.091,279.273,93.091,279.273M558.545,279.273C558.545,279.273,558.545,93.091,558.545,93.091C558.545,93.091,279.273,93.091,279.273,93.091C279.273,93.091,279.273,279.273,279.273,279.273C279.273,279.273,558.545,279.273,558.545,279.273M279.273,372.364C279.273,372.364,279.273,558.545,279.273,558.545C279.273,558.545,558.545,558.545,558.545,558.545C558.545,558.545,558.545,372.364,558.545,372.364C558.545,372.364,279.273,372.364,279.273,372.364M651.636,93.091C651.636,93.091,651.636,279.273,651.636,279.273C651.636,279.273,930.909,279.273,930.909,279.273C930.909,279.273,930.909,93.091,930.909,93.091C930.909,93.091,651.636,93.091,651.636,93.091M930.909,372.364C930.909,372.364,651.636,372.364,651.636,372.364C651.636,372.364,651.636,558.545,651.636,558.545C651.636,558.545,930.909,558.545,930.909,558.545C930.909,558.545,930.909,372.364,930.909,372.364M186.182,558.545C186.182,558.545,186.182,372.364,186.182,372.364C186.182,372.364,93.091,372.364,93.091,372.364C93.091,372.364,93.091,558.545,93.091,558.545C93.091,558.545,186.182,558.545,186.182,558.545" class="icon-tables"/><glyph unicode="&#x004f;" d="M512.378,1023.733C118.521,1023.733,-127.615,597.366,69.313,256.3C266.241,-84.767,758.515,-84.767,955.443,256.3C1000.372,334.066,1024,422.298,1024,512.111C1024,794.666,794.933,1023.733,512.378,1023.733C512.378,1023.733,512.378,1023.733,512.378,1023.733M512.378,93.511C190.149,93.511,-11.245,442.344,149.87,721.411C310.984,1000.477,713.771,1000.477,874.885,721.411C911.629,657.784,930.978,585.598,930.978,512.111C930.978,280.904,743.584,93.511,512.378,93.511C512.378,93.511,512.378,93.511,512.378,93.511M645.865,480.948C645.865,480.948,558.889,527.459,558.889,527.459C558.889,527.459,558.889,791.177,558.889,791.177C558.889,826.991,520.145,849.363,489.122,831.456C474.75,823.131,465.867,807.782,465.867,791.177C465.867,791.177,465.867,512.111,465.867,512.111C466.192,498.064,472.843,484.855,484.006,476.297C488.331,465.228,496.424,456.018,506.796,450.251C506.796,450.251,610.981,394.438,610.981,394.438C610.981,394.438,615.167,394.438,615.167,394.438C636.609,385.833,660.981,396.252,669.585,417.693C678.469,441.739,668.376,468.669,645.865,480.948C645.865,480.948,645.865,480.948,645.865,480.948" class="icon-time"/><glyph unicode="&#x0050;" d="M372.236,1024.148C372.236,1024.148,93.059,1024.148,93.059,1024.148C41.644,1024.148,0,982.504,0,931.089C0,931.089,0,651.913,0,651.913C0,600.497,41.644,558.854,93.059,558.854C93.059,558.854,372.236,558.854,372.236,558.854C423.651,558.854,465.295,600.497,465.295,651.913C465.295,651.913,465.295,931.089,465.295,931.089C465.295,982.504,423.651,1024.148,372.236,1024.148C372.236,1024.148,372.236,1024.148,372.236,1024.148M93.059,651.913C93.059,651.913,93.059,931.089,93.059,931.089C93.059,931.089,353.159,931.089,353.159,931.089C353.159,931.089,232.647,810.578,232.647,810.578C232.647,810.578,195.889,847.336,195.889,847.336C195.889,847.336,129.817,781.73,129.817,781.73C129.817,781.73,232.647,679.365,232.647,679.365C232.647,679.365,372.236,818.953,372.236,818.953C372.236,818.953,372.236,651.913,372.236,651.913C372.236,651.913,93.059,651.913,93.059,651.913M372.236,465.795C372.236,465.795,93.059,465.795,93.059,465.795C41.644,465.795,0,424.151,0,372.736C0,372.736,0,93.559,0,93.559C0,42.144,41.644,0.5,93.059,0.5C93.059,0.5,372.236,0.5,372.236,0.5C423.651,0.5,465.295,42.144,465.295,93.559C465.295,93.559,465.295,372.736,465.295,372.736C465.295,424.151,423.651,465.795,372.236,465.795C372.236,465.795,372.236,465.795,372.236,465.795M372.236,93.559C372.236,93.559,93.059,93.559,93.059,93.559C93.059,93.559,93.059,372.736,93.059,372.736C93.059,372.736,372.236,372.736,372.236,372.736C372.236,372.736,372.236,93.559,372.236,93.559M791.001,558.854C970.093,558.854,1082.043,752.742,992.474,907.825C902.951,1062.907,679.051,1062.907,589.528,907.825C569.102,872.462,558.354,832.354,558.354,791.501C558.354,663.033,662.533,558.854,791.001,558.854C791.001,558.854,791.001,558.854,791.001,558.854M791.001,931.089C898.437,931.089,965.626,814.766,911.885,721.707C858.143,628.648,723.859,628.648,670.117,721.707C657.88,742.924,651.413,766.98,651.413,791.501C651.413,868.6,713.902,931.089,791.001,931.089C791.001,931.089,791.001,931.089,791.001,931.089M791.001,465.795C611.909,465.795,499.959,271.906,589.528,116.824C679.051,-38.259,902.951,-38.259,992.474,116.824C1012.9,152.186,1023.648,192.294,1023.648,233.147C1023.648,361.615,919.469,465.795,791.001,465.795C791.001,465.795,791.001,465.795,791.001,465.795M791.001,93.559C683.564,93.559,616.376,209.883,670.117,302.942C723.859,396,858.143,396,911.885,302.942C924.122,281.724,930.589,257.668,930.589,233.147C930.589,156.048,868.1,93.559,791.001,93.559C791.001,93.559,791.001,93.559,791.001,93.559M730.513,791.501C730.513,744.925,780.904,715.844,821.245,739.109C839.95,749.904,851.489,769.911,851.489,791.501C851.489,838.077,801.098,867.158,760.757,843.893C742.052,833.098,730.513,813.091,730.513,791.501" class="icon-ui_elements"/><glyph unicode="&#x0051;" d="M512.27,512.046C709.326,512.046,832.506,725.382,733.952,896.021C635.45,1066.66,389.091,1066.66,290.589,896.021C268.113,857.112,256.287,812.98,256.287,768.029C256.287,626.675,370.916,512.046,512.27,512.046C512.27,512.046,512.27,512.046,512.27,512.046M512.27,921.619C630.484,921.619,704.412,793.628,645.279,691.234C586.147,588.841,438.393,588.841,379.261,691.234C365.797,714.58,358.68,741.049,358.68,768.029C358.68,852.862,427.437,921.619,512.27,921.619C512.27,921.619,512.27,921.619,512.27,921.619M665.86,409.652C665.86,409.652,358.68,409.652,358.68,409.652C189.014,409.652,51.5,272.138,51.5,102.472C51.5,102.472,51.5,51.275,51.5,51.275C51.5,11.854,94.147,-12.772,128.295,6.939C144.115,16.103,153.893,32.998,153.893,51.275C153.893,51.275,153.893,102.472,153.893,102.472C153.893,215.566,245.587,307.259,358.68,307.259C358.68,307.259,665.86,307.259,665.86,307.259C778.954,307.259,870.647,215.566,870.647,102.472C870.647,102.472,870.647,51.275,870.647,51.275C870.647,11.854,913.294,-12.772,947.442,6.939C963.262,16.103,973.041,32.998,973.041,51.275C973.041,51.275,973.041,102.472,973.041,102.472C973.041,272.138,835.526,409.652,665.86,409.652C665.86,409.652,665.86,409.652,665.86,409.652" class="icon-user"/><glyph unicode="&#x0052;" d="M884.364,977.909C884.364,977.909,139.636,977.909,139.636,977.909C62.511,977.909,0,915.399,0,838.273C0,838.273,0,186.636,0,186.636C0,109.511,62.511,47,139.636,47C139.636,47,884.364,47,884.364,47C961.489,47,1024,109.511,1024,186.636C1024,186.636,1024,838.273,1024,838.273C1024,915.399,961.489,977.909,884.364,977.909C884.364,977.909,884.364,977.909,884.364,977.909M930.909,186.636C930.909,160.943,910.057,140.091,884.364,140.091C884.364,140.091,139.636,140.091,139.636,140.091C113.943,140.091,93.091,160.943,93.091,186.636C93.091,186.636,93.091,838.273,93.091,838.273C93.091,863.966,113.943,884.818,139.636,884.818C139.636,884.818,884.364,884.818,884.364,884.818C910.057,884.818,930.909,863.966,930.909,838.273C930.909,838.273,930.909,186.636,930.909,186.636M669.789,599.96C669.789,599.96,469.644,730.753,469.644,730.753C409.553,769.804,329.728,729.17,325.958,657.63C325.865,655.768,325.818,653.953,325.818,652.091C325.818,652.091,325.818,391.436,325.818,391.436C326.051,319.756,403.782,275.259,465.734,311.285C467.037,312.076,468.34,312.868,469.644,313.705C469.644,313.705,669.789,444.498,669.789,444.498C726.109,481.223,726.109,563.701,669.789,600.425C669.789,600.425,669.789,599.96,669.789,599.96M418.909,391.436C418.909,391.436,418.909,652.091,418.909,652.091C418.909,652.091,619.055,521.298,619.055,521.298C619.055,521.298,418.909,391.436,418.909,391.436" class="icon-video"/></font></defs></svg>
\ No newline at end of file
src/fonts/glyphicons-halflings-regular.svg 0 → 100644
View file @ 3be931bc
This source diff could not be displayed because it is too large. You can view the blob instead.
src/helpers/ApiClient.js 0 → 100644
View file @ 3be931bc
import { API_ROUTE } from '../config/api'
import axios from 'axios'
let querystring = require('querystring')
export default {
login (username, password, callback) {
axios.post(API_ROUTE + 'token',
querystring.stringify({
grant_type: 'password',
scope: 'read',
username: username,
password: password,
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic Ym9va2luZzQudG91cnBhcS5jb206NGQyMGUwNWU0NmY2ZTRiOGVkYTk1ZjM0NGVjYTEwYjU='
}
}).then((response) => {
callback(response)
})
.catch(error => {
alert('There was an error in the authentication process:\n' + error.response.data.error)
})
}
}
src/i18n/en.json 0 → 100644
View file @ 3be931bc
{
"auth": {
"agree": "I agree to",
"alreadyJoined": "Already joined?",
"createAccount": "Create account",
"createNewAccount": "Create account",
"email": "Username",
"login": "Login",
"password": "Password",
"signUp": "Sign Up",
"termsOfUse": "Terms of Use.",
"welcome": "Welcome!",
"access_token": "Bearer Token"
},
"breadcrumbs": {
"home": "Home"
},
"buttons": {
"advanced": "Icons, Groups, Dropdowns",
"button": "BUTTON",
"colors": "Colors",
"disabled": "DISABLED",
"dropdown": "DROPDOWN",
"hover": "HOVER",
"main": "Primary & Secondary Buttons",
"micro": "MICRO",
"pressed": "PRESSED",
"small": "SMALL"
},
"charts": {
"horizontalBarChart": "Horizontal Bar Chart",
"verticalBarChart": "Vertical Bar Chart",
"lineChart": "Line Chart",
"pieChart": "Pie Chart",
"donutChart": "Donut Chart",
"bubbleChart": "Bubble Chart"
},
"dashboard": {
"dataVisualization": "Data Visualization",
"success": "SUCCESS",
"successMessage": "You successfully read this important alert message.",
"elements": "Elements",
"features": "Features",
"setupProfile": "Setup Profile",
"teamMembers": "Team Members",
"usersAndMembers": "Users & Members",
"versions": "Versions"
},
"notificationsPage": {
"alerts": {
"title": "Alerts",
"success": "SUCCESS",
"successMessage": "You successfully read this important alert message.",
"info": "INFO",
"infoMessage": "This alert needs your attention, but it's not super important.",
"warning": "WARNING",
"warningMessage": "Better check yourself, you're not looking too good.",
"danger": "DANGER",
"dangerMessage": "Change a few things up and try submitting again."
},
"popovers": {
"title": "Tooltips & Popovers",
"popoverTitleLabel": "Popover Title",
"popoverTextLabel": "Popover Text",
"popoverIconLabel": "Popover Icon (fontawesome)",
"showPopover": "Show Popover",
"topTooltip": "top tooltip",
"rightTooltip": "rightside tooltip",
"leftTooltip": "left",
"bottomTooltip": "below"
},
"toasts": {
"title": "Toasts",
"textLabel": "Text",
"durationLabel": "Duration (milliseconds)",
"iconLabel": "Icon (fontawesome)",
"fullWidthLabel": "Fullwidth",
"launchToast": "Launch toast"
}
},
"extra": {
"tabs": {
"title": "Tabs",
"maps": "Maps",
"overview": "Overview",
"setupProfile": "Setup Profile"
},
"chat": "Chat",
"profileCard": "Profile Card"
},
"forms": {
"controls": {
"female": "Female",
"male": "Male",
"title": "Checkboxes, Radios, Switches",
"radioDisabled": "Disabled Radio",
"radio": "Radio",
"subscribe": "Subscribe to newsletter"
},
"dateTimePicker": {
"title": "Date time pickers",
"basic": "Basic",
"time": "Time",
"range": "Range",
"multiple": "Multiple",
"disabled": "Disabled"
},
"inputs": {
"emailValidatedSuccess": "Email (validated with success)",
"emailValidated": "Email (validated)",
"inputWithIcon": "Input With Icon",
"inputWithButton": "Input With Button",
"inputWithClearButton": "Input With Clear Button",
"inputWithRoundButton": "Input With Round Button",
"textInput": "Text Input",
"textInputWithDescription": "Text Input (with description)",
"textArea": "Text Area",
"title": "Inputs",
"upload": "UPLOAD"
},
"mediumEditor": {
"title": "Medium Editor"
},
"selects": {
"country": "Country Select",
"countryMulti": "Country Multi Select",
"multi": "Multi Select",
"simple": "Simple Select",
"title": "Selects"
},
"wizard": {
"name": "Name",
"completed": "Wizard completed!",
"confirmSelection": "Confirm selection",
"rich": "Rich Wizard",
"simple": "Simple Wizard",
"stepOne": "Step 1. Name",
"stepTwo": "Step 2. Country",
"stepThree": "Step 3. Confirm",
"verticalRich": "Vertical Rich Wizard",
"verticalSimple": "Vertical Simple Wizard"
}
},
"grid": {
"desktop": "Desktop Grid",
"fixed": "Fixed Grid",
"offsets": "Offsets",
"responsive": "Responsive Grid"
},
"icons": {
"back": "Back to icons",
"none": "No icons found",
"search": "Icon search",
"title": "Icons"
},
"spinners": {
"title": "Spinners",
"poweredBy": "Powered by"
},
"language": {
"english": "English",
"spanish": "Spanish"
},
"menu": {
"auth": "Auth",
"buttons": "Buttons",
"charts": "Charts",
"dashboard": "Dashboard",
"extra": "Extra",
"formElements": "Form Elements",
"forms": "Forms",
"formWizards": "Form Wizards",
"mediumEditor": "Medium Editor",
"grid": "Grid",
"icons": "Icons",
"spinners": "Spinners",
"login": "Login",
"maps": "Maps",
"modals": "Modals",
"notifications": "Notifications",
"progressBars": "Progress Bars",
"signUp": "Sign up",
"statistics": "Statistics",
"tables": "Tables",
"typography": "Typography",
"uiElements": "UI Elements",
"treeView": "Tree view",
"dateTimePickers": "Date time pickers"
},
"messages": {
"all": "See all messages",
"new": "New messages from {name}"
},
"modal": {
"cancel": "CANCEL",
"close": "CLOSE",
"confirm": "CONFIRM",
"large": "Large",
"largeTitle": "Large Modal",
"medium": "Medium",
"mediumTitle": "Medium Modal",
"small": "Small",
"smallTitle": "Small Modal",
"static": "Static",
"staticMessage": "This is a static modal, backdrop click will not close it.",
"staticTitle": "Static Modal",
"title": "Modals"
},
"navbar": {
"messageUs": "Send us your questions or feedback to"
},
"notifications": {
"all": "See all notifications",
"sentMessage": "{name} sent you a message",
"uploadedZip": "{name} uploaded a new Zip file with {type}",
"startedTopic": "{name} started a new topic"
},
"progressBars": {
"basic": "Basic",
"basicVertical": "Basic Vertical",
"circle": "Circle",
"colorFulTitle": "Colorful Bars",
"thin": "Thin",
"thinVertical": "Thin Vertical",
"thick": "Thick",
"title": "Progress Bars"
},
"tables": {
"basic": "Basic Table",
"styled": "Colors, Icons, Labels",
"advanced": "Search & Pagination",
"headings": {
"city": "City",
"email": "Email",
"name": "Name",
"score": "Score"
}
},
"user": {
"language": "Change Language",
"logout": "Logout",
"profile": "My Profile"
},
"treeView": {
"basic": "Basic",
"icons": "Icons",
"selectable": "Selectable",
"editable": "Editable",
"advanced": "Advanced"
}
}
src/i18n/es.json 0 → 100644
View file @ 3be931bc
{
"auth": {
"agree": "Acepto",
"alreadyJoined": "Ya tienes una cuenta?",
"createAccount": "Create cuenta",
"createNewAccount": "Crear cuenta",
"email": "Email",
"login": "Iniciar sesión",
"password": "Contraseña",
"signUp": "Registrar",
"termsOfUse": "Los terminos de uso",
"welcome": "Bienvenido!"
},
"buttons": {
"advanced": "Iconos, Grupos, Dropdowns",
"button": "BOTON",
"colors": "Colores",
"disabled": "DESHABILITADO",
"dropdown": "DESPLEGABLE",
"hover": "HOVER",
"main": "Botón Primario y Secundario",
"micro": "MICRO",
"pressed": "PRESIONADO",
"small": "PEQUEÑO"
},
"charts": {
"bubbleChart": "Bubble Chart",
"donutChart": "Donut Chart",
"horizontalBarChart": "Horizontal Bar Chart",
"lineChart": "Line Chart",
"pieChart": "Pie Chart",
"verticalBarChart": "Vertical Bar Chart"
},
"dashboard": {
"elements": "Elementos",
"success": "ÉXITO",
"successMessage": "Ha leído correctamente este mensaje de alerta importante.",
"teamMembers": "Miembros del Equipo",
"versions": "Versiones"
},
"notificationsPage": {
"alerts": {
"title": "Alerts",
"success": "ÉXITO",
"successMessage": "Ha leído correctamente este mensaje de alerta importante.",
"info": "INFO",
"infoMessage": "Esta alerta necesita tu atención, pero no es muy importante.",
"warning": "ADVERTENCIA",
"warningMessage": "Mejor compruébalo, esto no pinta bien.",
"danger": "PELIGRO",
"dangerMessage": "Cambiar algunas cosas e enviarlo de nuevo."
},
"popovers": {
"title": "Tooltips & Popovers",
"popoverTitleLabel": "Title de Popover",
"popoverTextLabel": "Texto de Popover",
"popoverIconLabel": "Icono de Popover (fontawesome)",
"showPopover": "Mostrar Popover",
"topTooltip": "tope tooltip",
"rightTooltip": "derecha tooltip",
"leftTooltip": "izquierda",
"bottomTooltip": "fondo"
},
"Toasts": {
"title": "tostadas",
"textLabel": "Texto",
"durationLabel": "Duración (milisegundos)",
"iconLabel": "Icono (fontawesome)",
"fullWidthLabel": "Ancho total",
"launchToast": "Lanzar tostadas"
}
},
"extra": {
"tabs": {
"title": "Tabs",
"maps": "Mapas",
"overview": "Visión de conjunto",
"setupProfile": "Perfil de Configuración"
},
"chat": "Chat",
"profileCard": "Tarjeta de Perfil"
},
"forms": {
"controls": {
"female": "Mujer",
"male": "Hombre",
"title": "Checkboxes, Radios, Switches",
"radioDisabled": "Radio Desactivado",
"radio": "Radio",
"subscribe": "Suscribirse a la newsletter"
},
"inputs": {
"emailValidatedSuccess": "Email (validado con éxito)",
"emailValidated": "Email (validado)",
"inputWithIcon": "Input con Icono",
"inputWithButton": "Input con Boton",
"inputWithClearButton": "Input With Clear Button",
"inputWithRoundButton": "Input With Round Button",
"textInput": "Input de Texto",
"textInputWithDescription": "Input de Texto (con descripcion)",
"textArea": "Text Area",
"title": "Inputs",
"upload": "SUBIR"
},
"mediumEditor": {
"title": "Medium Editor"
},
"selects": {
"country": "País Select",
"countryMulti": "País Multi Select",
"multi": "Multi Select",
"simple": "Select Simple",
"title": "Selects"
},
"wizard": {
"completed": "Asistente Completado!",
"confirmSelection": "Confirmar selección",
"name": "Nombre",
"rich": "Asistente Rico",
"simple": "Asistente Simple",
"stepOne": "Step 1. Nombre",
"stepTwo": "Step 2. País",
"stepThree": "Step 3. Confirmar",
"verticalRich": "Asistente Rico Vertical",
"verticalSimple": "Asistente Simple Vertical"
}
},
"grid": {
"fixed": "Grid Fijo",
"desktop": "Desktop Grid",
"responsive": "Responsive Grid",
"offsets": "Offsets"
},
"icons": {
"back": "Volver a los iconos",
"none": "No se han encontrado iconos",
"search": "Búsqueda de iconos",
"title": "Iconos"
},
"language": {
"english": "Ingles",
"spanish": "Español"
},
"menu": {
"auth": "Autenticación",
"buttons": "Botones",
"charts": "Gráficos",
"dashboard": "Dashboard",
"extra": "Extra",
"formElements": "Elementos de un Formulario",
"forms": "Formularios",
"formWizards": "Asistente para Formularios",
"mediumEditor": "Medium Editor",
"grid": "Grid",
"icons": "Iconos",
"login": "Iniciar sesión",
"maps": "Mapas",
"modals": "Modals",
"notifications": "Notificaciones",
"progressBars": "Barras de Progreso",
"signUp": "Registrar",
"statistics": "Estadisticas",
"tables": "Tablas",
"typography": "Tipografía",
"uiElements": "Elementos UI"
},
"messages": {
"all": "Ver todos los mensajes",
"new": "Nuevo mensajes de {name}"
},
"modal": {
"cancel": "CANCELAR",
"close": "CERRAR",
"confirm": "CONFIRMAR",
"large": "Largo",
"largeTitle": "Modal Largo",
"medium": "Mediano",
"mediumTitle": "Modal Mediana",
"small": "Pequeño",
"static": "Estático",
"smallTitle": "Modal Pequeña",
"staticMessage":
"Esto es un modal estático. No se cerrará haciendo clic en el fondo.",
"staticTitle": "Modal Estático",
"title": "Modals"
},
"navbar": {
"messageUs": "Envíenos sus preguntas o comentarios a"
},
"notifications": {
"all": "Ver todos los notificaciones",
"sentMessage": "{name} te ha mandado un mensaje",
"uploadedZip": "{name} ha subido un archivo Zip con {type}",
"startedTopic": "{name} ha creado una tema nueva"
},
"progressBars": {
"basic": "Basico",
"basicVertical": "Basico y Vertical",
"circle": "Circular",
"colorFulTitle": "Barras Coloridas",
"thin": "Delgado",
"thinVertical": "Delgado Vertical",
"thick": "Grueso",
"title": "Barras de Progresso"
},
"tables": {
"basic": "Tabla basica",
"styled": "Colores, Iconos, Etiquetas",
"advanced": "Búsqueda y Paginación",
"headings": {
"city": "Ciudad",
"email": "Email",
"name": "Nombre",
"score": "Puntuación"
}
},
"user": {
"language": "Cambiar Idioma",
"profile": "Mi Perfil",
"logout": "Cerrar Sesión"
}
}
src/i18n/index.js 0 → 100644
View file @ 3be931bc
import Vue from 'vue'
// add translations directly to the application
Vue.i18n.add('en', require('./en.json'))
Vue.i18n.add('es', require('./es.json'))
// set the start locale to use
Vue.i18n.set('en')
// set fallback for non-translated strings
Vue.i18n.fallback('en')
src/main.js 0 → 100644
View file @ 3be931bc
// Polyfills
import 'es6-promise/auto'
import 'babel-polyfill'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import App from './App'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
import VuesticPlugin from 'vuestic-theme/vuestic-plugin'
import './i18n'
import YmapPlugin from 'vue-yandex-maps'
import axios from './backend/vue-axios'
import $ from 'jquery'
Vue.use(VuesticPlugin)
Vue.use(YmapPlugin)
// NOTE: workaround for VeeValidate + vuetable-2
Vue.use(VeeValidate, {fieldsBagName: 'formFields'})
sync(store, router)
let mediaHandler = () => {
if (window.matchMedia(store.getters.config.windowMatchSizeLg).matches) {
store.dispatch('toggleSidebar', true)
} else {
store.dispatch('toggleSidebar', false)
}
}
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('access_token')
if (token || to.fullPath === '/auth/login') {
store.commit('setLoading', true)
next()
}
})
router.afterEach((to, from) => {
mediaHandler()
store.commit('setLoading', false)
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
axios,
$
})
src/router/index.js 0 → 100644
View file @ 3be931bc
import Vue from 'vue'
import Router from 'vue-router'
import menuModule from 'vuex-store/modules/menu'
Vue.use(Router)
const demoRoutes = []
if (process.env.NODE_ENV === 'development') {
const VueComponentTree = require('vue-component-tree').default
demoRoutes.push(
VueComponentTree(require.context('./..', true, /.demo.vue$/), '/demo')
)
}
export default new Router({
routes: [
...demoRoutes,
...generateRoutesFromMenu(menuModule.state.items),
{
path: '*',
redirect: { name: getDefaultRoute(menuModule.state.items).name }
}
]
})
function generateRoutesFromMenu (menu = [], routes = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
if (item.children) {
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}
function getDefaultRoute (menu = []) {
let defaultRoute
menu.forEach((item) => {
if (item.meta.default) {
defaultRoute = item
} else if (item.children) {
let defaultChild = item.children.find((i) => i.meta.default)
defaultRoute = defaultChild || defaultRoute
}
})
return defaultRoute
}
src/sass/_base.scss 0 → 100644
View file @ 3be931bc
html {
min-height: 100%;
}
body {
height: 100%;
min-height: 100vh;
position: relative;
}
//Util classes
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-viewport-height {
height: $widget-viewport-height;
}
.none {
display: none;
}
.pointer {
cursor: pointer;
}
a:not([href]):not([tabindex]) {
color: $white;
cursor: pointer;
}
a:not([href]):not([tabindex]):hover {
color: $white;
cursor: pointer;
}
a:not([href]):not([tabindex]):focus {
color: $white;
cursor: pointer;
}
src/sass/_fonts.scss 0 → 100644
View file @ 3be931bc
// Fonts //
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@font-face {
font-family: 'Vuestic Icons';
src: url('#{$icon-font-path}/Glyphter.eot');
src: url('#{$icon-font-path}/Glyphter.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}/Glyphter.woff') format('woff'),
url('#{$icon-font-path}/Glyphter.ttf') format('truetype'),
url('#{$icon-font-path}/Glyphter.svg#Glyphter') format('svg');
font-weight: normal;
font-style: normal;
}
.vuestic-icon {
line-height: 1;
}
.vuestic-icon:before{
display: inline-block;
font-family: 'Vuestic Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.vuestic-icon-comments:before{content:'\0041';}
.vuestic-icon-components:before{content:'\0042';}
.vuestic-icon-dashboard:before{content:'\0043';}
.vuestic-icon-extras:before{content:'\0044';}
.vuestic-icon-files:before{content:'\0045';}
.vuestic-icon-forms:before{content:'\0046';}
.vuestic-icon-graph:before{content:'\0047';}
.vuestic-icon-auth:before{content:'\0048';}
.vuestic-icon-image:before{content:'\0049';}
.vuestic-icon-maps:before{content:'\004a';}
.vuestic-icon-music:before{content:'\004b';}
.vuestic-icon-settings:before{content:'\004c';}
.vuestic-icon-statistics:before{content:'\004d';}
.vuestic-icon-tables:before{content:'\004e';}
.vuestic-icon-time:before{content:'\004f';}
.vuestic-icon-ui-elements:before{content:'\0050';}
.vuestic-icon-user:before{content:'\0051';}
.vuestic-icon-video:before{content:'\0052';}
src/sass/_glyphicons.scss 0 → 100644
View file @ 3be931bc
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
@at-root {
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\002a"; } }
.glyphicon-plus { &:before { content: "\002b"; } }
.glyphicon-euro,
.glyphicon-eur { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-cd { &:before { content: "\e201"; } }
.glyphicon-save-file { &:before { content: "\e202"; } }
.glyphicon-open-file { &:before { content: "\e203"; } }
.glyphicon-level-up { &:before { content: "\e204"; } }
.glyphicon-copy { &:before { content: "\e205"; } }
.glyphicon-paste { &:before { content: "\e206"; } }
// The following 2 Glyphicons are omitted for the time being because
// they currently use Unicode codepoints that are outside the
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
// Notably, the bug affects some older versions of the Android Browser.
// More info: https://github.com/twbs/bootstrap/issues/10106
// .glyphicon-door { &:before { content: "\1f6aa"; } }
// .glyphicon-key { &:before { content: "\1f511"; } }
.glyphicon-alert { &:before { content: "\e209"; } }
.glyphicon-equalizer { &:before { content: "\e210"; } }
.glyphicon-king { &:before { content: "\e211"; } }
.glyphicon-queen { &:before { content: "\e212"; } }
.glyphicon-pawn { &:before { content: "\e213"; } }
.glyphicon-bishop { &:before { content: "\e214"; } }
.glyphicon-knight { &:before { content: "\e215"; } }
.glyphicon-baby-formula { &:before { content: "\e216"; } }
.glyphicon-tent { &:before { content: "\26fa"; } }
.glyphicon-blackboard { &:before { content: "\e218"; } }
.glyphicon-bed { &:before { content: "\e219"; } }
.glyphicon-apple { &:before { content: "\f8ff"; } }
.glyphicon-erase { &:before { content: "\e221"; } }
.glyphicon-hourglass { &:before { content: "\231b"; } }
.glyphicon-lamp { &:before { content: "\e223"; } }
.glyphicon-duplicate { &:before { content: "\e224"; } }
.glyphicon-piggy-bank { &:before { content: "\e225"; } }
.glyphicon-scissors { &:before { content: "\e226"; } }
.glyphicon-bitcoin { &:before { content: "\e227"; } }
.glyphicon-btc { &:before { content: "\e227"; } }
.glyphicon-xbt { &:before { content: "\e227"; } }
.glyphicon-yen { &:before { content: "\00a5"; } }
.glyphicon-jpy { &:before { content: "\00a5"; } }
.glyphicon-ruble { &:before { content: "\20bd"; } }
.glyphicon-rub { &:before { content: "\20bd"; } }
.glyphicon-scale { &:before { content: "\e230"; } }
.glyphicon-ice-lolly { &:before { content: "\e231"; } }
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
.glyphicon-education { &:before { content: "\e233"; } }
.glyphicon-option-horizontal { &:before { content: "\e234"; } }
.glyphicon-option-vertical { &:before { content: "\e235"; } }
.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
.glyphicon-modal-window { &:before { content: "\e237"; } }
.glyphicon-oil { &:before { content: "\e238"; } }
.glyphicon-grain { &:before { content: "\e239"; } }
.glyphicon-sunglasses { &:before { content: "\e240"; } }
.glyphicon-text-size { &:before { content: "\e241"; } }
.glyphicon-text-color { &:before { content: "\e242"; } }
.glyphicon-text-background { &:before { content: "\e243"; } }
.glyphicon-object-align-top { &:before { content: "\e244"; } }
.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
.glyphicon-object-align-left { &:before { content: "\e247"; } }
.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
.glyphicon-object-align-right { &:before { content: "\e249"; } }
.glyphicon-triangle-right { &:before { content: "\e250"; } }
.glyphicon-triangle-left { &:before { content: "\e251"; } }
.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
.glyphicon-triangle-top { &:before { content: "\e253"; } }
.glyphicon-console { &:before { content: "\e254"; } }
.glyphicon-superscript { &:before { content: "\e255"; } }
.glyphicon-subscript { &:before { content: "\e256"; } }
.glyphicon-menu-left { &:before { content: "\e257"; } }
.glyphicon-menu-right { &:before { content: "\e258"; } }
.glyphicon-menu-down { &:before { content: "\e259"; } }
.glyphicon-menu-up { &:before { content: "\e260"; } }
src/sass/_icons-styles.scss 0 → 100644
View file @ 3be931bc
@import url(http://weloveiconfonts.com/api/?family=brandico|entypo|fontelico|iconicfill|iconicstroke|maki|openwebicons|typicons|zocial);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
font-style: normal;
}
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
font-style: normal;
}
/* fontelico */
[class*="fontelico-"]:before {
font-family: 'fontelico', sans-serif;
font-style: normal;
}
/* iconicfill */
[class*="iconicfill-"]:before {
font-family: 'IconicFill', sans-serif;
font-style: normal;
}
/* iconicstroke */
[class*="iconicstroke-"]:before {
font-family: 'IconicStroke', sans-serif;
font-style: normal;
}
/* maki */
[class*="maki-"]:before {
font-family: 'maki', sans-serif;
font-style: normal;
}
/* openwebicons */
[class*="openwebicons-"]:before {
font-family: 'OpenWeb Icons', sans-serif;
font-style: normal;
}
/* typicons */
[class*="typicons-"]:before {
font-family: 'Typicons', sans-serif;
font-style: normal;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
src/sass/_icons.scss 0 → 100644
View file @ 3be931bc
.i-nav-notification {
display: inline-block;
height: 32px;
width: 22px;
background: url('assets/icons/nav-notification.png') no-repeat center center;
}
.i-nav-messages {
display: inline-block;
height: 21px;
width: 26px;
background: url('assets/icons/nav-messages.png') no-repeat center center;
}
.i-vuestic {
display: inline-block;
width: 129px;
height: 22px;
background: url('//staging-booking.tourpaq.com/App_Themes/Tourpaq/Images/logo.png') no-repeat center center;
}
.i-menu-expanded {
display: inline-block;
width: 24px;
height: 20px;
background: url('assets/icons/menu-expanded.svg') no-repeat center center;
}
.i-menu-collapsed {
display: inline-block;
width: 24px;
height: 20px;
background: url('assets/icons/menu-collapsed.svg') no-repeat center center;
}
.i-vuestic-fresh {
display: inline-block;
width: 51px;
height: 48px;
background: url('assets/icons/vuestic-fresh.svg') no-repeat center center;
}
.i-vuestic-clean-code {
display: inline-block;
width: 56px;
height: 50px;
background: url('assets/icons/vuestic-clean-code.svg') no-repeat center center;
}
.i-vuestic-free {
display: inline-block;
width: 45px;
height: 51px;
background: url('assets/icons/vuestic-free.svg') no-repeat center center;
}
.i-vuestic-responsive {
display: inline-block;
width: 47.5px;
height: 49px;
background: url('assets/icons/vuestic-responsive.svg') no-repeat center center;
}
.i-vuestic-rich {
display: inline-block;
width: 57px;
height: 55px;
background: url('assets/icons/vuestic-rich.svg') no-repeat center center;
}
.i-vuestic-vue {
display: inline-block;
width: 55px;
height: 47.8px;
background: url('assets/icons/vuestic-vue.svg') no-repeat center center;
}
src/sass/_material-forms.scss 0 → 100644
View file @ 3be931bc
$shadow-inset: inset 0 2px 2px 0 rgba(0,0,0,.14);
$shadow-0: 0 0 1px rgba(0, 0, 0, 0);
$shadow-2: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
$shadow-3: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
$shadow-4: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
$shadow-6: 0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
$shadow-8: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);
// Font Sizes
$mf-font-size: 1rem !default;
$mf-active-font-size: $mf-font-size * 0.6 !default;
$mf-active-top: -$mf-font-size * 0.6 !default;
// Margin & Paddings
$mf-gap: $mf-font-size * 1.5 !default;
$mf-min-height: 2.25rem;
$mf-spacer: $mf-font-size / 8 !default;
$mf-fieldset-margin: 0 0 $mf-gap * 2 !default;
$mf-checkbox-gap: $mf-font-size * 2 !default;
$mf-checkbox-top: 0 !default;
$mf-radio-margin: $mf-font-size / -4 !default;
$mf-icon-gutter: 1.375rem;
$mf-icon-top: 0.4375rem;
// Colors
$mf-input-color: $body-color !default;
$mf-border-color: #999 !default;
$mf-label-color: lighten($mf-border-color, 10%) !default;
$mf-active-color: darken($mf-border-color, 10%) !default;
$mf-focus-color: $brand-primary !default;
$mf-error-color: $brand-danger !default;
$mf-focus-border-color: $charcoal !default;
// Animation
$mf-transition-speed: 0.28s !default;
.button-container {
text-align: center;
}
// The Styles for the form
fieldset {
//margin: $mf-fieldset-margin;
padding: 0;
border: none;
}
.form-group {
position: relative;
display: flex;
flex-direction: row;
min-height: $mf-min-height;
margin-top: ($mf-font-size * 0.2);
margin-bottom: ($mf-gap * 1.5);
.input-group {
align-self: flex-end;
}
.input-icon {
position: absolute;
top: $mf-icon-top;
color: $mf-label-color;
}
@include text-emphasis-variant(".text-secondary", $mf-label-color);
.input-group {
position: relative;
display: block;
}
&.select-form-group {
.dropdown-toggle::after {
display: none;
}
.dropdown-menu {
width: 100%;
}
.dropdown-item {
cursor: pointer;
justify-content: space-between;
.selected-icon {
display: none;
margin-left: 0.35rem;
}
&.selected {
color: $mf-focus-color;
.selected-icon {
display: inline-block;
}
}
}
.input-icon {
color: $mf-active-color;
font-size: 0.8rem;
top: 1rem;
}
.bar::before {
display: none;
}
}
&.form-group-w-btn {
.btn {
align-self: flex-end;
}
}
&.with-icon-right {
input {
padding-right: $mf-icon-gutter;
}
.icon-right {
right: 0;
}
}
&.with-icon-left {
input,
textarea
{
padding-left: $mf-icon-gutter;
~ .control-label {
padding-left: $mf-icon-gutter;
}
}
select,
input:focus,
input:valid,
input.form-file,
input.has-value,
textarea:focus,
textarea:valid,
textarea.form-file,
textarea.has-value {
color: $mf-input-color;
~ .control-label {
padding-left: 0;
}
}
.icon-left {
left: 0;
}
}
.error-icon, .valid-icon {
display: none;
}
}
.form-inline {
> .form-group,
> .btn {
display: inline-block;
margin-bottom: 0;
}
}
.form-help {
margin-top: $mf-spacer;
margin-left: $mf-spacer;
color: $mf-label-color;
font-size: $mf-active-font-size;
.form-group & {
position: absolute;
width: 100%;
}
.checkbox & {
position: relative;
margin-bottom: $mf-font-size;
}
}
.form-group {
// scss-lint:disable QualifyingElement, NestingDepth
input, textarea.chat {
height: ($mf-font-size * 1.9);
}
textarea {
resize: none;
}
select {
width: 100%;
font-size: $mf-font-size;
height: ($mf-font-size * 1.6);
padding: $mf-spacer $mf-spacer ($mf-spacer / 2);
background: none;
border: none;
line-height: 1.6;
box-shadow: none;
}
.control-label {
position: absolute;
top: ($mf-font-size / 4);
left: 0;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
padding-left: $mf-spacer;
z-index: 1;
color: $mf-label-color;
font-size: $mf-font-size;
font-weight: normal;
transition: all $mf-transition-speed ease;
}
.bar {
position: relative;
border-bottom: ($mf-font-size / 16) solid $mf-border-color;
display: block;
&::before {
content: '';
height: ($mf-font-size / 8);
width: 0;
left: 50%;
bottom: ($mf-font-size / -16);
position: absolute;
background: $mf-focus-border-color;
transition: left $mf-transition-speed ease, width $mf-transition-speed ease;
z-index: 2;
}
}
input,
textarea {
display: block;
background: none;
padding: $mf-spacer $mf-spacer ($mf-spacer / 2);
font-size: $mf-font-size;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
transition: all $mf-transition-speed ease;
box-shadow: none;
}
input[type="file"] {
line-height: 1;
~ .bar {
display: none;
}
}
&.show input,
select,
input:focus,
input:valid,
input.form-file,
input.has-value,
textarea:focus,
textarea:valid,
textarea.form-file,
textarea.has-value {
color: $mf-input-color;
~ .control-label {
font-size: $mf-active-font-size;
color: $mf-focus-color;
font-weight: 600;
text-transform: uppercase;
top: $mf-active-top;
left: 0;
}
}
select,
input,
textarea {
&:focus {
outline: none;
~ .control-label {
color: $mf-focus-color;
}
~ .bar {
&::before {
width: 100%;
left: 0;
}
}
}
}
}
.valid {
.legend.legend,
&.form-group .control-label.control-label {
// Prevent !importantRule
color: $mf-focus-color;
}
.valid-icon {
display: inline-block;
color: $mf-focus-color;
}
}
.has-error {
.legend.legend,
&.form-group .control-label.control-label {
// Prevent !importantRule
color: $mf-error-color;
}
.error-icon {
display: inline-block;
color: $mf-error-color;
}
&.form-group {
.icon-right {
color: $mf-error-color;
}
}
&.form-group,
&.checkbox {
.form-help,
.helper {
color: $mf-error-color;
}
}
.bar {
&::before {
background: $mf-error-color;
left: 0;
width: 100%;
}
}
}
src/sass/_mixins.scss 0 → 100644
View file @ 3be931bc
@mixin flex-center () {
display: flex;
justify-content: center;
align-items: center;
}
@mixin theme-button-variant($color, $background, $border, $shadow) {
$hover-bg: lighten($background, 10%);
$disabled-bg: darken($background, 15%);
$active-bg: darken($background, 15%);
$disabled-color: darken($background, 30%);
background-color: $background;
color: $color;
box-shadow: $shadow;
border: $border;
&:hover{
color: $color;
background-color: $hover-bg;
}
&.active,
&:active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active {
background-color: $active-bg;
box-shadow: $shadow;
color: $color;
&:focus {
box-shadow: $shadow;
}
}
&[disabled], &[disabled]:hover {
background-color: $disabled-bg;
color: $disabled-color;
opacity: 0.5;
}
}
@mixin circle-progress-bar($progressColor, $size, $width, $startColor: $gray-lighter, $innerColor: $white) {
$step: 1;
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);
@for $i from 0 through $loops {
&.progress-bar.value-#{$i*$step} {
@if $i < $half {
$nextdeg: 90deg + ( $increment * $i );
background-image: linear-gradient(90deg, $startColor 50%, transparent 50%, transparent),
linear-gradient($nextdeg, $progressColor 50%, $startColor 50%, $startColor);
}
@else {
$nextdeg: -90deg + ( $increment * ( $i - $half ) );
background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent),
linear-gradient(270deg, $progressColor 50%, $startColor 50%, $startColor);
}
}
}
}
src/sass/_override-bootstrap.scss 0 → 100644
View file @ 3be931bc
//Navbar
.navbar .navbar-nav > .nav-item > .nav-link {
padding-right: 38px;
padding-left: 38px;
line-height: 0;
}
.navbar .navbar-nav > .nav-item {
display: flex;
align-items: center;
}
.navbar-text {
color: $white;
}
//Typography
h1, .h1 {
margin-bottom :2.25rem;
}
h2, .h2 {
margin-bottom :2rem;
}
h3, .h3 {
margin-bottom :1.5rem;
}
h4, .h4 {
margin-bottom :1rem;
}
.blockquote {
padding: 0 ($spacer *1.625);
margin: 2.5rem 0 2.5rem 1rem;
border-left: $blockquote-border-width solid $blockquote-border-color;
line-height: 2rem;
color: $blockquote-small-color;
font-style: oblique;
}
.blockquote-footer {
&::before {
content: "--- "; // em dash, nbsp
}
}
//Buttons
.btn {
box-shadow: $btn-box-shadow;
font-family: inherit;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
&.dropdown-toggle.theme-toggle {
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
}
&:focus, &:active, &.focus {
box-shadow: $btn-box-shadow;
}
}
.btn.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $btn-line-height-sm, $btn-border-radius);
}
.btn.btn-micro {
@include button-size($btn-padding-y-micro, $btn-padding-x-micro, $font-size-smaller, $btn-line-height-sm, $btn-border-radius);
}
.btn.btn-primary {
@include theme-button-variant($white, theme-color("primary"), $btn-border, $btn-box-shadow);
&.hover {
background-color: lighten(theme-color("primary"), 10%) !important;
color: $white;
}
&.focus {
background-color: darken(theme-color("primary"), 15%);
color: $white;
}
}
.btn.btn-secondary {
@include theme-button-variant($white, theme-color("primary"), $btn-secondary-theme-border, none);
color: theme-color("primary");
border: $btn-secondary-theme-border;
background-color: $white;
&[disabled], &[disabled]:hover {
background-color: $white;
color: theme-color("primary");
border: 2px solid theme-color("primary");
}
&:hover {
border: 2px solid lighten(theme-color("primary"), 10%);
}
&.hover {
border: 2px solid lighten(theme-color("primary"), 10%) !important;
background-color: lighten(theme-color("primary"), 10%) !important;
color: $white;
}
&:active, &:focus, &.focus {
border: 2px solid darken(theme-color("primary"), 15%) !important;
background-color: darken(theme-color("primary"), 15%) !important;
color: $white;
}
}
.btn.btn-danger {
@include theme-button-variant($white, theme-color("danger"), $btn-border, $btn-box-danger-shadow);
}
.btn.btn-warning {
@include theme-button-variant($white, theme-color("warning"), $btn-border, $btn-box-warning-shadow);
}
.btn.btn-info {
@include theme-button-variant($white, theme-color("info"), $btn-border, $btn-box-info-shadow);
}
.btn.btn-success {
@include theme-button-variant($white, theme-color("primary"), $btn-border, $btn-box-success-shadow);
}
.btn.btn-dark {
@include theme-button-variant($white, theme-color("dark"), $btn-border, $btn-box-dark-shadow);
}
.btn.btn-pale {
@include theme-button-variant($white, theme-color("pale"), $btn-border, $btn-box-pale-shadow);
&:hover {
background-color: lighten(theme-color("pale"), 5%);
&:focus, &:active, &.active {
background-color: darken(theme-color("pale"), 15%);
}
}
}
.btn.btn-with-icon {
position: relative;
padding: $btn-padding-y $btn-with-icon-padding-x;
.btn-with-icon-content {
display: flex;
align-items: center;
justify-content: center;
margin-left: $btn-with-icon-text-margin;
}
i {
position: absolute;
left: $btn-with-icon-padding-x;
top: $btn-with-icon-icon-top;
font-size: $btn-with-icon-icon-size;
}
&.rounded-icon {
width: $btn-with-icon-rounded-size;
height: $btn-with-icon-rounded-size;
border-radius: 50%;
padding: 0;
i {
left: $btn-with-icon-rounded-icon-left;
}
&.btn-micro {
height: $btn-with-icon-rounded-size-micro;
width: $btn-with-icon-rounded-size-micro;
flex: none;
i {
font-size: $btn-with-icon-rounded-font-micro;
left: $btn-with-icon-rounded-position-left;
top: $btn-with-icon-rounded-position-top;
}
}
}
}
.btn-group {
box-shadow: $btn-box-shadow;
border-radius: $btn-border-radius;
.btn {
padding-left: $btn-group-button-padding-x;
padding-right: $btn-group-button-padding-x;
box-shadow: none;
}
}
.btn.dropdown-toggle {
position: relative;
.arrow-down {
position: absolute;
font-size: $btn-dd-arrow-size;
right: 1rem;
top: calc(50% - #{$btn-dd-arrow-size}/1.4);
}
&::after {
display: none;
}
}
.btn-group {
color: $white;
}
// Dropdowns & Selects
.dropdown-menu {
border-radius: 0;
padding: $dropdown-menu-padding-y $dropdown-menu-padding-x;
background: transparent;
border: none;
.dropdown-menu-content{
background-color: $dropdown-background;
box-shadow: $dropdown-box-shadow;
}
}
.dropdown-item {
display: flex;
flex-direction: row;
align-items: center;
height: $dropdown-item-height;
font-size: $font-size-sm;
}
//Grid
.row > .col-8-custom {
@include media-breakpoint-between(md, xl) {
width: 12.5%;
}
@include media-breakpoint-only(sm) {
width: 25%;
}
@include media-breakpoint-only(xs){
width: 100%;
}
}
//Icons
.error-icon {
display: inline-block;
color: $theme-red;
}
.success-icon {
display: inline-block;
color: $vue-green;
}
//Tables
.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $striped-row-odd;
}
tbody tr:nth-of-type(even) {
background-color: $striped-row;
}
}
.table {
thead tr {
border-bottom: 2px solid rgb(85, 85, 85);
color: black;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
td, th, thead th, thead td {
border: none;
vertical-align: middle !important;
padding: .5rem;
}
.badge {
vertical-align: text-top;
}
.table-info {
background-color: #dcf1ff;
}
.table-warning {
background-color: #fff1c8;
}
.table-success, .table-success > td, .table-success > th {
background-color: #c8fac6;
}
.table-danger {
background-color: #ffcece;
}
}
.table-header-active {
thead tr {
color: $vue-green;
}
}
.first-td-padding {
td:first-child {
@extend .pl-4;
}
}
.sort-icon {
float: none !important;
margin-left: .2rem;
top: 1px;
font-size: 1rem;
}
th.sortable:hover {
color: $vue-green !important;
opacity: .6;
}
//Badges
@mixin badge-variant($bg) {
color: $white;
background-color: $bg;
&[href] {
@include hover-focus {
color: $white;
text-decoration: none;
background-color: darken($bg, 10%);
}
}
}
.badge {
min-width: $badge-min-width;
display: inline-block;
font-weight: bold;
text-transform: uppercase;
font-size: .625rem;
color: $white;
letter-spacing: .0625rem;
}
.badge-violet {
@include badge-variant($theme-violet);
}
.badge-dark-blue {
@include badge-variant($dark-blue);
}
.badge-success {
@include badge-variant($badge-success-bg);
}
//Alerts
.alert {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
.badge {
margin-right: 0.63rem;
}
&.with-close {
padding-right: $with-close-pr;
}
.alert-close {
position: absolute;
right: 20px;
font-size: $font-size-base;
top: calc(50% - #{$font-size-base}/2);
cursor: pointer;
}
}
.alert-success {
box-shadow: $alert-success-shadow;
.alert-close {
color: $brand-primary;
}
}
.alert-warning {
box-shadow: $alert-warning-shadow;
.alert-close {
color: $brand-warning;
}
}
.alert-danger {
box-shadow: $alert-danger-shadow;
.alert-close {
color: $brand-danger;
}
}
.alert-info {
box-shadow: $alert-info-shadow;
.alert-close {
color: $brand-info;
}
}
@function get-alert-def($type, $csspart) {
@if $csspart == 'bg' {
@if $type == 'success' {
@return $alert-success-bg;
} @else if $type == 'danger' {
@return $alert-danger-bg;
} @else if $type == 'warning' {
@return $alert-warning-bg;
} @else if $type == 'info' {
@return $alert-info-bg;
}
@return theme-color-level($type, -10);
} @else if $csspart == 'border' {
@if $type == 'success' {
@return $alert-success-border;
} @else if $type == 'danger' {
@return $alert-danger-border;
} @else if $type == 'warning' {
@return $alert-warning-border;
} @else if $type == 'info' {
@return $alert-info-border;
}
@return theme-color-level($type, -9);
} @else if $csspart == 'color' {
@if $type == 'success' {
@return $alert-success-text;
} @else if $type == 'danger' {
@return $alert-danger-text;
} @else if $type == 'warning' {
@return $alert-warning-text;
} @else if $type == 'info' {
@return $alert-info-text;
}
@return theme-color-level($type, 6);
}
}
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(get-alert-def($color, 'bg'), get-alert-def($color, 'border'), get-alert-def($color, 'color'));
}
}
src/sass/_override-custom-libs.scss 0 → 100644
View file @ 3be931bc
.abc-checkbox, .abc-radio {
margin-bottom: 20px;
label {
.abc-label-text {
display: inline-block;
position: relative;
top: 2px;
padding-left: 13px;
}
&::before{
width: 22px;
height: 22px;
border: 2px solid $input-border-color;
@include transition(border 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out);
}
}
}
.abc-checkbox {
padding-left: 20px;
label{
padding-left: 0;
&::before{
border-radius: 0;
@include transition(border 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out);
}
&::after {
width: 20px;
height: 20px;
top: 2px;
left: 2px;
}
}
input[type="checkbox"],
input[type="radio"] {
&:focus + label::before{
outline: none;
}
&:checked + label::after{
font-family: "Ionicons";
content: "\F2BC";
font-size: 15px;
}
&:disabled + label{
opacity: 0.5;
}
}
}
.abc-radio {
label {
padding-left: 0;
&::after {
width: 10px;
height: 10px;
top: 7.8px;
left: 6px;
}
}
input[type="radio"] {
&:focus + label::before {
outline: none;
}
}
}
//Medium Editor
.medium-editor-toolbar,
.medium-editor-toolbar-form,
.medium-editor-toolbar-actions,
.medium-editor-toolbar-anchor-preview {
background-color: $brand-primary;
border-radius: $btn-border-radius;
box-shadow: $btn-box-shadow;
}
.medium-editor-toolbar {
max-width: 80%;
box-shadow: none;
.medium-editor-toolbar-actions {
overflow: hidden;
}
.medium-editor-action {
@extend .btn.btn-primary;
height: $medium-editor-button-size;
padding: $btn-padding-y $btn-group-button-padding-x;
box-shadow: none;
border-radius: 0;
&.medium-editor-button-active {
background-color: darken($brand-primary, 15%);
}
}
}
.medium-editor-toolbar-form {
color: $white;
overflow: hidden;
.medium-editor-toolbar-input {
height: $medium-editor-button-size;
background: $brand-primary;
box-sizing: border-box;
color: $white;
padding-left: 16px;
width: 220px;
&::-webkit-input-placeholder {
color: rgba($white, .8);
}
&:-moz-placeholder { /* Firefox 18- */
color: rgba($white, .8);
}
&::-moz-placeholder { /* Firefox 19+ */
color: rgba($white, .8);
}
&:-ms-input-placeholder {
color: rgba($white, .8);
}
}
a {
color: $white;
transform: translateY(2px);
}
.medium-editor-toolbar-close {
margin-right: 16px;
}
}
.medium-toolbar-arrow-under:after {
border-color: $brand-primary transparent transparent transparent;
top: $medium-editor-button-size;
}
.medium-toolbar-arrow-over:before {
border-color: transparent transparent $brand-primary transparent;
}
.medium-editor-toolbar-anchor-preview {
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
.medium-editor-toolbar-anchor-preview {
margin: 0;
}
}
.medium-editor-anchor-preview {
max-width: 50%;
a {
color: $white;
text-decoration: none;
}
}
//v-tooltip
.tooltip.vuestic-tooltip {
@extend .tooltip.show;
.tooltip-inner {
box-shadow: $tooltip-box-shadow;
line-height: $tooltip-line-height;
font-weight: $tooltip-font-weight;
border-radius: 0;
}
.tooltip-arrow {
@extend .arrow;
}
&[x-placement^="top"] {
@extend .bs-tooltip-top;
}
&[x-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[x-placement^="right"] {
@extend .bs-tooltip-right;
margin-left: .15rem;
}
&[x-placement^="left"] {
@extend .bs-tooltip-left;
margin-right: .15rem;
}
&.popover {
line-height: $popover-line-height;
box-shadow: $popover-box-shadow;
.popover-header, .popover-body {
text-align: left;
padding-right: 0;
}
.popover-inner {
max-width: 100%;
box-shadow: none;
> * {
display: flex;
flex-direction: row;
}
}
.popover-header {
font-weight: $popover-header-font-weight;
}
.popover-icon {
display: flex;
justify-content: center;
align-items: center;
color: $popover-icon-color;
font-size: $popover-icon-size;
}
.popover-content:first-child {
.popover-header, .popover-body {
padding: $popover-body-padding-y $popover-header-no-icon-padding-x;
padding-right: 0;
}
}
&[x-placement^="top"] {
@extend .bs-popover-top;
}
&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
}
}
}
//vue-toasted
.toasted-container {
&.full-width {
max-width: 100%;
width: calc(100% - #{$layout-padding} - #{$layout-padding-right});
transform: translateX(0);
left: 0;
.toasted.vuestic-toast {
max-width: 100%;
width: 100%;
left: $layout-padding;
justify-content: normal;
}
@include media-breakpoint-down(md) {
width: calc(100% - #{$content-mobile-wrap-pl} - #{$content-mobile-wrap-pr});
left: 0;
.toasted.vuestic-toast {
left: $content-mobile-wrap-pl;
}
}
}
}
.toasted.vuestic-toast {
min-height: $toast-min-height;
padding: $toast-padding-y $toast-padding-x;
font-size: $toast-font-size;
font-weight: $toast-font-weight;
line-height: $toast-line-height;
background: rgba($toast-bg, 0.9);
box-shadow: $toast-box-shadow;
color: $toast-color;
border-radius: $toast-border-radius;
i, i.fa {
font-size: $toast-icon-size;
color: $toast-icon-color;
margin-left: $toast-icon-ml;
margin-right: $toast-icon-mr;
}
a.action:hover {
text-decoration: none;
}
}
src/sass/_typography.scss 0 → 100644
View file @ 3be931bc
h1, h2, h3, h4, h5, h6, strong, b {
font-weight: 600;
}
.vue-highlighted-text {
background-color: $vue-turquoise;
}
.vue-selected-text, ::selection {
background-color: $brand-primary;
color: $white;
}
ul.vue-list-inner, ol.vue-list-inner {
li:first-child {
margin-top: 1.5rem;
}
li:last-child {
padding-bottom: 0;
}
}
ul.vue-unordered {
padding : 0;
list-style-type : none;
ul {
padding : 0;
list-style-type : none;
}
li {
padding-left : 1.563rem;
padding-bottom :1.5rem;
&::before {
content : "";
display : inline-block;
width : 0.75rem;
height : 0.75rem;
position : relative;
right : 1.563rem;
top : 0.0625rem;
margin-right : -0.75em;
border-radius : 0.75rem;
background-color : $vue-green;
}
li {
&::before {
background-color : $white;
border : 2.5px solid $vue-green;
}
}
}
}
ol.vue-ordered {
padding : 0;
counter-reset : olCounter;
li {
list-style : none;
padding-left : 1.563rem;
padding-bottom :1.5rem;
}
> li:before {
counter-increment : olCounter;
content : counter(olCounter) ". ";
display : inline-block;
width : 0.75rem;
height : 0.75rem;
position : relative;
right : 1.563rem;
top : 0.0625rem;
margin-right : -0.75em;
}
ul {
padding : 0;
list-style-type : none;
li {
padding-left : 1.563rem;
&::before {
content : "";
display : inline-block;
width : 0.75rem;
height : 0.75rem;
position : relative;
right : 1.563rem;
top : 0.0625rem;
margin-right : -0.75em;
border-radius : 0.75rem;
background-color : $vue-green;
}
}
}
}
.vue-misc {
margin-top: 5.625rem;
margin-bottom: 2rem;
}
//Well
.well {
padding : 1.9rem 2.2rem 1.9rem 1.6rem;
// background-color : #f7f7f7;
background-color: $light-gray;
}
src/sass/_variables.scss 0 → 100644
View file @ 3be931bc
// Colors //
$gray-light: #acb5be !default;
$light-gray: #eee;
$lighter-gray: #ddd;
$charcoal: #555;
$darkest-gray: #333;
$almost-black: #161616;
$vue-green: #4ae387;
$vue-light-green: #dbf9e8;
$light-green: #c8f9c5;
$light-blue: #dcf1ff;
$light-yellow: #fff1c8;
$light-pink: #ffcece;
$vue-darkest-blue: #34495e;
$vue-turquoise: #dbf9e7;
$white: #fff;
$theme-red: #e34a4a;
$theme-orange: #f7cc36;
$theme-blue: #4ab2e3;
$theme-violet: #db76df;
$theme-pale: #d9d9d9;
$brand-primary: $vue-green !default;
$brand-danger: $theme-red;
$brand-warning: $theme-orange;
$brand-info: $theme-blue;
$brand-success: $vue-green;
$light-gray2: #eff4f5;
$dark-gray: #282828;
$gray: #adb3b9;
$violet: #db76df;
$dark-blue: #0045b6;
$breadcrumbs-gray: #b4b4b4;
$colors-map: (
brand-danger: $brand-danger,
brand-primary: $brand-primary,
brand-info: $brand-info,
brand-success: $brand-success,
brand-warning: $brand-warning,
black: black,
white: white,
lighter-gray: $lighter-gray
);
$theme-colors: (
"primary": $brand-primary,
"secondary": $white,
"success": $light-green,
"info": $brand-info,
"warning": $brand-warning,
"danger": $brand-danger,
"light": $light-gray2,
"dark": $almost-black,
"pale": $theme-pale
);
// Layout //
$body-bg: $light-gray;
$top-nav-bg: $darkest-gray;
$body-color: $vue-darkest-blue !default;
$layout-padding: 24px;
$layout-padding-right: 44px;
$top-nav-height: 72px;
$nav-padding-left: $layout-padding;
$nav-padding-right: $layout-padding-right;
$navbar-brand-container-left: 75px;
$sidebar-bg: $darkest-gray;
$sidebar-width: 225px;
$sidebar-top: calc(#{$top-nav-height} + #{$layout-padding});
$sidebar-left: $layout-padding;
$content-wrap-ml: calc(#{$sidebar-left} + #{$sidebar-width} + 35px);
$content-wrap-pr: $layout-padding-right;
$content-wrap-pt: $layout-padding;
$content-wrap-pb: $layout-padding;
$made-by-footer-pb: 27px;
$greeny-box-shadow: 0 4px 9.6px 0.4px rgba($vue-green, .5);
$min-z-index: -1000;
//Auth
$auth-wallpaper-ivuestic-h: 2.625rem;
$auth-wallpaper-oblique-line: $dark-gray;
//Mobile Layout
$top-mobile-nav-height: 5.625rem;
$layout-mobile-padding: 0.1875rem;
$layout-mobile-padding-right: .375rem;
$sidebar-mobile-width: calc(100% - #{$layout-mobile-padding-right});
$sidebar-mobile-top: $top-mobile-nav-height+$layout-mobile-padding;
$sidebar-mobile-left: $layout-mobile-padding;
$content-mobile-wrap-margin: 1.125rem;
$sidebar-mobile-z-index: 1000;
$content-mobile-wrap-pl: 1rem;
$content-mobile-wrap-pr: 1rem;
$content-mobile-wrap-pt: 2rem;
$content-mobile-wrap-pt-fixed-layout: 7rem;
$content-mobile-wrap-pb: $layout-padding;
$content-mobile-wrap: $content-mobile-wrap-pt $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;
$content-mobile-wrap-fixed-layout: $content-mobile-wrap-pt-fixed-layout $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;
$content-mobile-wrap-sb-top: calc(#{$top-nav-height} + #{$layout-padding+20}) - 20 px;
$nav-mobile-padding-h: .875rem;
$nav-mobile-pt: 3rem;
$nav-mobile-pb: 1.375rem;
$nav-mobile-brand-width: 4rem;
$nav-mobile-brand-top: .875rem;
$nav-mobile-brand-left: calc(50% - #{$nav-mobile-brand-width});
$droppdown-mobile-mp: 1.9375rem;
$dropdown-mobile-show-b: 2rem;
//Auth mobile
$auth-mobile-nav-ivuestic-h: 1.5rem;
$auth-mobile-main-h: calc(100% - #{$top-mobile-nav-height});
$auth-content-padding-t: 2.875rem;
// Typography
// -------------------------
//$text-color: $gray !default;
$font-family-sans-serif: 'Source Sans Pro', sans-serif !default;
$font-size-root: 16px;
$font-size-base: 1rem !default;
$font-size-larger: 1.2rem;
$font-size-large: 1.5rem;
$font-size-mini: 0.8rem;
$font-weight-bold: 700 !default;
$font-weight-semi-bold: 600 !default;
$font-weight-normal: 400 !default;
$font-weight-thin: 300 !default;
$font-weight-base: $font-weight-thin !default;
$font-size-smaller: 85% !default;
$font-size-h1: 2.625rem !default;
$font-size-h2: 2.25rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.375rem !default;
$headings-line-height: 1 !default;
$blockquote-border-color: $vue-green;
$blockquote-small-color: $gray-light;
$blockquote-border-width: 0.375rem;
$blockquote-font-size: 1.5rem;
//Navbar
$navbar-dd-item-height: 48px;
//Breadcrumbs
$breadcrumbs-height: 54px;
$breadcrumbs-arrow-font: 0.7rem;
$breadcrumbs-arrow-content: "\f054";
//Sidebar
$sidebar-link-height: 64px;
$sidebar-submenu-link-height: 48px;
$sidebar-link-pl: 25px;
$sidebar-submenu-link-pl: 74px;
$sidebar-link-active-bg: $almost-black;
$sidebar-arrow-right: 16px;
$sidebar-menu-item-icon-size: 19px;
$sidebar-viewport-height: calc(100vh - #{$top-nav-height} - #{$content-wrap-pt} - #{$content-wrap-pb});
$sidebar-hidden-top: -150px;
$sidebar-hidden-top-mobile: $sidebar-mobile-top;
$sidebar-hidden-height-mobile: 0;
$sidebar-box-shadow: 0px 8px 14.72px 1.28px rgba(#65a977, 0.3);
//Widgets
$widget-bg: $white;
$widget-padding: 1.5625rem;
$widget-larger-padding: 45px;
$widget-box-shadow: 0px 4px 70px -18px rgba(112, 112, 112, 1);
$widget-danger-shadow: 0px 4px 70px -16px $brand-danger;
$widget-info-shadow: 0px 4px 70px -16px $brand-info;
$widget-viewport-height: $sidebar-viewport-height;
$widget-header-border: 2px solid $light-gray;
$widget-header-height: 55px;
$widget-body-no-header-height: 100%;
$widget-body-with-header-height: calc(100% - #{$widget-header-height});
$widget-mb: 1.875rem;
$info-widget-border: 0.5rem solid $brand-primary;
// Links
$link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%);
$link-hover-decoration: none;
//Buttons
$input-btn-border-width: 0px;
$btn-line-height: 1.25;
$btn-line-height-sm: $btn-line-height;
$btn-padding-x: 3.9rem;
$btn-padding-y: 1.1rem;
$btn-padding-y-sm: 0.7rem;
$btn-padding-x-sm: 2.5rem;
$btn-padding-y-micro: 0.625rem;
$btn-padding-x-micro: 1.8rem;
$btn-with-icon-text-margin: 1.875rem;
$btn-with-icon-padding-x: 2.8125rem;
$btn-with-icon-rounded-size: 3.5rem;
$btn-with-icon-rounded-size-micro: 2.25rem;
$btn-with-icon-rounded-font-micro: 1.5rem;
$btn-with-icon-rounded-position-top: .4rem;
$btn-with-icon-rounded-position-left: .46rem;
$btn-with-icon-icon-top: .75rem;
$btn-with-icon-rounded-icon-left: 1.23rem;
$btn-with-icon-icon-size: 2rem;
$btn-group-button-padding-x: 1.53rem;
$btn-box-shadow: $greeny-box-shadow;
$btn-box-danger-shadow: 0px 4px 70px -16px $brand-danger;
$btn-box-warning-shadow: 0px 4px 70px -16px $brand-warning;
$btn-box-success-shadow: $greeny-box-shadow;
$btn-box-info-shadow: 0px 4px 70px -16px $brand-info;
$btn-box-pale-shadow: 0px 4px 70px -16px $theme-pale;
$btn-box-dark-shadow: 0px 4px 70px -16px $almost-black;
$btn-border-radius: 1.875rem;
$btn-dark-color: $white;
$btn-dark-bg: $darkest-gray;
$btn-dark-border: $darkest-gray;
$btn-pale-bg: $theme-pale;
$btn-pale-color: $white;
$btn-dd-arrow-size: 1rem;
$btn-border: none;
$btn-secondary-theme-border: 2px solid $brand-primary;
//Dropdowns
$dropdown-link-color: $white;
$dropdown-box-shadow: $greeny-box-shadow;
$dropdown-background: $darkest-gray;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $almost-black;
$dropdown-link-active-color: $white;
$dropdown-link-active-bg: $almost-black;
$dropdown-item-padding-x: 25px;
$dropdown-item-padding-y: 0;
$dropdown-item-height: 40px;
$dropdown-menu-padding-y: 10px;
$dropdown-menu-padding-x: 0;
$dropdown-min-width: 15rem;
$dropdown-simple-visible-items: 4;
$dropdown-multi-visible-items: 4;
$dropdown-show-b: 1.125rem;
//Modals
$modal-header-padding-x: $widget-padding;
$modal-header-padding-y: 0;
$modal-header-height: $widget-header-height;
$modal-header-border: $widget-header-border;
$modal-content-border-width: 0;
$modal-content-border-radius: 0;
$modal-inner-padding: 25px;
$modal-footer-btns-padding-bottom: 20px;
$modal-footer-btns-margin-x: 10px;
$modal-md: 650px;
$modal-lg: 850px;
//Forms
$input-border-color: $lighter-gray;
$input-bg-disabled: $white;
$vuestic-switch-bg: $brand-primary;
$vuestic-switch-padding: 0.313rem 2.375rem;
$vuestic-switch-border-size: 0.125rem;
//Progress Bars
$progress-bar-value-font-size: 0.6875rem;
$progress-bar-circle-diameter: 3.125rem;
$progress-bar-circle-bw: .0678rem;
$progress-bar-circle-overlay-diameter: calc(#{$progress-bar-circle-diameter} - 2 * #{$progress-bar-circle-bw});
$progress-bar-vertical-height: 5.75rem;
$progress-bar-width-thin: .125rem;
$progress-bar-width-basic: .5rem;
$progress-bar-width-thick: 1.5rem;
//Tables
$table-bg-accent: $white;
$table-border-width: 0;
$table-border-color: #eceeef;
$striped-row-odd: $white;
$striped-row: $light-gray2;
$state-success-bg: #c8fac6;
$state-danger-bg: #ffcece;
$state-warning-bg: #fff1c8;
$state-info-bg: #dcf1ff;
//Badges
$badge-padding-y: 0.28rem;
$badge-min-width: 5rem;
$badge-font-size: 0.7rem;
$badge-success-bg: $brand-success;
$badge-warning-bg: $theme-orange;
$badge-danger-bg: $theme-red;
$badge-info-bg: $theme-blue;
//Alerts
$alert-padding-x: 1.25rem !default;
$alert-padding-y: .75rem !default;
$alert-margin-bottom: $widget-mb;
$with-close-pr: 3.125rem;
$alert-border-radius: 0;
$alert-border-width: 0;
$alert-success-bg: $light-green;
$alert-success-text: $body-color;
$alert-success-border: transparent;
$alert-success-shadow: 0px 4px 9.6px 0.4px rgba(79, 206, 145, 0.5);
$alert-info-bg: $light-blue;
$alert-info-text: $body-color;
$alert-info-border: transparent;
$alert-info-shadow: 0px 4px 9.6px 0.4px rgba(79, 142, 206, 0.5);
$alert-warning-bg: $light-yellow;
$alert-warning-text: $body-color;
$alert-warning-border: transparent;
$alert-warning-shadow: 0px 4px 9.6px 0.4px rgba(206, 178, 79, 0.5);
$alert-danger-bg: $light-pink;
$alert-danger-text: $body-color;
$alert-danger-border: transparent;
$alert-danger-shadow: 0px 4px 9.6px 0.4px rgba(206, 79, 79, 0.5);
//Icons
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: './fonts/';
//Tabs
$tab-content-pt: 3.125rem;
$tab-content-pb: 1.5rem;
//PreLoader
$vuestic-preloader-left: calc(50% - 140px / 2);
$vuestic-preloader-top: calc(50% - 104px / 2);
//Medium Editor
$medium-editor-button-size: $btn-padding-y * 2 + $font-size-base * $btn-line-height;
//tooltips
$tooltip-font-size: $font-size-base;
$tooltip-box-shadow: $greeny-box-shadow;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $darkest-gray;
$tooltip-border-radius: $font-size-base * 0.5;
$tooltip-opacity: .9;
$tooltip-padding-y: .5rem;
$tooltip-padding-x: .75rem;
$tooltip-margin: 0;
$tooltip-line-height: 1.13;
$tooltip-font-weight: 300;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
// Popovers
$popover-font-size: $font-size-base;
$popover-line-height: $tooltip-line-height;
$popover-box-shadow: $tooltip-box-shadow;
$popover-bg: $tooltip-bg;
$popover-max-width: 400px;
$popover-border-width: 0;
$popover-border-color: transparent;
$popover-border-radius: $tooltip-border-radius;
$popover-box-shadow: $greeny-box-shadow;
$popover-opacity: $tooltip-opacity;
$popover-header-bg: $tooltip-bg;
$popover-header-color: $white;
$popover-header-padding-y: 0;
$popover-header-padding-x: .75rem;
$popover-header-no-icon-padding-x: 0;
$popover-header-font-weight: bold;
$popover-body-color: $white;
$popover-body-padding-y: $popover-header-padding-y;
$popover-body-padding-x: $popover-header-padding-x;
$popover-body-no-icon-padding-x: $popover-header-no-icon-padding-x;
$popover-icon-size: 1.35rem;
$popover-icon-color: $brand-primary;
$popover-arrow-width: 1rem;
$popover-arrow-height: 1rem;
$popover-arrow-color: transparent;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
// Toasts
$toast-font-size: $popover-font-size;
$toast-line-height: $popover-line-height;
$toast-font-weight: normal;
$toast-min-height: 3.25rem;
$toast-box-shadow: $popover-box-shadow;
$toast-bg: $popover-bg;
$toast-border-radius: $popover-border-radius;
$toast-color: $popover-body-color;
$toast-opacity: $popover-opacity;
$toast-padding-x: 1.15rem;
$toast-padding-y: 0.5rem;
$toast-icon-size: $popover-icon-size;
$toast-icon-color: $popover-icon-color;
$toast-icon-ml: 0;
$toast-icon-mr: 0.625rem;
src/sass/main.scss 0 → 100644
View file @ 3be931bc
@import "~normalize.css";
@import "mixins";
@import "variables";
@import "fonts";
@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/css/font-awesome.css";
@import "~ionicons/dist/css/ionicons.css";
@import "~flag-icon-css/css/flag-icon.css";
@import "~awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
@import "~medium-editor/src/sass/medium-editor";
@import "_icons-styles.scss";
@import "~flatpickr/dist/flatpickr.css";
@import "base";
@import "typography";
@import "icons";
@import "material-forms";
@import "override-bootstrap";
@import "override-custom-libs";
@import "glyphicons";
src/services/auth.js 0 → 100644
View file @ 3be931bc
// let store = require('vuex-store')
let ApiClient = require('@/helpers/ApiClient/')
export default {
requestToken (email, password, store, router) {
ApiClient.default.login(email, password, function (response) {
if (response && response.data) {
store.dispatch('LOGIN', response.data)
router.go(0)
}
})
}
}
src/services/utils.js 0 → 100644
View file @ 3be931bc
export default {
hex2rgb (hex, opacity) {
hex = (hex + '').trim()
let rgb = null
let match = hex.match(/^#?(([0-9a-zA-Z]{3}){1,3})$/)
if (!match) {
return null
}
rgb = {}
hex = match[1]
if (hex.length === 6) {
rgb.r = parseInt(hex.substring(0, 2), 16)
rgb.g = parseInt(hex.substring(2, 4), 16)
rgb.b = parseInt(hex.substring(4, 6), 16)
} else if (hex.length === 3) {
rgb.r = parseInt(hex.substring(0, 1) + hex.substring(0, 1), 16)
rgb.g = parseInt(hex.substring(1, 2) + hex.substring(1, 2), 16)
rgb.b = parseInt(hex.substring(2, 3) + hex.substring(2, 3), 16)
}
rgb.css = 'rgb' + (opacity ? 'a' : '') + '('
rgb.css += rgb.r + ',' + rgb.g + ',' + rgb.b
rgb.css += (opacity ? ',' + opacity : '') + ')'
return rgb
},
findInNestedByName (array, name) {
if (typeof array !== 'undefined') {
for (let i = 0; i < array.length; i++) {
if (array[i].name === name) return [{...array[i]}]
let a = this.findInNestedByName(array[i].children, name)
if (a != null) {
a.unshift({...array[i]})
return [...a]
}
}
}
return null
}
}
src/store/getters.js 0 → 100644
View file @ 3be931bc
import utils from 'services/utils'
const menuItems = state => state.menu.items
const sidebarOpened = state => state.app.sidebar.opened
const toggleWithoutAnimation = state => state.app.sidebar.withoutAnimation
const config = state => state.app.config
const palette = state => state.app.config.palette
const isLoading = state => state.app.isLoading
const breadcrumbs = state => {
return (keyword) => utils.findInNestedByName(state.menu.items, keyword)
}
export {
menuItems,
toggleWithoutAnimation,
sidebarOpened,
config,
palette,
isLoading,
breadcrumbs
}
src/store/index.js 0 → 100644
View file @ 3be931bc
import Vue from 'vue'
import Vuex from 'vuex'
import VuexI18n from 'vuex-i18n' // load vuex i18n module
import app from './modules/app'
import menu from './modules/menu'
import auth from './modules/auth'
import * as getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
strict: true, // process.env.NODE_ENV !== 'production',
getters,
modules: {
app,
menu,
auth
},
state: {},
mutations: {}
})
Vue.use(VuexI18n.plugin, store)
export default store
src/store/modules/app.js 0 → 100644
View file @ 3be931bc
import * as types from '../mutation-types'
const state = {
sidebar: {
opened: false,
withoutAnimation: false
},
config: {
googleMaps: {
apiKey: 'AIzaSyBNAqPrTQoz9P4NBlDDyfxrnKiafkaL8iQ'
},
windowMatchSizeLg: '(min-width: 992px)',
palette: {
primary: '#4ae387',
danger: '#e34a4a',
info: '#4ab2e3',
success: '#db76df',
warning: '#f7cc36',
white: '#fff',
black: '#000',
fontColor: '#34495e',
transparent: 'transparent',
lighterGray: '#ddd'
}
},
isLoading: true
}
const mutations = {
[types.CLOSE_MENU] (state) {
if (document.documentElement.clientWidth < 992) {
state.sidebar.opened = false
}
},
[types.TOGGLE_SIDEBAR] (state, opened) {
state.sidebar.opened = opened
},
[types.TOGGLE_WITHOUT_ANIMATION] (state, value) {
state.sidebar.withoutAnimation = value
},
setLoading (state, isLoading) {
state.isLoading = isLoading
}
}
const actions = {
closeMenu ({ commit }) {
commit(types.CLOSE_MENU)
},
toggleSidebar ({ commit }, opened) {
commit(types.TOGGLE_SIDEBAR, opened)
},
isToggleWithoutAnimation ({ commit }, value) {
commit(types.TOGGLE_WITHOUT_ANIMATION, value)
},
LOGIN ({ commit }, value) {
commit(types.LOGIN, value)
},
LOGOUT ({ commit }) {
commit(types.LOGOUT)
}
}
export default {
state,
mutations,
actions
}
src/store/modules/auth.js 0 → 100644
View file @ 3be931bc
import { LOGIN, LOGOUT } from '../mutation-types'
const state = {
auth: localStorage.getItem('access_token')
}
const mutations = {
[LOGIN] (state, data) {
if (data && data.access_token) {
state.auth = data.access_token
localStorage.setItem('access_token', data.access_token)
}
},
[LOGOUT] (state) {
localStorage.removeItem('access_token')
state.auth = null
}
}
export default {
state,
mutations
}
src/store/modules/menu/auth.js 0 → 100644
View file @ 3be931bc
/**
* Created by yarik on 18.7.17.
*/
import lazyLoading from './lazyLoading'
export default {
name: 'auth',
meta: {
expanded: false,
title: 'menu.auth',
iconClass: 'vuestic-icon vuestic-icon-auth'
},
children: [
{
name: 'Login',
path: '/auth/login',
component: lazyLoading('auth/login/Login'),
meta: {
default: false,
title: 'menu.login',
newWindow: true
}
},
{
name: 'Signup',
path: '/auth/signup',
component: lazyLoading('auth/signup/Signup'),
meta: {
default: false,
title: 'menu.signUp',
newWindow: true
}
}
]
}
src/store/modules/menu/dashboard.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'Dashboard',
path: '/dashboard',
component: lazyLoading('dashboard/Dashboard'),
meta: {
default: true,
title: 'menu.dashboard',
iconClass: 'vuestic-icon vuestic-icon-dashboard'
}
}
src/store/modules/menu/extra.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'menu.extra',
path: '/extra',
component: lazyLoading('extra/Extra'),
meta: {
default: false,
title: 'menu.extra',
iconClass: 'vuestic-icon vuestic-icon-extras',
expanded: false
}
}
src/store/modules/menu/forms.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'Forms',
meta: {
expanded: false,
title: 'menu.forms',
iconClass: 'vuestic-icon vuestic-icon-forms'
},
children: [
{
name: 'FormElements',
path: '/forms/form-elements',
component: lazyLoading('forms/form-elements/FormElements'),
meta: {
title: 'menu.formElements'
}
},
{
name: 'FormWizards',
path: '/forms/form-wizard',
component: lazyLoading('forms/form-wizard/FormWizard'),
meta: {
title: 'menu.formWizards'
}
},
{
name: 'MediumEditor',
path: '/forms/medium-editor',
component: lazyLoading('forms/medium-editor/MediumEditor'),
meta: {
title: 'Medium Editor'
}
}
]
}
src/store/modules/menu/index.js 0 → 100644
View file @ 3be931bc
import * as types from '../../mutation-types'
import statistics from './statistics'
import forms from './forms'
import dashboard from './dashboard'
import ui from './ui'
import maps from './maps'
import tables from './tables'
import auth from './auth'
import extra from './extra'
const state = {
items: [
dashboard,
statistics,
forms,
tables,
ui,
extra,
auth,
maps
]
}
const mutations = {
[types.TOGGLE_EXPAND_MENU_ITEM] (state, payload) {
let menuItem = payload.menuItem
let expand = payload.expand
if (menuItem.children && menuItem.meta) {
menuItem.meta.expanded = expand
}
}
}
const actions = {
toggleExpandMenuItem ({commit}, payload) {
commit(types.TOGGLE_EXPAND_MENU_ITEM, payload)
}
}
export default {
state,
mutations,
actions
}
src/store/modules/menu/lazyLoading.js 0 → 100644
View file @ 3be931bc
// lazy loading Components
// https://github.com/vuejs/vue-router/blob/dev/examples/lazy-loading/app.js#L8
export default (name, index = false) => () => import(`components/${name}${index ? '/index' : ''}.vue`)
src/store/modules/menu/maps.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'Maps',
meta: {
expanded: false,
title: 'menu.maps',
iconClass: 'vuestic-icon vuestic-icon-maps'
},
children: [
{
name: 'GoogleMaps',
path: '/maps/google-maps',
component: lazyLoading('maps/google-maps/GoogleMapsPage'),
meta: {
title: 'Google Maps'
}
},
{
name: 'YandexMaps',
path: '/maps/yandex-maps',
component: lazyLoading('maps/yandex-maps/YandexMapsPage'),
meta: {
title: 'Yandex Maps'
}
},
{
name: 'LeafletMaps',
path: '/maps/leaflet-maps',
component: lazyLoading('maps/leaflet-maps/LeafletMapsPage'),
meta: {
title: 'Leaflet Maps'
}
},
{
name: 'BubbleMaps',
path: '/maps/bubble-maps',
component: lazyLoading('maps/bubble-maps/BubbleMapsPage'),
meta: {
title: 'Bubble Maps'
}
},
{
name: 'LineMaps',
path: '/maps/line-maps',
component: lazyLoading('maps/line-maps/LineMapsPage'),
meta: {
title: 'Line Maps'
}
}
]
}
src/store/modules/menu/statistics.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'Statistics',
meta: {
expanded: false,
title: 'menu.statistics',
iconClass: 'vuestic-icon vuestic-icon-statistics'
},
children: [
{
name: 'menu.charts',
path: '/statistics/charts',
component: lazyLoading('statistics/charts/Charts'),
meta: {
title: 'menu.charts'
}
},
{
name: 'menu.progressBars',
path: '/statistics/progress-bars',
component: lazyLoading('statistics/progress-bars/ProgressBars'),
meta: {
title: 'menu.progressBars'
}
}
]
}
src/store/modules/menu/tables.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading.js'
export default {
name: 'tables',
meta: {
title: 'menu.tables',
iconClass: 'vuestic-icon vuestic-icon-tables'
},
path: '/tables',
component: lazyLoading('tables/Table')
}
src/store/modules/menu/ui.js 0 → 100644
View file @ 3be931bc
import lazyLoading from './lazyLoading'
export default {
name: 'ui',
meta: {
expanded: false,
title: 'menu.uiElements',
iconClass: 'vuestic-icon vuestic-icon-ui-elements'
},
children: [
{
name: 'Typography',
path: '/ui/typography',
component: lazyLoading('ui/typography/Typography'),
meta: {
title: 'menu.typography'
}
},
{
name: 'Buttons',
path: '/ui/buttons',
component: lazyLoading('ui/buttons/Buttons'),
meta: {
title: 'menu.buttons'
}
},
{
name: 'Notifications',
path: '/ui/notifications',
component: lazyLoading('ui/notifications/Notifications'),
meta: {
title: 'menu.notifications'
}
},
{
path: '/ui/icons',
component: lazyLoading('ui/icons/Icons'),
meta: {
title: 'menu.icons'
},
children: [
{
path: '', // Default route
component: lazyLoading('ui/icons/SetsList'),
meta: {
title: 'menu.icons'
}
},
{
path: ':name',
component: lazyLoading('ui/icons/Set'),
props: true,
meta: {
title: 'Set'
}
}
]
},
{
name: 'Spinners',
path: '/ui/spinners',
component: lazyLoading('ui/spinners/Spinners'),
meta: {
title: 'menu.spinners'
}
},
{
name: 'Grid',
path: '/ui/grid',
component: lazyLoading('ui/grid/Grid'),
meta: {
title: 'menu.grid'
}
},
{
name: 'Modals',
path: '/ui/modals',
component: lazyLoading('ui/modals/Modals'),
meta: {
title: 'menu.modals'
}
},
{
name: 'TreeView',
path: '/ui/tree-view',
component: lazyLoading('ui/tree-view/TreeView'),
meta: {
title: 'menu.treeView'
}
},
]
}
src/store/mutation-types.js 0 → 100644
View file @ 3be931bc
export const TOGGLE_EXPAND_MENU_ITEM = 'TOGGLE_EXPAND_MENU_ITEM'
export const CLOSE_MENU = 'CLOSE_MENU'
export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
export const TOGGLE_WITHOUT_ANIMATION = 'TOGGLE_WITHOUT_ANIMATION'
export const LOGIN = 'LOGIN'
export const LOGOUT = 'LOGOUT'
src/vuestic-theme/vuestic-components/vuestic-alert/VuesticAlert.vue 0 → 100644
View file @ 3be931bc
<template>
<transition name="fade">
<div class='vuestic-alert alert' :class="alertClass" v-if="!hidden">
<slot></slot>
<i class="fa fa-close alert-close" v-if="withCloseBtn" @click="hide()"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'vuestic-alert',
computed: {
alertClass () {
return {
'with-close': this.withCloseBtn,
'alert-success': this.type === 'success',
'alert-danger': this.type === 'danger',
'alert-warning': this.type === 'warning',
'alert-info': this.type === 'info'
}
}
},
props: {
type: {
type: String,
default: 'success'
},
withCloseBtn: {
type: Boolean,
default: false
}
},
data () {
return {
hidden: false
}
},
methods: {
hide () {
this.hidden = true
}
}
}
</script>
<style lang='scss' scoped>
@import '../../../sass/_variables.scss';
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
</style>
src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="row">
<div class="col-md-12">
<vuestic-widget class="no-padding no-v-padding">
<div class='vuestic-breadcrumbs'>
<router-link :to="'/'" class="crumb">{{'breadcrumbs.home' | translate}}</router-link>
<router-link
v-for="(item, index) in breadcrumbs"
:to="{path: item.path}"
:key="index"
class="crumb"
v-bind:class="{ disabled: !item.path || item.meta.breadcrumbDisabled }"
>
{{item.meta.title | translate}}
</router-link>
</div>
</vuestic-widget>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-breadcrumbs',
props: {
breadcrumbs: {
type: Array,
default: []
}
}
}
</script>
<style lang='scss' scoped>
@import '../../../sass/variables';
.vuestic-breadcrumbs {
height: $breadcrumbs-height;
display: flex;
align-items: center;
.crumb {
&.disabled {
pointer-events: none;
}
&:last-child::after {
display: none;
}
&::after {
padding: 0 5px;
display: inline-block;
content: $breadcrumbs-arrow-content;
vertical-align: middle;
color: $brand-primary;
font-size: $breadcrumbs-arrow-font;
font-family: FontAwesome;
}
}
a {
color: $breadcrumbs-gray;
&:hover {
color: $brand-primary;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-chart/DefaultOptions.js 0 → 100644
View file @ 3be931bc
import store from 'vuex-store'
let palette = store.getters.palette
export default {
legend: {
position: 'bottom',
labels: {
fontColor: palette.fontColor,
fontFamily: 'sans-serif',
fontSize: 14,
padding: 20,
usePointStyle: true
}
},
tooltips: {
bodyFontSize: 14,
bodyFontFamily: 'sans-serif'
},
responsive: true,
maintainAspectRatio: false
}
src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.vue 0 → 100644
View file @ 3be931bc
<template>
<div class='vuestic-chart'>
<pie-chart :options="options" :chart-data="data" v-if="type === 'pie'"></pie-chart>
<donut-chart :options="options" :chart-data="data" v-if="type === 'donut'"></donut-chart>
<bubble-chart :options="options" :chart-data="data" v-if="type === 'bubble'"></bubble-chart>
<line-chart :options="options" :chart-data="data" v-if="type === 'line'"></line-chart>
<horizontal-bar-chart :options="options" :chart-data="data" v-if="type === 'horizontal-bar'"></horizontal-bar-chart>
<vertical-bar-chart :options="options" :chart-data="data" v-if="type === 'vertical-bar'"></vertical-bar-chart>
</div>
</template>
<script>
import PieChart from './chart-types/PieChart'
import BubbleChart from './chart-types/BubbleChart'
import DonutChart from './chart-types/DonutChart'
import HorizontalBarChart from './chart-types/HorizontalBarChart'
import VerticalBarChart from './chart-types/VerticalBarChart'
import LineChart from './chart-types/LineChart'
export default {
name: 'vuestic-chart',
props: ['data', 'options', 'type'],
components: {
PieChart,
LineChart,
VerticalBarChart,
HorizontalBarChart,
DonutChart,
BubbleChart
},
}
</script>
<style lang='scss'>
@import '../../../sass/_variables.scss';
.vuestic-chart {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
> * {
height: 100%;
width: 100%;
}
canvas {
width: 100%;
height: auto;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/BubbleChart.js 0 → 100644
View file @ 3be931bc
import { Bubble, mixins } from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default Bubble.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
data () {
return {
defaultOptions: {
}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/DonutChart.js 0 → 100644
View file @ 3be931bc
import { Doughnut, mixins } from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default Doughnut.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
data () {
return {
defaultOptions: {
}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/HorizontalBarChart.js 0 → 100644
View file @ 3be931bc
import { HorizontalBar, mixins } from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default HorizontalBar.extend({
mixins: [mixins.reactiveProp],
props: ['data', 'options'],
data () {
return {
defaultOptions: {
}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/LineChart.js 0 → 100644
View file @ 3be931bc
import {Line, mixins} from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default Line.extend({
props: ['chartData', 'options'],
mixins: [mixins.reactiveProp],
data () {
return {
defaultOptions: {}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/PieChart.js 0 → 100644
View file @ 3be931bc
import {Pie, mixins} from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default Pie.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
data () {
return {
defaultOptions: {}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/VerticalBarChart.js 0 → 100644
View file @ 3be931bc
import {Bar, mixins} from 'vue-chartjs'
import DefaultOptions from '../DefaultOptions'
export default Bar.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
data () {
return {
defaultOptions: {}
}
},
mounted () {
let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
this.renderChart(this.chartData, options)
}
})
src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-chat">
<div class="chat-body" :style="{'height': height}" v-sticky-scroll="{animate: true, duration: 500}">
<div class="chat-message" v-for="message in value" :class="{'yours': message.yours, 'alien': !message.yours}">
{{message.text}}
</div>
</div>
<div class="chat-controls">
<fieldset>
<div class="form-group form-group-w-btn">
<div class="input-group">
<input @keypress="keyHandler($event)" v-model="inputMessage" required title=""/>
<label class="control-label">Your message</label><i class="bar"></i>
</div>
<div class="btn btn-sm btn-primary" @click="sendMessage()">Send</div>
</div>
</fieldset>
</div>
</div>
</template>
<script>
import StickyScroll from 'vuestic-directives/StickyScroll'
export default {
name: 'vuestic-chat',
directives: {StickyScroll},
props: {
value: {
type: Array,
default: []
},
height: {
default: '20rem'
}
},
data () {
return {
inputMessage: ''
}
},
methods: {
keyHandler (event) {
if (event.keyCode === 13) {
this.sendMessage()
}
},
sendMessage () {
if (this.inputMessage) {
this.$emit('input', this.value.concat({
text: this.inputMessage,
yours: true
}))
this.inputMessage = ''
}
}
},
mounted () {
this.$emit('input', this.value)
}
}
</script>
<style lang='scss' scoped>
@import '../../../sass/_variables.scss';
$chat-body-min-height: 18.75rem;
$chat-body-mb: 1.5rem;
$chat-message-mb: 0.625rem;
$chat-message-py: 0.657rem;
$chat-message-px: 1.375rem;
$chat-message-br: 0.875rem;
.vuestic-chat {
width: 100%;
}
.chat-body {
min-height: $chat-body-min-height;
display: flex;
flex-direction: column;
margin-bottom: $chat-body-mb;
overflow: auto;
}
.chat-message {
padding: $chat-message-py $chat-message-px;
margin-bottom: $chat-message-mb;
border-radius: $chat-message-br;
max-width: 70%;
overflow-wrap: break-word;
&:last-child {
margin-bottom: 0;
}
&.alien {
align-self: flex-start;
border-top-left-radius: 0;
background-color: $light-gray2;
}
&.yours {
align-self: flex-end;
border-top-right-radius: 0;
background-color: $brand-primary;
}
.chat-message-input {
resize: vertical !important;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-checkbox form-check abc-checkbox"
:class="additionalClasses"
>
<input class="form-check-input"
type="checkbox"
:id="id"
:name="name"
:checked="checked"
@change="onChange"
:disabled="disabled"
>
<label class="form-check-label" :for="id">
<span class="abc-label-text">
<slot>{{ label }}</slot>
</span>
</label>
</div>
</template>
<script>
function generateRandomId () {
return Math.floor(Math.random() * Math.pow(10, 10))
}
export default {
name: 'vuestic-checkbox',
props: {
label: String,
id: {
type: String,
default () {
// We require unique id to show label
return 'label-' + generateRandomId()
}
},
checked: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
name: {
type: String,
default: ''
},
isCircle: {
type: Boolean,
default: false
},
brandColor: {
type: String,
default: 'primary',
validator: value => {
return ['primary', 'secondary', 'success', 'info', 'warning', 'danger'].indexOf(value) >= 0
}
}
},
model: {
prop: 'checked',
event: 'change'
},
mounted () {
this.$emit('change', this.checked)
},
methods: {
onChange (event) {
this.$emit('change', event.target.checked)
},
},
computed: {
additionalClasses () {
return [
this.isCircle ? 'abc-checkbox-circle' : false,
'abc-checkbox-' + this.brandColor
]
}
}
}
</script>
<style lang="scss">
.vuestic-checkbox {
}
</style>
src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-data-table table-responsive">
<div class="d-flex flex-md-row flex-column align-items-center" :class="controlsAlignmentClass">
<filter-bar
@filter="onFilterSet"
:label="filterInputLabel"
v-show="filterInputShown"
/>
<div class="datatable-controls d-flex flex-row">
<div class="form-group">
<slot name="additionalTableControl"></slot>
</div>
<items-per-page :options="itemsPerPage"
:label="itemsPerPageLabel"
:defaultPerPage="defaultPerPageComputed"
@items-per-page="onItemsPerPage"
v-show="perPageSelectorShown"></items-per-page>
</div>
</div>
<vuetable
ref="vuetable"
:apiUrl="apiUrl"
:apiMode="apiMode"
:httpFetch="httpFetch"
:httpOptions="httpOptions"
:fields="tableFields"
:dataManager="dataManager"
:css="css.table"
dataPath="data"
:paginationPath="paginationPathComputed"
:appendParams="moreParams"
:perPage="perPage"
:queryParams="queryParams"
@vuetable:pagination-data="onPaginationData"
/>
<div class="d-flex justify-content-center mb-4">
<vuetable-pagination ref="pagination"
:css="css.pagination"
:onEachSide="onEachSide"
@vuetable-pagination:change-page="onChangePage">
</vuetable-pagination>
</div>
</div>
</template>
<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import FilterBar from './datatable-components/FilterBar.vue'
import ItemsPerPage from './datatable-components/ItemsPerPage.vue'
import DefaultPerPageDefinition from './data/items-per-page-definition'
import Vue from 'vue'
import DataTableStyles from '../vuestic-datatable/data/data-table-styles'
export default {
name: 'vuestic-data-table',
components: {
FilterBar,
Vuetable,
VuetablePagination,
ItemsPerPage
},
props: {
apiUrl: {
type: String
},
httpFetch: {
type: Function,
default: null
},
httpOptions: {
type: Object,
default: () => {}
},
filterQuery: {
type: String,
default: 'filter'
},
tableFields: {
type: Array,
required: true
},
itemsPerPage: {
type: Array,
default: () => DefaultPerPageDefinition.itemsPerPage
},
perPageSelectorShown: {
type: Boolean,
default: true
},
filterInputShown: {
type: Boolean,
default: true
},
filterInputLabel: {
type: String,
default: 'Search'
},
itemsPerPageLabel: {
type: String,
default: 'per page'
},
defaultPerPage: {
type: Number,
default: DefaultPerPageDefinition.itemsPerPage[0].value
},
onEachSide: {
type: Number,
default: 2
},
apiMode: {
type: Boolean,
default: true
},
tableData: {
type: Object,
default () {
return {
data: []
}
}
},
dataModeFilterableFields: {
type: Array,
default: () => []
},
sortFunctions: {
type: Object
},
paginationPath: {
type: String,
default: ''
},
queryParams: {
type: Object
}
},
data () {
return {
perPage: 0,
colorClasses: {},
filterText: '',
dataCount: 0,
css: DataTableStyles
}
},
computed: {
controlsAlignmentClass () {
return {
'justify-content-md-between': this.filterInputShown,
'justify-content-md-end': !this.filterInputShown
}
},
moreParams () {
return {
[this.filterQuery]: this.filterText
}
},
dataModeFilterableFieldsComputed () {
const dataItem = this.tableData.data[0] || {}
const filterableFields = this.dataModeFilterableFields
if (!filterableFields.length) {
const itemFields = Object.keys(dataItem)
itemFields.forEach(field => {
if (typeof dataItem[field] !== 'object') {
filterableFields.push(field)
}
})
}
return filterableFields
},
filteredTableData () {
const txt = new RegExp(this.filterText, 'i')
let filteredData = this.tableData.data.slice()
filteredData = this.tableData.data.filter((item) => {
return this.dataModeFilterableFieldsComputed.some(field => {
const val = item[field] + ''
return val.search(txt) >= 0
})
})
return {
data: filteredData
}
},
defaultPerPageComputed () {
let defaultPerPage = DefaultPerPageDefinition.itemsPerPage[0].value
if (this.$options.propsData.defaultPerPage) {
defaultPerPage = this.$options.propsData.defaultPerPage
} else if (this.$options.propsData.itemsPerPage) {
defaultPerPage = this.$options.propsData.itemsPerPage[0].value
}
return defaultPerPage
},
paginationPathComputed () {
return this.apiMode ? this.paginationPath : 'pagination'
}
},
created () {
this.perPage = this.defaultPerPageComputed
},
mounted () {
this.$emit('initialized', this.$refs.vuetable)
},
methods: {
onFilterSet (filterText) {
this.filterText = filterText
Vue.nextTick(() => this.$refs.vuetable.refresh())
},
onItemsPerPage (itemsPerPageValue) {
this.perPage = itemsPerPageValue
Vue.nextTick(() => this.$refs.vuetable.refresh())
},
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
dataManager (sortOrder, pagination) {
let data = this.filteredTableData.data
let sortFunctions = this.sortFunctions
if (sortOrder.length > 0) {
data.sort(function (item1, item2) {
const sortField = sortOrder[0].sortField
let fn = sortFunctions[sortField]
if (fn) {
return fn(item1[sortField], item2[sortField])
}
})
if (sortOrder[0].direction === 'desc') {
data.reverse()
}
}
pagination = this.$refs.vuetable.makePagination(data.length)
return {
pagination: pagination,
data: data.slice(pagination.from - 1, pagination.to)
}
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-data-table {
.form-group {
margin-bottom: 1rem;
}
@media (max-width: 1258px) {
.pagination-link-btn:first-child, .pagination-link-btn:last-child {
display: none;
}
.pagination-link-btn:nth-child(2) {
border-top-left-radius: $btn-border-radius !important;
border-bottom-left-radius: $btn-border-radius !important;
}
.pagination-link-btn:nth-last-child(2) {
border-top-right-radius: $btn-border-radius !important;
border-bottom-right-radius: $btn-border-radius !important;
}
}
@media (max-width: 576px) {
.hide-not-focused-btn:not(.focus) {
display: none;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-datatable/data/data-table-styles.js 0 → 100644
View file @ 3be931bc
export default {
table: {
tableClass: 'table table-striped table-header-active',
ascendingIcon: 'entypo entypo-up-dir',
descendingIcon: 'entypo entypo-down-dir'
},
pagination: {
wrapperClass: 'btn-group',
activeClass: 'focus',
disabledClass: 'disabled',
pageClass: 'btn btn-primary hide-not-focused-btn',
linkClass: 'btn btn-primary pagination-link-btn',
icons: {
first: 'fa fa-angle-double-left',
prev: 'fa fa-angle-left',
next: 'fa fa-angle-right',
last: 'fa fa-angle-double-right'
}
}
}
src/vuestic-theme/vuestic-components/vuestic-datatable/data/fields-definition.js 0 → 100644
View file @ 3be931bc
export default {
tableFields: [
{
name: '__component:badge-column',
title: '',
dataClass: 'text-center'
},
{
name: 'name',
sortField: 'name'
},
{
name: 'email',
sortField: 'email'
},
{
name: 'address.line2',
title: 'city'
},
{
name: 'salary',
title: 'score'
}
],
sortFunctions: {
'name': function (item1, item2) {
return item1 >= item2 ? 1 : -1
},
'email': function (item1, item2) {
return item1 >= item2 ? 1 : -1
}
}
}
src/vuestic-theme/vuestic-components/vuestic-datatable/data/items-per-page-definition.js 0 → 100644
View file @ 3be931bc
export default {
itemsPerPage: [
{
value: 5
},
{
value: 6
},
{
value: 10
}
]
}
src/vuestic-theme/vuestic-components/vuestic-datatable/data/query-params.js 0 → 100644
View file @ 3be931bc
export default {
sort: 'sort',
page: 'page',
perPage: 'per_page'
}
src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-group with-icon-left">
<div class="input-group">
<input id="input-icon-left" name="input-icon-left" @keyup="doFilter()" v-model="filterText" required/>
<i class="glyphicon glyphicon-search icon-left input-icon search-icon"></i>
<label class="control-label" for="input-icon-left">{{label}}</label><i class="bar"></i>
</div>
</div>
</template>
<script>
export default {
name: 'filterBar',
props: {
label: {
type: String
}
},
data () {
return {
filterText: '',
typingTimeout: null,
typingDelay: 250
}
},
methods: {
doFilter () {
this.typingTimeout && clearTimeout(this.typingTimeout)
this.typingTimeout = setTimeout(() => this.$emit('filter', this.filterText), this.typingDelay)
}
}
}
</script>
<style lang="scss" scoped>
.search-icon {
transform: rotate(90deg);
}
.form-group {
min-width: 7rem;
}
@media (max-width: 768px) {
.form-group {
width: 80%;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-group dropdown" v-dropdown.closeOnMenuClick>
<button id="itemsPerPageBtn" class="btn btn-primary btn-sm dropdown-toggle" type="button"
data-toggle="dropdown">
{{selected}} {{label}}
<i class="ion-ios-arrow-down arrow-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu-content">
<a class="dropdown-item" v-for="option in options" @click="selectedItemsPerPage(option.value)">{{option.value}} per page</a>
</div>
</div>
</div>
</template>
<script>
import Dropdown from 'vuestic-directives/Dropdown'
export default {
directives: {
Dropdown
},
props: {
label: {
type: String
},
options: {
type: Array,
required: true
},
defaultPerPage: {
type: Number
}
},
data () {
return {
selected: this.defaultPerPage
}
},
mounted () {
this.selectedItemsPerPage(this.selected)
},
methods: {
selectedItemsPerPage (optionValue) {
this.selected = optionValue
this.$emit('items-per-page', this.selected)
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../sass/variables";
.btn.dropdown-toggle, .dropdown-menu {
min-width: 13rem;
max-width: 13rem;
margin-left: 1rem;
}
.dropdown-item, .dropdown-toggle {
text-transform: uppercase;
}
</style>
src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.demo.vue 0 → 100644
View file @ 3be931bc
<template>
<div
style="left: 420px; top: 180px; background-color: white; position: absolute"
>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="simple-input"
v-model="one"
/>
<label class="control-label" for="simple-input">Simple</label>
<i class="bar"></i>
</div>
<div class="input-group">
<vuestic-date-picker
id="simple-input-2"
v-model="two"
:config="{mode: 'range'}"
/>
<label class="control-label" for="simple-input-2">Range</label>
<i class="bar"></i>
</div>
<div class="input-group">
<vuestic-date-picker
id="simple-input-3"
v-model="three"
:config="{enableTime: true}"
/>
<label class="control-label" for="simple-input-3">Day time</label>
<i class="bar"></i>
</div>
<div class="input-group">
<vuestic-date-picker
id="simple-input-4"
v-model="three"
:config="{enableTime: true}"
@on-change="doSomethingOnChange"
/>
<label class="control-label" for="simple-input-4">Day time</label>
<i class="bar"></i>
</div>
</div>
</div>
</template>
<script>
import VuesticDatePicker from './VuesticDatePicker.vue'
export default {
components: { VuesticDatePicker },
data () {
return {
one: null,
two: null,
three: null,
}
},
methods: {
doSomethingOnChange (input) {
console.log('input', input)
},
},
}
</script>
src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.vue 0 → 100644
View file @ 3be931bc
<template>
<vue-flatpickr-component
class="vuestic-date-picker"
:class="{'has-value': valueProxy && valueProxy.length}"
v-model="valueProxy"
v-on="$listeners"
:config="fullConfig"
/>
</template>
<script>
import VueFlatpickrComponent from 'vue-flatpickr-component'
export default {
name: 'vuestic-date-picker',
components: {
VueFlatpickrComponent,
},
props: {
value: {
required: true,
},
config: {
default: () => {
return {}
},
},
},
computed: {
valueProxy: {
get () {
return this.value
},
set (value) {
this.$emit('input', value)
},
},
fullConfig () {
return Object.assign({}, this.defaultConfig, this.config)
},
defaultConfig () {
return {
// allowInput: true, // false triggers `readonly` on input, which disables label animation.
nextArrow: '<span aria-hidden="true" class="ion ion-ios-arrow-forward"></span>',
prevArrow: '<span aria-hidden="true" class="ion ion-ios-arrow-back"></span>',
}
},
},
}
</script>
<style lang="scss">
@import "../../../sass/mixins";
@import "../../../sass/variables";
$datepickerActive: $vue-green;
$datepickerBackground: #333333;
$datepickerText: $white;
$datepickerToday: lighten($datepickerBackground, 5);
$datepickerOtherMonth: darken($datepickerText, 40);
$datepickerWeekday: darken($datepickerText, 50);
$datepickerDayHover: darken($datepickerText, 70);
$datepickerDayRange: $almost-black;
$datepickerSeparatorColor: $almost-black;
$borderPadding: 0.5rem;
$dayPadding: 0.375rem;
$daySize: 1.75rem;
.flatpickr-calendar {
width: $daySize * 7 + $dayPadding * 6 + $borderPadding * 2 !important;
background-color: $datepickerBackground;
border-radius: 0;
box-shadow: none;
&.arrowTop {
&:before {
content: none;
border-bottom-color: $datepickerBackground;
}
&:after {
content: none;
border-bottom-color: $datepickerBackground;
}
}
&.arrowBottom {
&:before {
content: none;
border-top-color: $datepickerBackground;
}
&:after {
content: none;
border-top-color: $datepickerBackground;
}
}
.flatpickr-days {
width: $daySize * 7 + $dayPadding * 6 + $borderPadding * 2 !important;
padding: 0 $borderPadding $borderPadding;
display: block;
.dayContainer {
width: ($daySize + $dayPadding) * 7;
max-width: ($daySize + $dayPadding) * 7;
min-width: ($daySize + $dayPadding) * 7;
margin: -$dayPadding / 2;
.flatpickr-day {
height: $daySize;
line-height: 1.7;
font-size: 1rem;
flex: 0 0 $daySize;
margin: $dayPadding / 2;
border: none;
color: $datepickerText;
&.today {
background-color: $datepickerToday;
}
&:hover {
background-color: $datepickerDayHover;
}
&.selected {
background-color: $datepickerActive;
}
&.nextMonthDay, &.prevMonthDay {
color: $datepickerOtherMonth;
}
&.disabled {
color: $datepickerOtherMonth;
&:hover {
background-color: inherit;
}
}
&.startRange, &.endRange, &.inRange {
border-radius: 2rem;
box-shadow: none;
}
&.startRange, &.endRange {
background-color: $datepickerActive;
}
&.inRange {
background-color: $datepickerDayRange;
}
}
}
}
.flatpickr-months {
height: 2.625rem;
border-bottom: solid 0.125rem $datepickerSeparatorColor;
.flatpickr-month {
height: 100%;
.flatpickr-current-month {
padding-top: 0.625rem;
color: $datepickerText;
.cur-month {
font-size: 1rem;
font-weight: inherit;
}
.cur-year {
font-size: 1rem;
}
.numInputWrapper {
.numInput.cur-year {
color: $white;
}
.arrowUp {
&:hover {
&::after {
border-bottom-color: $datepickerActive;
}
}
&::after {
border-bottom-color: $datepickerText;
}
}
.arrowDown {
&:hover {
&::after {
border-top-color: $datepickerActive;
}
}
&::after {
border-top-color: $datepickerText;
}
}
}
}
}
.flatpickr-prev-month, .flatpickr-next-month {
@include flex-center();
height: 2.625rem;
width: 1.625rem;
padding: 0;
color: $datepickerText;
&:hover {
color: $datepickerActive;
}
}
}
.flatpickr-weekdays {
padding: 0 $borderPadding;
.flatpickr-weekdaycontainer {
justify-content: space-between;
.flatpickr-weekday {
letter-spacing: 0.0625rem;
flex: 0 0 $daySize;
color: $datepickerWeekday;
text-transform: uppercase;
font-weight: bold;
font-size: 0.6875rem;
}
}
}
.flatpickr-weekwrapper {
.flatpickr-weekday {
text-transform: uppercase;
letter-spacing: 0.0625rem;
color: $datepickerWeekday;
font-weight: bold;
font-size: 0.6875rem;
}
.flatpickr-weeks {
box-shadow: 2px 0 0 $datepickerSeparatorColor;
padding-bottom: $borderPadding;
margin-top: -$dayPadding;
.flatpickr-day {
height: $daySize;
line-height: 1.7;
font-size: 1rem;
flex: 0 0 $daySize;
margin-top: $dayPadding;
color: $datepickerOtherMonth;
}
}
}
&.showTimeInput.hasTime .flatpickr-time {
border-top: solid 0.125rem $datepickerSeparatorColor;
.numInputWrapper {
&:hover {
background-color: $datepickerDayHover;
}
.numInput {
color: $datepickerText;
}
.arrowUp {
&::after {
border-bottom-color: $datepickerText;
}
&:hover::after {
border-bottom-color: $datepickerActive;
}
}
.arrowDown {
&::after {
border-top-color: $datepickerText;
}
&:hover::after {
border-top-color: $datepickerActive;
}
}
}
.flatpickr-time-separator {
color: $datepickerText;
}
.flatpickr-am-pm {
color: $datepickerText;
&:hover {
background-color: $datepickerDayHover;
}
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-feed/VuesticFeed.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-feed">
<div v-if="posts.length == 0" class="empty">Your feed is empty.</div>
<div class="post" v-for="post in posts" :class="{last: posts.indexOf(post) === posts.length - 1}">
<div class="photo-container"><div class="photo" :style="`background: url(${post.photoURL})`"></div></div>
<div class="underscored">
<span class="text"><span class="name">{{post.name}}</span> {{post.text}}.</span>
<button v-on:click="removePost(post)" class="btn btn-micro btn-primary btn-with-icon close-btn rounded-icon">
<i class="ion-md-close ion"></i>
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-feed',
props: ['initialPosts'],
methods: {
removePost (target) {
let result = []
for (let post of this.posts) {
if (post !== target) {
result.push(post)
}
}
this.posts = result
}
},
data () {
return {
posts: this.initialPosts
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-feed {
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.empty {
text-align: center;
}
.post {
display: flex;
justify-content: space-between;
align-items: center;
.photo-container {
margin-right: 1rem;
border-radius: 50%;
border: 2px solid $lighter-gray;
.photo {
background-size: cover !important;
width: 3rem;
height: 3rem;
border-radius: 50%;
}
}
.underscored {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: $light-gray2 2px solid;
overflow: hidden;
padding-right: 0.7rem;
height: 3.5rem;
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.name {
font-weight: $font-weight-bold;
}
}
.close-btn {
margin-left: 1rem;
i {
left: 10.5px;
}
}
}
&.last {
.underscored {
border-bottom: none;
}
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-medium-editor/VuesticMediumEditor.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-medium-editor">
<slot></slot>
</div>
</template>
<script>
import MediumEditor from 'medium-editor'
export default {
name: 'vuestic-medium-editor',
props: {
editorOptions: {
type: Object,
default: () => {
return {
buttonLabels: 'fontawesome',
autoLink: true,
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'anchor',
'h1',
'h2',
'h3'
]
}
}
}
}
},
data () {
return {
editor: null
}
},
mounted () {
this.initEditor()
},
beforeDestroy () {
this.destroyEditor()
},
methods: {
initEditor () {
this.editor = new MediumEditor(this.$el, this.editorOptions)
this.$emit('initialized', this.editor)
},
destroyEditor () {
this.editor.destroy()
}
}
}
</script>
<style lang="scss">
.vuestic-medium-editor {
&:focus {
outline: none;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-modal/VuesticModal.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-modal">
<transition name="modal" :duration="duration">
<div v-show="show" class="modal-container">
<div class="modal" @click.self="clickMask">
<div class="modal-dialog" :class="modalClass">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<slot name="header">
<div class="modal-title">
<slot name="title"></slot>
</div>
<i
class="ion ion-md-close close-modal"
v-if="closeIconShown"
@click.prevent="cancel"
/>
</slot>
</div>
<!--Container-->
<div class="modal-body">
<slot></slot>
</div>
<!--Footer-->
<div class="modal-footer">
<slot name="footer">
<button type="button" :class="okClass" @click="ok" :disabled="okDisabled">{{okText}}</button>
<button type="button" :class="cancelClass" @click="cancel" :disabled="cancelDisabled">{{cancelText}}</button>
</slot>
</div>
</div>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'vuestic-modal',
props: {
transition: {
type: String,
default: 'modal'
},
small: {
type: Boolean,
default: false
},
large: {
type: Boolean,
default: false
},
force: {
type: Boolean,
default: false
},
okText: {
type: String,
default: 'CONFIRM'
},
cancelText: {
type: String,
default: 'CANCEL'
},
okClass: {
type: String,
default: 'btn btn-primary'
},
cancelClass: {
type: String,
default: 'btn btn-secondary'
},
closeIconShown: {
type: Boolean,
default: true
},
okDisabled: {
type: Boolean,
default: false
},
cancelDisabled: {
type: Boolean,
default: false
}
},
data () {
return {
show: false,
duration: 500
}
},
computed: {
modalClass () {
return {
'modal-lg': this.large,
'modal-sm': this.small
}
}
},
created () {
if (this.show) {
document.body.className += ' modal-open'
}
},
beforeDestroy () {
document.body.className = document.body.className.replace(/\s?modal-open/, '')
},
watch: {
show (value) {
if (value) {
document.body.className += ' modal-open'
} else {
window.setTimeout(() => {
document.body.className = document.body.className.replace(/\s?modal-open/, '')
}, this.duration)
}
}
},
methods: {
listenKeyUp (event) {
if (event.key === 'Escape') {
this.cancel()
}
},
ok () {
this.$emit('ok')
this.show = false
window.removeEventListener('keyup', this.listenKeyUp)
},
cancel () {
this.$emit('cancel')
this.show = false
window.removeEventListener('keyup', this.listenKeyUp)
},
clickMask () {
if (!this.force) {
this.cancel()
}
},
open () {
this.show = true
window.addEventListener('keyup', this.listenKeyUp)
}
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.vuestic-modal {
height: 0;
width: 0;
// For Transitioning
.modal {
display: block;
}
.modal-dialog, .modal-backdrop {
transition: all .5s ease;
}
.modal-enter .modal-dialog, .modal-leave-active .modal-dialog {
opacity: 0;
transform: translateY(-30%);
}
.modal-enter .modal-backdrop, .modal-leave-active .modal-backdrop {
opacity: 0;
}
.modal-backdrop {
opacity: 0.5;
}
//Modal styles
.modal-header {
height: $modal-header-height;
padding: $modal-header-padding-y $modal-header-padding-x;
border-bottom: $modal-header-border;
font-size: $font-size-larger;
display: flex;
align-items: center;
}
.close-modal {
margin-left: 1rem;
font-size: $font-size-large;
line-height: $font-size-large;
cursor: pointer;
}
.modal-content {
border-radius: $modal-content-border-radius;
}
.modal-footer {
justify-content: center;
padding: 0 $modal-inner-padding;
padding-bottom: calc(#{$modal-inner-padding} - #{$modal-footer-btns-padding-bottom});
flex-wrap: wrap;
.btn {
margin: 0 $modal-footer-btns-margin-x $modal-footer-btns-padding-bottom $modal-footer-btns-margin-x;
}
}
.modal-dialog {
box-shadow: $modal-content-box-shadow-sm-up;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-group with-icon-right dropdown select-form-group multiselect-form-group"
v-dropdown
:class="{'has-error': hasErrors()}">
<div class="input-group dropdown-toggle">
<input
readonly
:class="{'has-value': !!displayValue}"
v-bind:value="displayValue"
required/>
<i class="ion ion-ios-arrow-down icon-right input-icon"></i>
<label class="control-label">{{label}}</label><i class="bar"></i>
<small v-show="hasErrors()" class="help text-danger">{{ showRequiredError() }}</small>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<scrollbar ref="scrollbar">
<div class="dropdown-menu-content">
<div class="dropdown-item"
:class="{'selected': isOptionSelected(option)}" v-for="option in options"
@click="toggleSelection(option)">
<span class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
<i class="fa fa-check selected-icon"></i>
</div>
</div>
</scrollbar>
</div>
</div>
</template>
<script>
import Dropdown from 'vuestic-directives/Dropdown'
import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
export default {
name: 'vuestic-multi-select',
components: {
Scrollbar
},
directives: {
dropdown: Dropdown
},
data () {
return {
displayValue: '',
validated: false
}
},
props: {
label: String,
itemsChosenPlaceholder: {
type: String,
default: 'chosen'
},
options: Array,
value: Array,
optionKey: String,
required: {
type: Boolean,
default: false
},
name: {
type: String,
default: 'multiselect'
}
},
mounted () {
this.$emit('input', this.value)
},
updated: function () {
this.updateDisplayValue(this.value)
},
methods: {
toggleSelection (option) {
let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
this.updateDisplayValue(newVal)
this.$emit('input', newVal)
},
isOptionSelected (option) {
return this.value.includes(option)
},
selectOption (option) {
return this.value.concat(option)
},
deselectOption (option) {
return this.value.filter(item => item !== option)
},
updateDisplayValue (newVal) {
if (newVal.length > 2) {
this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
} else {
this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
}
},
validate () {
this.validated = true
},
isValid () {
let isValid = true
if (this.required) {
isValid = !!this.displayValue
}
return isValid
},
hasErrors () {
let hasErrors = false
if (this.required) {
hasErrors = this.validated && !this.displayValue
}
return hasErrors
},
showRequiredError () {
return `The ${this.name} field is required`
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.multiselect-form-group {
.dropdown-menu {
padding: 0;
.vuestic-scrollbar {
height: $dropdown-item-height * 4;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-popover/VuesticPopover.vue 0 → 100644
View file @ 3be931bc
<template>
<v-popover
:popover-class="popoverClass"
:open="open"
:disabled="disabled"
:placement="placement"
:auto-hide="autoHide"
>
<slot name="trigger"></slot>
<template slot="popover">
<div class="popover-icon" v-if="isIconPresent">
<slot name="icon"></slot>
</div>
<div class="popover-content">
<div class="popover-header">
<slot name="header"></slot>
</div>
<div class="popover-body">
<slot name="body"></slot>
</div>
</div>
</template>
</v-popover>
</template>
<script>
import { VPopover } from 'v-tooltip'
export default {
name: 'vuestic-popover',
components: { VPopover },
props: {
open: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placement: {
type: String,
default: 'auto'
},
popoverClass: {
type: [String, Array],
default: 'vuestic-tooltip'
},
autoHide: {
type: Boolean,
default: false
}
},
computed: {
isIconPresent () {
return !!this.$slots.icon
}
}
}
</script>
<style lang='scss' scoped>
</style>
src/vuestic-theme/vuestic-components/vuestic-preloader/VuesticPreLoader.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-pre-loader">
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import {color, lightness} from 'kewler'
export default {
name: 'vuestic-pre-loader',
methods: {
getPrevious (index) {
if (index === 0) return this.points.length - 1
else return index - 1
},
getNext (index) {
if (index + 1 === this.points.length) {
return 0
} else {
return index + 1
}
},
setNextLighten (index) {
let lighten = this.points[index].lighten
this.points[index].lighten = lighten === 8 ? 1 : lighten + 1
},
draw () {
let ctx = this.context
ctx.clearRect(0, 0, 140, 104)
let padding = 4
this.points.forEach(point => {
ctx.beginPath()
let delta = this.radius + padding
ctx.arc(point.x + delta, point.y + delta, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color(lightness(point.lighten / 10 * 35))()
ctx.fill()
})
let main = this.points[this.mainIndex]
let delta = this.mainRadius - this.radius + padding
ctx.beginPath()
ctx.arc(main.x + delta, main.y + delta, this.mainRadius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color()
ctx.fill()
ctx.closePath()
},
calculate () {
this.mainIndex = this.getNext(this.mainIndex)
let prevIndex = this.mainIndex
for (let i = 0; i <= 7; i++) {
prevIndex = this.getPrevious(prevIndex)
this.setNextLighten(prevIndex)
}
},
update () {
this.calculate()
this.draw()
},
animate () {
this.interval = setInterval(this.update, 30)
},
stop () {
clearInterval(this.interval)
}
},
mounted () {
this.context = this.$refs.canvas.getContext('2d')
this.points = this.points.map(point => {
return {
lighten: 8,
...point
}
})
for (let i = 1; i <= 7; i++) {
this.points[this.mainIndex - i].lighten = i
}
this.draw()
this.animate()
},
data () {
return {
points: require('./points.json'),
color: color(this.$store.state.app.config.palette.primary),
mainIndex: 7,
context: {},
radius: 4,
mainRadius: 8,
interval: {}
}
}
}
</script>
src/vuestic-theme/vuestic-components/vuestic-preloader/points.json 0 → 100644
View file @ 3be931bc
[
{
"x": 0,
"y": 0
},
{
"x": 8,
"y": 12
},
{
"x": 16,
"y": 24
},
{
"x": 24,
"y": 36
},
{
"x": 32,
"y": 48
},
{
"x": 40,
"y": 60
},
{
"x": 48,
"y": 72
},
{
"x": 60,
"y": 84
},
{
"x": 72,
"y": 72
},
{
"x": 80,
"y": 60
},
{
"x": 88,
"y": 48
},
{
"x": 96,
"y": 36
},
{
"x": 104,
"y": 24
},
{
"x": 112,
"y": 12
},
{
"x": 120,
"y": 0
},
{
"x": 104,
"y": 0
},
{
"x": 88,
"y": 0
},
{
"x": 80,
"y": 12
},
{
"x": 72,
"y": 24
},
{
"x": 60,
"y": 36
},
{
"x": 48,
"y": 24
},
{
"x": 40,
"y": 10
},
{
"x": 32,
"y": 0
},
{
"x": 16,
"y": 0
}
]
src/vuestic-theme/vuestic-components/vuestic-profile-card/VuesticProfileCard.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-profile-card d-flex flex-column align-items-center">
<div class="photo">
<img :src="photoSource" />
</div>
<h5 class="name">{{name}}</h5>
<span class="location"><span class="icon glyphicon glyphicon-map-marker"></span> {{location}}</span>
<div class="social">
<a class="icon brandico brandico-facebook-rect"
v-if="social.facebook" :href="'http://' + social.facebook" target="_blank"></a>
<a class="icon brandico brandico-instagram"
v-if="social.instagram" :href="'http://' + social.instagram" target="_blank"></a>
<a class="icon brandico brandico-twitter"
v-if="social.twitter" :href="'http://' + social.twitter" target="_blank"></a>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-profile-card',
props: ['photoSource', 'name', 'location', 'social']
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "../../../sass/icons-styles";
$vuestic-profile-card-width: 12.6875rem;
$vuestic-profile-card-photo-diameter: 9.375rem;
.vuestic-profile-card {
width: $vuestic-profile-card-width;
.photo {
height: $vuestic-profile-card-photo-diameter;
width: $vuestic-profile-card-photo-diameter;
border-radius: 50%;
background-color: $lighter-gray;
overflow: hidden;
img {
height: 100%;
width: 100%;
}
}
.name {
margin-top: 1.325rem;
margin-bottom: 0;
}
.location {
margin-top: 0.8125rem;
.icon {
color: $lighter-gray;
font-size: $font-size-larger;
}
&:hover {
cursor: pointer;
.icon {
color: red;
}
}
}
.social {
display: flex;
justify-content: center;
padding-top: 1rem;
margin-top: 1.25rem;
width: 100%;
border-top: solid .125rem $light-gray;
.icon {
color: $gray;
text-decoration: none;
font-size: $font-size-h4;
margin-right: .4375rem;
margin-left: .4375rem;
&:hover {
cursor: pointer;
color: darken($gray, 50%);
}
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-progress-bar/VuesticProgressBar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-progress-bar" ref="bar">
<horizontal-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'horizontal'"
:isActive = "isActive" ref="bar" :animatedValue="animatedValue"></horizontal-bar>
<vertical-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'vertical'"
:isActive = "isActive" ref="bar" :animatedValue="animatedValue"></vertical-bar>
<circle-bar :min="min" :max="max" :value="value" :color="color" :background-color="backgroundColor"
:start-color="startColor" v-if="type == 'circle'" :isActive = "isActive" ref="bar"
:animatedValue="animatedValue"></circle-bar>
</div>
</template>
<script>
import HorizontalBar from './progress-types/HorizontalProgressBar.vue'
import VerticalBar from './progress-types/VerticalProgressBar.vue'
import CircleBar from './progress-types/CircleProgressBar.vue'
export default {
name: 'vuestic-progress-bar',
components: {
HorizontalBar,
VerticalBar,
CircleBar
},
props: {
type: {
type: String,
default: 'horizontal'
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
size: {
type: String,
default: 'basic'
},
colorName: {
type: String,
default: 'primary'
},
startColorName: {
type: String,
default: 'lighterGray'
},
backgroundColorName: {
type: String,
default: 'white'
}
},
watch: {
value () {
this.animateValue()
}
},
methods: {
animateValue () {
let startValue = this.value
let valueMsecs = this.valueAnimationInterval / this.max
let delta = Math.sign(this.value - this.animatedValue)
let valueInterval = setInterval(() => {
if (!this.$refs.bar) {
clearInterval(valueInterval)
return
}
if (startValue !== this.value || this.animatedValue === this.value) {
clearInterval(valueInterval)
if (this.value === this.max) {
this.isActive = false
}
} else {
this.animatedValue += delta
}
}, valueMsecs)
}
},
data () {
return {
value: 0,
valueAnimationInterval: 2000,
animatedValue: 0,
isActive: false,
startColor: this.$store.state.app.config.palette[this.startColorName],
color: this.$store.state.app.config.palette[this.colorName],
backgroundColor: this.$store.state.app.config.palette[this.backgroundColorName]
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "../../../sass/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.vuestic-progress-bar {
font-size: $progress-bar-value-font-size;
font-weight: $font-weight-bold;
&:hover {
cursor: pointer;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/CircleProgressBar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="circle progress-bar" :style="'background-image: ' + backgroundImage">
<div class="overlay" :style="'background-color: ' + backgroundColor + '; color: ' + color">
<span>{{animatedValue+'%'}}</span>
</div>
</div>
</template>
<script>
export default {
props: [
'value',
'animatedValue',
'min',
'max',
'color',
'startColor',
'backgroundColor',
'isActive'
],
computed: {
backgroundImage () {
let result = {}
if (this.animatedValue < 50) {
let nextDeg = 90 + (3.6 * this.animatedValue) + 'deg'
result = `linear-gradient(90deg, ${this.startColor} 50%, transparent 50%, transparent), linear-gradient(${nextDeg}, ${this.color} 50%, ${this.startColor} 50%, ${this.startColor})`
} else {
let nextDeg = -90 + (3.6 * (this.animatedValue - 50)) + 'deg'
result = `linear-gradient(${nextDeg}, ${this.color} 50%, transparent 50%, transparent), linear-gradient(270deg, ${this.color} 50%, ${this.startColor} 50%, ${this.startColor})`
}
return result
}
}
}
</script>
<style lang="scss">
@import "../../../../sass/variables";
@import "../../../../sass/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.vuestic-progress-bar .circle {
$step: 1;
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);
&.progress-bar {
float: left;
position: relative;
width: $progress-bar-circle-diameter;
height: $progress-bar-circle-diameter;
padding-left: $progress-bar-circle-bw;
padding-top: $progress-bar-circle-bw;
border-radius: 50%;
border-width: 0;
}
.overlay {
width: $progress-bar-circle-overlay-diameter;
height: $progress-bar-circle-diameter - 2*$progress-bar-circle-bw;
border-radius: 50%;
border-width: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="horizontal">
<div v-if="size != 'thick'" class="value">{{animatedValue + '%'}}</div>
<div class="progress" :class="size" >
<div class="progress-bar" ref="progressBar" :style="'width: ' + value + '%'">
<span v-if="size == 'thick'" :class="{hidden: animatedValue == min}" class="value">
{{animatedValue + '%'}}
</span>
</div>
</div>
</div>
</template>
<script>
import {color, lightness} from 'kewler'
export default {
props: [
'value',
'animatedValue',
'min',
'max',
'color',
'size',
'isActive'
],
mounted () {
let progressBar = this.$refs.progressBar
let progressColor = color(this.color)
let current = progressColor
setInterval(() => {
if (this.animatedValue === 100) {
current = progressColor
progressBar.style.backgroundColor = current()
return
}
if (progressColor(lightness(30))() !== current()) {
current = progressColor(lightness(30))
} else {
current = progressColor
}
progressBar.style.backgroundColor = current()
}, 500)
}
}
</script>
<style lang="scss">
@import "../../../../sass/variables";
@import "../../../../sass/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.vuestic-progress-bar .horizontal {
display: inline-block;
width: 100%;
.progress-bar {
transition: background-color ease .5s, width 3s linear !important;
}
.value {
text-align: center;
&.hidden {
visibility: hidden;
}
}
.basic {
border-radius: $progress-bar-width-basic;
height: $progress-bar-width-basic;
.progress-bar {
border-radius: inherit;
}
}
.thin {
height: $progress-bar-width-thin;
}
.thick {
border-radius: $progress-bar-width-thick;
height: $progress-bar-width-thick;
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
border-radius: inherit;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vertical">
<div class="progress" :class="size" >
<div class="progress-bar" ref="progressBar" :style="'height: ' + value + '%'">
</div>
</div>
<div class="value">{{animatedValue + '%'}}</div>
</div>
</template>
<script>
import {color, lightness} from 'kewler'
export default {
props: [
'value',
'animatedValue',
'min',
'max',
'color',
'size',
'isActive'
],
mounted () {
// Starts blinking
let progressBar = this.$refs.progressBar
let progressColor = color(this.color)
let current = progressColor
setInterval(() => {
if (this.animatedValue === 100) {
current = progressColor
progressBar.style.backgroundColor = current()
return
}
if (progressColor(lightness(30))() !== current()) {
current = progressColor(lightness(30))
} else {
current = progressColor
}
progressBar.style.backgroundColor = current()
}, 500)
}
}
</script>
<style lang="scss">
@import "../../../../sass/variables";
@import "../../../../sass/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.vuestic-progress-bar .vertical {
.progress-bar {
transition: background-color ease .5s, height 3s linear !important;
}
.progress {
height: $progress-bar-vertical-height;
float: left;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
align-items: flex-end;
-webkit-align-items: flex-end; /* Safari 7.0+ */
}
.value{
float: left;
height: $progress-bar-vertical-height;
display: flex;
align-items: center;
padding-left: .25rem;
}
.basic {
border-radius: $progress-bar-width-basic;
.progress-bar {
border-radius: inherit;
width: $progress-bar-width-basic;
}
}
.thin {
.progress-bar {
width: $progress-bar-width-thin;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-radio-button form-check radio abc-radio"
:class="additionalClasses">
<input class="form-check-input" type="radio" :name="name" :id="id"
:value="value" :checked="checkState" @change="onChange"
:disabled="disabled">
<label class="form-check-label" :for="id">
<span class="abc-label-text">{{'forms.controls.radio' | translate}}</span>
</label>
</div>
</template>
<script>
export default {
name: 'vuestic-radio-button',
props: {
label: String,
value: {
type: String,
default: '',
required: true
},
checked: {
type: Boolean,
default: false
},
id: {
type: String,
required: false
},
disabled: {
type: Boolean,
default: false
},
name: {
type: String,
required: true
},
modelValue: {
default: undefined
},
brandColor: {
type: String,
default: 'primary',
validator: value => {
return ['primary', 'secondary', 'success', 'info', 'warning', 'danger'].indexOf(value) >= 0
}
}
},
model: {
prop: 'modelValue',
event: 'input'
},
mounted () {
if (this.checked && !this.checkState) {
this.toggle()
}
},
methods: {
onChange () {
this.toggle()
},
toggle () {
this.$emit('input', this.checkState ? '' : this.value)
}
},
computed: {
checkState () {
if (this.modelValue === undefined) {
return this.checked
}
return this.modelValue === this.value
},
additionalClasses () {
return [
'abc-radio-' + this.brandColor
]
}
},
watch: {
checked (newValue) {
if (newValue !== this.checkState) {
this.toggle()
}
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-radio-button {
}
</style>
src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-scrollbar">
<div class="scrollbar-wrapper" ref="scrollbarWrapper">
<div class="scrollbar-content" ref="scrollbarContent"
@wheel="scroll"
@touchstart="startDrag"
@touchmove="onDrag"
@touchend="stopDrag"
@transitionend="onContentResize">
<slot></slot>
</div>
<div class="track" ref="track"><div class="thumb" ref="thumb"></div></div>
</div>
</div>
</template>
<script>
const browser = require('detect-browser')
const erd = require('element-resize-detector')()
let vm = {
name: 'vuestic-scrollbar',
props: {
speed: {
default: 20
}
},
methods: {
calcSize () {
this.isDown = this.isUp = false
this.maxHeight = parseFloat(this.wrapper.offsetHeight, 10)
this.contentHeight = parseFloat(this.content.offsetHeight, 10)
this.trackHeight = parseFloat(this.track.offsetHeight, 10)
this.thumb.style.height = this.maxHeight / this.contentHeight * this.trackHeight + 'px'
if (this.maxHeight / this.contentHeight < 1) {
this.thumb.classList.add('active')
} else {
this.thumb.classList.remove('active')
}
},
calcThumb () {
let currentMT = this.content.style.marginTop === ''
? 0
: parseInt(this.content.style.marginTop, 10)
this.thumb.style.top = (-currentMT / this.contentHeight * this.trackHeight) + 'px'
},
onContentResize () {
let prevHeight = this.contentHeight
this.calcSize()
this.calcThumb()
this.content.style.transition = 'margin-top .3s linear'
this.thumb.style.transition = 'top .3s linear'
let handler = (e) => {
if (e.propertyName === 'margin-top') {
this.content.style.transition = ''
this.calcSize()
this.calcThumb()
this.content.removeEventListener('transitionend', handler)
this.thumb.style.transition = ''
}
}
this.content.addEventListener('transitionend', handler)
this.setVertical(this.contentHeight - prevHeight)
},
startDrag (e) {
this.isDragging = true
this.prevTouch = e.touches[0]
},
onDrag (e) {
if (this.isDragging) {
e.preventDefault()
let touch = e.touches[0]
let delta = this.prevTouch.clientY - touch.clientY
this.setVertical(delta)
this.prevTouch = touch
}
},
stopDrag (e) {
this.isDragging = false
},
scroll (e) {
let delta = (e.deltaY * 0.01 * this.speed)
if (browser.name === 'firefox') {
delta *= 10
}
this.setVertical(delta)
e.preventDefault()
},
setVertical (delta) {
if (this.isDown && delta > 0 || this.isUp && delta < 0 || this.contentHeight <= this.maxHeight) {
return
}
let currentMT = this.content.style.marginTop === ''
? 0
: parseFloat(this.content.style.marginTop, 10)
let nextMT = 0
if (this.maxHeight - (currentMT - delta) > this.contentHeight && delta > 0) {
nextMT = this.maxHeight - this.contentHeight
this.isDown = true
} else {
this.isDown = false
if (currentMT - delta > 0) {
this.isUp = true
nextMT = 0
} else {
nextMT = currentMT - delta
this.isUp = false
}
}
this.content.style.marginTop = nextMT + 'px'
this.calcThumb()
}
},
mounted () {
this.track = this.$refs.track
this.thumb = this.$refs.thumb
this.content = this.$refs.scrollbarContent
this.wrapper = this.$refs.scrollbarWrapper
this.calcSize()
this.calcThumb()
erd.listenTo(this.content, () => {
this.calcSize()
this.calcThumb()
})
},
beforeDestroy () {
erd.removeAllListeners(this.content)
},
data () {
return {
wrapper: undefined,
maxHeight: undefined,
thumb: undefined,
track: undefined,
trackHeight: undefined,
content: undefined,
contentHeight: undefined,
isDown: false,
isUp: true,
prevTouch: {},
isDragging: false
}
}
}
module.exports = vm
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-scrollbar {
background: transparent;
transition: all .3s linear;
position: relative;
.scrollbar-wrapper {
box-shadow: $sidebar-box-shadow;
position: relative;
overflow: hidden;
max-height: 100%;
.track {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 3px;
.thumb {
transition: height .3s linear, opacity .6s linear;
position: absolute;
width: 100%;
background-color: black;
opacity: 0;
&.active {
opacity: .3;
}
}
}
}
&:hover {
.thumb.active {
opacity: 1 !important;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="form-group with-icon-right dropdown select-form-group"
v-dropdown.closeOnMenuClick
:class="{'has-error': hasErrors()}">
<div class="input-group dropdown-toggle">
<input
readonly
:class="{'has-value': !!displayValue}"
v-model="displayValue"
:name="name"
required/>
<i class="ion ion-ios-arrow-down icon-right input-icon"></i>
<label class="control-label">{{label}}</label><i class="bar"></i>
<small v-show="hasErrors()" class="help text-danger">{{ showRequiredError() }}</small>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<scrollbar ref="scrollbar">
<div class="dropdown-menu-content">
<div class="dropdown-item"
:class="{'selected': isOptionSelected(option)}" v-for="option in options"
@click="selectOption(option)">
<span class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
</div>
</div>
</scrollbar>
</div>
</div>
</template>
<script>
import Dropdown from 'vuestic-directives/Dropdown'
import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
export default {
name: 'vuestic-simple-select',
components: {
Scrollbar
},
directives: {
dropdown: Dropdown
},
data () {
return {
displayValue: '',
validated: false
}
},
props: {
label: String,
options: Array,
value: {},
optionKey: String,
required: {
type: Boolean,
default: false
},
name: {
type: String,
default: 'simple-select'
}
},
mounted () {
this.updateDisplayValue(this.value)
this.$emit('input', this.value)
},
updated: function () {
this.updateDisplayValue(this.value)
},
methods: {
isOptionSelected (option) {
return this.value === option
},
selectOption (option) {
this.updateDisplayValue(option)
this.$emit('input', option)
},
updateDisplayValue (val) {
this.displayValue = this.optionKey ? val[this.optionKey] : val
},
validate () {
this.validated = true
},
isValid () {
let isValid = true
if (this.required) {
isValid = !!this.displayValue
}
return isValid
},
hasErrors () {
let hasErrors = false
if (this.required) {
hasErrors = this.validated && !this.displayValue
}
return hasErrors
},
showRequiredError () {
return `The ${this.name} field is required`
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.select-form-group {
.dropdown-toggle {
input {
color: transparent;
text-shadow: 0 0 0 #000;
cursor: pointer;
}
}
.dropdown-menu {
padding: 0;
.vuestic-scrollbar {
height: $dropdown-item-height * 4;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-slider/VuesticSlider.vue 0 → 100644
View file @ 3be931bc
<template>
<slider
v-bind="sliderOptions"
:value="value"
@input="change"
:bg-style="sliderOptions.bgStyle"
:slider-style="sliderOptions.sliderStyle"
class="vuestic-slider"
>
</slider>
</template>
<script>
import Slider from 'vue-slider-component'
import store from 'vuex-store'
export default {
name: 'vuestic-slider',
components: {
Slider
},
props: {
value: {
type: Number,
required: true
},
options: {
type: Object
}
},
data: function () {
return {
defaultOptions: {
dotSize: 16,
height: 2,
realTime: true,
sliderStyle: {
'background-color': store.getters.palette.primary,
'box-shadow': 'none'
},
processStyle: {
'background-color': store.getters.palette.primary
},
tooltipStyle: {
'background-color': store.getters.palette.primary,
'border-color': store.getters.palette.primary
}
}
}
},
computed: {
sliderOptions () {
return Object.assign({}, this.defaultOptions, this.options)
}
},
methods: {
change (value) {
this.$emit('input', value)
}
}
}
</script>
<style>
</style>
src/vuestic-theme/vuestic-components/vuestic-social-news/VuesticSocialNews.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-social-news">
<div class="d-flex justify-content-between align-items-center text-w-btn">
<span class="text">That what users have posted about your business.</span>
<a :href="url" target="_blank">
<button class="btn btn-micro btn-primary">VIEW</button>
</a>
</div>
<div class="d-flex flex-row justify-content-around photos">
<div class="photo" v-for="pieceOfNews in news" :style="`background: url(${pieceOfNews.photoURL})`"></div>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-social-news',
props: ['news', 'url']
}
</script>
<style lang="scss">
@import "../../../sass/variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
.business-posts .widget-body {
padding-left: 2rem;
padding-right: 0;
.text-w-btn {
padding-right: 1.3rem;
padding-bottom: 1.5rem;
overflow: hidden;
.text {
font-size: $font-size-base;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn {
margin-left: 1rem;
line-height: 1; //TODO: review btn styles
}
}
.photos {
padding-right: 2rem;
height: 80px;
flex-wrap: wrap;
overflow: hidden;
.photo {
background-size: cover !important;
width: 80px;
height: 80px;
margin-right: 2px;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-switch/VuesticSwitch.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-switch">
<div class="vuestic-switch-option true-option" :class="{'active': value}" @click.prevent="setValue(true)">
<slot name="trueTitle"></slot>
</div>
<div class="vuestic-switch-option false-option" :class="{'active': !value}" @click.prevent="setValue(false)">
<slot name="falseTitle"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-switch',
props: {
value: Boolean
},
mounted () {
this.$emit('input', this.value)
},
methods: {
setValue (newVal) {
this.$emit('input', newVal)
}
}
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.vuestic-switch {
cursor: pointer;
display: flex;
flex-direction: row;
.vuestic-switch-option {
padding: $vuestic-switch-padding;
border-top: $vuestic-switch-border-size solid transparent;
border-bottom: $vuestic-switch-border-size solid $vuestic-switch-bg;
background-color: transparent;
transition: all 0.15s ease;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
&.active {
color: $white;
background-color: $vuestic-switch-bg;
}
&:not(.active):hover {
color: $brand-primary;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tabs/VuesticTabs.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-tabs">
<div class="d-none d-md-block">
<nav class="nav nav-pills row">
<div class="nav-item col" v-on:click="setActive(name)"
:class="{active: name === currentActive}" v-for="name in names">
<span class="nav-link"><h5>{{name}}</h5></span>
</div>
</nav>
<div class="track"><div :class="underscoreClass"></div></div>
</div>
<vuestic-simple-select class="d-flex d-md-none d-lg-none d-xl-none simple-select" v-bind:options="names" v-model="currentActive"></vuestic-simple-select>
<div class="tab-content">
<div class="tab-pane"
:class="{active: name === currentActive}" v-for="name in names">
<slot :name="name"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-tabs',
props: ['names'],
computed: {
underscoreClass () {
return 'underscore-' + this.names.length + '-' + this.names.indexOf(this.currentActive)
}
},
methods: {
setActive (name) {
this.currentActive = name
}
},
data () {
return {
currentActive: this.names[0]
}
}
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-tabs {
background-color: white;
.simple-select {
padding-top: 1.5rem;
}
.nav {
margin: 0;
padding-top: 2.25rem;
.nav-item {
flex-grow: 1;
text-align: center;
padding: 0;
.nav-link {
padding: 0;
color: $gray;
transition: all .3s ease;
}
&:hover {
cursor: pointer;
.nav-link {
color: $vue-darkest-blue;
}
}
&.active {
.nav-link {
color: $vue-darkest-blue;
}
}
}
}
.track {
overflow: hidden;
width: 100%;
height: .125rem;
position: relative;
div[class^='underscore-']{
background-color: $brand-primary;
height: .125rem;
position: absolute;
}
$koeff: 0.8;
@for $all from 1 through 10 {
$width: 1/$all;
div[class^='underscore-#{$all}'] {
width: $width * $koeff * 100%;
transition: left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@for $place from 0 through $all {
.underscore-#{$all}-#{$place} {
left: ($place + (1 - $koeff)/2) * $width * 100%;
}
}
}
}
.tab-content {
padding-bottom: $tab-content-pb;
padding-top: $tab-content-pt;
> .tab-pane {
width: 100%
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tooltip/VuesticTooltip.vue 0 → 100644
View file @ 3be931bc
<template>
<span class="vuestic-tooltip-target" v-tooltip="tooltipOptions">
<slot></slot>
</span>
</template>
<script>
import { VTooltip } from 'v-tooltip'
export default {
name: 'vuestic-tooltip',
directives: { tooltip: VTooltip },
computed: {
tooltipOptions () {
return Object.assign({}, this.defaultOptions, this.options)
}
},
props: {
options: {
type: Object,
default: {}
}
},
data () {
return {
defaultOptions: {
classes: 'vuestic-tooltip'
}
}
}
}
</script>
<style lang='scss' scoped>
</style>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeCategory.demo.vue 0 → 100644
View file @ 3be931bc
<template>
<div style="left: 420px; top: 180px; width: 400px; background-color: white; position: absolute">
<vuestic-tree-category label="Category with icon">
<div slot="icon" class="icon">
<span aria-hidden="true" class="ion ion-md-nutrition"/>
</div>
<vuestic-tree-node>
One
</vuestic-tree-node>
<vuestic-tree-node>
Two
</vuestic-tree-node>
<vuestic-tree-node>
Three
</vuestic-tree-node>
</vuestic-tree-category>
<vuestic-tree-category label="Category open" isOpen>
<vuestic-tree-node>
One
</vuestic-tree-node>
<vuestic-tree-node>
Two
</vuestic-tree-node>
<vuestic-tree-node>
Three
</vuestic-tree-node>
</vuestic-tree-category>
</div>
</template>
<script>
import VuesticTreeCategory from './VuesticTreeCategory'
import VuesticTreeNode from './VuesticTreeNode'
export default {
components: { VuesticTreeNode, VuesticTreeCategory },
}
</script>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeCategory.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-tree-category">
<div class="vuestic-tree-category__header" @click="isOpenCached = ! isOpenCached">
<div class="vuestic-tree-category__header-checkbox">
<square-with-icon :iconClass="checkboxIconClass"/>
</div>
<div class="vuestic-tree-category__header-icon"
v-if="$slots.icon"
>
<slot name="icon"/>
</div>
<div class="vuestic-tree-category__header-label">
{{ label }}
</div>
</div>
<div class="vuestic-tree-category__list-container" v-if="isOpenCached">
<div class="vuestic-tree-category__list-internal-container">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import SquareWithIcon from './vuestic-div-checkbox/SquareWithIcon.vue'
import VuesticCheckbox from '../vuestic-checkbox/VuesticCheckbox'
export default {
name: 'vuestic-tree-category',
components: { SquareWithIcon, VuesticCheckbox },
data () {
return {
isOpenCached: false,
}
},
watch: {
isOpen: {
handler (isOpen) {
this.isOpenCached = isOpen
},
immediate: true,
},
},
props: {
label: {
type: [String, Number],
default: '',
},
isOpen: {
type: Boolean,
default: false,
},
},
computed: {
checkboxIconClass () {
return this.isOpenCached ? 'ion ion-md-remove' : 'ion ion-md-add'
},
},
methods: {
/**
* @public
*/
collapse () {
this.isOpenCached = false
this.$nextTick(() => {
this.$children.forEach(child => {
if (child.$options.name === 'vuestic-tree-category') {
child.collapse()
}
})
})
},
/**
* @public
*/
expand () {
this.isOpenCached = true
this.$nextTick(() => {
this.$children.forEach(child => {
if (child.$options.name === 'vuestic-tree-category') {
child.expand()
}
})
})
},
},
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-tree-category {
&__header {
cursor: pointer;
display: flex;
}
&__header-checkbox {
margin-right: 0.75rem;
}
&__header-icon {
margin-right: 0.375rem;
}
&__header-label {
word-wrap: break-word;
overflow: hidden;
}
&__list-container {
margin-top: 0.625rem;
padding-left: 0.6875rem;
}
&__list-internal-container {
border-left: dashed 0.0625rem $lighter-gray;
padding-left: 1.5rem;
}
// List items require padding. Somewhat hacky, but the only remaining option is using render functions.
.vuestic-tree-category + .vuestic-tree-category, .vuestic-tree-node + .vuestic-tree-node, .vuestic-tree-category + .vuestic-tree-node, .vuestic-tree-node + .vuestic-tree-category {
margin-top: 0.625rem;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNode.demo.vue 0 → 100644
View file @ 3be931bc
<template>
<div
style="left: 420px; top: 180px; background-color: white; position: absolute"
>
<vuestic-tree-node>
<vuestic-checkbox
slot="checkbox"
v-model="checkboxValue"
/>
<div slot="icon" class="icon">
<span aria-hidden="true"
class="ion ion-md-nutrition"
/>
</div>
Some text
</vuestic-tree-node>
</div>
</template>
<script>
import VuesticTreeNode from './VuesticTreeNode.vue'
import VuesticCheckbox from '../vuestic-checkbox/VuesticCheckbox'
export default {
components: {
VuesticTreeNode,
VuesticCheckbox,
},
data () {
return {
checkboxValue: false,
}
},
}
</script>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNode.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-tree-node"
:class="{'vuestic-tree-node-selected': selected}"
>
<div class="vuestic-tree-node-checkbox" v-if="$slots.checkbox">
<slot name="checkbox"/>
</div>
<div class="vuestic-tree-node-icon" v-if="$slots.icon">
<slot name="icon"/>
</div>
<div class="vuestic-tree-node-label">
<slot/>
</div>
<div class="vuestic-tree-node-icon-right" v-if="$slots.iconRight">
<slot name="iconRight"/>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-tree-node',
props: {
selected: {
type: Boolean,
default: false,
},
},
}
</script>
<style lang="scss">
@import "../../../sass/variables";
.vuestic-tree-node {
.form-group {
margin-bottom: 0px;
}
display: flex;
&-checkbox {
margin-right: 0.75rem;
}
&-icon {
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.375rem;
}
&-icon-right {
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.375rem;
}
&-label {
flex-grow: 1;
word-wrap: break-word;
overflow: hidden;
}
&-selected #{&}-label {
background-color: $vue-light-green;
}
// HACK Checkbox for presentation page
.vuestic-checkbox {
margin-bottom: 0;
margin-top: -0.125rem;
margin-right: -0.625rem;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRoot.demo.vue 0 → 100644
View file @ 3be931bc
<template>
<div
style="left: 420px; top: 180px; background-color: white; position: absolute"
>
<button class="btn btn-primary btn-sm" @click="$refs.treeView.expand()">
EXPAND ALL
</button>
<button class="btn btn-primary btn-sm" @click="$refs.treeView.collapse()">
COLLAPSE ALL
</button>
<vuestic-tree-root
ref="treeView"
>
<vuestic-tree-category
label="Category text"
isOpen
>
<vuestic-tree-node>
Node text
</vuestic-tree-node>
<vuestic-tree-node>
Node text
</vuestic-tree-node>
</vuestic-tree-category>
</vuestic-tree-root>
</div>
</template>
<script>
import VuesticTreeRoot from './VuesticTreeRoot.vue'
import VuesticTreeNode from './VuesticTreeNode'
import VuesticTreeCategory from './VuesticTreeCategory'
export default {
components: { VuesticTreeCategory, VuesticTreeNode, VuesticTreeRoot },
}
</script>
src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRoot.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="vuestic-tree-root">
<slot/>
</div>
</template>
<script>
export default {
name: 'vuestic-tree-root',
methods: {
/**
* @public
*/
collapse () {
this.$nextTick(() => {
this.$children.forEach(child => {
if (child.$options.name === 'vuestic-tree-category') {
child.collapse()
}
})
})
},
/**
* @public
*/
expand () {
this.$nextTick(() => {
this.$children.forEach(child => {
if (child.$options.name === 'vuestic-tree-category') {
child.expand()
}
})
})
},
}
}
</script>
<style lang="scss">
.vuestic-tree-root {
padding: 0.3125rem;
// List items require padding. Somewhat hacky, but the only remaining option is using render functions.
.vuestic-tree-category + .vuestic-tree-category, .vuestic-tree-node + .vuestic-tree-node, .vuestic-tree-category + .vuestic-tree-node, .vuestic-tree-node + .vuestic-tree-category {
margin-top: 0.625rem;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tree-view/vuestic-div-checkbox/SquareWithIcon.demo.vue 0 → 100644
View file @ 3be931bc
<template>
<div
style="left: 420px; top: 180px; background-color: white; position: absolute"
>
<square-with-icon iconClass="ion ion-md-checkmark"/>
</div>
</template>
<script>
import SquareWithIcon from './SquareWithIcon.vue'
export default {
components: {SquareWithIcon}
}
</script>
src/vuestic-theme/vuestic-components/vuestic-tree-view/vuestic-div-checkbox/SquareWithIcon.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="square-with-icon">
<span class="icon">
<i :class="iconClass" aria-hidden="true"/>
</span>
</div>
</template>
<script>
export default {
name: 'square-with-icon',
props: {
iconClass: {
type: String,
required: true
}
}
}
</script>
<style lang="scss">
@import "../../../../sass/variables";
.square-with-icon {
display: flex;
justify-content: center;
align-items: center;
height: 1.375rem;
width: 1.375rem;
color: $white;
background-color: $vue-green;
}
</style>
src/vuestic-theme/vuestic-components/vuestic-tree-view/vuestic-tree-view-readme.md 0 → 100644
View file @ 3be931bc
```html
<vuestic-tree-view
showIcons
:vuesticTreeRoot="treeViewRoot"
/>
```
```javascript
import VuesticTreeViewRootMapper from '~vuestic-admin/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRootMapper.js'
data () {
vuesticTreeRoot: VuesticTreeRootMapper.map([
{
label: 'Open category',
isOpen: true,
children: [
{
label: 'Custom icon',
icon: 'ion ion-md-flower'
},
{
label: 'Selected',
selected: true
},
{
label: 'Nested category',
children: [
{
label: 'Nested item',
}
]
}
]
},
{ label: 'Another item' },
])
}
```
* **showIcons**: _boolean_ -- Show icons. This applies to custom icons as well
* **vuesticTreeRoot**: _VuesticTreeRoot_ -- Object representing the tree view. You can expose it and modify externally. Tree will follow the changes.
[Find DEMOs here!](http://vuestic.epicmax.co/#/ui/tree-view)
src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue 0 → 100644
View file @ 3be931bc
<template>
<div class="widget" :class="{'no-header': !headerText}">
<div class="widget-header" v-if="headerText">{{headerText}}</div>
<div class="widget-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'vuestic-widget',
props: ['headerText']
}
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.widget {
background: $widget-bg;
box-shadow: $widget-box-shadow;
margin-bottom: $widget-mb;
padding: 0;
&.no-header {
.widget-body {
height: $widget-body-no-header-height;
}
}
&.larger-padding {
.widget-body {
padding: $widget-larger-padding;
}
}
&.no-h-padding {
.widget-body {
padding-left: 0;
padding-right: 0;
}
}
&.no-v-padding {
.widget-body {
padding-top: 0;
padding-bottom: 0;
}
}
&.brand-info {
background-color: $brand-info;
color: $white;
box-shadow: $widget-info-shadow;
}
&.brand-danger {
background-color: $brand-danger;
color: $white;
box-shadow: $widget-danger-shadow;
}
&.info-widget {
border-top: $info-widget-border;
&.brand-info {
border-top-color: $brand-info;
}
&.brand-danger {
border-top-color: $brand-danger;
}
}
.widget-body {
height: $widget-body-with-header-height;
padding: $widget-padding;
}
.widget-header {
height: $widget-header-height;
padding: 0 $widget-padding;
border-bottom: $widget-header-border;
font-size: $font-size-larger;
font-weight: 600;
display: flex;
align-items: center;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue 0 → 100644
View file @ 3be931bc
<template>
<div
class="wizard"
:class="computedLayout"
v-orientation-handler="{ layout: wizardLayout, breakPoint: orientationBreakPoint }">
<div v-if="computedLayout === 'horizontal'" class="indicator-container indicator-container-horizontal">
<simple-horizontal-indicator v-if="wizardType === 'simple'" :steps="steps" :currentStep="currentStep" :completed="wizardCompleted"></simple-horizontal-indicator>
<rich-horizontal-indicator v-if="wizardType === 'rich'" :steps="steps" :currentStep="currentStep" :completed="wizardCompleted"></rich-horizontal-indicator>
</div>
<div v-if="computedLayout === 'vertical'" class="indicator-container indicator-container-vertical">
<rich-vertical-indicator v-if="wizardType === 'rich'" :steps="steps" :currentStep="currentStep" :completed="wizardCompleted"></rich-vertical-indicator>
<simple-vertical-indicator v-if="wizardType === 'simple'" :steps="steps" :currentStep="currentStep" :completed="wizardCompleted"></simple-vertical-indicator>
</div>
<div class="wizard-body">
<div class="wizard-body-step" v-for="step in steps" v-show="isStepShown(step)">
<slot :name="step.slot" class="step-content"></slot>
</div>
<div class="wizard-body-step" v-show="wizardCompleted">
<slot :name="wizardCompletedSlotName" class="step-content"></slot>
</div>
<div class="wizard-body-actions" v-if="!wizardCompleted">
<div class="btn-container" v-if="backEnabled">
<button class="btn btn-secondary wizard-back pull-left" @click.prevent="goBack()">
Back
</button>
</div>
<div class="btn-container" v-if="!isLastStep()">
<button class="btn btn-primary wizard-next pull-right" @click.prevent="goNext()">
Next
</button>
</div>
<div class="btn-container" v-if="currentStep == steps.length - 1">
<button class="btn btn-primary wizard-next pull-right final-step" @click.prevent="completeWizard()">
{{lastStepLabel}}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import SimpleHorizontalIndicator from './indicators/SimpleHorizontalIndicator.vue'
import RichHorizontalIndicator from './indicators/RichHorizontalIndicator.vue'
import RichVerticalIndicator from './indicators/RichVerticalIndicator.vue'
import SimpleVerticalIndicator from './indicators/SimpleVerticalIndicator.vue'
import WizardOrientationHandler from './WizardOrientationHandler'
export default {
name: 'vuestic-wizard',
props: {
steps: {},
wizardType: {
type: String,
default: 'simple'
},
wizardLayout: {
type: String,
default: 'horizontal'
},
lastStepLabel: {default: 'Confirm'},
onNext: {},
onBack: {}
},
data () {
return {
currentStep: 0,
wizardCompleted: false,
wizardCompletedSlotName: 'wizardCompleted',
orientationBreakPoint: 767, // TODO: into config,
computedLayout: this.wizardLayout
}
},
components: {
SimpleHorizontalIndicator,
RichHorizontalIndicator,
RichVerticalIndicator,
SimpleVerticalIndicator
},
directives: {
orientationHandler: WizardOrientationHandler
},
computed: {
currentSlot () {
let slotName = this.steps[this.currentStep].slot
if (this.wizardCompleted) {
slotName = this.wizardCompletedSlotName
}
return slotName
},
backEnabled () {
return this.currentStep !== 0
}
},
created () {
this.$on('wizardLayoutChange', this.updateLayout)
},
methods: {
updateLayout (layout) {
this.computedLayout = layout
},
goNext () {
this.currentStepOnNext()
if (!this.isLastStep() && this.isCurrentStepValid()) {
this.currentStep++
}
},
goBack () {
this.currentStepOnBack()
if (this.currentStep > 0) {
this.currentStep--
}
},
completeWizard () {
this.wizardCompleted = true
this.$emit('wizardComplete')
this.goNext()
},
isLastStep () {
return this.currentStep === this.steps.length - 1
},
currentStepOnNext () {
let step = this.steps[this.currentStep]
if (step.onNext) {
step.onNext()
}
},
currentStepOnBack () {
let step = this.steps[this.currentStep]
if (step.onBack) {
step.onBack()
}
},
isCurrentStepValid () {
return this.steps[this.currentStep].isValid()
},
isStepShown (step) {
return step.slot === this.currentSlot && !this.wizardCompleted
},
resetWizard () {
this.currentStep = 0
this.wizardCompleted = false
this.$emit('wizardReset')
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../sass/_variables.scss";
$wizard-body-vl-step-h-padding: 7%;
$wizard-indicator-vl-width: 20rem;
$wizard-body-vl-min-height: 20rem;
$wizard-body-hl-step-h-padding: 15%;
$wizard-body-step-v-padding: 2.25rem;
$wizard-body-step-item-margin-bottom: $wizard-body-step-v-padding;
.wizard {
position: relative;
width: 100%;
display: flex;
&.horizontal {
flex-direction: column;
}
&.vertical {
flex-direction: row;
}
}
.wizard-body{
position: relative;
}
.wizard-body-step{
> * {
display: flex;
flex-direction: column;
align-items: center;
> * {
margin-bottom: $wizard-body-step-item-margin-bottom;
}
> *:last-child {
margin-bottom: 0;
}
}
}
.wizard-body-actions{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: baseline;
.btn-container {
margin: $wizard-body-step-item-margin-bottom $wizard-body-step-item-margin-bottom/2 0 $wizard-body-step-item-margin-bottom/2;
}
}
.vertical {
.wizard-body {
min-height: $wizard-body-vl-min-height;
display: flex;
flex-direction: column;
justify-content: center;
padding: $wizard-body-step-v-padding $wizard-body-vl-step-h-padding;
width: 100%; // IE11 only
}
.indicator-container {
flex-basis: $wizard-indicator-vl-width;
max-width: $wizard-indicator-vl-width;
flex-grow: 0;
flex-shrink: 0;
position: relative;
}
}
.horizontal {
.wizard-body {
padding: $wizard-body-step-v-padding $wizard-body-hl-step-h-padding;
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-wizard/WizardOrientationHandler.js 0 → 100644
View file @ 3be931bc
export default {
bind (el, binding, vnode) {
const HORIZONTAL_LAYOUT = 'horizontal'
const VERTICAL_LAYOUT = 'vertical'
const initialLayout = binding.value.layout
const breakpoint = binding.value.breakPoint
let wizardLayout = initialLayout
const handleResize = () => {
let width = window.innerWidth
let layout = width <= breakpoint ? HORIZONTAL_LAYOUT : VERTICAL_LAYOUT
if (wizardLayout !== layout) {
wizardLayout = layout
vnode.context.$emit('wizardLayoutChange', wizardLayout)
}
}
if (initialLayout === VERTICAL_LAYOUT) {
handleResize()
window.addEventListener('resize', handleResize)
}
}
}
src/vuestic-theme/vuestic-components/vuestic-wizard/indicators/RichHorizontalIndicator.vue 0 → 100644
View file @ 3be931bc
<template>
<ul class="wizard-steps horizontal-steps rich-steps" :class="{'completed': completed}">
<li class="wizard-step" :class="{'active': currentStep >= index, 'current': currentStep === index}" :style="{ width: 100/steps.length + '%' }" v-for="(step, index) of steps">
<i class="ion ion-md-close step-icon icon-cross"></i>
<i class="ion ion-md-checkmark step-icon icon-check"></i>
<span class="wizard-step-label ellipsis">{{step.label}}</span>
<span class="wizard-step-line"></span>
</li>
</ul>
</template>
<script>
export default {
name: 'vuestic-wizard-rich-horizontal-indicator',
props: {
steps: {
type: Array,
default: []
},
currentStep: {
type: Number,
default: 0
},
completed: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
$wizard-step-height: 5.5rem;
$wizard-step-label-font-size: $font-size-h4;
$wizard-step-padding-v: 0;
$wizard-step-padding-h: 0.315rem;
$wizard-step-icon-height: 2.25rem;
$wizard-step-icon-fs: 3.125rem;
$wizard-step-ion-icon-alignment: 0.5rem;
$wizard-label-width: 100%;
$wizard-label-padding: 0 0.6rem;
.wizard-steps{
list-style-type: none;
padding: $wizard-step-padding-v $wizard-step-padding-h;
height: $wizard-step-height;
position: relative;
}
.wizard-step{
height: $wizard-step-height;
padding: $wizard-step-padding-v $wizard-step-padding-h;
color: $lighter-gray;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: color 300ms linear;
.wizard-step-line{
width: 100%;
height: 2px;
background-color: $lighter-gray;
transition: background-color 300ms linear;
}
.wizard-step-label{
display: inline-block;
width: $wizard-label-width;
padding: $wizard-label-padding;
text-align: center;
font-size: $wizard-step-label-font-size;
font-weight: bold;
@include media-breakpoint-only(sm) {
font-size: $font-size-larger;
}
@include media-breakpoint-only(xs) {
font-size: $font-size-base;
}
}
.step-icon {
font-size: $wizard-step-icon-fs;
height: $wizard-step-icon-height;
position: relative;
top: $wizard-step-ion-icon-alignment;
&.icon-cross {
display: block;
}
&.icon-check {
display: none;
}
&::before {
position: relative;
top: -$wizard-step-ion-icon-alignment;
}
}
&.active {
color: $brand-primary;
.wizard-step-line{
background-color: $brand-primary;
}
&:not(.current), .completed &.current {
.step-icon.icon-cross {
display: none;
}
.step-icon.icon-check {
display: block;
}
}
&.current {
color: $vue-darkest-blue;
}
.completed &.current {
color: $brand-primary;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-wizard/indicators/RichVerticalIndicator.vue 0 → 100644
View file @ 3be931bc
<template>
<ul class="wizard-steps horizontal-steps rich-steps" :class="{'completed': completed}">
<li class="wizard-step" :class="{'active': currentStep >= index, 'current': currentStep === index}" :style="{ height: 100/steps.length + '%' }" v-for="(step, index) of steps">
<span class="wizard-step-line"></span>
<i class="ion ion-md-close step-icon icon-cross"></i>
<i class="ion ion-md-checkmark step-icon icon-check"></i>
<span class="wizard-step-label ellipsis">{{step.label}}</span>
</li>
</ul>
</template>
<script>
export default {
name: 'vuestic-wizard-rich-horizontal-indicator',
props: {
steps: {
type: Array,
default: []
},
currentStep: {
type: Number,
default: 0
},
completed: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../sass/_variables.scss";
$wizard-steps-height: 100%;
$wizard-steps-width: 100%;
$wizard-step-label-font-size: $font-size-h4;
$wizard-steps-padding: 0;
$wizard-step-padding: 0.625rem 0;
$wizard-step-icon-height: 2.25rem;
$wizard-step-icon-fs: 3.125rem;
$wizard-step-ion-icon-alignment: 0.5rem;
$wizard-step-inner-item-ml: 1.25rem;
.wizard-steps{
list-style-type: none;
padding: $wizard-steps-padding;
height: $wizard-steps-height;
width: $wizard-steps-width;
position: absolute;
top: 0;
bottom: 0;
}
.wizard-step{
padding: $wizard-step-padding;
color: $lighter-gray;
display: flex;
flex-direction: row;
align-items: center;
transition: color 300ms linear;
.wizard-step-line{
width: 2px;
height: 100%;
background-color: $lighter-gray;
transition: background-color 300ms linear;
}
.wizard-step-label{
margin-left: $wizard-step-inner-item-ml;
font-size: $wizard-step-label-font-size;
font-weight: bold;
}
.step-icon {
font-size: $wizard-step-icon-fs;
height: $wizard-step-icon-height;
margin-left: $wizard-step-inner-item-ml;
&.icon-cross {
display: block;
}
&.icon-check {
display: none;
}
&::before {
position: relative;
top: -$wizard-step-ion-icon-alignment;
}
}
&.active {
color: $brand-primary;
.wizard-step-line{
background-color: $brand-primary;
}
&:not(.current), .completed &.current {
.step-icon.icon-cross {
display: none;
}
.step-icon.icon-check {
display: block;
}
}
&.current {
color: $vue-darkest-blue;
}
.completed &.current {
color: $brand-primary;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-wizard/indicators/SimpleHorizontalIndicator.vue 0 → 100644
View file @ 3be931bc
<template>
<ul class="wizard-steps horizontal-steps simple-steps" :class="{'completed': completed}">
<li class="wizard-step" :class="{'active': currentStep >= index, 'current': currentStep === index}" :style="{ width: 100/steps.length + '%' }" v-for="(step, index) of steps">
<span class="wizard-step-line"></span>
<span class="wizard-step-line completed-line"></span>
<span class="wizard-step-label ellipsis">{{step.label}}</span>
<span class="wizard-step-indicator"></span>
</li>
</ul>
</template>
<script>
export default {
name: 'vuestic-wizard-simple-horizontal-indicator',
props: {
steps: {
type: Array,
default: []
},
currentStep: {
type: Number,
default: 0
},
completed: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../sass/_variables.scss";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
$wizard-step-height: 3.75rem;
$wizard-step-indicator-height: 1rem;
$wizard-step-label-font-size: $font-size-h4;
$wizard-label-width: 100%;
$wizard-label-padding: 0 0.6rem;
.wizard-steps{
list-style-type: none;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
padding: 0;
height: $wizard-step-height;
position: relative;
}
.wizard-step{
height: $wizard-step-height;
vertical-align: bottom;
display: inline-block;
text-align: center;
position: relative;
.wizard-step-line{
position: absolute;
width: 100%;
left: -50%;
bottom: 12px;
height: 2px;
background-color: $lighter-gray;
transition: background-color 300ms linear;
&.completed-line {
display: none;
width: 50%;
left: 50%
}
}
.wizard-step-indicator{
box-sizing: content-box;
display: block;
width: $wizard-step-indicator-height;
height: $wizard-step-indicator-height;
background-color: $lighter-gray;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -7px;
bottom: 5px;
z-index: 1;
transition: background-color 300ms linear;
}
.wizard-step-label{
display: inline-block;
width: $wizard-label-width;
padding: $wizard-label-padding;
color: $lighter-gray;
font-size: $wizard-step-label-font-size;
font-weight: bold;
transition: color 300ms linear;
@include media-breakpoint-only(sm) {
font-size: $font-size-larger;
}
@include media-breakpoint-only(xs) {
font-size: $font-size-base;
}
}
&:first-child {
.wizard-step-line {
width: 50%;
left: 0;
}
}
&:last-child {
.wizard-step-line {
&.completed-line {
display: block;
}
}
}
&.active {
.wizard-step-indicator{
background-color: $brand-primary;
}
.wizard-step-line:not(.completed-line), .completed & .wizard-step-line {
background-color: $brand-primary;
}
.wizard-step-label, .completed &.current .wizard-step-label {
color: $brand-primary;
}
&.current .wizard-step-label {
color: $vue-darkest-blue;
}
}
}
</style>
src/vuestic-theme/vuestic-components/vuestic-wizard/indicators/SimpleVerticalIndicator.vue 0 → 100644
View file @ 3be931bc
<template>
<ul class="wizard-steps horizontal-steps simple-steps" :class="{'completed': completed}">
<li class="wizard-step" :class="{'active': currentStep >= index, 'current': currentStep === index}" :style="{ height: 100/steps.length + '%' }" v-for="(step, index) of steps">
<span class="wizard-step-line"></span>
<span class="wizard-step-line completed-line"></span>
<span class="wizard-step-label ellipsis">{{step.label}}</span>
<span class="wizard-step-indicator"></span>
</li>
</ul>
</template>
<script>
export default {
name: 'vuestic-wizard-simple-horizontal-indicator',
props: {
steps: {
type: Array,
default: []
},
currentStep: {
type: Number,
default: 0
},
completed: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../../sass/variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
$wizard-steps-height: 100%;
$wizard-steps-width: 100%;
$wizard-steps-p-v: 2.5rem;
$wizard-steps-p-h: 0;
$wizard-step-indicator-height: 1rem;
$wizard-step-label-font-size: $font-size-h4;
$wizard-step-label-m-l: 2rem;
$wizard-label-width: 100%;
.wizard-steps{
list-style-type: none;
padding: $wizard-steps-p-v $wizard-steps-p-h;
height: $wizard-steps-height;
width: $wizard-steps-width;
position: absolute;
top: 0;
bottom: 0;
}
.wizard-step{
vertical-align: bottom;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
.wizard-step-line{
position: absolute;
height: 100%;
width: 2px;
left: 0;
top: -50%;
background-color: $lighter-gray;
transition: background-color 300ms linear;
&.completed-line {
display: none;
}
}
.wizard-step-indicator{
box-sizing: content-box;
display: block;
width: $wizard-step-indicator-height;
height: $wizard-step-indicator-height;
background-color: $lighter-gray;
border-radius: 50%;
position: absolute;
left: 0;
top: calc(50% - #{$wizard-step-indicator-height}/2);
margin-left: -7px;
bottom: 5px;
z-index: 1;
transition: background-color 300ms linear;
}
.wizard-step-label{
color: $lighter-gray;
display: inline-block;
width: $wizard-label-width;
font-size: $wizard-step-label-font-size;
font-weight: bold;
margin-left: $wizard-step-label-m-l;
transition: color 300ms linear;
}
&:first-child {
.wizard-step-line {
height: calc(50% + #{$wizard-steps-p-v});
top: -$wizard-steps-p-v;
}
}
&:last-child {
.wizard-step-line {
height: 100%;
top: -50%;
&.completed-line {
display: block;
top: 50%;
height: calc(50% + #{$wizard-steps-p-v})
}
}
}
&.active {
.wizard-step-indicator{
background-color: $brand-primary;
}
.wizard-step-line:not(.completed-line), .completed & .wizard-step-line {
background-color: $brand-primary;
}
.wizard-step-label {
color: $brand-primary;
}
.wizard-step-label, .completed &.current .wizard-step-label {
color: $brand-primary;
}
&.current .wizard-step-label {
color: $vue-darkest-blue;
}
}
}
</style>
src/vuestic-theme/vuestic-directives/Dropdown.js 0 → 100644
View file @ 3be931bc
export default {
bind: function (el, binding) {
let ddToggle = el.querySelector('.dropdown-toggle')
let ddMenu = el.querySelector('.dropdown-menu')
let closeOnMenuClick = binding.modifiers.closeOnMenuClick
ddToggle.addEventListener('click', function (evt) {
evt.preventDefault()
let isShown = el.classList.contains('show')
setTimeout(() => {
el.classList.toggle('show', !isShown)
ddMenu.classList.toggle('show', !isShown)
})
})
window.addEventListener('click', function () {
el.classList.remove('show')
ddMenu.classList.remove('show')
})
ddMenu.addEventListener('click', function (evt) {
if (!closeOnMenuClick) {
evt.stopPropagation()
}
})
}
}
src/vuestic-theme/vuestic-directives/StickyScroll.js 0 → 100644
View file @ 3be931bc
export default {
bind: (el, binding) => {
let duration = binding.value.duration || 500
let isAnimated = binding.value.animate
let observer = new MutationObserver(scrollToBottom)
let config = { childList: true }
observer.observe(el, config)
function animateScroll (duration) {
let start = el.scrollTop
let end = el.scrollHeight
let change = end - start
let increment = 20
function easeInOut (currentTime, start, change, duration) {
currentTime /= duration / 2
if (currentTime < 1) {
return change / 2 * currentTime * currentTime + start
}
currentTime -= 1
return -change / 2 * (currentTime * (currentTime - 2) - 1) + start
}
function animate (elapsedTime) {
elapsedTime += increment
var position = easeInOut(elapsedTime, start, change, duration)
el.scrollTop = position
if (elapsedTime < duration) {
setTimeout(function () {
animate(elapsedTime)
}, increment)
}
}
animate(0)
}
function scrollToBottom () {
if (isAnimated) {
animateScroll(duration)
} else {
el.scrollTop = el.scrollHeight
}
}
}
}
src/vuestic-theme/vuestic-mixins/VuesticToasted.js 0 → 100644
View file @ 3be931bc
import Toasted from 'vue-toasted'
import Vue from 'vue'
const toastOptions = {
theme: 'none',
position: 'bottom-center',
className: 'vuestic-toast',
iconPack: 'fontawesome',
duration: 2500
}
Vue.use(Toasted, toastOptions)
export default {
methods: {
showToast (msg, options) {
this.$toasted.show(msg, options)
}
}
}
src/vuestic-theme/vuestic-plugin.js 0 → 100644
View file @ 3be931bc
import Alert from './vuestic-components/vuestic-alert/VuesticAlert.vue'
import Breadcrumbs
from './vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue'
import Chart from './vuestic-components/vuestic-chart/VuesticChart.vue'
import Chat from './vuestic-components/vuestic-chat/VuesticChat.vue'
import Checkbox from './vuestic-components/vuestic-checkbox/VuesticCheckbox.vue'
import DataTable
from './vuestic-components/vuestic-datatable/VuesticDataTable.vue'
import Feed from './vuestic-components/vuestic-feed/VuesticFeed.vue'
import MediumEditor
from './vuestic-components/vuestic-medium-editor/VuesticMediumEditor.vue'
import Modal from './vuestic-components/vuestic-modal/VuesticModal.vue'
import MultiSelect
from './vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue'
import Popover from './vuestic-components/vuestic-popover/VuesticPopover.vue'
import PreLoader
from './vuestic-components/vuestic-preloader/VuesticPreLoader.vue'
import ProfileCard
from './vuestic-components/vuestic-profile-card/VuesticProfileCard.vue'
import ProgressBar
from './vuestic-components/vuestic-progress-bar/VuesticProgressBar.vue'
import RadioButton
from './vuestic-components/vuestic-radio-button/VuesticRadioButton.vue'
import Scrollbar
from './vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue'
import SimpleSelect
from './vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue'
import Slider from './vuestic-components/vuestic-slider/VuesticSlider.vue'
import SocialNews
from './vuestic-components/vuestic-social-news/VuesticSocialNews.vue'
import Switch from './vuestic-components/vuestic-switch/VuesticSwitch.vue'
import Tabs from './vuestic-components/vuestic-tabs/VuesticTabs.vue'
import Tooltip from './vuestic-components/vuestic-tooltip/VuesticTooltip.vue'
import Widget from './vuestic-components/vuestic-widget/VuesticWidget.vue'
import Wizard from './vuestic-components/vuestic-wizard/VuesticWizard.vue'
import TreeRoot from './vuestic-components/vuestic-tree-view/VuesticTreeRoot'
import TreeCategory
from './vuestic-components/vuestic-tree-view/VuesticTreeCategory'
import TreeNode from './vuestic-components/vuestic-tree-view/VuesticTreeNode'
import DatePicker from './vuestic-components/vuestic-date-picker/VuesticDatePicker'
import VuesticToasted from './vuestic-mixins/VuesticToasted'
import Dropdown from './vuestic-directives/Dropdown'
import StickyScroll from './vuestic-directives/StickyScroll'
const VuesticPlugin = {
install (Vue, options) {
[
Alert,
Breadcrumbs,
Chart,
Chat,
Checkbox,
DataTable,
Feed,
Modal,
MultiSelect,
PreLoader,
ProfileCard,
ProgressBar,
RadioButton,
Scrollbar,
SimpleSelect,
Slider,
SocialNews,
Switch,
Tabs,
Widget,
Wizard,
MediumEditor,
Tooltip,
Popover,
TreeRoot,
TreeCategory,
TreeNode,
DatePicker,
].forEach(component => {
Vue.component(component.name, component)
})
Vue.mixin(VuesticToasted)
Vue.directive('dropdown', Dropdown)
Vue.directive('sticky-scroll', StickyScroll)
}
}
export default VuesticPlugin
yarn.lock 0 → 100644
View file @ 3be931bc
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment