mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue
Conflicts: packages/zanui-css/src/index.css
This commit is contained in:
niunai
commit
5e976c8e20
@ -10,16 +10,20 @@ module.exports = {
|
||||
|
||||
env: {
|
||||
es6: true,
|
||||
node: true
|
||||
node: true,
|
||||
mocha: true
|
||||
},
|
||||
|
||||
plugins: ['vue'],
|
||||
|
||||
globals: {
|
||||
expect: true,
|
||||
sinon: true,
|
||||
zanui: true,
|
||||
document: false,
|
||||
navigator: false,
|
||||
window: false
|
||||
window: false,
|
||||
require: true
|
||||
},
|
||||
|
||||
rules: {
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -10,3 +10,4 @@ lib/*
|
||||
node_modules
|
||||
example/dist
|
||||
dist
|
||||
test/unit/coverage
|
||||
|
||||
4
Makefile
4
Makefile
@ -1,3 +1,4 @@
|
||||
.PHONY: test
|
||||
usage = "\
|
||||
Usage: make <option> \n\n\
|
||||
init componentname 初始化一个新组件，请忽视makefile的报错 \n\n\
|
||||
@ -12,3 +13,6 @@ init:
|
||||
|
||||
dev:
|
||||
npm run dev
|
||||
|
||||
test:
|
||||
npm run test
|
||||
|
||||
14
build/webpack.components.js
Normal file
14
build/webpack.components.js
Normal file
@ -0,0 +1,14 @@
|
||||
var Components = require('../components.json');
|
||||
var config = require('./webpack.config.js');
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
config.entry = Components;
|
||||
|
||||
config.output = {
|
||||
path: './lib',
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'umd'
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@ -81,12 +81,6 @@ if (process.env.NODE_ENV === 'production') {
|
||||
NODE_ENV: 'production'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
@ -101,9 +95,7 @@ if (process.env.NODE_ENV === 'production') {
|
||||
})
|
||||
];
|
||||
} else {
|
||||
// development 环境不会抽css - -
|
||||
module.exports.plugins = [
|
||||
new ExtractTextPlugin('style.dev.css'),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
|
||||
13683
docs/build/0.js
vendored
13683
docs/build/0.js
vendored
File diff suppressed because one or more lines are too long
200
docs/build/1.js
vendored
200
docs/build/1.js
vendored
@ -1,199 +1 @@
|
||||
webpackJsonp([1],{
|
||||
|
||||
/***/ 194:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
/* styles */
|
||||
__webpack_require__(315)
|
||||
|
||||
var Component = __webpack_require__(0)(
|
||||
/* script */
|
||||
__webpack_require__(204),
|
||||
/* template */
|
||||
__webpack_require__(279),
|
||||
/* scopeId */
|
||||
null,
|
||||
/* cssModules */
|
||||
null
|
||||
)
|
||||
|
||||
module.exports = Component.exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 204:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _navConfig = __webpack_require__(7);
|
||||
|
||||
var _navConfig2 = _interopRequireDefault(_navConfig);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = {
|
||||
data: function data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: _navConfig2.default['zh-CN'],
|
||||
base: '/component'
|
||||
};
|
||||
}
|
||||
}; //
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 225:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(4)();
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 279:
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
|
||||
return _c('div', {
|
||||
staticClass: "side-nav"
|
||||
}, [_c('ul', _vm._l((_vm.data), function(item) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + item.path,
|
||||
"exact": ""
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(item.title || item.name)
|
||||
}
|
||||
}), _vm._v(" "), (item.children) ? _c('ul', {
|
||||
staticClass: "pure-menu-list sub-nav"
|
||||
}, _vm._l((item.children), function(navItem) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title || navItem.name)
|
||||
}
|
||||
})], 1)
|
||||
})) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
|
||||
return _c('div', {
|
||||
staticClass: "nav-group"
|
||||
}, [_c('div', {
|
||||
staticClass: "nav-group__title"
|
||||
}, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
|
||||
staticClass: "pure-menu-list"
|
||||
}, [_vm._l((group.list), function(navItem) {
|
||||
return [(!navItem.disabled) ? _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title)
|
||||
}
|
||||
})], 1) : _vm._e()]
|
||||
})], 2)])
|
||||
}) : _vm._e()], 2)
|
||||
}))])
|
||||
},staticRenderFns: []}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 315:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(225);
|
||||
if(typeof content === 'string') content = [[module.i, content, '']];
|
||||
if(content.locals) module.exports = content.locals;
|
||||
// add the styles to the DOM
|
||||
var update = __webpack_require__(14)("1517d9c0", content, true);
|
||||
// Hot Module Replacement
|
||||
if(false) {
|
||||
// When the styles change, update the <style> tags
|
||||
if(!content.locals) {
|
||||
module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
|
||||
var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
|
||||
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
||||
update(newContent);
|
||||
});
|
||||
}
|
||||
// When the module is disposed, remove the <style> tags
|
||||
module.hot.dispose(function() { update(); });
|
||||
}
|
||||
|
||||
/***/ })
|
||||
|
||||
});
|
||||
//# sourceMappingURL=1.js.map
|
||||
webpackJsonp([1],{220:function(t,e,a){a(347);var i=a(1)(a(230),a(309),null,null);t.exports=i.exports},230:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(9),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},252:function(t,e,a){e=t.exports=a(0)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb;li{list-style:none}ul{padding:0;margin:0;overflow:hidden}.nav-item{a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s;&.active{color:#20a0ff}}.nav-item{a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;&:hover{color:#20a0ff}}}}.nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}}",""])},309:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},347:function(t,e,a){var i=a(252);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(15)("1517d9c0",i,!0)}});
|
||||
10670
docs/build/zanui-docs.js
vendored
10670
docs/build/zanui-docs.js
vendored
File diff suppressed because one or more lines are too long
16172
docs/build/zanui-examples.js
vendored
16172
docs/build/zanui-examples.js
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="page-image-pewview">
|
||||
<h1 class="page-title">Image Preview</h1>
|
||||
</div>
|
||||
</template>
|
||||
18
docs/examples/image-preview.vue
Normal file
18
docs/examples/image-preview.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="page-image-pewview">
|
||||
<h1 class="page-title">Image Preview</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-image-preview v-model="preview"></zan-image-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
preview: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -131,7 +131,7 @@
|
||||
},
|
||||
{
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview 图片预览"
|
||||
"title": "ImagePreview"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
28
package.json
28
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
@ -15,11 +15,15 @@
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
|
||||
"build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js",
|
||||
"build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
|
||||
"builddocs": "webpack --progress --hide-modules --config build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css",
|
||||
"builddocs": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib",
|
||||
"lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
|
||||
"lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet",
|
||||
"test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
|
||||
"test:watch": "karma start test/unit/karma.conf.js",
|
||||
"coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p | xargs -I {} open {} "
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -39,6 +43,7 @@
|
||||
"vue": "^2.1.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"2webpack2": "^1.2.1",
|
||||
"autoprefixer": "^6.7.5",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.17.0",
|
||||
@ -49,8 +54,10 @@
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-runtime": "^6.11.0",
|
||||
"chai": "^3.5.0",
|
||||
"cheerio": "^0.22.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cp-cli": "^1.0.2",
|
||||
@ -63,6 +70,7 @@
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"eslint-plugin-promise": "^1.0.8",
|
||||
"eslint-plugin-standard": "^1.3.2",
|
||||
"eslint-plugin-vue": "^2.0.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.5",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-save": "^0.2.0",
|
||||
@ -78,11 +86,20 @@
|
||||
"isparta-loader": "^2.0.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"json-templater": "^1.0.4",
|
||||
"karma": "^1.5.0",
|
||||
"karma-chrome-launcher": "^2.0.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-sinon-chai": "^1.2.4",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.30",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"lerna": "2.0.0-beta.31",
|
||||
"lolex": "^1.5.1",
|
||||
"markdown-it": "^6.1.1",
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"pixrem": "^3.0.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-calc": "^5.0.0",
|
||||
@ -100,9 +117,12 @@
|
||||
"postcss-utils": "^1.0.1",
|
||||
"precss": "^1.4.0",
|
||||
"prismjs": "^1.5.1",
|
||||
"progress-bar-webpack-plugin": "^1.9.3",
|
||||
"rimraf": "^2.5.4",
|
||||
"run-sequence": "^1.2.2",
|
||||
"saladcss-bem": "^0.0.1",
|
||||
"sinon": "^1.17.7",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"style-loader": "^0.13.1",
|
||||
"theaterjs": "^3.0.0",
|
||||
"transliteration": "^1.1.11",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
{{title}}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge',
|
||||
@ -37,4 +38,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -54,14 +54,14 @@ export default {
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
let parentValue = this.parentGroup.value.slice();
|
||||
const parentValue = this.parentGroup.value.slice();
|
||||
if (val) {
|
||||
if (parentValue.indexOf(this.name) === -1) {
|
||||
parentValue.push(this.name);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
} else {
|
||||
let index = parentValue.indexOf(this.name);
|
||||
const index = parentValue.indexOf(this.name);
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
|
||||
@ -70,10 +70,8 @@ export default {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
this.bodyPaddingRight = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import ImagePreview from './src/image-preview';
|
||||
import ImagePreview from './src/image-preview.vue';
|
||||
|
||||
export default ImagePreview;
|
||||
|
||||
0
packages/image-preview/src/image-preview.js
Normal file
0
packages/image-preview/src/image-preview.js
Normal file
@ -1,18 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>author: {{ author }}</h2>
|
||||
<div>Hello {{ name }}</div>
|
||||
</div>
|
||||
<transition name="image-fade">
|
||||
<div class="zan-image-preview" ref="previewContainer" v-show="value">
|
||||
<img class="zan-image-preview__image" :src="image" alt="" :style="imageStyle">
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sample',
|
||||
props: ['author'],
|
||||
data() {
|
||||
return {
|
||||
name: 'World'
|
||||
};
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'zan-image-preview',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
image: 'https://img.yzcdn.cn/upload_files/2017/03/02/FhDtQ7okM18PeQ3P0RAfIzVADUEq.jpg'
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.open();
|
||||
this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* 图片样式计算
|
||||
* 根据屏幕自适应显示最长边
|
||||
*/
|
||||
imageStyle() {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
var visibileColumnCount = this.visibileColumnCount;
|
||||
var itemHeight = this.itemHeight;
|
||||
|
||||
return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
|
||||
return [-itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2)];
|
||||
},
|
||||
|
||||
/**
|
||||
@ -125,10 +125,10 @@ export default {
|
||||
* 将当前`value`值转换成需要垂直方向需要`translate`的值
|
||||
*/
|
||||
value2Translate(value) {
|
||||
let values = this.currentValues;
|
||||
let valueIndex = values.indexOf(value);
|
||||
let offset = Math.floor(this.visibileColumnCount / 2);
|
||||
let itemHeight = this.itemHeight;
|
||||
const values = this.currentValues;
|
||||
const valueIndex = values.indexOf(value);
|
||||
const offset = Math.floor(this.visibileColumnCount / 2);
|
||||
const itemHeight = this.itemHeight;
|
||||
|
||||
if (valueIndex !== -1) {
|
||||
return (valueIndex - offset) * (-itemHeight);
|
||||
@ -139,10 +139,10 @@ export default {
|
||||
* 根据当前`translate`的值转换成当前选中的`value`
|
||||
*/
|
||||
translate2Value(translate) {
|
||||
let itemHeight = this.itemHeight;
|
||||
const itemHeight = this.itemHeight;
|
||||
translate = Math.round(translate / itemHeight) * itemHeight;
|
||||
|
||||
let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
|
||||
const index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
|
||||
|
||||
return this.currentValues[index];
|
||||
},
|
||||
@ -177,8 +177,8 @@ export default {
|
||||
dragState.left = event.pageX;
|
||||
dragState.top = event.pageY;
|
||||
|
||||
let deltaY = dragState.top - dragState.startTop;
|
||||
let translate = dragState.startTranslateTop + deltaY;
|
||||
const deltaY = dragState.top - dragState.startTop;
|
||||
const translate = dragState.startTranslateTop + deltaY;
|
||||
|
||||
translateUtil.translateElement(el, null, translate);
|
||||
|
||||
@ -229,8 +229,8 @@ export default {
|
||||
* `value`改变时调用
|
||||
*/
|
||||
doOnValueChange() {
|
||||
let value = this.currentValue;
|
||||
let wrapper = this.$refs.wrapper;
|
||||
const value = this.currentValue;
|
||||
const wrapper = this.$refs.wrapper;
|
||||
|
||||
this.$emit('input', this.currentValue);
|
||||
|
||||
|
||||
@ -66,8 +66,8 @@ export default {
|
||||
|
||||
computed: {
|
||||
values() {
|
||||
let columns = this.columns || [];
|
||||
let values = [];
|
||||
const columns = this.columns || [];
|
||||
const values = [];
|
||||
|
||||
columns.forEach(column => {
|
||||
values.push(column.value || column.values[column.defaultIndex || 0]);
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
* 获取对应索引的列的实例
|
||||
*/
|
||||
getColumn(index) {
|
||||
let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
|
||||
const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
|
||||
return children[index];
|
||||
},
|
||||
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
* 获取对应列中选中的值
|
||||
*/
|
||||
getColumnValue(index) {
|
||||
let column = this.getColumn(index);
|
||||
const column = this.getColumn(index);
|
||||
return column && column.values[column.valueIndex];
|
||||
},
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
* 设置对应列中选中的值
|
||||
*/
|
||||
setColumnValue(index, value) {
|
||||
let column = this.getColumn(index);
|
||||
const column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValue = value;
|
||||
}
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
* 获取对应列中所有的备选值
|
||||
*/
|
||||
getColumnValues(index) {
|
||||
let column = this.getColumn(index);
|
||||
const column = this.getColumn(index);
|
||||
return column && column.currentValues;
|
||||
},
|
||||
|
||||
@ -123,7 +123,7 @@ export default {
|
||||
* 设置对应列中所有的备选值
|
||||
*/
|
||||
setColumnValues(index, values) {
|
||||
let column = this.getColumn(index);
|
||||
const column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValues = values;
|
||||
}
|
||||
|
||||
@ -21,8 +21,8 @@ export default {
|
||||
|
||||
computed: {
|
||||
status() {
|
||||
let index = this.$parent.steps.indexOf(this);
|
||||
let active = this.$parent.active;
|
||||
const index = this.$parent.steps.indexOf(this);
|
||||
const active = this.$parent.active;
|
||||
|
||||
if (index === -1) {
|
||||
return '';
|
||||
|
||||
@ -34,8 +34,8 @@ export default {
|
||||
|
||||
computed: {
|
||||
computedIconClass() {
|
||||
let iconName = `zan-icon-${this.icon}`;
|
||||
let result = this.iconClass.split(' ');
|
||||
const iconName = `zan-icon-${this.icon}`;
|
||||
const result = this.iconClass.split(' ');
|
||||
result.push(iconName);
|
||||
|
||||
return result;
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
switchStates: function() {
|
||||
let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
|
||||
const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
|
||||
'zan-switch--' + (this.disabled ? 'disabled' : '')];
|
||||
|
||||
return switchStates;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
15
packages/zanui-css/src/image_preview.css
Normal file
15
packages/zanui-css/src/image_preview.css
Normal file
@ -0,0 +1,15 @@
|
||||
@component-namespace zan {
|
||||
@b image-preview {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
overflow: hidden;
|
||||
|
||||
@e image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -20,3 +20,4 @@
|
||||
@import './checkbox.css';
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './image_preview.css';
|
||||
|
||||
@ -61,7 +61,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
version: '0.0.13',
|
||||
version: '0.0.14',
|
||||
Button,
|
||||
Switch,
|
||||
Field,
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
export default function(target, ...sources) {
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
let source = sources[i] || {};
|
||||
for (let prop in source) {
|
||||
const source = sources[i] || {};
|
||||
for (const prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
let value = source[prop];
|
||||
const value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
|
||||
@ -17,9 +17,9 @@ if (!Vue.prototype.$isServer) {
|
||||
engine = 'trident';
|
||||
}
|
||||
|
||||
var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
|
||||
var cssPrefix = { trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-' }[engine];
|
||||
|
||||
var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
|
||||
var vendorPrefix = { trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O' }[engine];
|
||||
|
||||
var helperElem = document.createElement('div');
|
||||
var perspectiveProperty = vendorPrefix + 'Perspective';
|
||||
@ -34,7 +34,7 @@ if (!Vue.prototype.$isServer) {
|
||||
}
|
||||
|
||||
var getTranslate = function(element) {
|
||||
var result = {left: 0, top: 0};
|
||||
var result = { left: 0, top: 0 };
|
||||
if (element === null || element.style === null) return result;
|
||||
|
||||
var transform = element.style[transformProperty];
|
||||
|
||||
57
test/unit/creater.js
Normal file
57
test/unit/creater.js
Normal file
@ -0,0 +1,57 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
let id = 0;
|
||||
|
||||
class Creater {
|
||||
constructor(Compo, propsData) {
|
||||
let Ctor = Vue.extend(Compo);
|
||||
this.vue = new Ctor({ propsData });
|
||||
this.el = null;
|
||||
}
|
||||
|
||||
mount() {
|
||||
const elem = exports.createElm();
|
||||
this.vue.$mount(elem);
|
||||
this.el = this.vue.$el;
|
||||
}
|
||||
|
||||
triggerEvent(name, ...opts) {
|
||||
let eventName;
|
||||
let elem = this.el;
|
||||
|
||||
if (/^mouse|click/.test(name)) {
|
||||
eventName = 'MouseEvents';
|
||||
} else if (/^key/.test(name)) {
|
||||
eventName = 'KeyboardEvent';
|
||||
} else {
|
||||
eventName = 'HTMLEvents';
|
||||
}
|
||||
const evt = document.createEvent(eventName);
|
||||
|
||||
evt.initEvent(name, ...opts);
|
||||
elem.dispatchEvent
|
||||
? elem.dispatchEvent(evt)
|
||||
: elem.fireEvent('on' + name, evt);
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.el &&
|
||||
this.el.parentNode &&
|
||||
this.el.parentNode.removeChild(this.el);
|
||||
}
|
||||
}
|
||||
|
||||
exports.createElm = function() {
|
||||
const elm = document.createElement('div');
|
||||
|
||||
elm.id = 'app' + ++id;
|
||||
document.body.appendChild(elm);
|
||||
|
||||
return elm;
|
||||
};
|
||||
|
||||
exports.createVue = function(Compo, propsData = {}) {
|
||||
return new Creater(Compo, propsData);
|
||||
};
|
||||
132
test/unit/get-webpack-conf.js
Normal file
132
test/unit/get-webpack-conf.js
Normal file
@ -0,0 +1,132 @@
|
||||
const path = require('path');
|
||||
const to2 = require('2webpack2');
|
||||
// const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const getPostcssPlugin = require('../../build/utils/postcss_pipe');
|
||||
|
||||
const webpackConfig = {
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), 'dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[id].js'
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin()
|
||||
],
|
||||
postcss: getPostcssPlugin,
|
||||
resolve: {
|
||||
extensions: [
|
||||
'',
|
||||
'.js',
|
||||
'.json',
|
||||
'.vue'
|
||||
],
|
||||
alias: {
|
||||
src: path.resolve(process.cwd(), 'src'),
|
||||
packages: path.resolve(process.cwd(), 'packages'),
|
||||
examples: path.resolve(process.cwd(), 'examples'),
|
||||
vue$: 'vue/dist/vue.common.js'
|
||||
}
|
||||
},
|
||||
resolveLoader: {},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.(jsx?|babel|es6)$/,
|
||||
include: path.resolve(process.cwd()),
|
||||
exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
|
||||
loaders: [
|
||||
'babel-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loaders: [
|
||||
'json-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loaders: [
|
||||
'html-loader?minimize=false'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loaders: [
|
||||
'vue-loader'
|
||||
]
|
||||
}
|
||||
],
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'isparta',
|
||||
exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
|
||||
include: /src|packages/
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
loader: 'eslint-loader'
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
loader: 'eslint-loader'
|
||||
}
|
||||
],
|
||||
postLoaders: []
|
||||
},
|
||||
devtool: '#inline-source-map',
|
||||
vue: {
|
||||
loaders: {
|
||||
css: 'vue-style-loader!css-loader?sourceMap',
|
||||
less: 'vue-style-loader!css-loader?sourceMap!less-loader?sourceMap',
|
||||
sass: 'vue-style-loader!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
|
||||
scss: 'vue-style-loader!css-loader?sourceMap!sass-loader?sourceMap',
|
||||
stylus: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
|
||||
styl: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
|
||||
js: 'isparta-loader!eslint-loader'
|
||||
},
|
||||
preserveWhitespace: false
|
||||
},
|
||||
eslint: {
|
||||
emitWarning: true
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = to2(webpackConfig, { quiet: true, context: true });
|
||||
11
test/unit/index.js
Normal file
11
test/unit/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
require('packages/zanui-css/src/index.css');
|
||||
|
||||
// require all test files (files that ends with .spec.js)
|
||||
const testsReq = require.context('./specs', true, /\.spec$/);
|
||||
testsReq.keys().forEach(testsReq);
|
||||
|
||||
// require all src files except main.js for coverage.
|
||||
// you can also change this to match only the subset of files that
|
||||
// you want coverage for.
|
||||
const srcReq = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
|
||||
srcReq.keys().forEach(srcReq);
|
||||
31
test/unit/karma.conf.js
Normal file
31
test/unit/karma.conf.js
Normal file
@ -0,0 +1,31 @@
|
||||
require('babel-polyfill');
|
||||
|
||||
require('babel-core/register')({
|
||||
presets: [require('babel-preset-es2015')]
|
||||
});
|
||||
|
||||
var webpackConfig = require('./get-webpack-conf');
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
browsers: ['Chrome'],
|
||||
frameworks: ['mocha', 'sinon-chai'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
'./index.js': ['webpack', 'sourcemap']
|
||||
},
|
||||
webpack: webpackConfig,
|
||||
webpackMiddleware: {
|
||||
noInfo: true
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: './coverage',
|
||||
reporters: [
|
||||
{ type: 'lcov', subdir: '.' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
83
test/unit/specs/switch.spec.js
Normal file
83
test/unit/specs/switch.spec.js
Normal file
@ -0,0 +1,83 @@
|
||||
import Switch from 'packages/switch';
|
||||
import { createVue } from '../creater';
|
||||
|
||||
describe('Switch', () => {
|
||||
let vm;
|
||||
afterEach(() => {
|
||||
vm && vm.destroy();
|
||||
});
|
||||
|
||||
it('create', () => {
|
||||
vm = createVue(Switch, {
|
||||
checked: true
|
||||
});
|
||||
vm.mount();
|
||||
|
||||
expect(vm.el.classList.contains('zan-switch')).to.true;
|
||||
expect(vm.el.classList.contains('zan-switch--on')).to.true;
|
||||
});
|
||||
|
||||
it('create off switch', () => {
|
||||
vm = createVue(Switch, {
|
||||
checked: false
|
||||
});
|
||||
vm.mount();
|
||||
|
||||
expect(vm.el.classList.contains('zan-switch')).to.true;
|
||||
});
|
||||
|
||||
it('switch click default', done => {
|
||||
vm = createVue({
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'zan-switch': Switch
|
||||
},
|
||||
template: `
|
||||
<zan-switch :checked="checked"></zan-switch>
|
||||
`
|
||||
});
|
||||
vm.mount();
|
||||
expect(vm.el.classList.contains('zan-switch')).to.true;
|
||||
expect(vm.el.classList.contains('zan-switch--off')).to.true;
|
||||
vm.el.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(vm.el.classList.contains('zan-switch--off')).to.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('switch click', done => {
|
||||
vm = createVue({
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'zan-switch': Switch
|
||||
},
|
||||
template: `
|
||||
<zan-switch :checked="checked" :onChange="handleClick"></zan-switch>
|
||||
`,
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
}
|
||||
});
|
||||
vm.mount();
|
||||
expect(vm.el.classList.contains('zan-switch')).to.true;
|
||||
expect(vm.el.classList.contains('zan-switch--off')).to.true;
|
||||
vm.el.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(vm.el.classList.contains('zan-switch--on')).to.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user