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

Merge branch 'dev' into fix-datetime-init-value

Browse Source
This commit is contained in:
niunai
2017-08-24 00:23:48 +08:00
parent 1e474244ca 4f40550339
commit dae4f8300f
250 changed files with 2461 additions and 3512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/actionsheet/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/actionsheet/README.md
View File
packages/actionsheet/index.js
-3
View File
@@ -1,3 +0,0 @@
import ActionSheet from './src/actionsheet';
export default ActionSheet;
packages/actionsheet/index.vue
+74
View File
@@ -0,0 +1,74 @@
<template>
<transition name="van-actionsheet-float">
<div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
<div class="van-actionsheet__header" v-if="title">
<h3 v-text="title" />
<van-icon name="close" @click.stop="$emit('input', false)" />
</div>
<ul v-if="!title" class="van-actionsheet__list">
<li
v-for="(item, index) in actions"
:key="index"
:class="['van-actionsheet__item', item.className, { 'van-actionsheet__item--loading': item.loading }]"
@click.stop="onClickItem(item)">
<template v-if="!item.loading">
<span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
</li>
</ul>
<div class="van-actionsheet__item van-actionsheet__cancel" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
<div class="van-actionsheet__content" v-else>
<slot></slot>
</div>
</div>
</transition>
</template>
<script>
import Popup from '../mixins/popup';
import VanIcon from '../icon';
import VanLoading from '../loading';
export default {
name: 'van-actionsheet',
mixins: [Popup],
components: {
[VanIcon.name]: VanIcon,
[VanLoading.name]: VanLoading
},
props: {
value: Boolean,
actions: {
type: Array,
default: () => []
},
title: String,
cancelText: String,
overlay: {
type: Boolean,
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
mounted() {
this.value && this.open();
},
methods: {
onClickItem(item) {
if (typeof item.callback === 'function') {
item.callback(item);
}
}
}
};
</script>
packages/actionsheet/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/actionsheet/src/actionsheet.vue
-100
View File
@@ -1,100 +0,0 @@
<template>
<transition name="actionsheet-float">
<div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
<div class="van-actionsheet__header" v-if="title">
<h3 v-text="title"></h3>
<van-icon name="close" @click.stop="currentValue = false"></van-icon>
</div>
<template v-if="!title">
<ul class="van-actionsheet__list">
<li
v-for="(item, index) in actions"
:key="index"
class="van-actionsheet__item"
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
@click.stop="handleItemClick(item)">
<template v-if="!item.loading">
<span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<template v-else>
<van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
</template>
</li>
</ul>
<a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</template>
<template v-else>
<div class="van-actionsheet__content">
<slot></slot>
</div>
</template>
</div>
</transition>
</template>
<script>
import Popup from 'src/mixins/popup';
import VanLoading from 'packages/loading';
import VanIcon from 'packages/icon';
export default {
name: 'van-actionsheet',
mixins: [Popup],
components: {
VanLoading,
VanIcon
},
props: {
value: {},
actions: {
type: Array,
default: () => []
},
title: String,
cancelText: String,
overlay: {
type: Boolean,
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
data() {
return {
currentValue: this.value
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
this.currentValue = val;
}
},
mounted() {
if (this.value) {
this.currentValue = true;
this.open();
}
},
methods: {
handleItemClick(item) {
if (item.callback && typeof item.callback === 'function') {
item.callback(item);
}
}
}
};
</script>
packages/badge-group/index.js
-3
View File
@@ -1,3 +0,0 @@
import BadgeGroup from '../badge/src/badge-group';
export default BadgeGroup;
packages/badge/src/badge-group.vue → packages/badge-group/index.vue
View File
packages/badge/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/badge/README.md
View File
packages/badge/index.js
-3
View File
@@ -1,3 +0,0 @@
import Badge from './src/badge';
export default Badge;
packages/badge/src/badge.vue → packages/badge/index.vue
+9 -9
View File
@@ -1,13 +1,13 @@
<template>
<a
class="van-badge"
:class="{ 'van-badge--select': isSelect }"
:href="url"
@click="handleClick">
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{info}}</div>
{{title}}
</a>
<a
class="van-badge"
:class="{ 'van-badge--select': isSelect }"
:href="url"
@click="handleClick">
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{info}}</div>
{{title}}
</a>
</template>
<script>
packages/badge/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/button/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/button/README.md
View File
packages/button/index.js
+75 -2
View File
@@ -1,3 +1,76 @@
import Button from './src/button';
import Loading from '../loading';
export default Button;
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
export default {
name: 'van-button',
components: {
[Loading.name]: Loading
},
props: {
block: Boolean,
loading: Boolean,
disabled: Boolean,
nativeType: String,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'
},
type: {
type: String,
default: 'default',
validator: value => ALLOWED_TYPE.indexOf(value) > -1
},
size: {
type: String,
default: 'normal',
validator: value => ALLOWED_SIZE.indexOf(value) > -1
}
},
methods: {
onClick(event) {
if (!this.loading && !this.disabled) {
this.$emit('click', event);
}
}
},
render(h) {
const { type, loading, disabled, tag: Tag } = this;
return (
<Tag
type={this.nativeType}
disabled={disabled}
class={[
'van-button',
'van-button--' + type,
'van-button--' + this.size,
{
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': this.block,
'van-button--bottom-action': this.bottomAction
}
]}
onClick={this.onClick}
>
{loading
? <van-loading
class="van-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}
/>
: null}
<span class="van-button__text">
{this.$slots.default}
</span>
</Tag>
);
}
};
packages/button/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-button",
"version": "0.0.1",
"description": "button component",
"main": "./index.js",
"author": "niunai",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/button/src/button.js
-93
View File
@@ -1,93 +0,0 @@
/**
* @module components/button
* @desc 按钮
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
* @param {boolean} [disabled=false] - 禁用
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
* @param {string} [native-type] - 原生 type 属性
* @param {slot} - 显示文本
*
* @example
* <van-button size="large" type="primary">按钮</van-button>
*/
import VanLoading from 'packages/loading';
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
export default {
name: 'van-button',
components: {
'van-loading': VanLoading
},
props: {
disabled: Boolean,
loading: Boolean,
block: Boolean,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'
},
nativeType: String,
type: {
type: String,
default: 'default',
validator(value) {
return ALLOWED_TYPE.indexOf(value) > -1;
}
},
size: {
type: String,
default: 'normal',
validator(value) {
return ALLOWED_SIZE.indexOf(value) > -1;
}
}
},
methods: {
handleClick(e) {
if (this.loading || this.disabled) return;
this.$emit('click', e);
}
},
render(h) {
const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
const Tag = this.tag;
return (
<Tag
type={nativeType}
disabled={disabled}
class={[
'van-button',
'van-button--' + type,
'van-button--' + size,
{
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': block,
'van-button--bottom-action': bottomAction
}
]}
onClick={this.handleClick}
>
{
loading
? <van-loading
class="van-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}>
</van-loading>
: null
}
<span class="van-button__text">{this.$slots.default}</span>
</Tag>
);
}
};
packages/card/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/card/README.md
View File
packages/card/index.js
-3
View File
@@ -1,3 +0,0 @@
import Card from './src/card';
export default Card;
packages/card/src/card.vue → packages/card/index.vue
View File
packages/card/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-card",
"version": "0.0.1",
"description": "card component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/cell-group/index.js
-3
View File
@@ -1,3 +0,0 @@
import CellGroup from '../cell/src/cell-group';
export default CellGroup;
packages/cell/src/cell-group.vue → packages/cell-group/index.vue
View File
packages/cell-swipe/index.js
-3
View File
@@ -1,3 +0,0 @@
import CellSwipe from './src/cell-swipe';
export default CellSwipe;
packages/cell-swipe/index.vue
+129
View File
@@ -0,0 +1,129 @@
<template>
<div v-clickoutside:touchstart="swipeMove" @click="swipeMove()" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" class="van-cell-swipe" ref="cell">
<div class="van-cell-wrapper">
<slot>单元格内容</slot>
</div>
<div class="van-cell-left">
<div ref="left">
<slot name="left"></slot>
</div>
</div>
<div class="van-cell-right">
<div ref="right">
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
import { once } from '../utils/dom';
import Clickoutside from '../utils/clickoutside';
export default {
name: 'van-cell-swipe',
props: {
'leftWidth': { type: Number, default: 0 },
'rightWidth': { type: Number, default: 0 }
},
directives: { Clickoutside },
data() {
return {
start: { x: 0, y: 0 }
};
},
computed: {
leftDefaultTransform() {
return this.translate3d(-this.leftWidth - 1);
},
rightDefaultTransform() {
return this.translate3d(this.rightWidth);
}
},
mounted() {
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
this.leftElm = this.$refs.left;
this.leftWrapElm = this.leftElm.parentNode;
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
this.rightElm = this.$refs.right;
this.rightWrapElm = this.rightElm.parentNode;
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
},
methods: {
resetSwipeStatus() {
this.swiping = false; // 是否正在拖动
this.opened = true; // 记录是否滑动左右 或者 注册
this.offsetLeft = 0; // 记录单次拖动的拖动距离
},
translate3d(offset) {
return `translate3d(${offset}px, 0, 0)`;
},
swipeMove(offset = 0) {
this.wrap.style.webkitTransform = this.translate3d(offset);
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
offset && (this.swiping = true);
},
swipeLeaveTransition(direction) {
setTimeout(() => {
this.swipeLeave = true;
// left
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
this.swipeMove(-this.rightWidth);
this.resetSwipeStatus();
return;
// right
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
this.swipeMove(this.leftWidth);
this.resetSwipeStatus();
return;
} else {
this.swipeMove(0);
once(this.wrap, 'webkitTransitionEnd', () => {
this.wrap.style.webkitTransform = '';
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
this.swipeLeave = false;
this.swiping = false;
});
}
}, 0);
},
startDrag(evt) {
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
this.dragging = true;
this.start.x = evt.pageX;
this.start.y = evt.pageY;
},
onDrag(evt) {
if (this.opened) {
!this.swiping && this.swipeMove(0);
this.opened = false;
return;
}
if (!this.dragging) return;
let swiping;
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
const offsetTop = e.pageY - this.start.y;
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
(offsetLeft > 0 && !this.leftWidth) ||
(offsetLeft < 0 && !this.rightWidth)) {
return;
}
const y = Math.abs(offsetTop);
const x = Math.abs(offsetLeft);
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
if (!swiping) return;
evt.preventDefault();
this.swipeMove(offsetLeft);
},
endDrag() {
if (!this.swiping) return;
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
}
}
};
</script>
packages/cell-swipe/src/cell-swipe.vue
-142
View File
@@ -1,142 +0,0 @@
<template>
<div
v-clickoutside:touchstart="swipeMove"
@click="swipeMove()"
@touchstart="startDrag"
@touchmove="onDrag"
@touchend="endDrag"
class="van-cell-swipe"
ref="cell">
<div class="van-cell-wrapper">
<slot>单元格内容</slot>
</div>
<div class="van-cell-left">
<div ref="left">
<slot name="left"></slot>
</div>
</div>
<div class="van-cell-right">
<div ref="right">
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
import {once} from 'src/utils/dom';
import Clickoutside from 'src/utils/clickoutside';
export default {
name: 'van-cell-swipe',
props: {
'leftWidth': {type: Number, default: 0},
'rightWidth': {type: Number, default: 0}
},
directives: {Clickoutside},
data() {
return {
start: {x: 0, y: 0}
};
},
computed: {
leftDefaultTransform(){
return this.translate3d(-this.leftWidth - 1);
},
rightDefaultTransform(){
return this.translate3d(this.rightWidth);
}
},
mounted() {
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
this.leftElm = this.$refs.left;
this.leftWrapElm = this.leftElm.parentNode;
this.leftDefaultTransform = this.translate3d(-this.leftWidth - 1);
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
this.rightElm = this.$refs.right;
this.rightWrapElm = this.rightElm.parentNode;
this.rightDefaultTransform = this.translate3d(this.rightWidth);
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
},
methods: {
resetSwipeStatus() {
this.swiping = false; // 是否正在拖动
this.opened = true; // 记录是否滑动左右 或者 注册
this.offsetLeft = 0; // 记录单次拖动的拖动距离
},
translate3d(offset) {
return `translate3d(${offset}px, 0, 0)`;
},
swipeMove(offset = 0) {
this.wrap.style.webkitTransform = this.translate3d(offset);
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
offset && (this.swiping = true);
},
swipeLeaveTransition(direction) {
setTimeout(() => {
this.swipeLeave = true;
// left
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
this.swipeMove(-this.rightWidth);
this.resetSwipeStatus();
return;
// right
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
this.swipeMove(this.leftWidth);
this.resetSwipeStatus();
return;
} else {
this.swipeMove(0);
once(this.wrap, 'webkitTransitionEnd', _ => {
this.wrap.style.webkitTransform = '';
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
this.swipeLeave = false;
this.swiping = false;
});
}
}, 0);
},
startDrag(evt) {
console.log('startDrag')
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
this.dragging = true;
this.start.x = evt.pageX;
this.start.y = evt.pageY;
},
onDrag(evt) {
console.log('onDrag')
if (this.opened) {
!this.swiping && this.swipeMove(0);
this.opened = false;
return;
}
if (!this.dragging) return;
let swiping;
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
const offsetTop = e.pageY - this.start.y;
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
(offsetLeft > 0 && !this.leftWidth) ||
(offsetLeft < 0 && !this.rightWidth)) {
return;
}
const y = Math.abs(offsetTop);
const x = Math.abs(offsetLeft);
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
if (!swiping) return;
evt.preventDefault();
this.swipeMove(offsetLeft);
},
endDrag() {
console.log('endDrag')
if (!this.swiping) return;
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
}
}
};
</script>
packages/cell/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/cell/README.md
View File
packages/cell/index.js
-3
View File
@@ -1,3 +0,0 @@
import Cell from './src/cell';
export default Cell;
packages/cell/src/cell.vue → packages/cell/index.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
<div
class="van-cell__title"
v-if="this.$slots.title || title"
@@ -42,12 +42,6 @@ export default {
label: String,
isLink: Boolean,
required: Boolean
},
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
packages/cell/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-cell",
"version": "0.0.1",
"description": "cell component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/checkbox-group/index.js
-3
View File
@@ -1,3 +0,0 @@
import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
export default CheckboxGroup;
packages/checkbox/src/checkbox-group.vue → packages/checkbox-group/index.vue
View File
packages/checkbox/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/checkbox/README.md
View File
packages/checkbox/index.js
-3
View File
@@ -1,3 +0,0 @@
import Checkbox from './src/checkbox';
export default Checkbox;
packages/checkbox/src/checkbox.vue → packages/checkbox/index.vue
+1 -1
View File
@@ -23,7 +23,7 @@
</template>
<script>
import findParent from 'src/mixins/findParent';
import findParent from '../mixins/findParent';
export default {
name: 'van-checkbox',
packages/checkbox/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-checkbox",
"version": "0.0.1",
"description": "checkbox component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/col/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/col/README.md
View File
packages/col/index.js
-3
View File
@@ -1,3 +0,0 @@
import Col from './src/col';
export default Col;
packages/col/index.vue
+40
View File
@@ -0,0 +1,40 @@
<template>
<div
:class="[
`${prefix}-col`,
{
[`${prefix}-col-${span}`]: span,
[`${prefix}-col-offset-${offset}`]: offset,
}
]"
:style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-col',
props: {
span: [Number, String],
offset: [Number, String],
prefix: {
type: String,
default: 'van'
}
},
computed: {
gutter() {
return (this.$parent && Number(this.$parent.gutter)) || 0;
},
style() {
const padding = `${this.gutter / 2}px`;
return this.gutter
? { paddingLeft: padding, paddingRight: padding }
: {};
}
}
};
</script>
packages/col/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/col/src/col.vue
-39
View File
@@ -1,39 +0,0 @@
<template>
<div
:class="[
`${prefix}-col`,
{
[`${prefix}-col-${span}`]: span,
[`${prefix}-col-offset-${offset}`]: offset,
}
]"
:style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-col',
props: {
span: [Number, String],
offset: [Number, String],
prefix: {
type: String,
default: 'van'
}
},
computed: {
gutter() {
if (!this.$parent) return 0;
return Number(this.$parent.gutter) || 0;
},
style() {
const padding = `${this.gutter / 2}px`;
return this.gutter
? { paddingLeft: padding, paddingRight: padding }
: null;
}
}
};
</script>
packages/datetime-picker/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/datetime-picker/README.md
View File
packages/datetime-picker/src/datetime-picker.vue → packages/datetime-picker/index.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</template>
<script>
import Picker from 'packages/picker';
import Picker from '../picker';
const allowedType = ['time', 'date', 'datetime'];
packages/datetime-picker/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-datetime-picker",
"version": "0.0.1",
"description": "datetime picker component",
"main": "./index.js",
"author": "niunai <niunai@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/dialog/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/dialog/README.md
View File
packages/dialog/dialog.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<transition name="van-dialog-bounce">
<div class="van-dialog" v-show="value">
<div class="van-dialog__header" v-if="title" v-text="title" />
<div class="van-dialog__content" v-if="message">
<div class="van-dialog__message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
</div>
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
<van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button>
</div>
</div>
</transition>
</template>
<script>
import Button from '../button';
import Popup from '../mixins/popup';
export default {
name: 'van-dialog',
components: {
[Button.name]: Button
},
mixins: [Popup],
props: {
overlay: {
default: true
},
closeOnClickOverlay: {
default: true
},
lockOnScroll: {
default: true
}
},
data() {
return {
title: '',
message: '',
type: '',
showConfirmButton: true,
showCancelButton: false,
confirmButtonText: '确认',
cancelButtonText: '取消',
callback: null
};
},
methods: {
handleAction(action) {
this.$emit('input', false);
this.callback && this.callback(action);
}
}
};
</script>
packages/dialog/index.js
+96 -2
View File
@@ -1,3 +1,97 @@
import Dialog from './src/dialog.js';
import Vue from 'vue';
import Dialog from './dialog';
export default Dialog;
const DialogConstructor = Vue.extend(Dialog);
let currentDialog;
let instance;
let dialogQueue = [];
const defaultCallback = action => {
/* istanbul ignore else */
if (currentDialog) {
if (currentDialog.resolve && action === 'confirm') {
currentDialog.resolve(action);
} else if (currentDialog.reject && action === 'cancel') {
currentDialog.reject(action);
}
}
};
const initInstance = () => {
instance = new DialogConstructor({
el: document.createElement('div')
});
instance.$on('input', value => {
instance.value = value;
})
instance.callback = defaultCallback;
};
const showNextDialog = () => {
if (!instance) {
initInstance();
}
/* istanbul ignore else */
if (!instance.value && dialogQueue.length > 0) {
currentDialog = dialogQueue.shift();
const { options } = currentDialog;
for (const prop in options) {
/* istanbul ignore else */
if (options.hasOwnProperty(prop)) {
instance[prop] = options[prop];
}
}
instance.callback = options.callback || defaultCallback;
instance.value = true;
document.body.appendChild(instance.$el);
}
};
const DialogBox = options => {
return new Promise((resolve, reject) => { // eslint-disable-line
dialogQueue.push({
options: { ...options },
callback: options.callback,
resolve: resolve,
reject: reject
});
showNextDialog();
});
};
DialogBox.alert = function(options) {
return DialogBox({
type: 'alert',
title: '',
message: '',
closeOnClickOverlay: false,
showCancelButton: false,
...options
});
};
DialogBox.confirm = function(options) {
return DialogBox({
type: 'confirm',
title: '',
message: '',
closeOnClickOverlay: true,
showCancelButton: true,
...options
});
};
DialogBox.close = function() {
instance.value = false;
dialogQueue = [];
currentDialog = null;
};
export default DialogBox;
packages/dialog/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-dialog",
"version": "0.0.1",
"description": "dialog component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/dialog/src/dialog.js
-99
View File
@@ -1,99 +0,0 @@
import Vue from 'vue';
import Dialog from './dialog.vue';
import merge from 'src/utils/merge';
const DialogConstructor = Vue.extend(Dialog);
let currentDialog;
let instance;
let dialogQueue = [];
const defaultCallback = action => {
/* istanbul ignore else */
if (currentDialog) {
if (currentDialog.resolve && action === 'confirm') {
currentDialog.resolve(action);
} else if (currentDialog.reject && action === 'cancel') {
currentDialog.reject(action);
}
}
};
const initInstance = () => {
instance = new DialogConstructor({
el: document.createElement('div')
});
instance.callback = defaultCallback;
};
const showNextDialog = () => {
if (!instance) {
initInstance();
}
/* istanbul ignore else */
if (!instance.value && dialogQueue.length > 0) {
currentDialog = dialogQueue.shift();
const options = currentDialog.options;
for (const prop in options) {
/* istanbul ignore else */
if (options.hasOwnProperty(prop)) {
instance[prop] = options[prop];
}
}
if (options.callback === undefined) {
instance.callback = defaultCallback;
}
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.value = true;
});
}
};
var DialogBox = options => {
return new Promise((resolve, reject) => { // eslint-disable-line
dialogQueue.push({
options: merge({}, options),
callback: options.callback,
resolve: resolve,
reject: reject
});
showNextDialog();
});
};
DialogBox.alert = function(options) {
return DialogBox(merge({
type: 'alert',
title: '',
message: '',
closeOnClickOverlay: false,
showCancelButton: false
}, options));
};
DialogBox.confirm = function(options) {
return DialogBox(merge({
type: 'confirm',
title: '',
message: '',
closeOnClickOverlay: true,
showCancelButton: true
}, options));
};
DialogBox.close = function() {
instance.value = false;
dialogQueue = [];
currentDialog = null;
};
export default DialogBox;
packages/dialog/src/dialog.vue
-85
View File
@@ -1,85 +0,0 @@
<template>
<transition name="dialog-bounce">
<div class="van-dialog-wrapper">
<div class="van-dialog" v-show="value">
<div class="van-dialog__header" v-if="title">
<div class="van-dialog__title" v-text="title"></div>
</div>
<div class="van-dialog__content" v-if="message">
<div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
</div>
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
<button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
<button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
</div>
</div>
</div>
</transition>
</template>
<script>
import Popup from 'src/mixins/popup';
const CANCEL_TEXT = '取消';
const CONFIRM_TEXT = '确定';
export default {
name: 'van-dialog',
mixins: [Popup],
props: {
overlay: {
default: true
},
closeOnClickOverlay: {
default: true
},
lockOnScroll: {
default: true
}
},
data() {
return {
title: '',
message: '',
type: '',
showConfirmButton: true,
showCancelButton: false,
confirmButtonText: CONFIRM_TEXT,
cancelButtonText: CANCEL_TEXT,
callback: null
};
},
methods: {
handleAction(action) {
this.value = false;
this.callback && this.callback(action);
},
close() {
/* istanbul ignore if */
if (this.closing) return;
this.closing = true;
this.value = false;
/* istanbul ignore else */
if (this.lockOnScroll) {
setTimeout(() => {
if (this.overlay && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
}
this.bodyOverflow = null;
}, 200);
}
this.opened = false;
this.doAfterClose();
}
}
};
</script>
packages/field/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/field/README.md
View File
packages/field/index.js
-3
View File
@@ -1,3 +0,0 @@
import Field from './src/field';
export default Field;
packages/field/src/field.vue → packages/field/index.vue
+34 -11
View File
@@ -9,7 +9,8 @@
'van-field--disabled': disabled,
'van-field--error': error,
'van-field--border': border,
'van-field--autosize': autosize
'van-field--autosize': autosize,
'van-field--has-icon': showIcon
}">
<textarea
v-if="type === 'textarea'"
@@ -37,14 +38,18 @@
:maxlength="maxlength"
:disabled="disabled"
:readonly="readonly">
<van-icon v-if="icon && currentValue" :name="icon" class="van-field__icon" @click="onIconClick"></van-icon>
<div v-if="showIcon" class="van-field__icon" @click="onIconClick">
<slot name="icon">
<van-icon :name="icon"></van-icon>
</slot>
</div>
</van-cell>
</template>
<script>
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
import vanCell from 'packages/cell';
import vanIcon from 'packages/icon';
import vanCell from '../cell';
import vanIcon from '../icon';
export default {
name: 'van-field',
@@ -90,29 +95,47 @@ export default {
};
},
mounted() {
if (this.autosize && this.type === 'textarea') {
const el = this.$refs.textareaElement;
el.style.height = el.scrollHeight + 'px';
el.style.overflowY = 'hidden';
}
},
watch: {
value(val) {
this.currentValue = val;
},
currentValue(val) {
if (this.autosize && this.type === 'textarea') this.sizeAdjust();
if (this.autosize && this.type === 'textarea') {
this.$nextTick(this.sizeAdjust);
}
this.$emit('input', val);
}
},
computed: {
showIcon() {
// 有icon的slot，就认为一直展示
if (this.$slots.icon) {
return true;
}
return this.icon && this.currentValue;
}
},
methods: {
handleInput(event) {
this.currentValue = event.target.value;
},
sizeAdjust() {
const textareaElement = this.$refs.textareaElement;
const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
parseInt(textareaElement.style.paddingTop, 10)) || 0;
// 需要先设为0， 才可以让scrollHeight正确计算。
textareaElement.style.height = 0 + 'px';
textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
const el = this.$refs.textareaElement;
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
},
handleInputFocus() {
packages/field/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-field",
"version": "0.0.1",
"description": "form field component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/icon/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/icon/README.md
View File
packages/icon/index.js
-3
View File
@@ -1,3 +0,0 @@
import Icon from './src/icon';
export default Icon;
packages/icon/index.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<i :class="['van-icon', 'van-icon-' + name]" @click="$emit('click', $event)" />
</template>
<script>
export default {
name: 'van-icon',
props: {
name: {
type: String,
required: true
}
}
};
</script>
packages/icon/package.json
-9
View File
@@ -1,9 +0,0 @@
{
"name": "@youzan/van-icon",
"version": "0.0.1",
"description": "van-icon",
"main": "index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"devDependencies": {},
"dependencies": {}
}
packages/icon/src/icon.vue
-22
View File
@@ -1,22 +0,0 @@
<template>
<i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
</template>
<script>
export default {
name: 'van-icon',
props: {
name: {
type: String,
required: true
}
},
methods: {
handleIconClick(event) {
this.$emit('click', event);
}
}
};
</script>
packages/image-preview/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/image-preview/README.md
View File
packages/image-preview/src/image-preview.vue → packages/image-preview/image-preview.vue
+3 -3
View File
@@ -12,9 +12,9 @@
<script>
import Vue from 'vue';
import Popup from 'src/mixins/popup';
import VanSwipe from 'packages/swipe';
import VanSwipeItem from 'packages/swipe-item';
import Popup from '../mixins/popup';
import VanSwipe from '../swipe';
import VanSwipeItem from '../swipe-item';
export default {
name: 'van-image-preview',
packages/image-preview/index.js
+34 -2
View File
@@ -1,3 +1,35 @@
import ImagePreview from './src/image-preview.js';
import Vue from 'vue';
import ImagePreview from './image-preview';
export default ImagePreview;
let instance;
const ImagePreviewConstructor = Vue.extend(ImagePreview);
const initInstance = () => {
/* istanbul ignore if */
if (Vue.prototype.$isServer) return;
instance = new ImagePreviewConstructor({
el: document.createElement('div')
});
};
var ImagePreviewBox = images => {
/* istanbul ignore if */
if (Vue.prototype.$isServer) return;
if (!instance) {
initInstance();
}
/* istanbul ignore else */
if (!instance.value) {
instance.images = images;
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.value = true;
});
}
};
export default ImagePreviewBox;
packages/image-preview/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-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
-35
View File
@@ -1,35 +0,0 @@
import Vue from 'vue';
import ImagePreview from './image-preview.vue';
let instance;
const ImagePreviewConstructor = Vue.extend(ImagePreview);
const initInstance = () => {
/* istanbul ignore if */
if (Vue.prototype.$isServer) return;
instance = new ImagePreviewConstructor({
el: document.createElement('div')
});
};
var ImagePreviewBox = images => {
/* istanbul ignore if */
if (Vue.prototype.$isServer) return;
if (!instance) {
initInstance();
}
/* istanbul ignore else */
if (!instance.value) {
instance.images = images;
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.value = true;
});
}
};
export default ImagePreviewBox;
packages/index.js
+173
View File
@@ -0,0 +1,173 @@
import Button from './button';
import Switch from './switch';
import Field from './field';
import Radio from './radio';
import Cell from './cell';
import Icon from './icon';
import CellGroup from './cell-group';
import CellSwipe from './cell-swipe';
import Popup from './popup';
import Dialog from './dialog';
import Picker from './picker';
import RadioGroup from './radio-group';
import Waterfall from './waterfall';
import Loading from './loading';
import Panel from './panel';
import Card from './card';
import Steps from './steps';
import Tag from './tag';
import Checkbox from './checkbox';
import CheckboxGroup from './checkbox-group';
import BadgeGroup from './badge-group';
import Badge from './badge';
import Search from './search';
import Step from './step';
import Tabs from './tabs';
import Tab from './tab';
import Lazyload from './lazyload';
import ImagePreview from './image-preview';
import Col from './col';
import Row from './row';
import Actionsheet from './actionsheet';
import Quantity from './quantity';
import Progress from './progress';
import Toast from './toast';
import Uploader from './uploader';
import Swipe from './swipe';
import SwipeItem from './swipe-item';
import DatetimePicker from './datetime-picker';
const version = '0.8.5';
const components = [
Button,
Switch,
Field,
Radio,
Cell,
Icon,
CellGroup,
CellSwipe,
Popup,
Picker,
RadioGroup,
Loading,
Panel,
Card,
Steps,
Tag,
Checkbox,
CheckboxGroup,
BadgeGroup,
Badge,
Search,
Step,
Tabs,
Tab,
Col,
Row,
Actionsheet,
Quantity,
Progress,
Uploader,
Swipe,
SwipeItem,
DatetimePicker
];
const install = function(Vue) {
if (install.installed) return;
components.forEach(component => {
Vue.component(component.name, component);
});
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export {
install,
version,
Button,
Switch,
Field,
Radio,
Cell,
Icon,
CellGroup,
CellSwipe,
Popup,
Dialog,
Picker,
RadioGroup,
Waterfall,
Loading,
Panel,
Card,
Steps,
Tag,
Checkbox,
CheckboxGroup,
BadgeGroup,
Badge,
Search,
Step,
Tabs,
Tab,
Lazyload,
ImagePreview,
Col,
Row,
Actionsheet,
Quantity,
Progress,
Toast,
Uploader,
Swipe,
SwipeItem,
DatetimePicker
};
export default {
install,
version,
Button,
Switch,
Field,
Radio,
Cell,
Icon,
CellGroup,
CellSwipe,
Popup,
Dialog,
Picker,
RadioGroup,
Waterfall,
Loading,
Panel,
Card,
Steps,
Tag,
Checkbox,
CheckboxGroup,
BadgeGroup,
Badge,
Search,
Step,
Tabs,
Tab,
Lazyload,
ImagePreview,
Col,
Row,
Actionsheet,
Quantity,
Progress,
Toast,
Uploader,
Swipe,
SwipeItem,
DatetimePicker
};
packages/lazyload/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/lazyload/README.md
View File
packages/lazyload/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}
packages/loading/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/loading/README.md
View File
packages/loading/index.js
-3
View File
@@ -1,3 +0,0 @@
import Loading from './src/loading';
export default Loading;
packages/loading/src/loading.vue → packages/loading/index.vue
View File
packages/loading/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-loading",
"version": "0.0.1",
"description": "loading component",
"main": "./lib/index.js",
"author": "jiangruowei",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/mixins/findParent.js
+22
View File
@@ -0,0 +1,22 @@
/**
* 根据父组件名找到对应`parent`
*/
export default {
methods: {
findParentByComponentName(name) {
if (this.parentGroup) return;
let parent = this.$parent;
while (parent) {
if (parent.$options.name === name) {
this.parentGroup = parent;
break;
} else {
parent = parent.$parent;
}
}
return this.parentGroup;
}
}
};
packages/mixins/popup/index.js
+188
View File
@@ -0,0 +1,188 @@
import PopupManager from './popup-manager';
import PopupContext from './popup-context';
export default {
props: {
// popup当前显示状态
value: {
type: Boolean,
default: false
},
// 是否显示遮罩层
overlay: {
type: Boolean,
default: false
},
/**
* 点击遮罩层是否关闭popup
*/
closeOnClickOverlay: {
type: Boolean,
default: false
},
zIndex: [String, Number],
// popup滚动时是否body内容也滚动
// 默认为不滚动
lockOnScroll: {
type: Boolean,
default: true
},
// 防止滚动穿透
preventScroll: {
type: Boolean,
default: false
}
},
watch: {
value(val) {
if (val) {
if (this.opening) return;
this.open();
} else {
if (this.closing) return;
this.close();
}
}
},
beforeMount() {
this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
PopupManager.register(this._popupId, this);
},
data() {
return {
opening: false,
opened: false,
closing: false,
bodyOverflow: null,
pos: {
x: 0,
y: 0
}
};
},
methods: {
recordPosition(e) {
this.pos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
},
watchTouchMove(e) {
const pos = this.pos;
const dx = e.touches[0].clientX - pos.x;
const dy = e.touches[0].clientY - pos.y;
const direction = dy > 0 ? '10' : '01';
const el = this.$el.querySelector('.scroller') || this.$el;
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
const offsetHeight = el.offsetHeight;
const isVertical = Math.abs(dx) < Math.abs(dy);
let status = '11';
if (scrollTop === 0) {
status = offsetHeight >= scrollHeight ? '00' : '01';
} else if (scrollTop + offsetHeight >= scrollHeight) {
status = '10';
}
if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
e.preventDefault();
e.stopPropagation();
}
},
/**
* 显示popup
*/
open() {
if (this.$isServer) return;
if (this.opened) return;
this.opening = true;
this.$emit('input', true);
const zIndex = this.zIndex;
// 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex`
if (zIndex) {
PopupContext.setContext('zIndex', zIndex);
}
// 如果显示遮罩层
if (this.overlay) {
if (this.closing) {
PopupManager.closeModal(this._popupId);
this.closing = false;
}
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el);
// 如果滚动时需要锁定
if (this.lockOnScroll) {
// 将原来的`bodyOverflow`存起来
if (!this.bodyOverflow) {
this.bodyOverflow = document.body.style.overflow;
}
document.body.style.overflow = 'hidden';
}
}
this.$el.style.zIndex = PopupManager.nextZIndex();
this.opened = true;
this.opening = false;
if (this.preventScroll) {
document.addEventListener('touchstart', this.recordPosition, false);
document.addEventListener('touchmove', this.watchTouchMove, false);
}
},
/**
* 关闭popup
*/
close() {
if (this.closing) return;
this.closing = true;
this.$emit('input', false);
if (this.lockOnScroll) {
setTimeout(() => {
if (this.overlay && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
}
this.bodyOverflow = null;
}, 200);
}
this.opened = false;
this.doAfterClose();
},
doAfterClose() {
this.closing = false;
PopupManager.closeModal(this._popupId);
if (this.preventScroll) {
document.removeEventListener('touchstart', this.recordPosition, false);
document.removeEventListener('touchmove', this.watchTouchMove, false);
}
}
},
beforeDestroy() {
PopupManager.deregister(this._popupId);
PopupManager.closeModal(this._popupId);
if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
}
this.bodyOverflow = null;
}
};
packages/mixins/popup/popup-context.js
+40
View File
@@ -0,0 +1,40 @@
import Vue from 'vue';
let context;
const _global = Vue.prototype.$isServer ? global : window;
if (_global && _global.popupContext) {
context = _global.popupContext;
}
const DEFAULT_CONTEXT = {
idSeed: 1,
zIndex: 2000,
hasModal: false,
instances: {},
modalStack: []
};
context = _global.popupContext = {
...DEFAULT_CONTEXT,
...context
};
const PopupContext = {
getContext(key) {
return context[key];
},
setContext(key, value) {
context[key] = value;
},
plusKeyByOne(key) {
const oldVal = +context[key];
context[key] = oldVal + 1;
return oldVal;
}
};
export default PopupContext;
packages/mixins/popup/popup-manager.js
+134
View File
@@ -0,0 +1,134 @@
import Vue from 'vue';
import PopupContext from './popup-context';
const getModal = function() {
if (Vue.prototype.$isServer) return;
let modalDom = PopupContext.getContext('modalDom');
if (modalDom) {
PopupContext.setContext('hasModal', true);
} else {
PopupContext.setContext('hasModal', false);
modalDom = document.createElement('div');
PopupContext.setContext('modalDom', modalDom);
modalDom.addEventListener('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
modalDom.addEventListener('click', function() {
PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
});
}
return modalDom;
};
const PopupManager = {
nextZIndex() {
return PopupContext.plusKeyByOne('zIndex');
},
getInstance(id) {
return PopupContext.getContext('instances')[id];
},
register(id, instance) {
if (id && instance) {
const instances = PopupContext.getContext('instances');
instances[id] = instance;
}
},
deregister(id) {
if (id) {
const instances = PopupContext.getContext('instances');
instances[id] = null;
delete instances[id];
}
},
/**
* 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
*/
handleOverlayClick() {
const modalStack = PopupContext.getContext('modalStack');
const topModal = modalStack[modalStack.length - 1];
if (!topModal) return;
const instance = PopupManager.getInstance(topModal.id);
if (instance && instance.closeOnClickOverlay) {
instance.close();
}
},
openModal(id, zIndex, dom) {
if (!id || zIndex === undefined) return;
const modalStack = PopupContext.getContext('modalStack');
for (let i = 0, len = modalStack.length; i < len; i++) {
const item = modalStack[i];
if (item.id === id) {
return;
}
}
const modalDom = getModal();
modalDom.classList.add('van-modal');
let domParentNode;
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
domParentNode = dom.parentNode
} else {
domParentNode = document.body;
}
domParentNode.appendChild(modalDom);
if (zIndex) {
modalDom.style.zIndex = zIndex;
}
modalDom.style.display = '';
modalStack.push({ id: id, zIndex: zIndex, parentNode: domParentNode });
},
closeModal(id) {
const modalStack = PopupContext.getContext('modalStack');
const modalDom = getModal();
if (modalStack.length > 0) {
const topItem = modalStack[modalStack.length - 1];
if (topItem.id === id) {
modalStack.pop();
if (modalStack.length > 0) {
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
modalDom.parentNode.removeChild(modalDom);
const currModalParent = modalStack[0].parentNode;
currModalParent && currModalParent.appendChild(modalDom);
}
} else {
for (let i = modalStack.length - 1; i >= 0; i--) {
if (modalStack[i].id === id) {
modalStack.splice(i, 1);
break;
}
}
}
}
if (modalStack.length === 0) {
setTimeout(() => {
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
modalDom.style.display = 'none';
this.modalDom = null;
}, 200);
}
}
};
export default PopupManager;
packages/panel/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/panel/README.md
View File
packages/panel/index.js
-3
View File
@@ -1,3 +0,0 @@
import Panel from './src/panel';
export default Panel;
packages/panel/src/panel.vue → packages/panel/index.vue
View File
packages/panel/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-panel",
"version": "0.0.1",
"description": "panel component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/picker/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版
packages/picker/README.md
View File
packages/picker/src/draggable.js → packages/picker/draggable.js
View File
packages/picker/index.js
-3
View File
@@ -1,3 +0,0 @@
import Picker from './src/picker';
export default Picker;
packages/picker/src/picker.vue → packages/picker/index.vue
View File
packages/picker/package.json
-10
View File
@@ -1,10 +0,0 @@
{
"name": "@youzan/van-picker",
"version": "0.0.1",
"description": "picker component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
packages/picker/src/picker-column.vue → packages/picker/picker-column.vue
+1 -1
View File
@@ -14,7 +14,7 @@
</template>
<script>
import translateUtil from 'src/utils/transition';
import translateUtil from '../utils/transition';
import draggable from './draggable';
const DEFAULT_ITEM_HEIGHT = 44;
packages/popup/CHANGELOG.md
-8
View File
@@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

Some files were not shown because too many files have changed in this diff Show More