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

vant components

Browse Source
This commit is contained in:
cookfront
2017-04-19 17:44:57 +08:00
parent c6014ad62d
commit 06e333eb3e
145 changed files with 1679 additions and 1619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/actionsheet/src/actionsheet.vue
+12 -12
View File
@@ -1,30 +1,30 @@
<template>
<transition name="actionsheet-float">
<div class="zan-actionsheet" :class="[ title ? 'zan-actionsheet--withtitle' : '' ]" v-show="currentValue">
<div class="zan-actionsheet__header" v-if="title">
<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>
<zan-icon name="close" @click.stop="currentValue = false"></zan-icon>
<van-icon name="close" @click.stop="currentValue = false"></van-icon>
</div>
<template v-if="!title">
<ul class="zan-actionsheet__list">
<ul class="van-actionsheet__list">
<li
v-for="item in actions"
class="zan-actionsheet__item"
:class="[item.className, item.loading ? 'zan-actionsheet__item--loading' : '']"
class="van-actionsheet__item"
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
@click.stop="handleItemClick(item)">
<template v-if="!item.loading">
<span class="zan-actionsheet__name">{{ item.name }}</span>
<span class="zan-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
<span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<template v-else>
<zan-loading class="zan-actionsheet__loading" type="circle" color="black"></zan-loading>
<van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
</template>
</li>
</ul>
<a class="zan-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
<a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</template>
<template v-else>
<div class="zan-actionsheet__content">
<div class="van-actionsheet__content">
<slot></slot>
</div>
</template>
@@ -38,7 +38,7 @@ import ZanLoading from 'packages/loading';
import ZanIcon from 'packages/icon';
export default {
name: 'zan-actionsheet',
name: 'van-actionsheet',
mixins: [Popup],
packages/badge/src/badge-group.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-badge-group">
<div class="van-badge-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-badge-group',
name: 'van-badge-group',
props: {
// 当前激活 tab 面板的 key
packages/badge/src/badge.vue
+5 -5
View File
@@ -1,16 +1,16 @@
<template>
<a class="zan-badge" :href="url" @click="handleClick" :class="{
'zan-badge--select': isSelect
<a class="van-badge" :href="url" @click="handleClick" :class="{
'van-badge--select': isSelect
}">
<div class="zan-badge__active"></div>
<div v-if="info" class="zan-badge__info">{{info}}</div>
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{info}}</div>
{{title}}
</a>
</template>
<script>
export default {
name: 'zan-badge',
name: 'van-badge',
props: {
title: {
packages/button/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-button",
"name": "@youzan/van-button",
"version": "0.0.1",
"description": "button component",
"main": "./index.js",
packages/button/src/button.js
+14 -14
View File
@@ -8,7 +8,7 @@
* @param {slot} - 显示文本
*
* @example
* <zan-button size="large" type="primary">按钮</zan-button>
* <van-button size="large" type="primary">按钮</van-button>
*/
import ZanLoading from 'packages/loading';
@@ -17,10 +17,10 @@ const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
export default {
name: 'zan-button',
name: 'van-button',
components: {
'zan-loading': ZanLoading
'van-loading': ZanLoading
},
props: {
@@ -65,28 +65,28 @@ export default {
type={nativeType}
disabled={disabled}
class={[
'zan-button',
'zan-button--' + type,
'zan-button--' + size,
'van-button',
'van-button--' + type,
'van-button--' + size,
{
'zan-button--disabled': disabled,
'zan-button--loading': loading,
'zan-button--block': block,
'zan-button--bottom-action': bottomAction
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': block,
'van-button--bottom-action': bottomAction
}
]}
onClick={this.handleClick}
>
{
loading
? <zan-loading
class="zan-button__icon-loading"
? <van-loading
class="van-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}>
</zan-loading>
</van-loading>
: null
}
<span class="zan-button__text">{this.$slots.default}</span>
<span class="van-button__text">{this.$slots.default}</span>
</Tag>
);
}
packages/card/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-card",
"name": "@youzan/van-card",
"version": "0.0.1",
"description": "card component",
"main": "./index.js",
packages/card/src/card.vue
+7 -7
View File
@@ -1,13 +1,13 @@
<template>
<div class="zan-card">
<img :src="thumb" alt="" class="zan-card__img">
<div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
<div class="zan-card__info">
<div class="van-card">
<img :src="thumb" alt="" class="van-card__img">
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
<div class="van-card__info">
<slot name="title">
<h4 v-text="title" class="zan-card__title"></h4>
<h4 v-text="title" class="van-card__title"></h4>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="zan-card__desc"></p>
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
</slot>
<slot name="tags"></slot>
</div>
@@ -18,7 +18,7 @@
<script>
export default {
name: 'zan-card',
name: 'van-card',
props: {
thumb: {
type: String,
packages/cell/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-cell",
"name": "@youzan/van-cell",
"version": "0.0.1",
"description": "cell component",
"main": "./index.js",
packages/cell/src/cell-group.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="zan-cell-group">
<div class="van-cell-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-cell-group'
name: 'van-cell-group'
};
</script>
packages/cell/src/cell.vue
+10 -10
View File
@@ -1,36 +1,36 @@
<template>
<a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
<div
class="zan-cell__title"
class="van-cell__title"
v-if="this.$slots.title || title"
>
<slot name="icon">
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
</slot>
<slot name="title">
<span class="zan-cell__text" v-text="title"></span>
<span class="zan-cell__label" v-if="label" v-text="label"></span>
<span class="van-cell__text" v-text="title"></span>
<span class="van-cell__label" v-if="label" v-text="label"></span>
</slot>
</div>
<div
class="zan-cell__value"
class="van-cell__value"
v-if="value || this.$slots.default"
:class="{
'zan-cell__value--link': isLink,
'zan-cell__value--alone': !this.$slots.title && !title && !label
'van-cell__value--link': isLink,
'van-cell__value--alone': !this.$slots.title && !title && !label
}"
>
<slot>
<span v-text="value"></span>
</slot>
</div>
<i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
<i class="van-icon van-icon-arrow" v-if="isLink"></i>
</a>
</template>
<script>
export default {
name: 'zan-cell',
name: 'van-cell',
props: {
icon: String,
packages/checkbox/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-checkbox",
"name": "@youzan/van-checkbox",
"version": "0.0.1",
"description": "checkbox component",
"main": "./index.js",
packages/checkbox/src/checkbox-group.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-checkbox-group">
<div class="van-checkbox-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-checkbox-group',
name: 'van-checkbox-group',
props: {
value: {},
packages/checkbox/src/checkbox.vue
+11 -11
View File
@@ -1,22 +1,22 @@
<template>
<div
class="zan-checkbox"
class="van-checkbox"
:class="{
'zan-checkbox--disabled': isDisabled
'van-checkbox--disabled': isDisabled
}">
<span class="zan-checkbox__input">
<span class="van-checkbox__input">
<input
v-model="currentValue"
type="checkbox"
class="zan-checkbox__control"
class="van-checkbox__control"
:disabled="isDisabled">
<span class="zan-icon" :class="{
'zan-icon-checked': isChecked,
'zan-icon-check': !isChecked
<span class="van-icon" :class="{
'van-icon-checked': isChecked,
'van-icon-check': !isChecked
}">
</span>
</span>
<span class="zan-checkbox__label" @click="handleLabelClick">
<span class="van-checkbox__label" @click="handleLabelClick">
<slot></slot>
</span>
</div>
@@ -26,7 +26,7 @@
import findParent from 'src/mixins/findParent';
export default {
name: 'zan-checkbox',
name: 'van-checkbox',
mixins: [findParent],
@@ -38,10 +38,10 @@ export default {
computed: {
/**
* `checkbox`是否在`zan-checkbox-group`中
* `checkbox`是否在`van-checkbox-group`中
*/
isGroup() {
return !!this.findParentByComponentName('zan-checkbox-group');
return !!this.findParentByComponentName('van-checkbox-group');
},
/**
packages/col/src/col.vue
+2 -2
View File
@@ -14,13 +14,13 @@
<script>
export default {
name: 'zan-col',
name: 'van-col',
props: {
span: [Number, String],
offset: [Number, String],
prefix: {
type: String,
default: 'zan'
default: 'van'
}
},
computed: {
packages/datetime-picker/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-datetime-picker",
"name": "@youzan/van-datetime-picker",
"version": "0.0.1",
"description": "datetime picker component",
"main": "./index.js",
packages/datetime-picker/src/datetime-picker.vue
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<zan-picker
<van-picker
ref="picker"
:columns="columns"
:visible-item-count="visibleItemCount"
@change="handlePickerChange"
@confirm="handlePickerConfirm"
showToolbar>
</zan-picker>
</van-picker>
</template>
<script>
@@ -15,7 +15,7 @@ import Picker from 'packages/picker';
const allowedType = ['time', 'date', 'datetime'];
export default {
name: 'zan-datetime-picker',
name: 'van-datetime-picker',
components: {
Picker
packages/dialog/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-dialog",
"name": "@youzan/van-dialog",
"version": "0.0.1",
"description": "dialog component",
"main": "./index.js",
packages/dialog/src/dialog.vue
+10 -10
View File
@@ -1,16 +1,16 @@
<template>
<transition name="dialog-bounce">
<div class="zan-dialog-wrapper">
<div class="zan-dialog" v-show="value">
<div class="zan-dialog__header" v-if="title">
<div class="zan-dialog__title" v-text="title"></div>
<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="zan-dialog__content" v-if="message">
<div class="zan-dialog__message" :class="{ 'zan-dialog__message--notitle': !title }" v-html="message"></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="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
<button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
<button class="zan-dialog__btn zan-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
<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>
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
const CONFIRM_TEXT = '确认';
export default {
name: 'zan-dialog',
name: 'van-dialog',
mixins: [Popup],
packages/field/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-field",
"name": "@youzan/van-field",
"version": "0.0.1",
"description": "form field component",
"main": "./index.js",
packages/field/src/field.vue
+12 -12
View File
@@ -1,20 +1,20 @@
<template>
<zan-cell
class="zan-field"
<van-cell
class="van-field"
:title="label"
:required="required"
:class="{
'zan-field--hastextarea': type === 'textarea',
'zan-field--nolabel': !label,
'zan-field--disabled': disabled,
'zan-field--error': error,
'zan-field--border': border,
'zan-field--autosize': autosize
'van-field--hastextarea': type === 'textarea',
'van-field--nolabel': !label,
'van-field--disabled': disabled,
'van-field--error': error,
'van-field--border': border,
'van-field--autosize': autosize
}">
<textarea
v-if="type === 'textarea'"
ref="textareaElement"
class="zan-field__control"
class="van-field__control"
v-model="currentValue"
@focus="handleInputFocus"
:placeholder="placeholder"
@@ -26,7 +26,7 @@
</textarea>
<input
v-else
class="zan-field__control"
class="van-field__control"
:value="currentValue"
@input="handleInput"
@focus="handleInputFocus"
@@ -35,7 +35,7 @@
:maxlength="maxlength"
:disabled="disabled"
:readonly="readonly">
</zan-cell>
</van-cell>
</template>
<script>
@@ -43,7 +43,7 @@ const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime'
import zanCell from 'packages/cell';
export default {
name: 'zan-field',
name: 'van-field',
components: {
zanCell
packages/icon/package.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"name": "@youzan/zan-icon",
"name": "@youzan/van-icon",
"version": "0.0.1",
"description": "zan-icon",
"description": "van-icon",
"main": "index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"devDependencies": {},
packages/icon/src/icon.vue
+2 -2
View File
@@ -1,10 +1,10 @@
<template>
<i class="zan-icon" :class="'zan-icon-' + name" @click="handleIconClick"></i>
<i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
</template>
<script>
export default {
name: 'zan-icon',
name: 'van-icon',
props: {
name: {
packages/image-preview/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-image-pewview",
"name": "@youzan/van-image-pewview",
"version": "0.0.1",
"description": "image preview component",
"main": "./index.js",
packages/image-preview/src/image-preview.vue
+9 -9
View File
@@ -1,11 +1,11 @@
<template>
<transition name="image-fade">
<div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
<zan-swipe>
<zan-swipe-item v-for="item in images">
<img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
</zan-swipe-item>
</zan-swipe>
<div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
<van-swipe>
<van-swipe-item v-for="item in images">
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
</van-swipe-item>
</van-swipe>
</div>
</transition>
</template>
@@ -16,7 +16,7 @@ import ZanSwipe from 'packages/swipe';
import ZanSwipeItem from 'packages/swipe-item';
export default {
name: 'zan-image-preview',
name: 'van-image-preview',
mixins: [Popup],
@@ -57,8 +57,8 @@ export default {
const target = event.currentTarget;
const targetRatio = target.width / target.height;
const centerClass = 'zan-image-preview__image--center';
const bigClass = 'zan-image-preview__image--big';
const centerClass = 'van-image-preview__image--center';
const bigClass = 'van-image-preview__image--big';
if (targetRatio > ratio) {
target.className += (' ' + centerClass);
packages/loading/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-loading",
"name": "@youzan/van-loading",
"version": "0.0.1",
"description": "loading component",
"main": "./lib/index.js",
packages/loading/src/loading.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<template>
<div class="zan-loading">
<span class="zan-loading__spinner" :class="['zan-loading__spinner--' + type, 'zan-loading__spinner--' + color]"></span>
<div class="van-loading">
<span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
</div>
</template>
@@ -8,7 +8,7 @@
const VALID_TYPES = ['gradient-circle', 'circle'];
const VALID_COLORS = ['black', 'white'];
export default {
name: 'zan-loading',
name: 'van-loading',
props: {
type: {
packages/panel/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-panel",
"name": "@youzan/van-panel",
"version": "0.0.1",
"description": "panel component",
"main": "./index.js",
packages/panel/src/panel.vue
+8 -8
View File
@@ -1,16 +1,16 @@
<template>
<div class="zan-panel">
<div class="zan-panel__header">
<div class="van-panel">
<div class="van-panel__header">
<slot name="header">
<h4 class="zan-panel__title" v-text="title"></h4>
<span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
<span class="zan-panel__status" v-if="status" v-text="status"></span>
<h4 class="van-panel__title" v-text="title"></h4>
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
<span class="van-panel__status" v-if="status" v-text="status"></span>
</slot>
</div>
<div class="zan-panel__content">
<div class="van-panel__content">
<slot></slot>
</div>
<div class="zan-panel__footer" v-if="this.$slots.footer">
<div class="van-panel__footer" v-if="this.$slots.footer">
<slot name="footer"></slot>
</div>
</div>
@@ -18,7 +18,7 @@
<script>
export default {
name: 'zan-panel',
name: 'van-panel',
props: {
title: String,
desc: String,
packages/picker/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-picker",
"name": "@youzan/van-picker",
"version": "0.0.1",
"description": "picker component",
"main": "./index.js",
packages/picker/src/picker-column.vue
+6 -6
View File
@@ -1,10 +1,10 @@
<template>
<div class="zan-picker-column" :class="classNames">
<div class="zan-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
<div class="van-picker-column" :class="classNames">
<div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
<div
v-for="item in currentValues"
class="zan-picker-column__item"
:class="{ 'zan-picker-column__item--selected': item === currentValue }"
class="van-picker-column__item"
:class="{ 'van-picker-column__item--selected': item === currentValue }"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
{{ typeof item === 'object' && item[valueKey] ? item[valueKey] : item }}
</div>
@@ -19,7 +19,7 @@ import draggable from './draggable';
const DEFAULT_ITEM_HEIGHT = 44;
export default {
name: 'zan-picker-column',
name: 'van-picker-column',
props: {
/**
@@ -168,7 +168,7 @@ export default {
startTop: event.pageY,
startTranslateTop: translateUtil.getElementTranslate(el).top
};
pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
pickerItems = el.querySelectorAll('.van-picker-item'); // eslint-disable-line
},
drag: (event) => {
packages/picker/src/picker.vue
+8 -8
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-picker">
<div class="zan-picker__toolbar" v-show="showToolbar">
<div class="van-picker">
<div class="van-picker__toolbar" v-show="showToolbar">
<slot>
<a href="javascript:void(0)" class="zan-picker__cancel" @click="handlePickerCancel">取消</a>
<a href="javascript:void(0)" class="zan-picker__confirm" @click="handlePickerConfirm">完成</a>
<a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
<a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
</slot>
</div>
<div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
<picker-column
v-for="(item, index) in columns"
v-model="values[index]"
@@ -17,7 +17,7 @@
:value-key="valueKey"
@columnChange="columnValueChange(index)">
</picker-column>
<div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
<div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
</div>
</div>
</template>
@@ -28,7 +28,7 @@ import PickerColumn from './picker-column';
const DEFAULT_ITEM_HEIGHT = 44;
export default {
name: 'zan-picker',
name: 'van-picker',
components: {
PickerColumn
@@ -99,7 +99,7 @@ export default {
* 获取对应索引的列的实例
*/
getColumn(index) {
const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
const children = this.$children.filter(child => child.$options.name === 'van-picker-column');
return children[index];
},
packages/popup/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-popup",
"name": "@youzan/van-popup",
"version": "0.0.1",
"description": "popup component",
"main": "./index.js",
packages/popup/src/popup.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<transition :name="currentTransition">
<div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
<div v-show="currentValue" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
<slot></slot>
</div>
</transition>
@@ -10,7 +10,7 @@
import Popup from 'src/mixins/popup';
export default {
name: 'zan-popup',
name: 'van-popup',
mixins: [Popup],
packages/progress/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-progress",
"name": "@youzan/van-progress",
"version": "0.0.1",
"description": "progress component",
"main": "./index.js",
packages/progress/src/progress.vue
+7 -7
View File
@@ -1,15 +1,15 @@
<template>
<div class="zan-progress">
<div class="zan-progress__bar">
<span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
<span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
<div class="van-progress">
<div class="van-progress__bar">
<span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
<span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
</div>
</div>
</template>
<script>
/**
* zan-progress
* van-progress
* @module components/progress
* @desc 开关
* @param {boolean} [inactive=false] - 是否置灰
@@ -19,7 +19,7 @@
* @param {string} [textColor='#fff'] - 进度条文字颜色
*
* @example
* <zan-switch checked="true" disabled="false"></zan-switch>
* <van-switch checked="true" disabled="false"></van-switch>
*/
const DEFAULT_COLOR = '#38f';
@@ -27,7 +27,7 @@ const DEFAULT_TEXT_COLOR = '#fff';
const INACTIVE_COLOR = '#cacaca';
export default {
name: 'zan-progress',
name: 'van-progress',
props: {
percentage: {
packages/quantity/src/quantity.vue
+7 -7
View File
@@ -1,23 +1,23 @@
<template>
<div class="zan-quantity">
<div class="van-quantity">
<button
@click="handleChange('minus')"
class="zan-quantity__stepper zan-quantity__minus"
class="van-quantity__stepper van-quantity__minus"
:class="{
'zan-quantity__minus--disabled': isMinusDisabled
'van-quantity__minus--disabled': isMinusDisabled
}">
</button>
<input
type="text"
class="zan-quantity__input"
class="van-quantity__input"
:value="currentValue"
@input="handleInputChange"
:disabled="disabled">
<button
@click="handleChange('plus')"
class="zan-quantity__stepper zan-quantity__plus"
class="van-quantity__stepper van-quantity__plus"
:class="{
'zan-quantity__plus--disabled': isPlusDisabled
'van-quantity__plus--disabled': isPlusDisabled
}">
</button>
</div>
@@ -25,7 +25,7 @@
<script>
export default {
name: 'zan-quantity',
name: 'van-quantity',
props: {
min: {
packages/radio/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-radio",
"name": "@youzan/van-radio",
"version": "0.0.1",
"description": "radio component",
"main": "./index.js",
packages/radio/src/radio-group.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-radio-group">
<div class="van-radio-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-radio-group',
name: 'van-radio-group',
props: {
value: {},
packages/radio/src/radio.vue
+10 -10
View File
@@ -1,24 +1,24 @@
<template>
<div
@click="handleRadioClick"
class="zan-radio"
class="van-radio"
:class="{
'zan-radio--disabled': isDisabled
'van-radio--disabled': isDisabled
}">
<span class="zan-radio__input">
<span class="van-radio__input">
<input
:value="name"
v-model="currentValue"
type="radio"
class="zan-radio__control"
class="van-radio__control"
:disabled="isDisabled">
<span class="zan-icon" :class="{
'zan-icon-checked': currentValue === name,
'zan-icon-check': currentValue !== name
<span class="van-icon" :class="{
'van-icon-checked': currentValue === name,
'van-icon-check': currentValue !== name
}">
</span>
</span>
<span class="zan-radio__label" @click="handleLabelClick">
<span class="van-radio__label" @click="handleLabelClick">
<slot></slot>
</span>
</div>
@@ -28,7 +28,7 @@
import findParent from 'src/mixins/findParent';
export default {
name: 'zan-radio',
name: 'van-radio',
mixins: [findParent],
@@ -40,7 +40,7 @@ export default {
computed: {
isGroup() {
return !!this.findParentByComponentName('zan-radio-group');
return !!this.findParentByComponentName('van-radio-group');
},
currentValue: {
packages/row/src/row.vue
+2 -2
View File
@@ -8,11 +8,11 @@
<script>
export default {
name: 'zan-row',
name: 'van-row',
props: {
prefix: {
type: String,
default: 'zan'
default: 'van'
},
gutter: [Number, String]
},
packages/search/src/search.vue
+7 -7
View File
@@ -1,18 +1,18 @@
<template>
<div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
<div class="zan-search__input-wrap">
<zan-icon name="search"></zan-icon>
<div class="van-search" :class="{ 'van-search--focus' : isFocus }">
<div class="van-search__input-wrap">
<van-icon name="search"></van-icon>
<input
type="text"
:placeholder="placeholder"
class="zan-search__input"
class="van-search__input"
v-model="value"
v-refocus="focusStatus"
@focus="handleFocus"
@keyup.enter="handleSearch">
<zan-icon name="clear" @click="handleClean" v-show="isFocus"></zan-icon>
<van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
</div>
<div class="zan-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
<div class="van-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
</div>
</template>
@@ -20,7 +20,7 @@
import ZanIcon from 'packages/icon';
export default {
name: 'zan-search',
name: 'van-search',
components: {
ZanIcon
packages/steps/src/step.vue
+8 -8
View File
@@ -1,19 +1,19 @@
<template>
<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 class="van-step" :class="statusClass">
<div class="van-step__circle-container">
<i class="van-step__circle" v-if="status !== 'process'"></i>
<i class="van-icon van-icon-checked" v-else></i>
</div>
<p class="zan-step__title">
<p class="van-step__title">
<slot></slot>
</p>
<div class="zan-step__line"></div>
<div class="van-step__line"></div>
</div>
</template>
<script>
export default {
name: 'zan-step',
name: 'van-step',
beforeCreate() {
this.$parent.steps.push(this);
@@ -32,7 +32,7 @@ export default {
},
statusClass() {
const status = this.status;
return status ? 'zan-step--' + status : '';
return status ? 'van-step--' + status : '';
}
}
};
packages/steps/src/steps.vue
+12 -12
View File
@@ -1,22 +1,22 @@
<template>
<div class="zan-steps" :class="`zan-steps--${steps.length}`">
<div class="zan-steps__status" v-if="title || description">
<div class="zan-steps__icon" v-if="icon || $slot.icon">
<div class="van-steps" :class="`van-steps--${steps.length}`">
<div class="van-steps__status" v-if="title || description">
<div class="van-steps__icon" v-if="icon || $slot.icon">
<slot name="icon">
<zan-icon :name="icon" :class="iconClass"></zan-icon>
<van-icon :name="icon" :class="iconClass"></van-icon>
</slot>
</div>
<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 class="van-steps__message">
<div class="van-steps__message-wrapper">
<h4 class="van-steps__title" v-text="title"></h4>
<p class="van-steps__desc" v-text="description"></p>
</div>
</div>
<slot name="message-extra">
</slot>
</div>
<div class="zan-steps__items" :class="{
'zan-steps__items--alone': !title && !description
<div class="van-steps__items" :class="{
'van-steps__items--alone': !title && !description
}">
<slot></slot>
</div>
@@ -27,10 +27,10 @@
import Icon from 'packages/icon';
export default {
name: 'zan-steps',
name: 'van-steps',
components: {
'zan-icon': Icon
'van-icon': Icon
},
props: {
packages/swipe/src/scroll.js
+1 -1
View File
@@ -34,7 +34,7 @@ extend(Scroll.prototype, {
update: function() {
const oldPages = this.pages;
this.pages = this.wrapElem.querySelectorAll('.zan-swipe-item');
this.pages = this.wrapElem.querySelectorAll('.van-swipe-item');
if (oldPages && oldPages.length === this.pages.length) {
const isSame = Array.prototype.every.call(this.pages, (elem, index) => {
return this.pages[index] === oldPages[index];
packages/swipe/src/swipe-item.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-swipe-item">
<div class="van-swipe-item">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-swipe-item',
name: 'van-swipe-item',
beforeCreate() {
this.$parent.swipes.push(this);
packages/swipe/src/swipe.vue
+6 -6
View File
@@ -1,11 +1,11 @@
<template>
<div class="zan-swipe">
<div class="zan-swipe__items">
<div class="van-swipe">
<div class="van-swipe__items">
<slot></slot>
</div>
<div class="zan-swipe__indicators" v-if="showIndicators">
<span class="zan-swipe__indicator" v-for="i in swipes.length" :class="{
'zan-swipe__indicator--active': currIndex === i -1
<div class="van-swipe__indicators" v-if="showIndicators">
<span class="van-swipe__indicator" v-for="i in swipes.length" :class="{
'van-swipe__indicator--active': currIndex === i -1
}">
</span>
</div>
@@ -18,7 +18,7 @@ import Scroll from './scroll';
import SpringDummy from './spring_dummy';
export default {
name: 'zan-swipe',
name: 'van-swipe',
props: {
autoPlay: Boolean,
packages/switch/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-switch",
"name": "@youzan/van-switch",
"version": "0.0.1",
"description": "switch component",
"main": "./index.js",
packages/switch/src/switch.vue
+11 -11
View File
@@ -1,16 +1,16 @@
<template>
<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 class="van-switch" :class="switchStates" @click="toggleState">
<div class="van-switch__node">
<van-loading v-if="loading" class="van-switch__loading"></van-loading>
</div>
<div class="zan-switch__bg"></div>
<div class="van-switch__bg"></div>
</div>
</template>
<script>
import ZanLoading from 'packages/loading';
import VanLoading from 'packages/loading';
/**
* zan-switch
* van-switch
* @module components/switch
* @desc 开关
* @param {boolean} [value=false] - 开关状态
@@ -18,12 +18,12 @@ import ZanLoading from 'packages/loading';
* @param {boolean} [loading=false] - loading状态
*
* @example
* <zan-switch :checked="true" :disabled="false"></zan-switch>
* <van-switch :checked="true" :disabled="false"></van-switch>
*/
export default {
name: 'zan-switch',
name: 'van-switch',
components: {
'zan-loading': ZanLoading
'van-loading': VanLoading
},
props: {
value: Boolean,
@@ -47,10 +47,10 @@ export default {
},
computed: {
switchStates: function() {
const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off')];
const switchStates = ['van-switch--' + (this.checked ? 'on' : 'off')];
if (this.disabled) {
switchStates.push('zan-switch--disabled');
switchStates.push('van-switch--disabled');
}
return switchStates;
packages/tab/src/tab.vue
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<div class="zan-tab__pane" :class="classNames">
<div class="van-tab__pane" :class="classNames">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-tab',
name: 'van-tab',
props: {
// 选项卡头显示文字
title: {
@@ -20,7 +20,7 @@
},
computed: {
classNames() {
return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
return { 'van-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
}
}
};
packages/tab/src/tabs.vue
+8 -8
View File
@@ -1,21 +1,21 @@
<template>
<div class="zan-tabs" :class="[`zan-tabs--${type}`]">
<div class="van-tabs" :class="[`van-tabs--${type}`]">
<div
class="zan-tabs__nav"
:class="[`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`]"
class="van-tabs__nav"
:class="[`van-tabs__nav--${this.type}`, `van-tabs--col-${this.tabs.length}`]"
>
<div class="zan-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
<div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
<div
v-for="(tab, index) in tabs"
class="zan-tab"
:class="{'zan-tab--active': index === curActive}"
class="van-tab"
:class="{'van-tab--active': index === curActive}"
ref="tabkey"
@click="handleTabClick(index, tab)"
>
{{ tab.title }}
</div>
</div>
<div class="zan-tabs__content">
<div class="van-tabs__content">
<slot></slot>
</div>
</div>
@@ -23,7 +23,7 @@
<script>
export default {
name: 'zan-tabs',
name: 'van-tabs',
props: {
// 外部传入的激活的tab标签
packages/tag/src/main.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<span class="zan-tag" :class="[type ? `zan-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
<span class="van-tag" :class="[type ? `van-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
<slot></slot>
</span>
</template>
<script>
export default {
name: 'zan-tag',
name: 'van-tag',
props: {
type: String,
mark: Boolean,
packages/toast/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "@youzan/zan-toast",
"name": "@youzan/van-toast",
"version": "0.0.1",
"description": "toast component",
"main": "./index.js",
packages/toast/src/toast.vue
+13 -13
View File
@@ -1,26 +1,26 @@
<template>
<transition name="zan-toast-fade">
<div class="zan-toast-wrapper" v-show="visible">
<div class="zan-toast" :class="['zan-toast--' + displayStyle]">
<transition name="van-toast-fade">
<div class="van-toast-wrapper" v-show="visible">
<div class="van-toast" :class="['van-toast--' + displayStyle]">
<!-- 只显示文字 -->
<template v-if="displayStyle === 'text'" >
<div class="zan-toast__text">{{message}}</div>
<div class="van-toast__text">{{message}}</div>
</template>
<!-- 加载中 -->
<template v-if="displayStyle === 'loading'">
<zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
<van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
</template>
<!-- 图案加文字 -->
<template v-if="displayStyle === 'default'">
<zan-icon class="zan-toast__icon" :name="type"></zan-icon>
<div class="zan-toast__text">{{message}}</div>
<van-icon class="van-toast__icon" :name="type"></van-icon>
<div class="van-toast__text">{{message}}</div>
</template>
<!-- 传入html -->
<template v-if="displayStyle === 'html'">
<div class="zan-toast__text" v-html="message"></div>
<div class="van-toast__text" v-html="message"></div>
</template>
</div>
<div class="zan-toast__overlay" v-if="forbidClick"></div>
<div class="van-toast__overlay" v-if="forbidClick"></div>
</div>
</transition>
</template>
@@ -32,7 +32,7 @@ import zanIcon from 'packages/icon';
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
const DEFAULT_STYLE_LIST = ['success', 'fail'];
/**
* zan-toast
* van-toast
* @module components/toast
* @desc toast
* @param {string} [type=false] - 类型
@@ -40,11 +40,11 @@ const DEFAULT_STYLE_LIST = ['success', 'fail'];
*
*/
export default {
name: 'zan-toast',
name: 'van-toast',
components: {
'zan-loading': zanLoading,
'zan-icon': zanIcon
'van-loading': zanLoading,
'van-icon': zanIcon
},
props: {
type: {
packages/uploader/src/main.vue
+11 -11
View File
@@ -1,20 +1,20 @@
<template>
<div class="zan-uploader">
<slot>
<div class="van-uploader">
<slot>
</slot>
<template v-if="disabled">
<input type="file" @change="onValueChange" disabled="disabled" class="zan-uploader__input" />
</template>
<template v-else>
<input type="file" @change="onValueChange" class="zan-uploader__input" ref="input" />
</template>
</div>
</slot>
<template v-if="disabled">
<input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
</template>
<template v-else>
<input type="file" @change="onValueChange" class="van-uploader__input" ref="input" />
</template>
</div>
</template>
<script>
export default {
name: 'zan-uploader',
name: 'van-uploader',
props: {
disabled: {
type: Boolean,