├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── CHANGELOG.en-US.md ├── LICENCE.md ├── README.md ├── build ├── bin │ ├── build-entry.js │ ├── i18n.js │ └── version.js ├── build.js ├── check-versions.js ├── config.js ├── cooking.conf.js ├── cooking.demo.js ├── dev-client.js ├── dev-server.js ├── strip-tags.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── components.json ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── documentation ├── app.vue ├── assets │ ├── images │ │ ├── Axure-Components.svg │ │ ├── Module.svg │ │ ├── Sketch-Template.svg │ │ ├── apple-icon.png │ │ ├── avatar.jpg │ │ ├── banner-bg.svg │ │ ├── bg1.jpg │ │ ├── bg11.jpg │ │ ├── bg3.jpg │ │ ├── bg4.jpg │ │ ├── bg5.jpg │ │ ├── bg6.jpg │ │ ├── bg7.jpg │ │ ├── bg8.jpg │ │ ├── blurred-image-1.jpg │ │ ├── component.png │ │ ├── consistency.png │ │ ├── controllability.png │ │ ├── creative-tim-white-slim2.png │ │ ├── default-avatar.png │ │ ├── efficiency.png │ │ ├── element-demo.jpeg │ │ ├── element-logo-small.svg │ │ ├── element-logo.svg │ │ ├── eva.jpg │ │ ├── favicon.png │ │ ├── feedback.png │ │ ├── flags │ │ │ ├── AD.png │ │ │ ├── AE.png │ │ │ ├── AG.png │ │ │ ├── AM.png │ │ │ ├── AR.png │ │ │ ├── AT.png │ │ │ ├── AU.png │ │ │ ├── BE.png │ │ │ ├── BF.png │ │ │ ├── BG.png │ │ │ ├── BO.png │ │ │ ├── BR.png │ │ │ ├── CA.png │ │ │ ├── CD.png │ │ │ ├── CG.png │ │ │ ├── CH.png │ │ │ ├── CL.png │ │ │ ├── CM.png │ │ │ ├── CN.png │ │ │ ├── CO.png │ │ │ ├── CZ.png │ │ │ ├── DE.png │ │ │ ├── DJ.png │ │ │ ├── DK.png │ │ │ ├── DZ.png │ │ │ ├── EE.png │ │ │ ├── EG.png │ │ │ ├── ES.png │ │ │ ├── FI.png │ │ │ ├── FR.png │ │ │ ├── GA.png │ │ │ ├── GB.png │ │ │ ├── GM.png │ │ │ ├── GT.png │ │ │ ├── HN.png │ │ │ ├── HT.png │ │ │ ├── HU.png │ │ │ ├── ID.png │ │ │ ├── IE.png │ │ │ ├── IL.png │ │ │ ├── IN.png │ │ │ ├── IQ.png │ │ │ ├── IR.png │ │ │ ├── IT.png │ │ │ ├── JM.png │ │ │ ├── JO.png │ │ │ ├── JP.png │ │ │ ├── KG.png │ │ │ ├── KN.png │ │ │ ├── KP.png │ │ │ ├── KR.png │ │ │ ├── KW.png │ │ │ ├── KZ.png │ │ │ ├── LA.png │ │ │ ├── LB.png │ │ │ ├── LC.png │ │ │ ├── LS.png │ │ │ ├── LU.png │ │ │ ├── LV.png │ │ │ ├── MG.png │ │ │ ├── MK.png │ │ │ ├── ML.png │ │ │ ├── MM.png │ │ │ ├── MT.png │ │ │ ├── MX.png │ │ │ ├── NA.png │ │ │ ├── NE.png │ │ │ ├── NG.png │ │ │ ├── NI.png │ │ │ ├── NL.png │ │ │ ├── NO.png │ │ │ ├── OM.png │ │ │ ├── PA.png │ │ │ ├── PE.png │ │ │ ├── PG.png │ │ │ ├── PK.png │ │ │ ├── PL.png │ │ │ ├── PT.png │ │ │ ├── PY.png │ │ │ ├── QA.png │ │ │ ├── RO.png │ │ │ ├── RU.png │ │ │ ├── RW.png │ │ │ ├── SA.png │ │ │ ├── SE.png │ │ │ ├── SG.png │ │ │ ├── SL.png │ │ │ ├── SN.png │ │ │ ├── SO.png │ │ │ ├── SV.png │ │ │ ├── TD.png │ │ │ ├── TJ.png │ │ │ ├── TL.png │ │ │ ├── TR.png │ │ │ ├── TZ.png │ │ │ ├── UA.png │ │ │ ├── US.png │ │ │ ├── VE.png │ │ │ ├── VN.png │ │ │ └── YE.png │ │ ├── guide.png │ │ ├── hamburger.png │ │ ├── header.jpg │ │ ├── hero-image-1.png │ │ ├── hero-image-2.png │ │ ├── hero-image-3.png │ │ ├── invision-white-slim.png │ │ ├── landing.jpg │ │ ├── login.jpg │ │ ├── logo-square.jpg │ │ ├── logo.png │ │ ├── navbar_0.png │ │ ├── navbar_1.png │ │ ├── navbar_2.png │ │ ├── navbar_3.png │ │ ├── now-logo.png │ │ ├── nucleo-logo.svg │ │ ├── profile.jpg │ │ ├── qrcode.png │ │ ├── resource.png │ │ ├── ryan.jpg │ │ └── stars.png │ ├── restaurants.json │ └── styles │ │ ├── common.css │ │ ├── demo.css │ │ └── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── nucleo-outline.woff │ │ ├── nucleo-outline.woff2 │ │ └── style.css ├── components │ ├── demo-block.vue │ ├── footer-nav.vue │ ├── footer.vue │ ├── header.vue │ └── side-nav.vue ├── docs │ └── en-US │ │ ├── alert.md │ │ ├── button.md │ │ ├── checkbox.md │ │ ├── dropdown.md │ │ ├── icon.md │ │ ├── input.md │ │ ├── installation.md │ │ ├── label.md │ │ ├── modal.md │ │ ├── navbar.md │ │ ├── pagination.md │ │ ├── radio.md │ │ ├── slider.md │ │ ├── tabs.md │ │ └── toggle.md ├── dom │ └── class.js ├── entry.js ├── favicon.ico ├── i18n │ ├── component.json │ ├── page.json │ ├── route.json │ └── title.json ├── icon.json ├── index.tpl ├── nav.config.json ├── pages │ └── en-US │ │ ├── changelog.vue │ │ ├── component.vue │ │ ├── header.jpg │ │ ├── index.vue │ │ └── nav.vue ├── play.js ├── play │ ├── component.vue │ └── index.vue ├── route.config.js └── versions.json ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── logo.png │ └── sass │ │ ├── now-ui-kit.scss │ │ ├── now-ui-kit │ │ ├── _alerts.scss │ │ ├── _badges.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _carousel.scss │ │ ├── _checkboxes-radio.scss │ │ ├── _dropdown.scss │ │ ├── _example-pages.scss │ │ ├── _footers.scss │ │ ├── _images.scss │ │ ├── _inputs.scss │ │ ├── _misc.scss │ │ ├── _mixins.scss │ │ ├── _modals.scss │ │ ├── _navbar.scss │ │ ├── _nucleo-outline.scss │ │ ├── _pagination.scss │ │ ├── _pills.scss │ │ ├── _popups.scss │ │ ├── _progress.scss │ │ ├── _responsive.scss │ │ ├── _sections.scss │ │ ├── _social-buttons.scss │ │ ├── _tabs.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ ├── bootstrap │ │ │ ├── _input.scss │ │ │ ├── _variables.scss │ │ │ └── mixins │ │ │ │ ├── _border-radius.scss │ │ │ │ └── _hover.scss │ │ ├── mixins │ │ │ ├── _badges.scss │ │ │ ├── _buttons.scss │ │ │ ├── _datepicker.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _inputs.scss │ │ │ ├── _modals.scss │ │ │ ├── _pages.scss │ │ │ ├── _popovers.scss │ │ │ ├── _transparency.scss │ │ │ └── _vendor-prefixes.scss │ │ └── plugins │ │ │ ├── _plugin-bootstrap-switch.scss │ │ │ ├── _plugin-datepicker.scss │ │ │ └── _plugin-nouislider.scss │ │ ├── nucleo-outline-stripped.fcp │ │ ├── nucleo-outline.eot │ │ ├── nucleo-outline.ttf │ │ ├── nucleo-outline.woff │ │ └── nucleo-outline.woff2 ├── components │ ├── Alert │ │ ├── Alert.vue │ │ └── index.js │ ├── Button │ │ ├── Button.js │ │ ├── Button.vue │ │ └── index.js │ ├── Checkbox │ │ ├── Checkbox.vue │ │ └── index.js │ ├── Dropdown │ │ ├── Dropdown.vue │ │ ├── DropdownItem.vue │ │ ├── DropdownMenu.vue │ │ └── index.js │ ├── Icon │ │ ├── Icon.vue │ │ └── index.js │ ├── Input │ │ ├── Input.vue │ │ └── index.js │ ├── Label │ │ ├── Label.vue │ │ └── index.js │ ├── Modal │ │ ├── Modal.vue │ │ └── index.js │ ├── Navbar │ │ ├── NavMenuItem.js │ │ ├── Navbar.js │ │ └── index.js │ ├── Pagination │ │ ├── Pagination.vue │ │ └── index.js │ ├── Progress │ │ ├── Progress.vue │ │ └── index.js │ ├── Radio │ │ ├── Radio.vue │ │ └── index.js │ ├── Slider │ │ └── Slider.vue │ ├── Tabs │ │ ├── TabItem.vue │ │ ├── Tabs.vue │ │ └── index.js │ ├── Toggle │ │ ├── Toggle.vue │ │ └── index.js │ └── utils │ │ └── index.js ├── docs │ ├── MainContent.vue │ ├── NavBar.vue │ ├── TopNavBar.vue │ ├── helpers │ │ └── DemoBlock.vue │ └── rows │ │ ├── Paginations.vue │ │ ├── Progress.vue │ │ └── Textareas.vue ├── index.js └── main.js ├── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ │ └── test.js └── unit │ ├── .eslintrc │ ├── index.js │ ├── karma.conf.js │ └── specs │ └── Hello.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "es2015" 5 | ], 6 | "plugins": ["transform-runtime","transform-vue-jsx"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | extends: 'standart', 13 | // required to lint *.vue files 14 | plugins: [ 15 | 'html' 16 | ], 17 | // check if imports actually resolve 18 | 'settings': { 19 | 'import/resolver': { 20 | 'webpack': { 21 | 'config': 'build/webpack.base.conf.js' 22 | } 23 | } 24 | }, 25 | // add your custom rules here 26 | rules: { 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | test/unit/coverage 7 | test/e2e/reports 8 | selenium-debug.log 9 | dist/ 10 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /CHANGELOG.en-US.md: -------------------------------------------------------------------------------- 1 | ## Changelog 2 | -------------------------------------------------------------------------------- /LICENCE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Cristi Jora 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # now-ui 2 | 3 | > Vue components for now-ui 4 | Work in progress 5 | ## [Roadmap & Progress](https://github.com/cristijora/vue-now-ui/projects/1) 6 | ## Build Setup 7 | 8 | ``` bash 9 | # install dependencies 10 | npm install 11 | 12 | # serve with hot reload at localhost:8080 13 | npm run dev 14 | 15 | # build for production with minification 16 | npm run build 17 | 18 | # build for production and view the bundle analyzer report 19 | npm run build --report 20 | 21 | # run unit tests 22 | npm run unit 23 | 24 | # run e2e tests 25 | npm run e2e 26 | 27 | # run all tests 28 | npm test 29 | ``` 30 | 31 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 32 | -------------------------------------------------------------------------------- /build/bin/build-entry.js: -------------------------------------------------------------------------------- 1 | var Components = require('../../components.json') 2 | var fs = require('fs') 3 | var render = require('json-templater/string') 4 | var uppercamelcase = require('uppercamelcase') 5 | var path = require('path') 6 | var endOfLine = require('os').EOL 7 | 8 | var OUTPUT_PATH = path.join(__dirname, '../../src/index.js') 9 | var IMPORT_TEMPLATE = 'import {{name}} from \'../src/components/{{package}}/index.js\'' 10 | var INSTALL_COMPONENT_TEMPLATE = ' {{name}}' 11 | var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */ 12 | 13 | {{include}} 14 | const plugins = [ 15 | {{install}} 16 | ] 17 | const install = function(Vue, opts = {}) { 18 | /* istanbul ignore if */ 19 | if (install.installed) return 20 | 21 | plugins.map(plugin => { 22 | Vue.use(plugin) 23 | }) 24 | } 25 | 26 | /* istanbul ignore if */ 27 | if (typeof window !== 'undefined' && window.Vue) { 28 | install(window.Vue) 29 | } 30 | 31 | export default { 32 | version: '{{version}}', 33 | install, 34 | {{list}} 35 | } 36 | ` 37 | 38 | delete Components.font 39 | 40 | var ComponentNames = Object.keys(Components) 41 | 42 | var includeComponentTemplate = [] 43 | var installTemplate = [] 44 | var listTemplate = [] 45 | 46 | ComponentNames.forEach(name => { 47 | var componentName = uppercamelcase(name) 48 | 49 | includeComponentTemplate.push(render(IMPORT_TEMPLATE, { 50 | name: componentName, 51 | package: name 52 | })) 53 | 54 | if (['Loading', 'MessageBox', 'Notification', 'Message'].indexOf(componentName) === -1) { 55 | installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, { 56 | name: componentName, 57 | component: name 58 | })) 59 | } 60 | 61 | if (componentName !== 'Loading') listTemplate.push(` ${componentName}`) 62 | }) 63 | 64 | var template = render(MAIN_TEMPLATE, { 65 | include: includeComponentTemplate.join(endOfLine), 66 | install: installTemplate.join(',' + endOfLine), 67 | version: process.env.VERSION || require('../../package.json').version, 68 | list: listTemplate.join(',' + endOfLine) 69 | }) 70 | 71 | fs.writeFileSync(OUTPUT_PATH, template) 72 | console.log('[build entry] DONE:', OUTPUT_PATH) 73 | 74 | -------------------------------------------------------------------------------- /build/bin/i18n.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var fs = require('fs') 4 | var path = require('path') 5 | var langConfig = require('../../documentation/i18n/page.json') 6 | 7 | langConfig.forEach(lang => { 8 | try { 9 | fs.statSync(path.resolve(__dirname, `../../documentation/pages/${lang.lang}`)) 10 | } catch (e) { 11 | fs.mkdirSync(path.resolve(__dirname, `../../documentation/pages/${lang.lang}`)) 12 | } 13 | 14 | Object.keys(lang.pages).forEach(page => { 15 | var templatePath = path.resolve(__dirname, `../../documentation/pages/template/${page}.tpl`) 16 | var outputPath = path.resolve(__dirname, `../../documentation/pages/${lang.lang}/${page}.vue`) 17 | var content = fs.readFileSync(templatePath, 'utf8'); 18 | var pairs = lang.pages[page]; 19 | 20 | Object.keys(pairs).forEach(key => { 21 | content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]) 22 | }) 23 | 24 | fs.writeFileSync(outputPath, content) 25 | }) 26 | }) 27 | -------------------------------------------------------------------------------- /build/bin/version.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var path = require('path') 3 | var version = process.env.VERSION || require('../../package.json').version 4 | var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2' } 5 | if (!content[version]) content[version] = '1.3' 6 | fs.writeFileSync(path.resolve(__dirname, '../../documentation/versions.json'), JSON.stringify(content)) 7 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var fs = require('fs'); 3 | var nodeExternals = require('webpack-node-externals'); 4 | var Components = require('../components.json'); 5 | 6 | 7 | /*Object.keys(Components).forEach(function(key) { 8 | externals[`element-ui/packages/${key}`] = `element-ui/lib/${key}`; 9 | });*/ 10 | 11 | 12 | externals = [Object.assign({ 13 | vue: 'vue' 14 | }), nodeExternals()]; 15 | 16 | exports.externals = externals; 17 | 18 | exports.alias = { 19 | src: path.resolve(__dirname, '../src'), 20 | main: path.resolve(__dirname, '../src'), 21 | '@': path.resolve(__dirname,'../src'), 22 | '@sass': path.resolve(__dirname, '../src/assets/sass'), 23 | 'now-ui': path.resolve(__dirname, '../') 24 | }; 25 | 26 | exports.vue = { 27 | root: 'Vue', 28 | commonjs: 'vue', 29 | commonjs2: 'vue', 30 | amd: 'vue' 31 | }; 32 | -------------------------------------------------------------------------------- /build/cooking.conf.js: -------------------------------------------------------------------------------- 1 | var cooking = require('cooking'); 2 | var config = require('./config'); 3 | 4 | cooking.set({ 5 | entry: './src/index.js', 6 | dist: './lib', 7 | clean: false, 8 | format: 'umd', 9 | moduleName: 'ELEMENT', 10 | extends: ['vue2'], 11 | alias: config.alias, 12 | externals: { vue: config.vue } 13 | }); 14 | 15 | cooking.add('output.filename', 'index.js'); 16 | cooking.add('loader.js.exclude', config.jsexclude); 17 | cooking.add('vue.preserveWhitespace', false); 18 | module.exports = cooking.resolve(); 19 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = process.env.NODE_ENV === 'testing' 14 | ? require('./webpack.prod.conf') 15 | : require('./webpack.dev.conf') 16 | 17 | // default port where dev server listens for incoming traffic 18 | var port = process.env.PORT || config.dev.port 19 | // automatically open browser, if not set will be false 20 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 21 | // Define HTTP proxies to your custom API backend 22 | // https://github.com/chimurai/http-proxy-middleware 23 | var proxyTable = config.dev.proxyTable 24 | 25 | var app = express() 26 | var compiler = webpack(webpackConfig) 27 | 28 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 29 | publicPath: webpackConfig.output.publicPath, 30 | quiet: true 31 | }) 32 | 33 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 34 | log: () => {} 35 | }) 36 | // force page reload when html-webpack-plugin template changes 37 | compiler.plugin('compilation', function (compilation) { 38 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 39 | hotMiddleware.publish({ action: 'reload' }) 40 | cb() 41 | }) 42 | }) 43 | 44 | // proxy api requests 45 | Object.keys(proxyTable).forEach(function (context) { 46 | var options = proxyTable[context] 47 | if (typeof options === 'string') { 48 | options = { target: options } 49 | } 50 | app.use(proxyMiddleware(options.filter || context, options)) 51 | }) 52 | 53 | // handle fallback for HTML5 history API 54 | app.use(require('connect-history-api-fallback')()) 55 | 56 | // serve webpack bundle output 57 | app.use(devMiddleware) 58 | 59 | // enable hot-reload and state-preserving 60 | // compilation error display 61 | app.use(hotMiddleware) 62 | 63 | // serve pure static assets 64 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 65 | app.use(staticPath, express.static('./static')) 66 | 67 | var uri = 'http://localhost:' + port 68 | 69 | var _resolve 70 | var readyPromise = new Promise(resolve => { 71 | _resolve = resolve 72 | }) 73 | 74 | console.log('> Starting dev server...') 75 | devMiddleware.waitUntilValid(() => { 76 | console.log('> Listening at ' + uri + '\n') 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | _resolve() 82 | }) 83 | 84 | var server = app.listen(port) 85 | 86 | module.exports = { 87 | ready: readyPromise, 88 | close: () => { 89 | server.close() 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /build/strip-tags.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * strip-tags 3 | * 4 | * Copyright (c) 2015 Jon Schlinkert, contributors. 5 | * Licensed under the MIT license. 6 | */ 7 | 8 | 'use strict'; 9 | 10 | var cheerio = require('cheerio'); 11 | 12 | exports.strip = function(str, tags) { 13 | var $ = cheerio.load(str, {decodeEntities: false}); 14 | 15 | if (!tags || tags.length === 0) { 16 | return str; 17 | } 18 | 19 | tags = !Array.isArray(tags) ? [tags] : tags; 20 | var len = tags.length; 21 | 22 | while (len--) { 23 | $(tags[len]).remove(); 24 | } 25 | 26 | return $.html(); 27 | }; 28 | 29 | exports.fetch = function(str, tag) { 30 | var $ = cheerio.load(str, {decodeEntities: false}); 31 | if (!tag) return str; 32 | 33 | return $(tag).html(); 34 | }; 35 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | '@': resolve('src'), 25 | '@sass': resolve('src/assets/sass') 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.(js|vue)$/, 32 | loader: 'eslint-loader', 33 | enforce: 'pre', 34 | include: [resolve('src'), resolve('test')], 35 | options: { 36 | formatter: require('eslint-friendly-formatter') 37 | } 38 | }, 39 | { 40 | test: /\.vue$/, 41 | loader: 'vue-loader', 42 | options: vueLoaderConfig 43 | }, 44 | { 45 | test: /\.js$/, 46 | loader: 'babel-loader', 47 | include: [resolve('src'), resolve('test')] 48 | }, 49 | { 50 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 51 | loader: 'url-loader', 52 | options: { 53 | limit: 10000, 54 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 55 | } 56 | }, 57 | { 58 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 59 | loader: 'url-loader', 60 | options: { 61 | limit: 10000, 62 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 63 | } 64 | } 65 | ] 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | // This is the webpack config used for unit tests. 2 | 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseConfig = require('./webpack.base.conf') 7 | 8 | var webpackConfig = merge(baseConfig, { 9 | // use inline sourcemap for karma-sourcemap-loader 10 | module: { 11 | rules: utils.styleLoaders() 12 | }, 13 | devtool: '#inline-source-map', 14 | resolveLoader: { 15 | alias: { 16 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 17 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 18 | 'scss-loader': 'sass-loader' 19 | } 20 | }, 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': require('../config/test.env') 24 | }) 25 | ] 26 | }) 27 | 28 | // no need for app entry during tests 29 | delete webpackConfig.entry 30 | 31 | module.exports = webpackConfig 32 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": "./src/components/Button/index.js", 3 | "checkbox": "./src/components/Checkbox/index.js", 4 | "radio": "./src/components/Radio/index.js", 5 | "toggle": "./src/components/Toggle/index.js", 6 | "dropdown": "./src/components/Dropdown/index.js", 7 | "input": "./src/components/Input/index.js", 8 | "pagination": "./src/components/Pagination/index.js", 9 | "progress": "./src/components/Progress/index.js", 10 | "label": "./src/components/Label/index.js", 11 | "navbar": "./src/components/Navbar/index.js", 12 | "icon": "./src/components/Icon/index.js", 13 | "alert": "./src/components/Alert/index.js", 14 | "modal": "./src/components/Modal/index.js", 15 | "tabs": "./src/components/Tabs/index.js" 16 | } 17 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /documentation/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/apple-icon.png -------------------------------------------------------------------------------- /documentation/assets/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/avatar.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg1.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg11.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg3.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg4.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg5.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg6.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg7.jpg -------------------------------------------------------------------------------- /documentation/assets/images/bg8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/bg8.jpg -------------------------------------------------------------------------------- /documentation/assets/images/blurred-image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/blurred-image-1.jpg -------------------------------------------------------------------------------- /documentation/assets/images/component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/component.png -------------------------------------------------------------------------------- /documentation/assets/images/consistency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/consistency.png -------------------------------------------------------------------------------- /documentation/assets/images/controllability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/controllability.png -------------------------------------------------------------------------------- /documentation/assets/images/creative-tim-white-slim2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/creative-tim-white-slim2.png -------------------------------------------------------------------------------- /documentation/assets/images/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/default-avatar.png -------------------------------------------------------------------------------- /documentation/assets/images/efficiency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/efficiency.png -------------------------------------------------------------------------------- /documentation/assets/images/element-demo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/element-demo.jpeg -------------------------------------------------------------------------------- /documentation/assets/images/element-logo-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /documentation/assets/images/eva.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/eva.jpg -------------------------------------------------------------------------------- /documentation/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/favicon.png -------------------------------------------------------------------------------- /documentation/assets/images/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/feedback.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AD.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/AU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/AU.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/BE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/BE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/BF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/BF.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/BG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/BG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/BO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/BO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/BR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/BR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CD.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CH.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/CZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/CZ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/DE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/DE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/DJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/DJ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/DK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/DK.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/DZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/DZ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/EE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/EE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/EG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/EG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/ES.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/ES.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/FI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/FI.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/FR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/FR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/GA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/GA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/GB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/GB.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/GM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/GM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/GT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/GT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/HN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/HN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/HT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/HT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/HU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/HU.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/ID.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/ID.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IQ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/IT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/IT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/JM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/JM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/JO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/JO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/JP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/JP.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KP.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KW.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/KZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/KZ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LB.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LC.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LS.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LU.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/LV.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/LV.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/MG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/MG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/MK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/MK.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/ML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/ML.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/MM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/MM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/MT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/MT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/MX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/MX.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NI.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/NO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/NO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/OM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/OM.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PK.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PT.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/PY.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/PY.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/QA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/QA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/RO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/RO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/RU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/RU.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/RW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/RW.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SG.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SO.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/SV.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/SV.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/TD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/TD.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/TJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/TJ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/TL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/TL.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/TR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/TR.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/TZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/TZ.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/UA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/UA.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/US.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/VE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/VE.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/VN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/VN.png -------------------------------------------------------------------------------- /documentation/assets/images/flags/YE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/flags/YE.png -------------------------------------------------------------------------------- /documentation/assets/images/guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/guide.png -------------------------------------------------------------------------------- /documentation/assets/images/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/hamburger.png -------------------------------------------------------------------------------- /documentation/assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/header.jpg -------------------------------------------------------------------------------- /documentation/assets/images/hero-image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/hero-image-1.png -------------------------------------------------------------------------------- /documentation/assets/images/hero-image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/hero-image-2.png -------------------------------------------------------------------------------- /documentation/assets/images/hero-image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/hero-image-3.png -------------------------------------------------------------------------------- /documentation/assets/images/invision-white-slim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/invision-white-slim.png -------------------------------------------------------------------------------- /documentation/assets/images/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/landing.jpg -------------------------------------------------------------------------------- /documentation/assets/images/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/login.jpg -------------------------------------------------------------------------------- /documentation/assets/images/logo-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/logo-square.jpg -------------------------------------------------------------------------------- /documentation/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/logo.png -------------------------------------------------------------------------------- /documentation/assets/images/navbar_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/navbar_0.png -------------------------------------------------------------------------------- /documentation/assets/images/navbar_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/navbar_1.png -------------------------------------------------------------------------------- /documentation/assets/images/navbar_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/navbar_2.png -------------------------------------------------------------------------------- /documentation/assets/images/navbar_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/navbar_3.png -------------------------------------------------------------------------------- /documentation/assets/images/now-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/now-logo.png -------------------------------------------------------------------------------- /documentation/assets/images/nucleo-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/assets/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/profile.jpg -------------------------------------------------------------------------------- /documentation/assets/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/qrcode.png -------------------------------------------------------------------------------- /documentation/assets/images/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/resource.png -------------------------------------------------------------------------------- /documentation/assets/images/ryan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/ryan.jpg -------------------------------------------------------------------------------- /documentation/assets/images/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/images/stars.png -------------------------------------------------------------------------------- /documentation/assets/styles/common.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/styles/fonts/icomoon.eot -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/styles/fonts/icomoon.ttf -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/styles/fonts/icomoon.woff -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/nucleo-outline.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/styles/fonts/nucleo-outline.woff -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/nucleo-outline.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/assets/styles/fonts/nucleo-outline.woff2 -------------------------------------------------------------------------------- /documentation/assets/styles/fonts/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('icomoon.eot?h6xgdm'); 4 | src: url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'), 5 | url('icomoon.ttf?h6xgdm') format('truetype'), 6 | url('icomoon.woff?h6xgdm') format('woff'), 7 | url('icomoon.svg?h6xgdm#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-rate-face-off:before { 28 | content: "\e900"; 29 | } 30 | .icon-rate-face-1:before { 31 | content: "\e901"; 32 | } 33 | .icon-rate-face-2:before { 34 | content: "\e902"; 35 | } 36 | .icon-rate-face-3:before { 37 | content: "\e903"; 38 | } 39 | 40 | -------------------------------------------------------------------------------- /documentation/components/footer-nav.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 64 | 65 | 124 | -------------------------------------------------------------------------------- /documentation/components/footer.vue: -------------------------------------------------------------------------------- 1 | 57 | 88 | 89 | 111 | -------------------------------------------------------------------------------- /documentation/components/header.vue: -------------------------------------------------------------------------------- 1 | 13 | 50 | -------------------------------------------------------------------------------- /documentation/docs/en-US/alert.md: -------------------------------------------------------------------------------- 1 | ## Alert 2 | 3 | ### Type 4 | 5 | ::: demo Alert provides 4 themes defined by the `type` attribute. 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | ``` 13 | ::: 14 | 15 | ### With descprtion 16 | 17 | ::: demo Alert provides 4 themes defined by the `type` attribute. 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | ``` 25 | ::: 26 | 27 | ### Hide icon 28 | 29 | :::demo Use `show-icon` prop to configure the visibility of the icon 30 | 31 | ```html 32 | 33 | ``` 34 | ::: 35 | 36 | ### Unclosable 37 | 38 | :::demo Use `closable` props to configure the visibility of close button, the default value is `true` 39 | ```html 40 | 41 | ``` 42 | ::: 43 | 44 | 45 | ### Attributes 46 | | Attribute | Description | Type | Accepted values | Default | 47 | |---------- |-------- |---------- |-------------------- |----- | 48 | | title | alert title | string | — | — | 49 | | type | alert type | string | success/warning/danger/info | info | 50 | | description | alert description | string | — | — | 51 | | closable | show close button | boolean | true/false | true | 52 | | show-icon | show alert icon | boolean | true/false | true | 53 | -------------------------------------------------------------------------------- /documentation/docs/en-US/button.md: -------------------------------------------------------------------------------- 1 | 6 | ## Button 7 | 8 | We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete. 9 | 10 | ### Colors 11 | 12 | ::: demo Button provides 7 themes defined by the `type` attribute. 13 | 14 | ```html 15 | Default 16 | Primary 17 | Info 18 | Success 19 | Warning 20 | Danger 21 | Neutral 22 | ``` 23 | ::: 24 | 25 | ### Sizes 26 | 27 | Buttons come in all needed sizes: 28 | 29 | :::demo Use `size` prop to configure the size of a button 30 | 31 | ```html 32 | Large 33 | Normal 34 | Small 35 | ``` 36 | ::: 37 | 38 | ### Styles 39 | 40 | We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples: 41 | 42 | :::demo Use `round` and `simple` props to configure the shape of your buttons or `icon` and `icon-mini` to specify whether your button is an icon button.All the props used here are Boolean props 43 | ```html 44 | Default 45 | Round 46 | 47 | With Icon 48 | 49 | 50 | 51 | 52 | Simple 53 | ``` 54 | ::: 55 | 56 | 57 | 58 | ### Attributes 59 | | Attribute | Description | Type | Accepted values | Default | 60 | |---------- |-------- |---------- |-------------------- |----- | 61 | | size | button size | string | lg/sm | — | 62 | | type | button type | string | default/primary/success/warning/ danger/info/neutral | — | 63 | | simple | determine whether it's a plain button | Boolean | — | false | 64 | | round | makes the button round | boolean | — | false | 65 | | disabled | disable the button | boolean | — | false | 66 | | icon | determine if it's an icon button | boolean | — | false | 67 | | iconMini | determine if it's a rounded icon button | boolean | — | false | 68 | | tag | render the button as a custom html tag | string | any valid html tag | button | 69 | -------------------------------------------------------------------------------- /documentation/docs/en-US/checkbox.md: -------------------------------------------------------------------------------- 1 | 6 | 23 | 24 | ## Checkboxes 25 | 26 | ### Basic 27 | 28 | ::: demo Easy to use checkbox components with v-model. Bind the checkbox state together with `v-model` which should be a Boolean variable 29 | 30 | ```html 31 | Checkbox 32 | 41 | ``` 42 | ::: 43 | 44 | ### Disabled 45 | 46 | Checkboxes can be disabled 47 | 48 | :::demo Use `disabled` prop to make a checkbox disabled 49 | ```html 50 | Checkbox 1 51 | Checkbox 2 52 | 62 | ``` 63 | ::: 64 | 65 | ### Colors 66 | 67 | Same as buttons, checkboxes can have different colors depending on their `type` prop 68 | 69 | :::demo Use `round` and `simple` props to configure the shape of your buttons or `icon` and `icon-mini` to specify whether your button is an icon button.All the props used here are Boolean props 70 | ```html 71 | Primary 72 | Info 73 | Warning 74 | Success 75 | Danger 76 | 89 | ``` 90 | ::: 91 | 92 | 93 | 94 | ### Attributes 95 | | Attribute | Description | Type | Accepted values | Default | 96 | |---------- |-------- |---------- |-------------------- |----- | 97 | | type | checkbox type (colors) | string | neutral/primary/info/success/ warning/danger | neutral | 98 | | disabled | disable the checkbox | boolean | — | false | 99 | | checked | | determines the state of the checkbox (part of v-model) | boolean | false | 100 | 101 | ### Checkbox Events 102 | | Event Name | Description | Parameters | 103 | |---------- |-------- |---------- | 104 | | change | triggers when the binding value changes | checked value of checkbox | 105 | -------------------------------------------------------------------------------- /documentation/docs/en-US/dropdown.md: -------------------------------------------------------------------------------- 1 | 6 | ## Dropdowns 7 | 8 | We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags. 9 | 10 | ## Basic 11 | 12 | 13 | ::: demo Basic toggle button 14 | 15 | ```html 16 | 17 | 18 | Regular 19 | 20 | 21 | Action 22 | Another action 23 | Something else here 24 | 25 | 26 | 35 | ``` 36 | ::: 37 | -------------------------------------------------------------------------------- /documentation/docs/en-US/icon.md: -------------------------------------------------------------------------------- 1 | ## Icons 2 | 3 | Now UI Kit comes with 100 custom icons made by NucleoApp. The official package contains over 2.100 thin icons which are looking great in combination with Now UI Kit Make sure you check all of them and use those that you like the most. 4 | 5 | 6 | 7 | View Demo Icons 8 | 9 | 10 | 11 | 12 | 13 | View all icons 14 | 15 | 16 | 17 | ### Usage Example 18 | 19 | ::: demo Icon defined by `name` attribute. 20 | 21 | ```html 22 | 23 | 24 | ``` 25 | ::: 26 | 27 | 28 | ### Spin icon 29 | 30 | ::: demo with `spin` attibute you can set the icon spin 31 | 32 | ```html 33 | 34 | ``` 35 | ::: 36 | 37 | ### Custom size 38 | 39 | ::: demo You can set custom size with `size` attribute, default size is `25px` 40 | 41 | ```html 42 | 43 | 44 | ``` 45 | ::: 46 | 47 | 48 | ### Attributes 49 | | Attribute | Description | Type | Accepted values | Default | 50 | |---------- |-------- |---------- |-------------------- |----- | 51 | | name | icon name | string | — | — | 52 | | spin | set icon spin | boolean | — | — | 53 | -------------------------------------------------------------------------------- /documentation/docs/en-US/installation.md: -------------------------------------------------------------------------------- 1 | ## Installation 2 | 3 | Coming soon... 4 | 5 | -------------------------------------------------------------------------------- /documentation/docs/en-US/label.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Label 8 | Colored labels with the html tag you want 9 | 10 | ### Basic 11 | 12 | ::: demo Colored labels 13 | 14 | ```html 15 | Default 16 | Orange 17 | Green 18 | Blue 19 | Yellow 20 | Red 21 | ``` 22 | ::: 23 | 24 | ### Render with a custom tag 25 | 26 | ::: demo Choose a different html tag 27 | 28 | ```html 29 | Div 30 | Input 31 | ``` 32 | ::: 33 | 34 | 35 | ### Input Attributes 36 | | Attribute | Description | Type | Accepted values | Default | 37 | |---------- |-------- |---------- |-------------------- |----- | 38 | | type | determines label color | string | default/primary/info/success/ warning/danger | default(gray) | 39 | | tag | determines the tag of the label | string | any html tag (although not all might look ok) | span | 40 | 41 | ### Input Events 42 | | Event Name | Description | Parameters | 43 | |---------- |-------- |---------- | 44 | | input | triggers when the binding value changes | input value | 45 | -------------------------------------------------------------------------------- /documentation/docs/en-US/modal.md: -------------------------------------------------------------------------------- 1 | ### Modal 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /documentation/docs/en-US/navbar.md: -------------------------------------------------------------------------------- 1 | 6 | 15 | 16 | ## Pagination 17 | 18 | ### Basic 19 | Ever wanted to have pagination with just a v-model ? 20 | 21 | ::: demo Simple pagination 22 | 23 | ```html 24 | 25 |
Navbar
26 | Home 27 | Link 28 | Disabled 29 | 30 | ``` 31 | ::: 32 | 33 | ### Colors 34 | 35 | You can specify the color of your navbar through the `type` prop. 36 | 37 | You can also color the navbar only after scrolling certain amount of pixels through `color-on-scroll` prop 38 | Specify `color-on-scrol="500"` for example and your navbar will be transparent until you reach 500 pixels from page top. 39 | See 40 | 43 | as a reference 44 | ::: demo Handle navbar color throw `type` prop 45 | 46 | ```html 47 | 48 |
Navbar
49 | Home 50 | Link 51 | Disabled 52 | 53 | 54 |
Navbar
55 | Home 56 | Link 57 | Disabled 58 | 59 | 60 |
Navbar
61 | Home 62 | Link 63 | Disabled 64 | 65 | 66 |
Navbar
67 | Home 68 | Link 69 | Disabled 70 | 71 | 72 |
Navbar
73 | Home 74 | Link 75 | Disabled 76 | 77 | ``` 78 | ::: 79 | 80 | 81 | ### Navbar attributes 82 | | Attribute | Description | Type | Accepted values | Default | 83 | |---------- |-------- |---------- |-------------------- |----- | 84 | | type | navbar type (colors) | string | white/primary/info/success/ warning/danger | white | 85 | | color-on-scroll | colors the navbar at the specified pixel value | number | number > 0 | 0 | 86 | 87 | ### MenuItem attributes 88 | | Attribute | Description | Type | Accepted values | Default | 89 | |---------- |-------- |---------- |-------------------- |----- | 90 | | active | determines whether the menu-item is active | boolean | true/false | false | 91 | | disabled | determines whether the menu-item is disabled | boolean | true/false | false | 92 | 93 | -------------------------------------------------------------------------------- /documentation/docs/en-US/pagination.md: -------------------------------------------------------------------------------- 1 | 6 | 15 | 16 | ## Radio buttons 17 | 18 | ### Basic 19 | 20 | ::: demo Initialize the pagination component with a `total` prop which determines how many pages there are in total and with a `v-model` which will bind the selected page automatically 21 | 22 | ```html 23 | 24 | 31 | ``` 32 | ::: 33 | 34 | 35 | ### Navbar attributes 36 | | Attribute | Description | Type | Accepted values | Default | 37 | |---------- |-------- |---------- |-------------------- |----- | 38 | | type | navbar type (colors) | string | white/primary/info/success/ warning/danger | white | 39 | | color-on-scroll | colors the navbar at the specified pixel value | number | number > 0 | 0 | 40 | 41 | ### MenuItem attributes 42 | | Attribute | Description | Type | Accepted values | Default | 43 | |---------- |-------- |---------- |-------------------- |----- | 44 | | active | determines whether the menu-item is active | boolean | true/false | false | 45 | | disabled | determines whether the menu-item is disabled | boolean | true/false | false | 46 | 47 | -------------------------------------------------------------------------------- /documentation/docs/en-US/radio.md: -------------------------------------------------------------------------------- 1 | 6 | 17 | 18 | ## Radio buttons 19 | 20 | ### Basic 21 | 22 | ::: demo Pretty, easy to use radio buttons 23 | 24 | ```html 25 | Option 1 26 | Option 2 27 | 36 | ``` 37 | ::: 38 | 39 | ### Disabled 40 | 41 | Radio buttons can be disabled 42 | 43 | :::demo Use `disabled` prop to make a radio button disabled 44 | ```html 45 | Disabled radio is off 46 | Disabled radio is on 47 | 56 | ``` 57 | ::: 58 | 59 | ### Colors 60 | 61 | Check each radio to see how the color of the radio button change when it's active 62 | 63 | :::demo Use `type` prop to change the color of an active radio button 64 | ```html 65 | Primary 66 | Info 67 | Success 68 | Warning 69 | Danger 70 | 79 | ``` 80 | ::: 81 | 82 | ### Attributes 83 | | Attribute | Description | Type | Accepted values | Default | 84 | |---------- |-------- |---------- |-------------------- |----- | 85 | | type | radio type (colors) | string | neutral/primary/info/success/ warning/danger | neutral | 86 | | disabled | disable the radio | boolean/string | — | — | 87 | | label | Value of each radio button | | string/number | — | 88 | 89 | ### Radio Events 90 | | Event Name | Description | Parameters | 91 | |---------- |-------- |---------- | 92 | | change | triggers when the binding value changes | current value of radio v-model | 93 | -------------------------------------------------------------------------------- /documentation/docs/en-US/slider.md: -------------------------------------------------------------------------------- 1 | ## Slider 2 | 3 | Cooming soon... -------------------------------------------------------------------------------- /documentation/docs/en-US/tabs.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | ### Tabs 10 | ::: demo Simple tabs with content 11 | 12 | ```html 13 | 14 | 15 | Config 16 | 17 | 18 | Role 19 | 20 | 21 | ``` 22 | ::: 23 | 24 | ### With header background 25 | 26 | ::: demo Tabs with background on card 27 | 28 | ```html 29 | 30 | 31 | Config 32 | 33 | 34 | Role 35 | 36 | 37 | ``` 38 | ::: 39 | 40 | 41 | ### Attributes 42 | | Attribute | Description | Type | Accepted values | Default | 43 | |---------- |-------- |---------- |-------------------- |----- | 44 | | label | tab label | string required | — | — | 45 | | background | tabs background color | string (hex o rgb color) | #fff | 46 | | centered | centers tabs inside tab-header | boolean | false | 47 | -------------------------------------------------------------------------------- /documentation/docs/en-US/toggle.md: -------------------------------------------------------------------------------- 1 | 6 | 17 | ## Toggle Buttons 18 | 19 | ### Basic 20 | 21 | ::: demo Basic toggle button 22 | 23 | ```html 24 | 25 | 34 | ``` 35 | ::: 36 | 37 | 38 | ### With text or icons 39 | 40 | ::: demo You can customize on/off text both with props and slots 41 | 42 | ```html 43 | 44 | 45 | 46 | 47 | 48 | 58 | ``` 59 | ::: 60 | -------------------------------------------------------------------------------- /documentation/dom/class.js: -------------------------------------------------------------------------------- 1 | export const hasClass = function(obj, cls) { 2 | return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 3 | }; 4 | 5 | export const addClass = function(obj, cls) { 6 | if (!hasClass(obj, cls)) obj.className += ' ' + cls; 7 | }; 8 | 9 | export const removeClass = function(obj, cls) { 10 | if (hasClass(obj, cls)) { 11 | const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 12 | obj.className = obj.className.replace(reg, ' '); 13 | } 14 | }; 15 | 16 | export const toggleClass = function(obj, cls) { 17 | if (hasClass(obj, cls)) { 18 | removeClass(obj, cls); 19 | } else { 20 | addClass(obj, cls); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /documentation/entry.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'element-ui' 3 | import App from './app' 4 | import VueRouter from 'vue-router' 5 | import routes from './route.config' 6 | import NowUI from 'src/index.js' 7 | import demoBlock from './components/demo-block.vue' 8 | import MainFooter from './components/footer.vue' 9 | import MainHeader from './components/header.vue' 10 | import SideNav from './components/side-nav' 11 | 12 | Vue.use(VueRouter) 13 | Vue.use(NowUI) 14 | Vue.use(Element) 15 | Vue.component('demo-block', demoBlock) 16 | Vue.component('main-footer', MainFooter) 17 | Vue.component('main-header', MainHeader) 18 | Vue.component('side-nav', SideNav) 19 | 20 | const router = new VueRouter({ 21 | routes:routes 22 | }) 23 | 24 | new Vue({ // eslint-disable-line 25 | el: '#app', 26 | render: h => h(App), 27 | router 28 | }) 29 | -------------------------------------------------------------------------------- /documentation/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/favicon.ico -------------------------------------------------------------------------------- /documentation/i18n/component.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "lang": "en-US", 4 | "demo-block": { 5 | "hide-text": "Hide", 6 | "show-text": "Expand", 7 | "button-text": "Try it!", 8 | "tooltip-text": "Run this demo on jsfiddle.net" 9 | }, 10 | "header": { 11 | "components": "Component" 12 | }, 13 | "nav": { 14 | "dropdown": "Version: " 15 | } 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /documentation/i18n/route.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "lang": "en-US" 4 | } 5 | ] 6 | -------------------------------------------------------------------------------- /documentation/i18n/title.json: -------------------------------------------------------------------------------- 1 | { 2 | "en-US": { 3 | "home": "Vue Now Ui KIt", 4 | "guide": "Guide | Vue Now Ui", 5 | "component": "Component | Vue Now Ui", 6 | "resource": "Resource | Vue Now Ui" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /documentation/icon.json: -------------------------------------------------------------------------------- 1 | ["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"] 2 | -------------------------------------------------------------------------------- /documentation/index.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Now UI 7 | 8 | 9 |
<% if (process.env.NODE_ENV === 'production') { %> 10 | 11 | <% } %> 12 | 13 | 14 | -------------------------------------------------------------------------------- /documentation/nav.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "en-US": [ 3 | { 4 | "name": "Development", 5 | "children": [ 6 | { 7 | "path": "/installation", 8 | "name": "Installation" 9 | } 10 | ] 11 | }, 12 | { 13 | "name": "Components", 14 | "groups": [ 15 | { 16 | "groupName": "Basic", 17 | "list": [ 18 | { 19 | "path": "/button", 20 | "title": "Button" 21 | }, 22 | { 23 | "path": "/checkbox", 24 | "title": "Checkbox" 25 | }, 26 | { 27 | "path": "/radio", 28 | "title": "Radio" 29 | }, 30 | { 31 | "path": "/toggle", 32 | "title": "Toggle" 33 | }, 34 | { 35 | "path": "/dropdown", 36 | "title": "Dropdown" 37 | }, 38 | { 39 | "path": "/input", 40 | "title": "Input" 41 | }, 42 | { 43 | "path": "/navbar", 44 | "title": "Navbar" 45 | }, 46 | { 47 | "path": "/label", 48 | "title": "Label" 49 | }, 50 | { 51 | "path": "/pagination", 52 | "title": "Pagination" 53 | }, 54 | { 55 | "path": "/icon", 56 | "title": "Icons" 57 | }, 58 | { 59 | "path": "/alert", 60 | "title": "Alert" 61 | }, 62 | { 63 | "path": "/modal", 64 | "title": "Modal" 65 | }, 66 | { 67 | "path": "/tabs", 68 | "title": "Tabs" 69 | } 70 | ] 71 | } 72 | ] 73 | } 74 | ] 75 | } 76 | -------------------------------------------------------------------------------- /documentation/pages/en-US/component.vue: -------------------------------------------------------------------------------- 1 | 71 | 95 | 127 | -------------------------------------------------------------------------------- /documentation/pages/en-US/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/documentation/pages/en-US/header.jpg -------------------------------------------------------------------------------- /documentation/pages/en-US/index.vue: -------------------------------------------------------------------------------- 1 | 3 | 37 | 44 | 49 | -------------------------------------------------------------------------------- /documentation/play.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'main/index.js' 3 | import App from './play/index.vue' 4 | import 'packages/theme-default/src/index.css' 5 | 6 | Vue.use(Element) 7 | 8 | new Vue({ // eslint-disable-line 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /documentation/play/component.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 14 | 15 | 28 | -------------------------------------------------------------------------------- /documentation/play/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 15 | -------------------------------------------------------------------------------- /documentation/route.config.js: -------------------------------------------------------------------------------- 1 | import navConfig from './nav.config.json' 2 | import langs from './i18n/route.json' 3 | 4 | const LOAD_MAP = { 5 | 'en-US': name => { 6 | return r => require.ensure([], () => 7 | r(require(`./pages/en-US/${name}.vue`)), 8 | 'en-US') 9 | } 10 | } 11 | 12 | const load = function(lang, path) { 13 | return LOAD_MAP[lang](path) 14 | } 15 | 16 | const LOAD_DOCS_MAP = { 17 | 'en-US': path => { 18 | return r => require.ensure([], () => 19 | r(require(`./docs/en-US${path}.md`)), 20 | 'en-US') 21 | } 22 | } 23 | 24 | const loadDocs = function(lang, path) { 25 | return LOAD_DOCS_MAP[lang](path) 26 | } 27 | 28 | const registerRoute = (navConfig) => { 29 | let route = [] 30 | Object.keys(navConfig).forEach((lang, index) => { 31 | let navs = navConfig[lang] 32 | route.push({ 33 | path: `/${lang}/component`, 34 | redirect: `/${lang}/component/installation`, 35 | component: load(lang, 'component'), 36 | children: [] 37 | }) 38 | navs.forEach(nav => { 39 | if (nav.href) return 40 | if (nav.groups) { 41 | nav.groups.forEach(group => { 42 | group.list.forEach(nav => { 43 | addRoute(nav, lang, index) 44 | }) 45 | }) 46 | } else if (nav.children) { 47 | nav.children.forEach(nav => { 48 | addRoute(nav, lang, index) 49 | }) 50 | } else { 51 | addRoute(nav, lang, index) 52 | } 53 | }) 54 | }) 55 | function addRoute(page, lang, index) { 56 | const component = page.path === '/changelog' 57 | ? load(lang, 'changelog') 58 | : loadDocs(lang, page.path) 59 | let child = { 60 | path: page.path.slice(1), 61 | meta: { 62 | title: page.title || page.name, 63 | description: page.description, 64 | lang 65 | }, 66 | name: 'component-' + (page.title || page.name), 67 | component: component.default || component 68 | } 69 | 70 | route[index].children.push(child) 71 | } 72 | 73 | return route 74 | } 75 | 76 | let route = registerRoute(navConfig) 77 | 78 | const generateMiscRoutes = function(lang) { 79 | let indexRoute = { 80 | path: `/${lang}/`, 81 | meta: { lang }, 82 | name: 'home' + lang, 83 | component: load(lang, 'index') 84 | } 85 | 86 | return [indexRoute] 87 | } 88 | 89 | langs.forEach(lang => { 90 | route = route.concat(generateMiscRoutes(lang.lang)) 91 | }) 92 | 93 | let defaultPath = '/en-US/' 94 | 95 | route = route.concat([{ 96 | path: '/', 97 | redirect: defaultPath 98 | }, { 99 | path: '*', 100 | redirect: defaultPath 101 | }]) 102 | 103 | export default route 104 | -------------------------------------------------------------------------------- /documentation/versions.json: -------------------------------------------------------------------------------- 1 | {"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","0.1.0":"1.3"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue Now Ui Kit 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | 43 | 45 | 46 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Now-ui-kit - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/now-ui-kit 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md) 10 | 11 | * Designed by www.invisionapp.com Coded by www.creative-tim.com 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | @import 'now-ui-kit/variables'; 20 | @import 'now-ui-kit/mixins'; 21 | 22 | // Plugins CSS 23 | @import "now-ui-kit/plugins/plugin-bootstrap-switch"; 24 | @import "now-ui-kit/plugins/plugin-nouislider"; 25 | @import "now-ui-kit/plugins/plugin-datepicker"; 26 | 27 | // Core CSS 28 | @import "now-ui-kit/buttons"; 29 | @import "now-ui-kit/inputs"; 30 | @import "now-ui-kit/checkboxes-radio"; 31 | @import "now-ui-kit/progress"; 32 | @import "now-ui-kit/badges"; 33 | @import "now-ui-kit/pagination"; 34 | @import "now-ui-kit/typography"; 35 | @import "now-ui-kit/misc"; 36 | @import "now-ui-kit/pills"; 37 | 38 | // components 39 | @import "now-ui-kit/social-buttons"; 40 | @import "now-ui-kit/tabs"; 41 | @import "now-ui-kit/navbar"; 42 | @import "now-ui-kit/dropdown"; 43 | @import "now-ui-kit/alerts"; 44 | @import "now-ui-kit/images"; 45 | @import "now-ui-kit/popups"; 46 | @import "now-ui-kit/nucleo-outline"; 47 | @import "now-ui-kit/modals"; 48 | @import "now-ui-kit/carousel"; 49 | @import "now-ui-kit/cards"; 50 | @import "now-ui-kit/footers"; 51 | 52 | // example pages and sections 53 | @import "now-ui-kit/example-pages"; 54 | @import "now-ui-kit/sections"; 55 | 56 | 57 | @import "now-ui-kit/responsive"; 58 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_alerts.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | .alert{ 3 | border: 0; 4 | border-radius: 0; 5 | color: $white-color; 6 | padding-top: .9rem; 7 | padding-bottom: .9rem; 8 | 9 | &.alert-success{ 10 | background-color: $success-color-alert; 11 | } 12 | 13 | &.alert-danger{ 14 | background-color: $danger-color-alert; 15 | } 16 | 17 | &.alert-warning{ 18 | background-color: $warning-color-alert; 19 | } 20 | 21 | &.alert-info{ 22 | background-color: $info-color-alert; 23 | } 24 | 25 | &.alert-primary{ 26 | background-color: $primary-color-alert; 27 | } 28 | 29 | .alert-icon{ 30 | display: block; 31 | float: left; 32 | margin-right: 15px; 33 | margin-top: -1px; 34 | } 35 | 36 | strong{ 37 | text-transform: uppercase; 38 | font-size: 12px; 39 | } 40 | 41 | i.fa, 42 | i.now-ui-icons{ 43 | font-size: 20px; 44 | } 45 | 46 | .close{ 47 | color: $white-color; 48 | opacity: .9; 49 | text-shadow: none; 50 | line-height: 0; 51 | outline: 0; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_badges.scss: -------------------------------------------------------------------------------- 1 | /* badges */ 2 | @import "variables"; 3 | @import "mixins"; 4 | .badge{ 5 | border-radius: 8px; 6 | padding: 4px 8px; 7 | text-transform: uppercase; 8 | font-size: $font-size-mini; 9 | line-height: 12px; 10 | background-color: $transparent-bg; 11 | border: $border; 12 | margin-bottom: 5px; 13 | border-radius: $border-radius-extreme; 14 | } 15 | .badge-icon{ 16 | padding: 0.4em 0.55em; 17 | i{ 18 | font-size: 0.8em; 19 | } 20 | } 21 | .badge-default{ 22 | @include badge-color($default-color); 23 | } 24 | .badge-primary{ 25 | @include badge-color($primary-color); 26 | } 27 | .badge-info{ 28 | @include badge-color($info-color); 29 | } 30 | .badge-success{ 31 | @include badge-color($success-color); 32 | } 33 | .badge-warning{ 34 | @include badge-color($warning-color); 35 | } 36 | .badge-danger{ 37 | @include badge-color($danger-color); 38 | } 39 | .badge-neutral{ 40 | @include badge-color($white-color); 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 0; 3 | border-radius: $border-radius-small; 4 | display: inline-block; 5 | position: relative; 6 | overflow: hidden; 7 | width: 100%; 8 | margin-bottom: 20px; 9 | box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); 10 | 11 | .card-block{ 12 | min-height: 190px; 13 | } 14 | 15 | &[data-background-color="orange"]{ 16 | background-color: $primary-color; 17 | } 18 | 19 | &[data-background-color="red"]{ 20 | background-color: $danger-color; 21 | } 22 | 23 | &[data-background-color="yellow"]{ 24 | background-color: $warning-color; 25 | } 26 | 27 | &[data-background-color="blue"]{ 28 | background-color: $info-color; 29 | } 30 | 31 | &[data-background-color="green"]{ 32 | background-color: $success-color; 33 | } 34 | } 35 | 36 | .card-signup{ 37 | max-width: 350px; 38 | margin: 0 auto; 39 | 40 | .header{ 41 | margin-left: 20px; 42 | margin-right: 20px; 43 | padding: 30px 0; 44 | } 45 | .text-divider{ 46 | margin-top: 30px; 47 | margin-bottom: 0px; 48 | text-align: center; 49 | } 50 | .content{ 51 | padding: 0px 30px; 52 | } 53 | 54 | .checkbox{ 55 | margin-top: 20px; 56 | 57 | label{ 58 | margin-left: 17px; 59 | } 60 | .checkbox-material{ 61 | padding-right: 12px; 62 | } 63 | } 64 | 65 | .social-line{ 66 | margin-top: 20px; 67 | text-align: center; 68 | 69 | .btn.btn-icon , 70 | .btn.btn-icon .btn-icon -mini{ 71 | margin-left: 5px; 72 | margin-right: 5px; 73 | box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2); 74 | } 75 | } 76 | 77 | .footer{ 78 | margin-bottom: 10px; 79 | margin-top: 24px; 80 | } 81 | } 82 | 83 | .card-plain{ 84 | background: transparent; 85 | box-shadow: none; 86 | 87 | .header{ 88 | margin-left: 0; 89 | margin-right: 0; 90 | } 91 | 92 | .content{ 93 | padding-left: 0; 94 | padding-right: 0; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_carousel.scss: -------------------------------------------------------------------------------- 1 | // display flex was causing errors 2 | .carousel-item-next, 3 | .carousel-item-prev, 4 | .carousel-item.active{ 5 | display: block; 6 | } 7 | 8 | .carousel{ 9 | .carousel-inner{ 10 | box-shadow: $box-shadow-raised; 11 | } 12 | .now-ui-icons{ 13 | font-size: 2em; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | .dropdown-menu{ 4 | border: 0; 5 | box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); 6 | border-radius: $border-radius-extra-small; 7 | @include transition($fast-transition-time, $transition-linear); 8 | font-size: $font-size-base; 9 | 10 | &.dropdown-menu-right{ 11 | &:before{ 12 | left:auto; 13 | right: 10px; 14 | } 15 | } 16 | 17 | &:before{ 18 | display: inline-block; 19 | position: absolute; 20 | width: 0; 21 | height: 0; 22 | vertical-align: middle; 23 | content: ""; 24 | top: -5px; 25 | left: 10px; 26 | right: auto; 27 | color: $white-color; 28 | border-bottom: .4em solid; 29 | border-right: .4em solid transparent; 30 | border-left: .4em solid transparent; 31 | } 32 | 33 | .dropdown-item{ 34 | font-size: $font-size-small; 35 | padding-top: $padding-base-vertical; 36 | padding-bottom: $padding-base-vertical; 37 | @include transition($fast-transition-time, $transition-linear); 38 | 39 | &:hover, 40 | &:focus{ 41 | background-color: $opacity-gray-3; 42 | } 43 | } 44 | 45 | .dropdown-divider{ 46 | background-color: $opacity-gray-5; 47 | } 48 | 49 | .dropdown-header:not([href]):not([tabindex]){ 50 | color: $default-color-opacity; 51 | font-size: $font-size-mini; 52 | text-transform: uppercase; 53 | font-weight: $font-weight-bold; 54 | } 55 | 56 | &.dropdown-primary{ 57 | @include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2); 58 | } 59 | 60 | &.dropdown-info{ 61 | @include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2); 62 | } 63 | 64 | &.dropdown-danger{ 65 | @include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2); 66 | } 67 | 68 | &.dropdown-success{ 69 | @include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2); 70 | } 71 | 72 | &.dropdown-warning{ 73 | @include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2); 74 | } 75 | 76 | .dropdown &{ 77 | @include transform-translate-y(-25px); 78 | visibility: hidden; 79 | display: block; 80 | @include opacity(0); 81 | } 82 | 83 | .dropdown.show &, 84 | &.open{ 85 | @include opacity(1); 86 | visibility: visible; 87 | @include transform-translate-y(0px); 88 | } 89 | 90 | .navbar .dropdown.show &{ 91 | @include transform-translate-y(7px); 92 | } 93 | } 94 | 95 | .button-dropdown{ 96 | padding-right: $padding-base-horizontal; 97 | cursor: pointer; 98 | 99 | & .dropdown-toggle{ 100 | padding-top: $padding-base-vertical; 101 | padding-bottom: $padding-base-vertical; 102 | display: block; 103 | 104 | &:after{ 105 | display: none; 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: 24px 0; 3 | 4 | &.footer-default{ 5 | background-color: #f2f2f2; 6 | } 7 | 8 | nav{ 9 | display: inline-block; 10 | float: left; 11 | } 12 | 13 | ul{ 14 | margin-bottom: 0; 15 | padding: 0; 16 | list-style: none; 17 | 18 | li{ 19 | display: inline-block; 20 | 21 | a{ 22 | color: inherit; 23 | padding: $padding-base-vertical; 24 | font-size: $font-size-small; 25 | text-decoration: none; 26 | 27 | &:hover{ 28 | text-decoration: none; 29 | } 30 | } 31 | } 32 | } 33 | 34 | .copyright{ 35 | font-size: $font-size-small; 36 | } 37 | 38 | &:after{ 39 | display: table; 40 | clear: both; 41 | content: " "; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: 1px; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_misc.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | color: $black-color; 3 | font-size: $font-size-base; 4 | font-family: $sans-serif-family; 5 | -moz-osx-font-smoothing: grayscale; 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | .main{ 10 | position: relative; 11 | background: $white-color; 12 | } 13 | /* Animations */ 14 | .nav-pills .nav-link, 15 | .navbar, 16 | .nav-tabs .nav-link{ 17 | @include transition($general-transition-time, $transition-ease); 18 | } 19 | 20 | //transition for dropdown caret 21 | .dropdown-toggle:after, 22 | .bootstrap-switch-label:before{ 23 | @include transition($fast-transition-time, $transition-ease); 24 | } 25 | 26 | .dropdown-toggle[aria-expanded="true"]:after{ 27 | @include rotate-180(); 28 | } 29 | 30 | .button-bar{ 31 | display: block; 32 | position: relative; 33 | width: 22px; 34 | height: 1px; 35 | border-radius: 1px; 36 | background: $white-bg; 37 | 38 | & + .button-bar{ 39 | margin-top: 7px; 40 | } 41 | 42 | &:nth-child(2){ 43 | width: 17px; 44 | } 45 | } 46 | 47 | .open{ 48 | @include transform-translate-y(0); 49 | @include opacity(1); 50 | visibility: visible; 51 | } 52 | 53 | .separator{ 54 | height: 2px; 55 | width: 44px; 56 | background-color: $default-color; 57 | margin: 20px auto; 58 | 59 | &.separator-primary{ 60 | background-color: $primary-color; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | @import "mixins/transparency"; 3 | 4 | //Components 5 | @import "mixins/buttons"; 6 | @import "mixins/vendor-prefixes"; 7 | @import "mixins/inputs"; 8 | @import "mixins/dropdown"; 9 | @import "mixins/badges"; 10 | @import "mixins/popovers"; 11 | @import "mixins/modals"; 12 | @import "mixins/pages"; 13 | @import "mixins/datepicker"; 14 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_pagination.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | @mixin pagination-color($name,$color){ 4 | &.pagination-#{$name}{ 5 | .page-item.active > .page-link{ 6 | &, 7 | &:focus, 8 | &:hover{ 9 | background-color: $color; 10 | border-color: $color; 11 | } 12 | } 13 | } 14 | } 15 | .pagination{ 16 | .page-item .page-link{ 17 | border: 0; 18 | border-radius: 30px !important; 19 | transition: all .3s; 20 | padding: 0px 11px; 21 | margin: 0 3px; 22 | min-width: 30px; 23 | text-align: center; 24 | height: 30px; 25 | line-height: 30px; 26 | color: $black-color; 27 | cursor: pointer; 28 | font-size: $font-size-base; 29 | text-transform: uppercase; 30 | background: transparent; 31 | 32 | &:hover, 33 | &:focus{ 34 | color: $black-color; 35 | background-color: $opacity-gray-3; 36 | border: none; 37 | } 38 | } 39 | 40 | .arrow-margin-left, 41 | .arrow-margin-right{ 42 | position: absolute; 43 | } 44 | 45 | .arrow-margin-right{ 46 | right: 0; 47 | } 48 | 49 | .arrow-margin-left{ 50 | left: 0; 51 | } 52 | 53 | .page-item.active > .page-link{ 54 | color: $light-gray; 55 | box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); 56 | 57 | &, 58 | &:focus, 59 | &:hover{ 60 | background-color: $default-color; 61 | border-color: $default-color; 62 | color: $white-color; 63 | } 64 | } 65 | 66 | .page-item.disabled > .page-link{ 67 | opacity: .5; 68 | background-color: rgba(255,255,255, .2); 69 | color: $white-color; 70 | } 71 | 72 | // Colors 73 | @include pagination-color(blue, $brand-info); 74 | @include pagination-color(green, $brand-success); 75 | @include pagination-color(orange, $brand-primary); 76 | @include pagination-color(blue, $brand-info); 77 | @include pagination-color(yellow, $brand-warning); 78 | @include pagination-color(red, $brand-danger); 79 | 80 | &.pagination-neutral{ 81 | .page-item > .page-link{ 82 | color: $white-color; 83 | 84 | &:focus, 85 | &:hover{ 86 | background-color: $opacity-2; 87 | color: $white-color; 88 | } 89 | } 90 | 91 | .page-item.active > .page-link{ 92 | &, 93 | &:focus, 94 | &:hover{ 95 | background-color: $white-bg; 96 | border-color: $white-bg; 97 | color: $brand-primary; 98 | } 99 | } 100 | } 101 | 102 | } 103 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_pills.scss: -------------------------------------------------------------------------------- 1 | .nav-pills{ 2 | 3 | .nav-item { 4 | .nav-link{ 5 | padding: 0 15.5px; 6 | text-align: center; 7 | height: 60px; 8 | width: 60px; 9 | font-weight: $font-weight-normal; 10 | color: $dark-gray; 11 | margin-right: 19px; 12 | background-color: $opacity-gray-3; 13 | border-radius: $btn-round-radius; 14 | 15 | &:hover{ 16 | background-color: $opacity-gray-3; 17 | } 18 | 19 | &.active{ 20 | &, 21 | &:focus, 22 | &:hover{ 23 | background-color: $dark-gray; 24 | color: $white-color; 25 | box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3); 26 | } 27 | } 28 | 29 | &.disabled, 30 | &:disabled, 31 | &[disabled]{ 32 | opacity: .5; 33 | } 34 | } 35 | 36 | i{ 37 | display: block; 38 | font-size: 20px; 39 | line-height: 60px; 40 | } 41 | } 42 | 43 | &.nav-pills-neutral{ 44 | .nav-item { 45 | .nav-link{ 46 | background-color: $opacity-2; 47 | color: $white-color; 48 | 49 | &.active{ 50 | &, 51 | &:focus, 52 | &:hover{ 53 | background-color: $white-color; 54 | color: $primary-color; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | 61 | &.nav-pills-primary{ 62 | .nav-item { 63 | .nav-link.active{ 64 | &, 65 | &:focus, 66 | &:hover{ 67 | background-color: $brand-primary; 68 | } 69 | } 70 | } 71 | } 72 | 73 | &.nav-pills-info{ 74 | .nav-item { 75 | .nav-link.active{ 76 | &, 77 | &:focus, 78 | &:hover{ 79 | background-color: $brand-info; 80 | } 81 | } 82 | } 83 | } 84 | 85 | &.nav-pills-success{ 86 | .nav-item { 87 | .nav-link.active{ 88 | &, 89 | &:focus, 90 | &:hover{ 91 | background-color: $brand-success; 92 | } 93 | } 94 | } 95 | } 96 | 97 | &.nav-pills-warning{ 98 | .nav-item { 99 | .nav-link.active{ 100 | &, 101 | &:focus, 102 | &:hover{ 103 | background-color: $brand-warning; 104 | } 105 | } 106 | } 107 | } 108 | 109 | &.nav-pills-danger{ 110 | .nav-item { 111 | .nav-link.active{ 112 | &, 113 | &:focus, 114 | &:hover{ 115 | background-color: $brand-danger; 116 | } 117 | } 118 | } 119 | } 120 | } 121 | .tab-space{ 122 | padding: 20px 0 50px 0px; 123 | } 124 | 125 | .nav-align-center{ 126 | text-align: center; 127 | 128 | .nav-pills{ 129 | display: inline-flex; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_popups.scss: -------------------------------------------------------------------------------- 1 | .popover{ 2 | font-size: $font-size-base; 3 | box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); 4 | border: none; 5 | line-height: 1.7; 6 | max-width: 240px; 7 | 8 | .popover-title{ 9 | color: $default-color-opacity; 10 | font-size: $font-size-base; 11 | text-transform: uppercase; 12 | font-weight: $font-weight-semi; 13 | margin: 0; 14 | margin-top: 5px; 15 | border: none; 16 | background-color: transparent; 17 | } 18 | 19 | &:before{ 20 | display: none; 21 | } 22 | 23 | &.bs-tether-element-attached-top:after{ 24 | border-bottom-color:$white-color; 25 | top: -9px; 26 | } 27 | 28 | &.popover-primary{ 29 | @include popover-color($primary-color, $white-color); 30 | } 31 | 32 | &.popover-info{ 33 | @include popover-color($info-color, $white-color); 34 | } 35 | 36 | &.popover-warning{ 37 | @include popover-color($warning-color, $white-color); 38 | } 39 | 40 | &.popover-danger{ 41 | @include popover-color($danger-color, $white-color); 42 | } 43 | 44 | &.popover-success{ 45 | @include popover-color($success-color, $white-color); 46 | } 47 | } 48 | 49 | 50 | .tooltip{ 51 | &.bs-tether-element-attached-right .tooltip-inner:before{ 52 | border-left-color:$white-color; 53 | } 54 | 55 | &.bs-tether-element-attached-top .tooltip-inner:before{ 56 | border-bottom-color:$white-color; 57 | } 58 | 59 | &.bs-tether-element-attached-bottom .tooltip-inner:before{ 60 | border-top-color:$white-color; 61 | } 62 | 63 | &.bs-tether-element-attached-left .tooltip-inner:before{ 64 | border-right-color:$white-color; 65 | } 66 | } 67 | 68 | .tooltip-inner{ 69 | padding: $padding-base-vertical $padding-base-horizontal; 70 | min-width: 130px; 71 | background-color: $white-color; 72 | font-size: $font-size-base; 73 | color: inherit; 74 | box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_progress.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 4 | @mixin progress-style($name, $color,$brand-color){ 5 | &.progress-#{$name}{ 6 | .progress{ 7 | background: $color; 8 | } 9 | 10 | .progress-bar{ 11 | background: $brand-color; 12 | } 13 | 14 | .progress-value, 15 | .progress-badge{ 16 | color: $brand-color; 17 | } 18 | } 19 | } 20 | .progress-container{ 21 | position: relative; 22 | 23 | & + .progress-container, 24 | & ~ .progress-container{ 25 | margin-top: $margin-base-vertical; 26 | } 27 | .progress-badge{ 28 | color: $default-color; 29 | font-size: $font-size-small; 30 | text-transform: uppercase; 31 | 32 | } 33 | 34 | .progress { 35 | height: 1px; 36 | border-radius: 0; 37 | box-shadow: none; 38 | background: $opacity-gray-5; 39 | margin-top: 14px; 40 | 41 | .progress-bar { 42 | box-shadow: none; 43 | background-color: $default-color; 44 | } 45 | 46 | .progress-value{ 47 | position: absolute; 48 | top: 2px; 49 | right: 0; 50 | color: $default-color; 51 | font-size: $font-size-small; 52 | } 53 | } 54 | @include progress-style(neutral, $white-bg,$white-color); 55 | @include progress-style(orange, $primary-color-opacity,$brand-primary); 56 | @include progress-style(blue, $info-color-opacity,$brand-info); 57 | @include progress-style(green, $success-color-opacity,$brand-success); 58 | @include progress-style(yellow, $warning-color-opacity,$brand-warning); 59 | @include progress-style(red, $danger-color-opacity,$brand-danger); 60 | } 61 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-twitter{ 2 | color: $social-twitter; 3 | 4 | &:hover, 5 | &:focus, 6 | &:active{ 7 | color: $social-twitter-state-color; 8 | } 9 | } 10 | 11 | .btn-facebook{ 12 | color: $social-facebook; 13 | 14 | &:hover, 15 | &:focus, 16 | &:active{ 17 | color: $social-facebook-state-color; 18 | } 19 | } 20 | 21 | .btn-google{ 22 | color: $social-google; 23 | 24 | &:hover, 25 | &:focus, 26 | &:active{ 27 | color: $social-google-state-color; 28 | } 29 | } 30 | 31 | .btn-linkedin{ 32 | color: $social-linkedin; 33 | 34 | &:hover, 35 | &:focus, 36 | &:active{ 37 | color: $social-linkedin-state-color; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_tabs.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | .nav-tabs { 4 | border: 0; 5 | padding: $padding-large-vertical $padding-base-horizontal; 6 | 7 | > .nav-item{ 8 | > .nav-link{ 9 | color: $default-color; 10 | margin: 0; 11 | margin-right: 5px; 12 | background-color: $transparent-bg; 13 | border: 1px solid $transparent-bg; 14 | border-radius: 30px; 15 | font-size: $font-size-base; 16 | padding: $padding-btn-vertical $padding-round-horizontal; 17 | line-height: $line-height-general; 18 | 19 | &:hover { 20 | background-color: $transparent-bg; 21 | } 22 | 23 | &.active{ 24 | border: 1px solid $default-color; 25 | border-radius: 30px; 26 | } 27 | 28 | i.now-ui-icons{ 29 | font-size: 14px; 30 | position: relative; 31 | top: 1px; 32 | margin-right: 3px; 33 | } 34 | } 35 | 36 | &.disabled > .nav-link, 37 | &.disabled > .nav-link:hover { 38 | color: rgba(255,255,255,0.5); 39 | } 40 | } 41 | 42 | &.nav-tabs-neutral{ 43 | > .nav-item{ 44 | > .nav-link{ 45 | color: $white-color; 46 | 47 | &.active{ 48 | border-color: $opacity-5; 49 | color: $white-color; 50 | } 51 | } 52 | } 53 | } 54 | 55 | &.nav-tabs-primary{ 56 | > .nav-item{ 57 | > .nav-link{ 58 | &.active{ 59 | border-color: $primary-color; 60 | color: $primary-color; 61 | } 62 | } 63 | } 64 | } 65 | 66 | &.nav-tabs-info{ 67 | > .nav-item{ 68 | > .nav-link{ 69 | &.active{ 70 | border-color: $info-color; 71 | color: $info-color; 72 | } 73 | } 74 | } 75 | } 76 | 77 | &.nav-tabs-danger{ 78 | > .nav-item{ 79 | > .nav-link{ 80 | &.active{ 81 | border-color: $danger-color; 82 | color: $danger-color; 83 | } 84 | } 85 | } 86 | } 87 | 88 | &.nav-tabs-warning{ 89 | > .nav-item{ 90 | > .nav-link{ 91 | &.active{ 92 | border-color: $warning-color; 93 | color: $warning-color; 94 | } 95 | } 96 | } 97 | } 98 | 99 | &.nav-tabs-success{ 100 | > .nav-item{ 101 | > .nav-link{ 102 | &.active{ 103 | border-color: $success-color; 104 | color: $success-color; 105 | } 106 | } 107 | } 108 | } 109 | 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/_typography.scss: -------------------------------------------------------------------------------- 1 | button, 2 | input, 3 | optgroup, 4 | select, 5 | textarea{ 6 | font-family: $sans-serif-family; 7 | } 8 | h1,h2,h3,h4,h5,h6{ 9 | font-weight: $font-weight-normal; 10 | } 11 | 12 | a{ 13 | color: $primary-color; 14 | &:hover, 15 | &:focus{ 16 | color: $primary-color; 17 | } 18 | } 19 | h1, .h1 { 20 | font-size: $font-size-h1; 21 | line-height: 1.15; 22 | margin-bottom: $margin-base-vertical * 2; 23 | 24 | small{ 25 | font-weight: $font-weight-bold; 26 | text-transform: uppercase; 27 | opacity: .8; 28 | } 29 | } 30 | h2, .h2{ 31 | font-size: $font-size-h2; 32 | margin-bottom: $margin-base-vertical * 2; 33 | } 34 | h3, .h3{ 35 | font-size: $font-size-h3; 36 | margin-bottom: $margin-base-vertical * 2; 37 | line-height: 1.4em; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 1.45em; 42 | margin-top: $margin-base-vertical * 2; 43 | margin-bottom: $margin-base-vertical; 44 | 45 | & + .category, 46 | &.title + .category{ 47 | margin-top: -10px; 48 | } 49 | } 50 | h5, .h5 { 51 | font-size: $font-size-h5; 52 | line-height: 1.4em; 53 | margin-bottom: 15px; 54 | } 55 | h6, .h6{ 56 | font-size: $font-size-h6; 57 | font-weight: $font-weight-bold; 58 | text-transform: uppercase; 59 | } 60 | p{ 61 | line-height: 1.61em; 62 | 63 | &.description{ 64 | font-size: 1.14em; 65 | } 66 | } 67 | 68 | .title{ 69 | font-weight: $font-weight-bold; 70 | 71 | &.title-up{ 72 | text-transform: uppercase; 73 | 74 | a{ 75 | color: $black-color; 76 | text-decoration: none; 77 | } 78 | } 79 | & + .category{ 80 | margin-top: -25px; 81 | } 82 | } 83 | 84 | .description, 85 | .card-description, 86 | .footer-big p{ 87 | color: $dark-gray; 88 | font-weight: $font-weight-light; 89 | } 90 | .category{ 91 | text-transform: uppercase; 92 | font-weight: $font-weight-bold; 93 | color: $dark-gray; 94 | } 95 | .text-primary { 96 | color: $brand-primary !important; 97 | } 98 | .text-info { 99 | color: $brand-info !important; 100 | } 101 | .text-success { 102 | color: $brand-success !important; 103 | } 104 | .text-warning { 105 | color: $brand-warning !important; 106 | } 107 | .text-danger { 108 | color: $brand-danger !important; 109 | } 110 | 111 | .blockquote{ 112 | border-left: none; 113 | border: 1px solid $default-color; 114 | padding: 20px; 115 | font-size: $font-size-blockquote; 116 | line-height: 1.8; 117 | 118 | small{ 119 | color: $default-color; 120 | font-size: $font-size-small; 121 | text-transform: uppercase; 122 | } 123 | 124 | &.blockquote-primary{ 125 | border-color: $primary-color; 126 | color: $primary-color; 127 | 128 | small{ 129 | color: $primary-color; 130 | } 131 | } 132 | 133 | &.blockquote-danger{ 134 | border-color: $danger-color; 135 | color: $danger-color; 136 | 137 | small{ 138 | color: $danger-color; 139 | } 140 | } 141 | 142 | &.blockquote-white{ 143 | border-color: $opacity-8; 144 | color: $white-color; 145 | 146 | small{ 147 | color: $opacity-8; 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-radius($radius: $border-radius) { 4 | @if $enable-rounded { 5 | border-radius: $radius; 6 | } 7 | } 8 | 9 | @mixin border-top-radius($radius) { 10 | @if $enable-rounded { 11 | border-top-left-radius: $radius; 12 | border-top-right-radius: $radius; 13 | } 14 | } 15 | 16 | @mixin border-right-radius($radius) { 17 | @if $enable-rounded { 18 | border-top-right-radius: $radius; 19 | border-bottom-right-radius: $radius; 20 | } 21 | } 22 | 23 | @mixin border-bottom-radius($radius) { 24 | @if $enable-rounded { 25 | border-bottom-right-radius: $radius; 26 | border-bottom-left-radius: $radius; 27 | } 28 | } 29 | 30 | @mixin border-left-radius($radius) { 31 | @if $enable-rounded { 32 | border-top-left-radius: $radius; 33 | border-bottom-left-radius: $radius; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/bootstrap/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | @mixin hover { 2 | // TODO: re-enable along with mq4-hover-shim 3 | // @if $enable-hover-media-query { 4 | // // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover 5 | // // Currently shimmed by https://github.com/twbs/mq4-hover-shim 6 | // @media (hover: hover) { 7 | // &:hover { @content } 8 | // } 9 | // } 10 | // @else { 11 | // scss-lint:disable Indentation 12 | &:hover { @content } 13 | // scss-lint:enable Indentation 14 | // } 15 | } 16 | 17 | 18 | @mixin hover-focus { 19 | @if $enable-hover-media-query { 20 | &:focus { @content } 21 | @include hover { @content } 22 | } @else { 23 | &:focus, 24 | &:hover { 25 | @content 26 | } 27 | } 28 | } 29 | 30 | @mixin plain-hover-focus { 31 | @if $enable-hover-media-query { 32 | &, 33 | &:focus { 34 | @content 35 | } 36 | @include hover { @content } 37 | } @else { 38 | &, 39 | &:focus, 40 | &:hover { 41 | @content 42 | } 43 | } 44 | } 45 | 46 | @mixin hover-focus-active { 47 | @if $enable-hover-media-query { 48 | &:focus, 49 | &:active { 50 | @content 51 | } 52 | @include hover { @content } 53 | } @else { 54 | &:focus, 55 | &:active, 56 | &:hover { 57 | @content 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_badges.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-color($color) { 2 | border-color: $color; 3 | color: $color; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | background-color: $btn-color; 4 | 5 | &:hover, 6 | &:focus, 7 | &:active, 8 | &.active, 9 | &:active:focus, 10 | &:active:hover, 11 | &.active:focus, 12 | &.active:hover, 13 | .open > &.dropdown-toggle, 14 | .open > &.dropdown-toggle:focus, 15 | .open > &.dropdown-toggle:hover { 16 | background-color: $btn-states-color; 17 | color: $white-color; 18 | } 19 | 20 | &.disabled, 21 | &:disabled, 22 | &[disabled], 23 | fieldset[disabled] & { 24 | &, 25 | &:hover, 26 | &:focus, 27 | &.focus, 28 | &:active, 29 | &.active { 30 | background-color: $btn-color; 31 | border-color: $btn-color; 32 | } 33 | } 34 | 35 | &.focus, 36 | &:focus{ 37 | box-shadow: none; 38 | } 39 | 40 | // btn-neutral style 41 | @if $btn-color == $white-color{ 42 | color: $primary-color; 43 | 44 | &.n-button-danger{ 45 | color: $danger-color; 46 | 47 | &:hover, 48 | &:focus, 49 | &:active{ 50 | color: $danger-states-color; 51 | } 52 | } 53 | 54 | &.n-button-info{ 55 | color: $info-color; 56 | 57 | &:hover, 58 | &:focus, 59 | &:active{ 60 | color: $info-states-color; 61 | } 62 | } 63 | 64 | &.n-button-warning{ 65 | color: $warning-color; 66 | 67 | &:hover, 68 | &:focus, 69 | &:active{ 70 | color: $warning-states-color; 71 | } 72 | } 73 | 74 | &.n-button-success{ 75 | color: $success-color; 76 | 77 | &:hover, 78 | &:focus, 79 | &:active{ 80 | color: $success-states-color; 81 | } 82 | } 83 | 84 | &.n-button-default{ 85 | color: $default-color; 86 | 87 | &:hover, 88 | &:focus, 89 | &:active{ 90 | color: $default-states-color; 91 | } 92 | } 93 | 94 | &.active, 95 | &:active:focus, 96 | &:active:hover, 97 | &.active:focus, 98 | &.active:hover, 99 | .open > &.dropdown-toggle, 100 | .open > &.dropdown-toggle:focus, 101 | .open > &.dropdown-toggle:hover { 102 | background-color: $white-color; 103 | color: $primary-color; 104 | } 105 | 106 | &:hover, 107 | &:focus, 108 | &:active{ 109 | color: $primary-states-color; 110 | } 111 | 112 | } @else { 113 | color: $white-color; 114 | } 115 | 116 | &.n-button-simple{ 117 | color: $btn-color; 118 | border-color: $btn-color; 119 | 120 | &:hover, 121 | &:focus, 122 | &:active{ 123 | background-color: $transparent-bg; 124 | color: $btn-states-color; 125 | border-color: $btn-states-color; 126 | } 127 | } 128 | 129 | &.n-button-link{ 130 | color: $btn-color; 131 | 132 | &:hover, 133 | &:focus, 134 | &:active{ 135 | background-color: $transparent-bg; 136 | color: $btn-states-color; 137 | text-decoration: none; 138 | } 139 | } 140 | } 141 | 142 | 143 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 144 | font-size: $font-size; 145 | border-radius: $border; 146 | padding: $padding-vertical $padding-horizontal; 147 | 148 | &.n-button-simple{ 149 | padding: $padding-vertical - 1 $padding-horizontal - 1; 150 | } 151 | 152 | } 153 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { 2 | background-color: $brand-color; 3 | 4 | &:before{ 5 | color: $brand-color; 6 | } 7 | 8 | .dropdown-header:not([href]):not([tabindex]){ 9 | color: $dropdown-header-color; 10 | } 11 | 12 | .dropdown-item{ 13 | color: $dropdown-color; 14 | 15 | &:hover, 16 | &:focus{ 17 | background-color: $background-color; 18 | } 19 | } 20 | 21 | .dropdown-divider{ 22 | background-color: $background-color; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-colors($bg-color, $color) { 2 | .modal-content{ 3 | background-color: $bg-color; 4 | color: $color; 5 | } 6 | 7 | .modal-header .close{ 8 | color: $color; 9 | } 10 | 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_pages.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($color1, $color2){ 2 | background: $color1; /* For browsers that do not support gradients */ 3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_popovers.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-color($color, $text-color) { 2 | background-color: $color; 3 | color: $text-color; 4 | 5 | 6 | &.bs-tether-element-attached-right:after{ 7 | border-left-color:$color; 8 | } 9 | 10 | &.bs-tether-element-attached-top:after{ 11 | border-bottom-color:$color; 12 | } 13 | 14 | &.bs-tether-element-attached-bottom:after{ 15 | border-top-color:$color; 16 | } 17 | 18 | &.bs-tether-element-attached-left:after{ 19 | border-right-color:$color; 20 | } 21 | 22 | .popover-title{ 23 | color: $text-color; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/sass/now-ui-kit/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/sass/nucleo-outline-stripped.fcp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/sass/nucleo-outline-stripped.fcp -------------------------------------------------------------------------------- /src/assets/sass/nucleo-outline.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/sass/nucleo-outline.eot -------------------------------------------------------------------------------- /src/assets/sass/nucleo-outline.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/sass/nucleo-outline.ttf -------------------------------------------------------------------------------- /src/assets/sass/nucleo-outline.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/sass/nucleo-outline.woff -------------------------------------------------------------------------------- /src/assets/sass/nucleo-outline.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristijora/vue-now-ui/050ead526cf7a4a0fea1c51d8a21582b0dcdd3a5/src/assets/sass/nucleo-outline.woff2 -------------------------------------------------------------------------------- /src/components/Alert/Alert.vue: -------------------------------------------------------------------------------- 1 | 16 | 72 | -------------------------------------------------------------------------------- /src/components/Alert/index.js: -------------------------------------------------------------------------------- 1 | import NAlert from './Alert.vue' 2 | 3 | NAlert.install = function(Vue) { 4 | Vue.component(NAlert.name, NAlert) 5 | } 6 | 7 | export default NAlert 8 | -------------------------------------------------------------------------------- /src/components/Button/Button.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | 3 | import {propsToClasses} from './../utils/index' 4 | 5 | export default { 6 | functional: true, 7 | props: { 8 | type: { 9 | type: String, 10 | default: 'default' 11 | }, 12 | size: { 13 | type: String 14 | }, 15 | tag: { 16 | type: String, 17 | default: 'button' 18 | }, 19 | simple: Boolean, 20 | round: Boolean, 21 | icon: Boolean, 22 | iconMini: Boolean, 23 | disabled: Boolean 24 | }, 25 | render(h, {data, props, children}) { 26 | let staticClass = `` 27 | const boolClasses = propsToClasses('n-button', props, ['tag']) 28 | staticClass += ` ${boolClasses}` 29 | data.staticClass = data.staticClass 30 | ? `${data.staticClass} ${staticClass}` 31 | : staticClass 32 | return {children} 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/Button/Button.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 40 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | import NButton from './Button' 2 | 3 | NButton.install = function(Vue) { 4 | Vue.component('n-button', NButton) 5 | } 6 | 7 | export default NButton 8 | -------------------------------------------------------------------------------- /src/components/Checkbox/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 9 | 49 | 51 | -------------------------------------------------------------------------------- /src/components/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | import NCheckobx from './Checkbox.vue' 2 | 3 | NCheckobx.install = function(Vue) { 4 | Vue.component(NCheckobx.name, NCheckobx) 5 | } 6 | 7 | export default NCheckobx 8 | -------------------------------------------------------------------------------- /src/components/Dropdown/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 16 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /src/components/Dropdown/DropdownItem.vue: -------------------------------------------------------------------------------- 1 | 26 | 28 | -------------------------------------------------------------------------------- /src/components/Dropdown/DropdownMenu.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 14 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | import DropDown from './Dropdown.vue' 2 | import DropDownItem from './DropdownItem.vue' 3 | import DropDownMenu from './DropdownMenu.vue' 4 | 5 | DropDown.install = function(Vue) { 6 | Vue.component(DropDown.name, DropDown) 7 | Vue.component(DropDownItem.name, DropDownItem) 8 | Vue.component(DropDownMenu.name, DropDownMenu) 9 | } 10 | 11 | export default DropDown 12 | -------------------------------------------------------------------------------- /src/components/Icon/Icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 29 | -------------------------------------------------------------------------------- /src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | import NIcon from './Icon.vue' 2 | 3 | NIcon.install = function(Vue) { 4 | Vue.component(NIcon.name, NIcon) 5 | } 6 | 7 | export default NIcon 8 | -------------------------------------------------------------------------------- /src/components/Input/Input.vue: -------------------------------------------------------------------------------- 1 | 16 | 49 | 51 | -------------------------------------------------------------------------------- /src/components/Input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './Input.vue' 2 | 3 | Input.install = function(Vue) { 4 | Vue.component(Input.name, Input) 5 | } 6 | 7 | export default Input 8 | -------------------------------------------------------------------------------- /src/components/Label/Label.vue: -------------------------------------------------------------------------------- 1 | 28 | 30 | -------------------------------------------------------------------------------- /src/components/Label/index.js: -------------------------------------------------------------------------------- 1 | import Label from './Label.vue' 2 | 3 | Label.install = function(Vue) { 4 | Vue.component(Label.name, Label) 5 | } 6 | 7 | export default Label 8 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 36 | -------------------------------------------------------------------------------- /src/components/Modal/index.js: -------------------------------------------------------------------------------- 1 | import NModal from './Modal.vue' 2 | 3 | NModal.install = function(Vue) { 4 | Vue.component(NModal.name, NModal) 5 | } 6 | 7 | export default NModal 8 | -------------------------------------------------------------------------------- /src/components/Navbar/NavMenuItem.js: -------------------------------------------------------------------------------- 1 | export default { 2 | functional: true, 3 | name: 'n-menu-item', 4 | props: { 5 | active: Boolean, 6 | disabled: Boolean 7 | }, 8 | render(h, {props, children}) { 9 | return (
  • 10 | 11 | {children} 12 | 13 |
    • ) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | name: 'n-navbar', 3 | props: { 4 | type: { 5 | type: String, 6 | default: 'white' 7 | }, 8 | alignRight: Boolean, 9 | styleClasses: { 10 | type: String, 11 | default: '' 12 | }, 13 | colorOnScroll: { 14 | type: Number, 15 | default: 0, 16 | validator: (value) => { 17 | return value >= 0 18 | } 19 | } 20 | }, 21 | data() { 22 | return { 23 | currentActiveIndex: 1, 24 | currentActiveLink: '', 25 | isTransparent: true 26 | } 27 | }, 28 | render() { 29 | let extraClass = this.colorOnScroll > 0 && this.isTransparent ? 'navbar-transparent' : `bg-${this.type}` 30 | return () 48 | }, 49 | mounted() { 50 | function scroll(fn) { 51 | window.addEventListener('scroll', () => { 52 | fn() 53 | }, false) 54 | } 55 | 56 | scroll(() => { 57 | if (document.documentElement.scrollTop > this.colorOnScroll || document.body.scrollTop > this.colorOnScroll) { 58 | this.isTransparent = false 59 | } else { 60 | this.isTransparent = true 61 | } 62 | }) 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from './Navbar' 2 | import NavMenuItem from './NavMenuItem' 3 | 4 | Navbar.install = function(Vue) { 5 | Vue.component(Navbar.name, Navbar) 6 | Vue.component(NavMenuItem.name, NavMenuItem) 7 | } 8 | 9 | export default Navbar 10 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.vue: -------------------------------------------------------------------------------- 1 | 21 | 98 | 100 | -------------------------------------------------------------------------------- /src/components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination.vue' 2 | 3 | Pagination.install = function(Vue) { 4 | Vue.component(Pagination.name, Pagination) 5 | } 6 | 7 | export default Pagination 8 | -------------------------------------------------------------------------------- /src/components/Progress/Progress.vue: -------------------------------------------------------------------------------- 1 | 16 | 54 | 56 | -------------------------------------------------------------------------------- /src/components/Progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './Progress.vue' 2 | 3 | Progress.install = function(Vue) { 4 | Vue.component(Progress.name, Progress) 5 | } 6 | 7 | export default Progress 8 | -------------------------------------------------------------------------------- /src/components/Radio/Radio.vue: -------------------------------------------------------------------------------- 1 | 10 | 46 | 48 | -------------------------------------------------------------------------------- /src/components/Radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './Radio.vue' 2 | 3 | Radio.install = function(Vue) { 4 | Vue.component(Radio.name, Radio) 5 | } 6 | 7 | export default Radio 8 | -------------------------------------------------------------------------------- /src/components/Slider/Slider.vue: -------------------------------------------------------------------------------- 1 | 12 | 46 | 48 | -------------------------------------------------------------------------------- /src/components/Tabs/TabItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 39 | -------------------------------------------------------------------------------- /src/components/Tabs/Tabs.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 58 | -------------------------------------------------------------------------------- /src/components/Tabs/index.js: -------------------------------------------------------------------------------- 1 | import NTabs from './Tabs.vue' 2 | import NTabItem from './TabItem.vue' 3 | 4 | export default NTabs.install = function(Vue) { 5 | Vue.component(NTabs.name, NTabs) 6 | Vue.component(NTabItem.name, NTabItem) 7 | } 8 | 9 | export { NTabs, NTabItem } 10 | -------------------------------------------------------------------------------- /src/components/Toggle/Toggle.vue: -------------------------------------------------------------------------------- 1 | 18 | 50 | 52 | -------------------------------------------------------------------------------- /src/components/Toggle/index.js: -------------------------------------------------------------------------------- 1 | import Toggle from './Toggle.vue' 2 | 3 | Toggle.install = function(Vue) { 4 | Vue.component(Toggle.name, Toggle) 5 | } 6 | 7 | export default Toggle 8 | -------------------------------------------------------------------------------- /src/components/utils/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /*** 3 | * Returns a string with css classes based on given props 4 | * @param base Base string to append before each prop (e.g btn -> btn-red) 5 | * @param props Array of props 6 | * @param toExclude List of prop keys to exclude 7 | * @returns {*} 8 | */ 9 | export const propsToClasses = (base, props, toExclude = []) => { 10 | return Object.keys(props).reduce((classes, key) => { 11 | if (toExclude.indexOf(key) !== -1) return classes 12 | let propValue = props[key] 13 | if (propValue === true) classes += ` ${base}-${key}` 14 | if (typeof propValue === 'string') { 15 | classes += ` ${base}-${propValue}` 16 | } 17 | return classes 18 | }, base) 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/docs/MainContent.vue: -------------------------------------------------------------------------------- 1 | 55 | 86 | 88 | -------------------------------------------------------------------------------- /src/docs/NavBar.vue: -------------------------------------------------------------------------------- 1 | 27 | 30 | 32 | -------------------------------------------------------------------------------- /src/docs/TopNavBar.vue: -------------------------------------------------------------------------------- 1 | 13 | 16 | 18 | -------------------------------------------------------------------------------- /src/docs/rows/Paginations.vue: -------------------------------------------------------------------------------- 1 | 56 | 70 | -------------------------------------------------------------------------------- /src/docs/rows/Progress.vue: -------------------------------------------------------------------------------- 1 | 38 | 41 | -------------------------------------------------------------------------------- /src/docs/rows/Textareas.vue: -------------------------------------------------------------------------------- 1 | 37 | 46 | 51 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* Automatic generated by './build/bin/build-entry.js' */ 2 | 3 | import Button from '../src/components/button/index.js' 4 | import Checkbox from '../src/components/checkbox/index.js' 5 | import Radio from '../src/components/radio/index.js' 6 | import Toggle from '../src/components/toggle/index.js' 7 | import Dropdown from '../src/components/dropdown/index.js' 8 | import Input from '../src/components/input/index.js' 9 | import Pagination from '../src/components/pagination/index.js' 10 | import Progress from '../src/components/progress/index.js' 11 | import Label from '../src/components/label/index.js' 12 | import Navbar from '../src/components/navbar/index.js' 13 | import Icon from '../src/components/icon/index.js' 14 | import Alert from '../src/components/alert/index.js' 15 | import Modal from '../src/components/modal/index.js' 16 | import Tabs from '../src/components/tabs/index.js' 17 | const plugins = [ 18 | Button, 19 | Checkbox, 20 | Radio, 21 | Toggle, 22 | Dropdown, 23 | Input, 24 | Pagination, 25 | Progress, 26 | Label, 27 | Navbar, 28 | Icon, 29 | Alert, 30 | Modal, 31 | Tabs 32 | ] 33 | const install = function(Vue, opts = {}) { 34 | /* istanbul ignore if */ 35 | if (install.installed) return 36 | 37 | plugins.map(plugin => { 38 | Vue.use(plugin) 39 | }) 40 | } 41 | 42 | /* istanbul ignore if */ 43 | if (typeof window !== 'undefined' && window.Vue) { 44 | install(window.Vue) 45 | } 46 | 47 | export default { 48 | version: '0.1.0', 49 | install, 50 | Button, 51 | Checkbox, 52 | Radio, 53 | Toggle, 54 | Dropdown, 55 | Input, 56 | Pagination, 57 | Progress, 58 | Label, 59 | Navbar, 60 | Icon, 61 | Alert, 62 | Modal, 63 | Tabs 64 | } 65 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count; 11 | this.expected = count; 12 | this.pass = function (val) { 13 | return val === this.expected; 14 | } 15 | this.value = function (res) { 16 | return res.value; 17 | } 18 | this.command = function (cb) { 19 | var self = this; 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length; 22 | }, [selector], function (res) { 23 | cb.call(self, res); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing'; 3 | var server = require('../../build/dev-server.js'); 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2); 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']); 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']); 19 | } 20 | 21 | var spawn = require('cross-spawn'); 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }); 23 | 24 | runner.on('exit', function (code) { 25 | server.close(); 26 | process.exit(code); 27 | }); 28 | 29 | runner.on('error', function (err) { 30 | server.close(); 31 | throw err; 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function test(browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL; 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end(); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | Vue.config.productionTip = false; 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/); 7 | testsContext.keys().forEach(testsContext); 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/); 13 | srcContext.keys().forEach(srcContext); 14 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf'); 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true, 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' }, 30 | ] 31 | }, 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Hello from '@/components/Hello'; 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello); 7 | const vm = new Constructor().$mount(); 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App'); 10 | }); 11 | }); 12 | --------------------------------------------------------------------------------