alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

done

Browse Source
This commit is contained in:
zhuxiang
2017-03-07 15:00:05 +08:00
parent 847e509244 3e474ef451
commit fdf2868cc7
149 changed files with 3024 additions and 78304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/actionsheet/CHANGELOG.md
+8
View File
@@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/actionsheet/README.md
+26
View File
@@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)
packages/actionsheet/index.js
+3
View File
@@ -0,0 +1,3 @@
import ActionSheet from './src/actionsheet';
export default ActionSheet;
packages/actionsheet/package.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/actionsheet/src/actionsheet.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<transition name="actionsheet-float">
<div class="zan-actionsheet" v-show="currentValue">
<div class="zan-actionsheet-header" v-if="title">
<h3 v-text="title"></h3>
</div>
<slot>
<ul class="zan-actionsheet-list">
<li v-for="item in actions" class="zan-actionsheet-item" :class="item.className" @click.stop="handleItemClick(item)">{{ item.name }}</li>
</ul>
<a class="zan-actionsheet-button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</slot>
</div>
</transition>
</template>
<script>
import Popup from 'src/mixins/popup';
export default {
name: 'zan-actionsheet',
mixins: [Popup],
props: {
actions: {
type: Array,
default: () => []
},
title: String,
cancelText: String,
overlay: {
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
data() {
return {
currentValue: false
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
this.currentValue = val;
}
},
mounted() {
if (this.value) {
this.currentValue = true;
this.open();
}
},
methods: {
handleItemClick(item) {
}
}
};
</script>
packages/badge/src/badge.vue
+2 -1
View File
@@ -5,6 +5,7 @@
{{title}}
</a>
</template>
<script>
export default {
name: 'zan-badge',
@@ -37,4 +38,4 @@ export default {
}
}
};
</script>
</script>
packages/button/src/button.js
+11 -5
View File
@@ -61,17 +61,23 @@ export default {
'zan-button--' + type,
'zan-button--' + size,
{
'is-disabled': disabled,
'is-loading': loading,
'is-block': block
'zan-button--disabled': disabled,
'zan-button--loading': loading,
'zan-button--block': block
}
]}
onClick={this.handleClick}
>
{
loading ? <i class="zan-icon-loading"></i> : null
loading ?
<zan-loading
class="zan-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}>
</zan-loading> :
null
}
<span class="zan-button-text">{this.$slots.default}</span>
<span class="zan-button__text">{this.$slots.default}</span>
</Tag>
);
}
packages/cell/src/cell.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</div>
<div class="zan-cell__value" :class="{
'is-link': isLink,
'is-alone': !title && !label
'is-alone': !this.$slots.title && !title && !label
}">
<slot>
<span v-text="value"></span>
packages/checkbox/src/checkbox.vue
+3 -3
View File
@@ -2,7 +2,7 @@
<div
class="zan-checkbox"
:class="{
'is-disabled': isDisabled
'zan-checkbox--disabled': isDisabled
}">
<span class="zan-checkbox__input">
<input
@@ -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);
packages/col/CHANGELOG.md
+8
View File
@@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/col/README.md
+26
View File
@@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)
packages/col/index.js
+3
View File
@@ -0,0 +1,3 @@
import Col from './src/col';
export default Col;
packages/col/package.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/col/src/col.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<div
:class="[
`${prefix}-col`,
{
[`${prefix}-col-${span}`]: span,
[`${prefix}-col-offset-${offset}`]: offset,
}
]"
:style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-col',
props: {
span: [Number, String],
offset: [Number, String],
prefix: {
type: String,
default: 'zan'
}
},
computed: {
gutter() {
return Number(this.$parent.gutter);
},
style() {
const padding = `${this.gutter / 2}px`;
return this.gutter
? { paddingLeft: padding, paddingRight: padding }
: null;
}
}
};
</script>
packages/dialog/src/dialog.vue
-2
View File
@@ -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);
}
packages/field/src/field.vue
+2 -2
View File
@@ -31,13 +31,13 @@
</template>
<script>
import zCell from 'packages/cell';
import zanCell from 'packages/cell';
export default {
name: 'zan-field',
components: {
zCell
zanCell
},
props: {
packages/image-preview/CHANGELOG.md
+8
View File
@@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/image-preview/README.md
+26
View File
@@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)
packages/image-preview/index.js
+3
View File
@@ -0,0 +1,3 @@
import ImagePreview from './src/image-preview.js';
export default ImagePreview;
packages/image-preview/package.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "@youzan/zan-image-pewview",
"version": "0.0.1",
"description": "image preview component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/image-preview/src/image-preview.js
+31
View File
@@ -0,0 +1,31 @@
import Vue from 'vue';
import ImagePreview from './image-preview.vue';
import merge from 'src/utils/merge';
let instance;
const ImagePreviewConstructor = Vue.extend(ImagePreview);
const initInstance = () => {
instance = new ImagePreviewConstructor({
el: document.createElement('div')
});
};
var ImagePreviewBox = image => {
if (!instance) {
initInstance();
}
if (!instance.value) {
instance.image = image;
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.value = true;
});
}
};
export default ImagePreviewBox;
packages/image-preview/src/image-preview.vue
+97
View File
@@ -0,0 +1,97 @@
<template>
<transition name="image-fade">
<div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
<img class="zan-image-preview__image" :src="image" alt="" :class="{
'zan-image-preview__image--center': true,
'zan-image-preview__image--top': imageIsLargeView
}">
</div>
</transition>
</template>
<script>
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: '',
viewportSize: null
};
},
methods: {
handlePreviewClick() {
this.value = false;
},
/**
* 图片样式计算
* 根据屏幕自适应显示最长边
*/
computeImageStyle() {
// const previewSize = this.$refs.previewContainer.getBoundingClientRect();
// const img = new Image();
// const _this = this;
// img.onload = function() {
// const imgRatio = parseFloat(this.width / this.height);
// const previewRatio = parseFloat(previewSize.width / previewSize.height);
// if (previewRatio <= imgRatio) {
// const top = (previewSize.height - parseInt(previewSize.width / imgRatio, 10)) / 2;
// _this.imageStyle = {
// width: '100%',
// height: 'auto',
// top: top + 'px'
// };
// } else if (previewRatio > imgRatio) {
// _this.imageStyle = {
// width: 'auto',
// height: '100%'
// };
// }
// };
// img.src = this.image;
},
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>
packages/loading/src/loading.vue
+21 -2
View File
@@ -1,11 +1,30 @@
<template>
<div class="zan-loading">
<span class="zan-spinner"></span>
<span class="zan-loading__spinner" :class="['zan-loading__spinner--' + type, 'zan-loading__spinner--' + color]"></span>
</div>
</template>
<script>
const VALID_TYPES = ['gradient-circle', 'circle'];
const VALID_COLORS = ['black', 'white'];
export default {
name: 'zan-loading'
name: 'zan-loading',
props: {
type: {
type: String,
default: 'gradient-circle',
validate(value) {
return VALID_TYPES.indexOf(value) > -1;
}
},
color: {
type: String,
default: 'black',
validate(value) {
return VALID_COLORS.indexOf(value) > -1;
}
}
}
};
</script>
packages/picker/src/picker-column.vue
+11 -11
View File
@@ -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);
packages/picker/src/picker.vue
+7 -7
View File
@@ -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;
}
packages/radio/src/radio.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<div
class="zan-radio"
:class="{
'is-disabled': isDisabled
'zan-radio--disabled': isDisabled
}">
<span class="zan-radio__input">
<input
@@ -44,6 +44,7 @@ export default {
currentValue: {
get() {
console.log(this.value);
return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
},
packages/row/CHANGELOG.md
+8
View File
@@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/row/README.md
+26
View File
@@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)
packages/row/index.js
+3
View File
@@ -0,0 +1,3 @@
import Row from './src/row';
export default Row;
packages/row/package.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/row/src/row.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<div
:class="`${prefix}-row`"
:style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-row',
props: {
prefix: {
type: String,
default: 'zan'
},
gutter: [Number, String]
},
computed: {
style() {
const gutter = Number(this.gutter);
const margin = `-${gutter / 2}px`;
return gutter
? { marginLeft: margin, marginRight: margin }
: {};
}
}
};
</script>
packages/steps/src/step.vue
+33 -3
View File
@@ -1,11 +1,41 @@
<template>
<div class="zan-step">
<div class="zan-step" :class="statusClass">
<div class="zan-step__circle-container">
<i class="zan-step__circle" v-if="status !== 'process'"></i>
<i class="zan-icon zan-icon-checked" v-else></i>
</div>
<p class="zan-step__title">
<slot></slot>
</p>
<div class="zan-step__line"></div>
</div>
</template>
<script>
export default {
name: 'zan-step'
name: 'zan-step',
beforeCreate() {
this.$parent.steps.push(this);
},
computed: {
status() {
const index = this.$parent.steps.indexOf(this);
const active = this.$parent.active;
if (index === -1) {
return '';
} else if (index < active) {
return 'finish';
} else if (index === active) {
return 'process';
}
},
statusClass() {
const status = this.status;
return status ? 'zan-step--' + status : '';
}
}
};
</script>
packages/steps/src/steps.vue
+42 -5
View File
@@ -1,6 +1,16 @@
<template>
<div class="zan-steps">
<div class="zan-steps__desc"></div>
<div class="zan-steps" :class="`zan-steps--${steps.length}`">
<div class="zan-steps__status" v-if="icon">
<i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
<div class="zan-steps__message">
<div class="zan-steps__message-wrapper">
<h4 class="zan-steps__title" v-text="title"></h4>
<p class="zan-steps__desc" v-text="description"></p>
</div>
</div>
<slot name="message-extra">
</slot>
</div>
<div class="zan-steps__items">
<slot></slot>
</div>
@@ -8,7 +18,34 @@
</template>
<script>
export default {
name: 'zan-steps'
};
export default {
name: 'zan-steps',
props: {
active: Number,
icon: String,
iconClass: {
type: String,
default: ''
},
title: String,
description: String
},
computed: {
computedIconClass() {
const iconName = `zan-icon-${this.icon}`;
const result = this.iconClass.split(' ');
result.push(iconName);
return result;
}
},
data() {
return {
steps: []
};
}
};
</script>
packages/switch/src/switch.vue
+7 -8
View File
@@ -1,8 +1,9 @@
<template>
<div class="zan-switch" :class="switchState" @click="toggleState">
<div class="zan-switch__node" :class="switchState">
<div class="zan-switch" :class="switchStates" @click="toggleState">
<div class="zan-switch__node">
<zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
</div>
<div class="zan-switch__bg"></div>
</div>
</template>
@@ -40,13 +41,11 @@ export default {
}
},
computed: {
switchState: function() {
let switchState = this.checked ? ['is-on'] : ['is-off'];
switchStates: function() {
const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
'zan-switch--' + (this.disabled ? 'disabled' : '')];
if (this.disabled) switchState.push('is-disabled');
if (this.loading) switchState.push('is-loading');
return switchState;
return switchStates;
}
},
methods: {
packages/zanui-css/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-css",
"version": "0.0.8",
"version": "0.0.15",
"description": "zanui css.",
"main": "lib/index.css",
"style": "lib/index.css",
packages/zanui-css/src/actionsheet.css
+9
View File
@@ -0,0 +1,9 @@
@component-namespace zan {
@b actionsheet {
}
}
.actionsheet-float-bottom-enter,
.actionsheet-float-bottom-leave-active {
transform: translate3d(-50%, 100%, 0);
}
packages/zanui-css/src/button.css
+26 -3
View File
@@ -1,4 +1,5 @@
@import "./common/var.css";
@import './common/var.css';
@import './loading.css';
@component-namespace zan {
@b button {
@@ -27,6 +28,10 @@
opacity: .3;
}
& + .zan-button {
margin-left: 10px;
}
@m default {
color: $button-default-color;
background-color: $button-default-background-color;
@@ -73,16 +78,34 @@
height: 22px;
line-height: 20px;
font-size: 10px;
& + .zan-button--mini {
margin-left: 5px;
}
}
@when disabled {
@m disabled {
color: $button-disabled-color;
background-color: $button-disabled-background-color;
border: 1px solid $button-disabled-border-color;
}
@when block {
@m block {
display: block;
width: 100%;
}
@m loading {
.zan-button__text {
display: none;
}
}
@e icon-loading {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
}
}
}
packages/zanui-css/src/button_group.css
+2 -6
View File
@@ -2,6 +2,7 @@
display: inline-block;
box-sizing: border-box;
padding-right: 10px;
vertical-align: middle;
&:last-child {
padding-right: 0;
}
@@ -14,12 +15,7 @@
@b button-group {
font-size: 0;
> .zan-button {
margin-right: 10px;
&::last-child {
margin-right: 0;
}
}
}
@b button-1 {
@mixin button-wrap;
packages/zanui-css/src/cell.css
+1
View File
@@ -5,6 +5,7 @@
@b cell-group {
padding-left: 10px;
position: relative;
background-color: #fff;
&::after {
@mixin border-retina (top, bottom);
packages/zanui-css/src/checkbox.css
+6 -1
View File
@@ -2,7 +2,9 @@
@component-namespace zan {
@b checkbox {
@when disabled {
overflow: hidden;
@m disabled {
.zan-icon {
color: #d1dbe5;
}
@@ -12,6 +14,7 @@
position: relative;
height: 22px;
margin-right: 15px;
float: left;
}
@e control {
@@ -26,6 +29,8 @@
@e label {
line-height: 22px;
margin-left: 37px;
display: block;
}
.zan-icon {
packages/zanui-css/src/col.css
+52
View File
@@ -0,0 +1,52 @@
.zan-col {
float: left;
box-sizing: border-box;
}
.zan-col-1 { width: 4.166666666666667%; }
.zan-col-2 { width: 8.333333333333334%; }
.zan-col-3 { width: 12.5%; }
.zan-col-4 { width: 16.666666666666668%; }
.zan-col-5 { width: 20.833333333333336%; }
.zan-col-6 { width: 25%; }
.zan-col-7 { width: 29.166666666666668%; }
.zan-col-8 { width: 33.333333333333336%; }
.zan-col-9 { width: 37.5%; }
.zan-col-10 { width: 41.66666666666667%; }
.zan-col-11 { width: 45.833333333333336%; }
.zan-col-12 { width: 50%; }
.zan-col-13 { width: 54.16666666666667%; }
.zan-col-14 { width: 58.333333333333336%; }
.zan-col-15 { width: 62.50000000000001%; }
.zan-col-16 { width: 66.66666666666667%; }
.zan-col-17 { width: 70.83333333333334%; }
.zan-col-18 { width: 75%; }
.zan-col-19 { width: 79.16666666666667%; }
.zan-col-20 { width: 83.33333333333334%; }
.zan-col-21 { width: 87.5%; }
.zan-col-22 { width: 91.66666666666667%; }
.zan-col-23 { width: 95.83333333333334%; }
.zan-col-24 { width: 100%; }
.zan-col-offset-1 { margin-left: 4.166666666666667%; }
.zan-col-offset-2 { margin-left: 8.333333333333334%; }
.zan-col-offset-3 { margin-left: 12.5%; }
.zan-col-offset-4 { margin-left: 16.666666666666668%; }
.zan-col-offset-5 { margin-left: 20.833333333333336%; }
.zan-col-offset-6 { margin-left: 25%; }
.zan-col-offset-7 { margin-left: 29.166666666666668%; }
.zan-col-offset-8 { margin-left: 33.333333333333336%; }
.zan-col-offset-9 { margin-left: 37.5%; }
.zan-col-offset-10 { margin-left: 41.66666666666667%; }
.zan-col-offset-11 { margin-left: 45.833333333333336%; }
.zan-col-offset-12 { margin-left: 50%; }
.zan-col-offset-13 { margin-left: 54.16666666666667%; }
.zan-col-offset-14 { margin-left: 58.333333333333336%; }
.zan-col-offset-15 { margin-left: 62.50000000000001%; }
.zan-col-offset-16 { margin-left: 66.66666666666667%; }
.zan-col-offset-17 { margin-left: 70.83333333333334%; }
.zan-col-offset-18 { margin-left: 75%; }
.zan-col-offset-19 { margin-left: 79.16666666666667%; }
.zan-col-offset-20 { margin-left: 83.33333333333334%; }
.zan-col-offset-21 { margin-left: 87.5%; }
.zan-col-offset-22 { margin-left: 91.66666666666667%; }
.zan-col-offset-23 { margin-left: 95.83333333333334%; }
.zan-col-offset-24 { margin-left: 100%; }
packages/zanui-css/src/common/var.css
+2 -68
View File
@@ -20,9 +20,11 @@ $c-background: #f8f8f8;
$button-primary-color: $c-white;
$button-primary-background-color: $c-green-wx;
$button-primary-border-color: #0a0;
$button-default-color: $c-black;
$button-default-background-color: $c-white;
$button-default-border-color: #bbb;
$button-danger-color: $c-white;
$button-danger-background-color: #f44;
$button-danger-border-color: #e33;
@@ -30,71 +32,3 @@ $button-danger-border-color: #e33;
$button-disabled-color: $c-gray-dark;
$button-disabled-background-color: $c-gray-light;
$button-disabled-border-color: #cacaca;
:root{
/* zan-index
-------------------------- */
--index-normal: 1;
--index-top: 1000;
--index-popper: 2000;
/* Link
-------------------------- */
--link-color: #475669;
--link-hover-color: var(--color-primary);
/* Border
-------------------------- */
--border-width-base: 1px;
--border-style-base: solid;
--border-color-base: var(--color-grey);
--border-color-hover: #8492a6;
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-radius-circle: 100%;
--shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
/* Box-shadow
-------------------------- */
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
/* Fill
-------------------------- */
--fill-base: var(--color-white);
/* Font
-------------------------- */
--font-size-base: 14px;
--font-color-base: #1f2d3d;
--font-color-disabled-base: #bbb;
/* Size
-------------------------- */
--size-base: 14px;
/* Disable base
-------------------------- */
--disabled-fill-base: #EFF2F7;
--disabled-color-base: #bbb;
--disabled-border-base: #D3DCE6;
/* Icon
-------------------------- */
--icon-color: #666;
/* Button
-------------------------- */
--button-default-color: #656b79;
--button-default-background-color: #f6f8fa;
--button-default-plain-color: #5a5a5a;
--button-default-box-shadow: 0 0 1px #b8bbbf;
--button-primary-color: #fff;
--button-primary-background-color: #06BF04;
--button-danger-color: #fff;
--button-danger-background-color: #ef4f4f;
}
packages/zanui-css/src/icon.css
+1 -1
View File
@@ -63,4 +63,4 @@
.zan-icon-sign:before { content: '\e80d'; } /* '' */
.zan-icon-store:before { content: '\e80e'; } /* '' */
.zan-icon-topay:before { content: '\e80f'; } /* '' */
.zan-icon-tosend:before { content: '\e810'; } /* '' */
.zan-icon-tosend:before { content: '\e810'; } /* '' */
packages/zanui-css/src/image_preview.css
+29
View File
@@ -0,0 +1,29 @@
@component-namespace zan {
@b image-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
@e image {
display: block;
width: 100%;
height: auto;
transition: .2s;
position: absolute;
left: 0;
@m center {
top: 50%;
transform: translate3d(0, -50%, 0);
}
@m top {
top: 0;
transform: none;
}
}
}
}
packages/zanui-css/src/index.css
+4 -1
View File
@@ -2,7 +2,6 @@
css组件库入口，组装成css组件库
*/
@import './button.css';
@import './button_group.css';
@import './cell.css';
@import './card.css';
@import './dialog.css';
@@ -20,3 +19,7 @@
@import './tag.css';
@import './checkbox.css';
@import './tab.css';
@import './col.css';
@import './row.css';
@import './image_preview.css';
@import './actionsheet.css';
packages/zanui-css/src/loading.css
+38 -11
View File
@@ -3,16 +3,19 @@
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -25,17 +28,41 @@
height: 30px;
line-height: 0;
font-size: 0;
}
@e spinner {
display: inline-block;
height: 100%;
width: 100%;
-webkit-animation: loading 0.8s linear;
-webkit-animation-iteration-count: infinite;
animation: loading 0.8s linear;
animation-iteration-count: infinite;
@b spinner {
display: inline-block;
height: 100%;
width: 100%;
background: url('data:image/png;base64,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');
background-size: contain;
-webkit-animation: loading 0.8s linear;
-webkit-animation-iteration-count: infinite;
animation: loading 0.8s linear;
animation-iteration-count: infinite;
@m circle {
border-radius: 100%;
border: 3px solid transparent;
box-sizing: border-box;
&.zan-loading__spinner--black {
border-color: $c-gray;
border-top-color: $c-gray-darker;
}
&.zan-loading__spinner--white {
border-color: rgba(0, 0, 0, .5);
border-top-color: transparent;
}
}
@m gradient-circle {
&.zan-loading__spinner--black {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAADitJREFUaAXNmmuMVVcVx++9M8PMMAwMj5GCpJjGtKVIfQxIpcGGtwylwQ+iND4iJI1GTU2jjZqmYvzQVNLY1JiaftPU1mjSftBAeA4FQagQSCoYq0EUeU55zTCvO/fh77/uWZtzh7kzd17ATvZde6+99t7rv9baj3POTSbGKB08eLC2o6OjKZ/PfyyZTN7HNPdRboTWU6+DJnO5XGcqlbpBuZX8b/IpZN6bMGHCu4sWLeqiPuopOZoj7tq1ayrjPY7SK6GfIFcBCnzJhP3AoC0FUdLcSQDDyifjfHi9tB2Ht62ysvLtJUuWfKAOo5FGBfCOHTvmA2gTCi6GVqCYgRHQbDabEiXbXHFgkusLmLrJYSjrh7ws1kJ+dfny5X8ZKegRAd6+ffvCioqKb6PUpyKQ0ieAVXk4gGUb7xcfDyP8lfqLK1euPAAdVhoW4H379jX29PR8nxlXk0OIAhxdbcgA2kM6LidNI0+bfNTPdTHPxvup3SOBrurzNvNvXrNmzQWNNZTkk5Tdh3W6GAVepEN91CkAjuoBLHVtTAaKcpHcSABrHvp3YISnCPNdqpebXImy5Hfu3PlVAPwC4Tom1KTKnryeQKas8SSENSyX24HJtMHJiPXM8wYO+Fa5fW2+coRPnDgx7uzZs88h+wRWFbCiXTUaw41nCrG2bXyUGtDDPh7CHm0DhjRz2zw+qOqUf9fb2/tMc3NzT6RLSeKTlBTYv3//ZNbLywz8sID6RK5gfwpITmtOsgA2AMgHg2iyqJ/kzIA+nuToFjYt2t2jt8hpHJJhYLyjVVVVTw52hLkSha59fuVZwP6cweaRrRVaKPSR7a8aFx1KmPtY9A8OiZe9PU4x0oJMJvPm1q1bq+P8vuUBAV+4cOFHTDSPwQJIlZUYqCiLH8+aiHqYTx6P+gRevMCQ5knnqW/Ux1lxD5us9xGNhBZwUXk5dOinUBIwm8GXGehx9YFaVwGKl/sZL8ipIFn18bI1DvCj8PYUGcuBOFhvLqLIBjkanmRz/U6RQKwSFwzs3bt3LyIEZSmNZTIoL22EWHKBr7IYUbs1UPZ2tbUDZC8XiYNY/xyb2aXu7u5L48aN06XkQ7RPR34m9DHoUuhkTRmtfY1jYK1AI8mt4rp7XW3xKPkCF5QdYsaTdwq8lpaWaayFP8CYIKZPhDI2MFR9rF/UZmVvd3lk9pB/C8gjbCQZyoMm5q5kt13IGBsRbtZcpJKA1RjXJ5rADdDO3E3MXXQ5qeyrBWCfZpDxGkttlF1Es3vZqNpiPBc8TuNLK1asOFYkXEYlMoyujQdYUgvw8vNEx4KoqxvWKPxiZQpC4jl/EhH0AvWvR/2NeKNVuBs3MdAvZTWlSNCpW87qkqHdyi4L3cLN5/Wo36gQgD/FXD9hMHMOZdMjAhyWmOsCLdITozWvWrVqnyvjjVZnEA2uMqSQVO6nLhlL9JGX28jfGG2wmoAxX4NsILeT3cgWymgY6jK6ksuoTZn0Y3ghBcBsVHrieRgBQ+w0SBYXggyDSpGvodiIH92Kp7hZY3nsRZ/PwWkTl7KAeYqXnRcoop8hcj/rjAAY129Aeef72oVVSHTUHTHndQQlnGPNPwvYU6HjGBWY433m36R5SQEkeptXoSlltSl7Qj7JyfBdV8sA6/qI0CMIBc/Fyy7cD31p9erVY+bZvvMBugW9niMLtYHTkiqVBFxtGGIVXtYRWFjgXB/1SsbetUCRC09Ct3ha7cpMdIxQe4PybU3M+SoTHtakADfvquhZPCVvVpFcwRH1RXgFwGzfjwmkEtaQwKCeBvAr1uEO/BCiz6Ojea/v9OCwBxbxVVaWKPTz4iU57GsAvBVGVdRgA0lQAiQPHViFXRG5d7D0s4XmO/PL9VHRtRadLKYNVUEVA4lDXF9rp5KZMmXKtBThrMc+P+MshKl7KIsqfMMTPQOL9fs7A/PmrOj0q5u1gje1aTkvKpvT5Ehy1bVr1x6tpOP9QiCmUtTooW08mq1JFPk21oNuU3c0ocdBQLVBJ7si0g/9BcSzHGbAItqUYj3MQqawgJFUJ61jJZWVo7J5mvqBcu/G1nGMfqQDumwjhzUrrKqLxrNUiOoP6Oy6FyHxhDJkBHJYryirnfSuhO+StNeBgUHhrPdKVVGuhKelqsWsNtEHVZhCJ5nFUAuklxGg+RZPXzTm3fFzBh3tNRHqOEDbtMSHp6xXRh7W98gCNQLm2RuhFtdRR61dbxq1zx7MPaJUXV19Lp1OK0rl2bBh9TOoAQZDvdwcHgVBZJ52qo7ucRmEgRM8vN81gNHnfOSFgcDG8U+S28K6pUVlxXFe4JTd81FbbsaMGRTvjsRbSoWvvQ8uRyNkLU47+xOWl+VdtcU9zidQfSG8KxLRNgPdytYF2aRCWoAVyv40pCei4HWVld3j0LsGMHrNJJeNGNm8FvwVgRksYRDzOI+D0weTvY3t9w5lLjDoe1TqTBS6wasMYl7FIOZ1eR9eNsqfHMokYymLXiuGMj7y76W4Jv6XTrZRiZLiG5U+edjm5SGNzCPIlL1RDEWhocjqDSfya4bSB73/lOIc+5dAepK3uW6GGxYGyVLPih9FQi1PKvNc/k5RHKHPtuEeXY4eePhoihfiJyjoPxVxL/vNy3gyCDIKa6sD/IlyJhhjmZJfF0rMm540adKfU1zCuwHzd4RsDQPOkkLZM+Gcj0LbAFNfxOvTh0oMPOZsfRlBSXugL3cyMB6eP39+p99QDnpHGopuW33rsgayYM5t8j63mzL3z4Y6JzjeUh8DzBrdCw59Dgk7NQLZQfL9e/bsue2hTWQ9jZ6PSvlyEzgyNTU19v4tHNr89UjvifyzRrljyUCbed0z5M8q5U4QlwOsNqpfw/PIjDcPVN6DjhslYK92VGCgtwDcpHI8FSL4JgcZhXRIhNf3eAX6Az5nnAnMMSjoQzd35wt8bNMLea0p0wOeUa/71Ogd9Bw/fvx55wcPi8Fm8AJyc7xR1PsxoH2ghtrfGdQW8UQ7McQWPk+Oyasfnbn19fXjzp8/n+jq6so3NjbmT58+nZg+fXp+9uzZBkx86XT06FGRBLIB8ObNm8PXyyLAOl9R/qfWgx+OH12iA0Dx5WEBZd0bdY8jq0F/s3Tp0q2SG61E9NQxVl1DQwMHRTZ/8eLFHP/FzONpA3Tjxo1ca2trYuHChTkZZOrUqcbn5WR+1qxZ+WPHjmXWr1+vW6KlIsDisJafwauLC80FgF4WdYAUgwXFB7ANilL/oPy6Po2IP9yk18f0bQBYCrC5q1ev5gRYwNva2hI8/Ofwel4eraury3Of0H6S4KyVURIctznksnPnzk3HdbgFcPSvnVdQulae9ETZAMI3ilEcsB1jKIMt7BWu7uEJFDhMFOxk8vfjFvbx+qP0S27btq0eMI2Uq+kvpTOi8DLSgZShnIevu0F+zpw5ZgBujOZ5hboiAAMlTp482U443wTBpLcAliL6ksjAPySHds2kNgdM0d59oYQBlTJkhTrEaEYGQKkOZI9T/hv5Cu1XWG/thKLW4njaq/FiLRtLPU9ik+mbRi7LdN205bja9sIPgBnL1iPPwlkBF2hlQjnX3t6ukPZI6+CioRtkUQqAirhUAK23+l+R8lEywAKhzCQQ27HdEFnJYhB1yKOkHidlJwGXa3pol5L6vJrBI/rvhxRqY6wMEaH/TYvfhXwWoN0aC+OkZUSNQ/+8DCBKOFuIs1aznLF5wNqcKjPGjbVr1/b7YqPkebZs2bI/osA7AuU5AgPbPG0eFiIpYEx+orKDNQpbYnkpjiF8d3cDJgGR1FrFaxW1tbVJZZRWqOi9ub6OVADE+JLBQCnJM1aKYylFvYII0a6d6OzsTJcCKx3DOaxK38QG8drly5fvAfBH0RdiAWFrlLK5HmXRy4p6mpKVNYyELaQpK8RyeFB/C8zSLgETgioJgNa8PXICqJq+WeoypIBqU8rxmUQv3LUM0qLaxEQnTpxofBmCsXrWrVt33UYt8VPSw5LXGmDX20Lxn/IuipinNJHaoZbFV1lJXlSdoslSliEs3CUTtZks9bCkYh4zjysgAC3vpniPVsFS0PGYdA/TV8/yerxVNCQJ8TTHU2t8fJukz0+YsA+/qHrkyBF9iNqIEvrHu4FzzzKxha0cJw/T0cDRrkWeQ5leAabcTX8ZQ2tLXu+mr9ZfhyiAbbNCtoucA2iP+mNArVltWr0ypo4aqnkc0SuLarcmrK9z07uAvDmiSPk+lbIAex/O6GYG/RLzyNoCYZsXZc1tLhZVRcpGPFMcJQ0wyhlgDNQDAL1c0C0tAKaPyTGnNjlFhwymogEEeFrjs5nZPBjsPGf+ZddxMDokwBqMJ6SPM/k3yTUC6p6lbMeBQEohQEhBeUgKyhgG3IHS33Zt+hlA6l2KCuq9MgA5jax25R6NRyjbbk+Y29sXPJvGeKf5y7D90WUwoN4+ZMDq2NLS0oAyG1Dq0xEYeyOC0nbjkoKISXEB1U3HAEPZn7IKTVE7doRFYwg4/XXummcBk4anY8k8TN+M6syrM/rytGnT/tPfOYvcgGlYgH1E7rkPosQ6FNAuLlBaz1qnUsxeGwkA4ORxAZeyAqJ12CNZeAZQ7RpDVMBF1c7aNsAYSTu7duBTPOoNuBMjUzKNCLCPynXwAYDplelD6GreRnn3sIAbgMgovqZLAgasMBtgQAvzB6zdU9yPr/mcw6WjAtgnP3To0ER28yYUnkdIfhh+Up4WABlAgLWmVYdvgCibR70dw4mvW9Ul2s6xWf+vnL/2uw6D0VEFHJ9M/6bnce0jeGcmik8lN9A+HsCaU99yBUzrtpOQ74CvnfY6ZXmzFW/GLyfxoUdU/j+IDynLAWtddgAAAABJRU5ErkJggg==');
background-size: contain;
}
&.zan-loading__spinner--white {
background: url('data:image/png;base64,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');
background-size: contain;
}
}
}
}
}
packages/zanui-css/src/radio.css
+6 -2
View File
@@ -2,7 +2,9 @@
@component-namespace zan {
@b radio {
@when disabled {
overflow: hidden;
@m disabled {
.zan-icon {
color: #d1dbe5;
}
@@ -11,7 +13,7 @@
@e input {
position: relative;
height: 22px;
margin-right: 15px;
float: left;
}
@e control {
@@ -26,6 +28,8 @@
@e label {
line-height: 22px;
display: block;
margin-left: 37px;
}
.zan-icon {
packages/zanui-css/src/row.css
+8
View File
@@ -0,0 +1,8 @@
.zan-row {
&:after {
content: "";
display: table;
clear: both;
}
zoom: 1;
}
packages/zanui-css/src/steps.css
+146 -1
View File
@@ -1,5 +1,150 @@
@import "./common/var.css";
@import "./mixins/ellipsis.css";
@component-namespace zan {
@b steps {
color: red;
overflow: hidden;
padding: 0 10px;
@m 4 {
.zan-step {
width: 33.2%;
}
}
@m 3 {
.zan-step {
width: 50%;
}
}
@e icon {
font-size: 40px;
line-height: 1;
float: left;
margin-right: 10px;
}
@e message {
display: table;
height: 40px;
margin: 15px 0;
.zan-steps__message-wrapper {
display: table-cell;
vertical-align: middle;
}
}
@e title {
font-size: 14px;
color: $c-black;
}
@e desc {
font-size: 12px;
line-height: 1.5;
color: $c-gray-dark;
max-height: 18px;
@mixin multi-ellipsis 1;
}
@e items {
margin: 0 0 10px;
overflow: hidden;
padding-bottom: 20px;
position: relative;
}
}
@b step {
font-size: 14px;
float: left;
position: relative;
color: $c-gray-dark;
@m finish {
color: $c-black;
.zan-step__circle,
.zan-step__line {
background-color: $c-green;
}
}
@m process {
color: $c-black;
.zan-step__circle-container {
top: 24px;
}
.zan-icon {
font-size: 12px;
color: $c-green;
line-height: 1;
display: block;
}
}
&:first-child {
.zan-step__title {
transform: none;
margin-left: 0;
}
}
&:last-child {
position: absolute;
right: 10px;
width: auto;
.zan-step__title {
transform: none;
margin-left: 0;
}
.zan-step__circle-container {
left: auto;
right: -8px;
}
.zan-step__line {
width: 0;
}
}
.zan-step__circle-container {
position: absolute;
top: 28px;
left: -8px;
padding: 0 8px;
background-color: #fff;
z-index: 1;
}
@e circle {
display: block;
width: 5px;
height: 5px;
background-color: #888;
border-radius: 50%;
}
@e title {
font-size: 12px;
transform: translate3d(-50%, 0, 0);
display: inline-block;
margin-left: 3px;
}
@e line {
position: absolute;
left: 0px;
top: 30px;
width: 100%;
height: 1px;
background-color: $c-gray-light;
}
}
}
packages/zanui-css/src/switch.css
+27 -20
View File
@@ -1,28 +1,32 @@
@import "./mixins/border_retina.css";
@component-namespace zan {
@b switch {
height: 29px;
width: 49px;
height: 31px;
width: 51px;
display: inline-block;
border-radius: 16px;
position: relative;
border: 1px solid;
background: #fff;
border-radius: 16px;
&::after{
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
border-width: 3px;
border-radius: 32px;
}
@e node {
width: 27px;
height: 27px;
border-radius: 100%;
width: 28px;
height: 28px;
border-radius: 13.5px;
background-color: #fff;
border: .5px solid rgba(0, 0, 0, .1);
position: absolute;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
@when on {
left: 20px;
transition: all .5s ease-in-out;
}
@when off {
left: 0;
transition: all .5s ease-in-out;
left: 1px;
top: 1px;
z-index: 2;
&::after {
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
border-radius: 27px;
}
}
@@ -35,17 +39,20 @@
transform: translate3d(-50%, -50%, 0);
}
@when on {
@m on {
background-color: #44db5e;
border-color: #44db5e;
&::after { border-color: #44db5e; }
.zan-switch__node {
transform: translateX(20px);
}
}
@when off {
@m off {
background-color: #fff;
border-color: rgba(0, 0, 0, .1);
}
@when disabled {
@m disabled {
opacity: .4;
}
}