mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-12 14:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: many comps

Browse Source
This commit is contained in:
hrsonion 2019-06-03 23:42:44 +08:00
parent 563842817d
commit 6e82b40f71
16 changed files with 412 additions and 57 deletions

8
babel.config.js Normal file

@ -0,0 +1,8 @@
module.exports = {
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}

35
demo/components/homeDemo.vue Normal file

@ -0,0 +1,35 @@
<template>
<div>
<div class="service-container">
<nv-home></nv-home>
</div>
<div class="nav-container">
<nv-navbar></nv-navbar>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.nav-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #1f263e;
}
.service-container {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
background-color: #1f263e;
}
</style>

18
demo/components/sideMenuDemo.vue

@ -1,7 +1,12 @@
<template>
<div class="container">
<div>
<div class="service-container">
<nv-layout></nv-layout>
</div>
<div class="nav-container">
<nv-navbar></nv-navbar>
</div>
</div>
</template>
<script>
@ -11,11 +16,20 @@ export default {
</script>
<style>
.container {
.nav-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #1f263e;
}
.service-container {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
background-color: #1f263e;
}
</style>

10
demo/index.js

@ -4,10 +4,14 @@ import '../styles/index.scss'
import Demo from './demo.vue'
import Card from 'packages/common/Card'
import Icon from 'packages/common/Icon'
import Loader from 'packages/common/Loader'
import SideMenu from 'packages/nimbus/SideMenu'
import Layout from 'packages/nimbus/Layout'
import Home from 'packages/nimbus/Home'
import Navbar from 'packages/nimbus/Navbar'
import sideMenuDemo from './components/sideMenuDemo'
import homeDemo from './components/homeDemo'
Vue.use(VueRouter)
@ -15,9 +19,13 @@ Card.install(Vue)
Icon.install(Vue)
SideMenu.install(Vue)
Layout.install(Vue)
Navbar.install(Vue)
Loader.install(Vue)
Home.install(Vue)
const routes = [
{ path: '/sidemenu', component: sideMenuDemo }
{ path: '/sidemenu', component: sideMenuDemo },
{ path: '/', component: homeDemo }
]
const router = new VueRouter({

5
package.json

@ -8,13 +8,14 @@
"demo": "cross-env NODE_ENV=development & gulp --gulpfile build/gulpfile.js build & webpack-dev-server --config build/webpack.demo.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
"serve": "npm run dev",
"test": "cross-env NODE_ENV=development karma start test/unit/karma.conf.js"
"test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@vue/babel-preset-app": "^3.8.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-loader": "^8.0.5",
"babel-plugin-istanbul": "^5.1.4",
@ -29,9 +30,11 @@
"gulp-sass": "^4.0.2",
"html-webpack-plugin": "^3.2.0",
"iview": "^3.4.2",
"jsdom": "^15.1.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-jsdom-launcher": "^7.1.0",
"karma-mocha": "^1.3.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",

7
packages/common/Loader/index.js Normal file

@ -0,0 +1,7 @@
import Loader from './src/main.vue'
Loader.install = function (Vue) {
Vue.component(Loader.name, Loader)
}
export default Loader

65
packages/common/Loader/src/main.vue Normal file

@ -0,0 +1,65 @@
<template>
<div class="nv-loader__mask">
<div class="nv-loader__loader">
<svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
</div>
</div>
</template>
<script>
export default {
name: "NvLoader",
props: {
}
};
</script>
<style lang="scss" scoped>
.nv-loader__mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
.circular {
height: 42px;
width: 42px;
animation: loading-rotate 2s linear infinite;
.path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90,150;
stroke-dashoffset: 0;
stroke-width: 3;
stroke: #63E2B7;
stroke-linecap: round;
}
}
}
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90,150;
stroke-dashoffset: -120px
}
}
</style>

7
packages/nimbus/Home/index.js Normal file

@ -0,0 +1,7 @@
import Home from './src/main.vue'
Home.install = function (Vue) {
Vue.component(Home.name, Home)
}
export default Home

67
packages/nimbus/Home/src/main.vue Normal file

@ -0,0 +1,67 @@
<template>
<div class="home">
<div class="columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
</template>
<script>
export default {
name: "NvHome",
props: {},
methods: {
toggle () {
this.collapse = !this.collapse
},
setActive (itemName) {
this.activeItemName = itemName
}
},
data () {
return {
collapse: false,
activeItemName: 'Service Management',
items: [
{
name: 'Service Management'
},
{
name: 'Service Type Management'
},
{
name: 'User Management'
}
]
}
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
.columns {
margin: auto;
display: flex;
margin-left: 272px;
margin-right: 272px;
justify-content: space-between;
.column {
margin-right: 14px;
&:last-child {
margin-right: 0;
}
background-color: white;
flex-grow: 1;
height: 100px;
}
}
}
</style>

151
packages/nimbus/Layout/src/main.vue

@ -1,14 +1,33 @@
<template>
<div class="layout">
<div class="body"></div>
<div class="body" :class="{ collapse: collapse, active: !collapse }">
<div class="header">
<span class="content">
Service Management
</span>
</div>
<nv-loader></nv-loader>
</div>
<div class="menu" :class="{ collapse: collapse, active: !collapse }">
<div class="header">Administration</div>
<div class="item active"><span>Service Management</span></div>
<div class="item"><span>Service Type Management</span></div>
<div class="item"><span>User Management</span></div>
<div class="header">
<div class="content">
<div class="icon">
<nv-icon type="md-settings" :size="22"></nv-icon>
</div>
Administration
</div>
</div>
<div
class="item"
:class="{ active: activeItemName === item.name }"
v-for="item in items"
:key="item.name"
@click="setActive(item.name)"
>
<span>{{ item.name }}</span>
</div>
<div class="toggle-button" @click="toggle"><img src="./toggleButton.svg"></div>
</div>
</div>
</template>
@ -19,11 +38,26 @@ export default {
methods: {
toggle () {
this.collapse = !this.collapse
},
setActive (itemName) {
this.activeItemName = itemName
}
},
data () {
return {
collapse: false
collapse: false,
activeItemName: 'Service Management',
items: [
{
name: 'Service Management'
},
{
name: 'Service Type Management'
},
{
name: 'User Management'
}
]
}
}
};
@ -38,28 +72,49 @@ export default {
left: 0;
right: 0;
}
.menu-container {
display: inline-block;
margin-right: 14px;
width: 256px;
.body {
& {
position: absolute;
left: 272px;
right: 0px;
top: 0;
bottom: 0;
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
&.active {
max-width: 256px;
transition: max-width .3s cubic-bezier(0.4, 0.0, 0.2, 1);
left: 272px;
}
&.collapse {
max-width: 32px;
transition: max-width .25s cubic-bezier(0.4, 0.0, 0.2, 1);
left: 48px;
}
.header {
position: relative;
color: #fff;
font-weight: 700;
padding-top: 21px;
padding-bottom: 21px;
padding-left: 48px;
font-size: 16px;
.content {
background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
-webkit-background-clip: text;
color: transparent;
}
.icon {
position: absolute;
left: 22px;
opacity: .4;
}
}
}
.menu {
& {
display: inline-block;
background-color: #1f263e;
width: 272px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
}
&.active {
@ -72,21 +127,40 @@ export default {
}
&.collapse {
transform: translateX(-224px);
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.toggle-button {
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
.item.active {
span {
opacity: .4;
}
&::before {
content: "";
opacity: 0;
}
&:hover::before {
content: "";
opacity: 0;
}
}
}
.header {
position: relative;
color: #fff;
font-weight: 700;
padding-top: 21px;
padding-bottom: 21px;
padding-left: 48px;
font-size: 16px;
button {
float: right;
.content {
opacity: .9;
}
.icon {
position: absolute;
left: 22px;
opacity: .4;
}
}
.toggle-button {
@ -106,17 +180,19 @@ export default {
padding-left: 48px;
font-size: 14px;
color: #fff;
opacity: 0.4;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
&.active {
opacity: 1;
background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
span {
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: .4;
}
&:hover {
opacity: 1;
&.active span{
opacity: .9;
}
&:hover span {
opacity: .9;
}
&::before {
content: "";
background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
position: absolute;
left: 0;
right: 0;
@ -125,20 +201,11 @@ export default {
z-index: -1;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
// background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
}
&:hover::before {
opacity: 1;
}
&.active::before {
opacity: .9;
}
}
}
.body {
position: absolute;
left: 272px;
right: 0px;
top: 0;
bottom: 0;
}
</style>

7
packages/nimbus/Navbar/index.js Normal file

@ -0,0 +1,7 @@
import Navbar from './src/main.vue'
Navbar.install = function (Vue) {
Vue.component(Navbar.name, Navbar)
}
export default Navbar

68
packages/nimbus/Navbar/src/main.vue Normal file

@ -0,0 +1,68 @@
<template>
<div class="nav">
<div class="left">
<div class="item">TuSimple</div>
</div>
<div class="right">
<div class="item">Beijing</div>
<div class="item">English</div>
<div class="item">Mollie Jennings</div>
</div>
</div>
</template>
<script>
export default {
name: "NvNavbar",
props: {},
methods: {
toggle () {
console.log('hello')
this.collapse = !this.collapse
}
},
data () {
return {
collapse: false
}
}
};
</script>
<style lang="scss" scoped>
.nav {
position: fixed;
top: 0;
height: 50px;
left: 0;
right: 0;
background-color: #1f263e;
box-shadow: 0 2px 6px 1px rgba(0, 0, 0, .1);
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
margin-left: 8px;
.item {
color: white;
margin-left: 14px;
margin-right: 14px;
font-size: 14px;
}
}
.right {
display: flex;
align-items: center;
margin-right: 22px;
.item {
color: #fff;
font-size: 14px;
margin-left: 14px;
margin-right: 14px;
}
}
}
</style>

1
src/Amazing.js

@ -1,2 +1,3 @@
import Amazing from './Amazing.vue'
export default Amazing

14
src/Amazing.vue

@ -1,16 +1,16 @@
<template>
<div>{{title}}</div>
<div>{{title}}</div>
</template>
<script>
export default {
name: 'amazing',
props: ['title'],
methods: {
hello () {
console.log('amazing')
}
name: 'amazing',
props: ['title'],
methods: {
hello () {
console.log('amazing')
}
}
}
</script>

2
test/unit/index.js

@ -1,3 +1,3 @@
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/);
const testsContext = require.context('./specs', true, /\.spec.js$/);
testsContext.keys().forEach(testsContext);

4
test/unit/karma.conf.js

@ -2,8 +2,6 @@
// Generated on Thu May 09 2019 10:31:35 GMT+0800 (China Standard Time)
const webpackConfig = require('../../build/webpack.test')
process.env.CHROME_BIN = require('puppeteer').executablePath()
module.exports = function(config) {
config.set({
@ -63,7 +61,7 @@ module.exports = function(config) {
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadless'],
browsers: ['jsdom'],
// Continuous Integration mode