Merge branch 'master' into dev/badge_search
# Conflicts: # components.json # packages/zanui-css/src/index.css # src/index.js
This commit is contained in:
zhuxiang
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-button",
|
||||
"name": "@youzan/zan-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @example
|
||||
* <z-button size="large" type="primary">按钮</z-button>
|
||||
* <zan-button size="large" type="primary">按钮</zan-button>
|
||||
*/
|
||||
|
||||
const allowedSize = ['mini', 'small', 'normal', 'large'];
|
||||
const allowedType = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'z-button',
|
||||
name: 'zan-button',
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
@@ -52,6 +52,27 @@ export default {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
|
||||
|
||||
return (
|
||||
<Tag
|
||||
type={nativeType}
|
||||
disabled={disabled}
|
||||
class={[
|
||||
'zan-button',
|
||||
'zan-button--' + type,
|
||||
'zan-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading,
|
||||
'is-block': block
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ? <i class="zan-icon-loading"></i> : null
|
||||
}
|
||||
<span class="zan-button-text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Card from './src/card';
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-card",
|
||||
"version": "0.0.1",
|
||||
"description": "card component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="zan-card">
|
||||
<img :src="thumb" alt="" class="zan-card__img">
|
||||
<div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
|
||||
<div class="zan-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="zan-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="zan-card__title"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: String,
|
||||
desc: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-cell",
|
||||
"name": "@youzan/zan-cell",
|
||||
"version": "0.0.1",
|
||||
"description": "cell component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="z-cell-group">
|
||||
<div class="zan-cell-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-cell-group'
|
||||
name: 'zan-cell-group'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,31 +1,34 @@
|
||||
<template>
|
||||
<a class="z-cell" :href="url" @click="handleClick">
|
||||
<div class="z-cell__title">
|
||||
<a class="zan-cell" :href="url" @click="handleClick">
|
||||
<div class="zan-cell__title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="z-cell__text" v-text="title"></span>
|
||||
<span class="z-cell__label" v-if="label" v-text="label"></span>
|
||||
<span class="zan-cell__text" v-text="title"></span>
|
||||
<span class="zan-cell__label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-cell__value" :class="{ 'is-link' : isLink }">
|
||||
<div class="zan-cell__value" :class="{
|
||||
'is-link': isLink,
|
||||
'is-alone': !title && !label
|
||||
}">
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<i class="zui-icon zui-icon-arrow" v-if="isLink"></i>
|
||||
<i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-cell',
|
||||
name: 'zan-cell',
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
title: String,
|
||||
value: String,
|
||||
value: [String, Number],
|
||||
url: String,
|
||||
label: String,
|
||||
isLink: Boolean
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
|
||||
|
||||
export default CheckboxGroup;
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Checkbox from './src/checkbox';
|
||||
|
||||
export default Checkbox;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-checkbox",
|
||||
"version": "0.0.1",
|
||||
"description": "checkbox component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="zan-checkbox-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-checkbox-group',
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.$emit('change', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div
|
||||
class="zan-checkbox"
|
||||
:class="{
|
||||
'is-disabled': isDisabled
|
||||
}">
|
||||
<span class="zan-checkbox__input">
|
||||
<input
|
||||
v-model="currentValue"
|
||||
type="checkbox"
|
||||
class="zan-checkbox__control"
|
||||
:disabled="isDisabled">
|
||||
<span class="zan-icon" :class="{
|
||||
'zan-icon-checked': isChecked,
|
||||
'zan-icon-check': !isChecked
|
||||
}">
|
||||
</span>
|
||||
</span>
|
||||
<span class="zan-checkbox__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import findParent from 'src/mixins/findParent';
|
||||
|
||||
export default {
|
||||
name: 'zan-checkbox',
|
||||
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
name: [String, Number]
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* `checkbox`是否在`zan-checkbox-group`中
|
||||
*/
|
||||
isGroup() {
|
||||
return !!this.findParentByComponentName('zan-checkbox-group');
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`当前值
|
||||
*/
|
||||
currentValue: {
|
||||
get() {
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
let 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);
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被选中
|
||||
*/
|
||||
isChecked() {
|
||||
if ({}.toString.call(this.currentValue) === '[object Boolean]') {
|
||||
return this.currentValue;
|
||||
} else if (Array.isArray(this.currentValue)) {
|
||||
return this.currentValue.indexOf(this.name) > -1;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被禁用
|
||||
*/
|
||||
isDisabled() {
|
||||
return this.isGroup && this.parentGroup
|
||||
? this.parentGroup.disabled || this.disabled
|
||||
: this.disabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-dialog",
|
||||
"name": "@youzan/zan-dialog",
|
||||
"version": "0.0.1",
|
||||
"description": "dialog component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="z-dialog-wrapper">
|
||||
<div class="z-dialog" v-show="value">
|
||||
<div class="z-dialog__header" v-if="title">
|
||||
<div class="z-dialog__title" v-text="title"></div>
|
||||
<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>
|
||||
<div class="z-dialog__content" v-if="message">
|
||||
<div class="z-dialog__message" v-html="message"></div>
|
||||
<div class="zan-dialog__content" v-if="message">
|
||||
<div class="zan-dialog__message" v-html="message"></div>
|
||||
</div>
|
||||
<div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'z-dialog',
|
||||
name: 'zan-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-field",
|
||||
"name": "@youzan/zan-field",
|
||||
"version": "0.0.1",
|
||||
"description": "form field component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<z-cell
|
||||
class="z-field"
|
||||
<zan-cell
|
||||
class="zan-field"
|
||||
:title="label"
|
||||
:class="{
|
||||
'is-textarea': type === 'textarea',
|
||||
@@ -8,7 +8,7 @@
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="z-field__control"
|
||||
class="zan-field__control"
|
||||
v-model="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
:placeholder="placeholder"
|
||||
@@ -18,7 +18,7 @@
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="z-field__control"
|
||||
class="zan-field__control"
|
||||
:value="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
@input="handleInput"
|
||||
@@ -27,14 +27,14 @@
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</z-cell>
|
||||
</zan-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'z-field',
|
||||
name: 'zan-field',
|
||||
|
||||
components: {
|
||||
zCell
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@youzan/z-icon",
|
||||
"name": "@youzan/zan-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "z-icon",
|
||||
"description": "zan-icon",
|
||||
"main": "index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"devDependencies": {},
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<i :class="'zenui-icon-' + name"></i>
|
||||
<i class="zanui-icon" :class="'zan-icon-' + name"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-icon',
|
||||
name: 'zan-icon',
|
||||
|
||||
props: {
|
||||
name: String
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-loading",
|
||||
"name": "@youzan/zan-loading",
|
||||
"version": "0.0.1",
|
||||
"description": "loading component",
|
||||
"main": "./lib/index.js",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="z-loading"></div>
|
||||
<div class="zan-loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-loading'
|
||||
name: 'zan-loading'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Panel from './src/panel';
|
||||
|
||||
export default Panel;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "panel component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="zan-panel">
|
||||
<div class="zan-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>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-panel__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="zan-panel__footer" v-if="this.$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-panel',
|
||||
props: {
|
||||
title: String,
|
||||
desc: String,
|
||||
status: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-picker",
|
||||
"name": "@youzan/zan-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="z-picker-column" :class="classNames">
|
||||
<div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div class="zan-picker-column" :class="classNames">
|
||||
<div class="zan-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div
|
||||
v-for="item in currentValues"
|
||||
class="z-picker-column__item"
|
||||
:class="{ 'z-picker-column__item--selected': item === currentValue }"
|
||||
class="zan-picker-column__item"
|
||||
:class="{ 'zan-picker-column__item--selected': item === currentValue }"
|
||||
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
||||
{{item}}
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@ import draggable from './draggable';
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'z-picker-column',
|
||||
name: 'zan-picker-column',
|
||||
|
||||
props: {
|
||||
/**
|
||||
@@ -168,7 +168,7 @@ export default {
|
||||
startTop: event.pageY,
|
||||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||||
};
|
||||
pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
|
||||
pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
|
||||
},
|
||||
|
||||
drag: (event) => {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="z-picker">
|
||||
<div class="z-picker__toolbar">
|
||||
<div class="zan-picker">
|
||||
<div class="zan-picker__toolbar">
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
|
||||
<div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
|
||||
<picker-column
|
||||
v-for="(item, index) in columns"
|
||||
v-model="values[index]"
|
||||
@@ -14,7 +14,7 @@
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="columnValueChange">
|
||||
</picker-column>
|
||||
<div class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
<div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -25,7 +25,7 @@ import PickerColumn from './picker-column';
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'z-picker',
|
||||
name: 'zan-picker',
|
||||
|
||||
components: {
|
||||
PickerColumn
|
||||
@@ -89,7 +89,7 @@ export default {
|
||||
* 获取对应索引的列的实例
|
||||
*/
|
||||
getColumn(index) {
|
||||
let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
|
||||
let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
|
||||
return children[index];
|
||||
},
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-popup",
|
||||
"name": "@youzan/zan-popup",
|
||||
"version": "0.0.1",
|
||||
"description": "popup component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
|
||||
<div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -10,7 +10,7 @@
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'z-popup',
|
||||
name: 'zan-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-radio",
|
||||
"name": "@youzan/zan-radio",
|
||||
"version": "0.0.1",
|
||||
"description": "radio component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
<template>
|
||||
<div class="z-radio-group">
|
||||
<div class="zan-radio-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-radio-group',
|
||||
name: 'zan-radio-group',
|
||||
|
||||
props: {
|
||||
value: [String, Number]
|
||||
value: {},
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('change', value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,61 +1,65 @@
|
||||
<template>
|
||||
<z-cell
|
||||
class="z-radio"
|
||||
<div
|
||||
class="zan-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
'is-disabled': isDisabled
|
||||
}">
|
||||
<span class="z-radio__input">
|
||||
<input type="radio" class="z-radio__control">
|
||||
<span class="z-radio__circle"></span>
|
||||
<span class="zan-radio__input">
|
||||
<input
|
||||
:value="name"
|
||||
v-model="currentValue"
|
||||
type="radio"
|
||||
class="zan-radio__control"
|
||||
:disabled="isDisabled">
|
||||
<span class="zan-icon" :class="{
|
||||
'zan-icon-checked': currentValue === name,
|
||||
'zan-icon-check': currentValue !== name
|
||||
}">
|
||||
</span>
|
||||
</span>
|
||||
<span class="z-radio__label">
|
||||
<span class="zan-radio__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</z-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zCell from 'packages/cell';
|
||||
import findParent from 'src/mixins/findParent';
|
||||
|
||||
export default {
|
||||
name: 'z-radio',
|
||||
name: 'zan-radio',
|
||||
|
||||
components: {
|
||||
zCell
|
||||
},
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
parentGroup: null
|
||||
name: [String, Number]
|
||||
},
|
||||
|
||||
computed: {
|
||||
isGroup() {
|
||||
let parent = this.$parent;
|
||||
while (parent) {
|
||||
if (parent.$options.name === 'z-radio-group') {
|
||||
this.parentGroup = parent;
|
||||
return true;
|
||||
} else {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return !!this.findParentByComponentName('zan-radio-group');
|
||||
},
|
||||
|
||||
model: {
|
||||
currentValue: {
|
||||
get() {
|
||||
return this.isGroup ? this.parentGroup.value : this.value;
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup) {
|
||||
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
this.parentGroup.$emit('input', val);
|
||||
} else {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
return this.isGroup && this.parentGroup
|
||||
? this.parentGroup.disabled || this.disabled
|
||||
: this.disabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Steps from './src/steps';
|
||||
|
||||
export default Steps;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>author: {{ author }}</h2>
|
||||
<div>Hello {{ name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sample',
|
||||
props: ['author'],
|
||||
data() {
|
||||
return {
|
||||
name: 'World'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/z-switch",
|
||||
"name": "@youzan/zan-switch",
|
||||
"version": "0.0.1",
|
||||
"description": "switch component",
|
||||
"main": "./index.js",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="z-switch" :class="switchState" @click="toggleState">
|
||||
<div class="z-switch__node" :class="switchState"></div>
|
||||
<div class="zan-switch" :class="switchState" @click="toggleState">
|
||||
<div class="zan-switch__node" :class="switchState"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
* <o2-switch checked="true" disabled="false"></o2-switch>
|
||||
*/
|
||||
export default {
|
||||
name: 'o2-switch',
|
||||
name: 'zan-switch',
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Tag from './src/main';
|
||||
|
||||
export default Tag;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<span class="zan-tag" :class="[type ? `zan-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tag',
|
||||
props: {
|
||||
type: String,
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/waterfall
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Waterfall from './src/main.js';
|
||||
|
||||
export default Waterfall;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/waterfall",
|
||||
"version": "0.0.1",
|
||||
"description": "瀑布流",
|
||||
"main": "./lib/index.js",
|
||||
"author": "pangxie1991",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import Utils from './utils.js';
|
||||
|
||||
const CONTEXT = '@@Waterfall';
|
||||
const OFFSET = 300;
|
||||
|
||||
// 绑定事件到元素上
|
||||
// 读取基本的控制变量
|
||||
function doBindEvent() {
|
||||
this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
|
||||
this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
|
||||
|
||||
var disabledExpr = this.el.getAttribute('waterfall-disabled');
|
||||
var disabled = false;
|
||||
if (disabledExpr) {
|
||||
this.vm.$watch(disabledExpr, (value) => {
|
||||
this.disabled = value;
|
||||
});
|
||||
disabled = Boolean(this.vm[disabledExpr]);
|
||||
}
|
||||
this.disabled = disabled;
|
||||
|
||||
var offset = this.el.getAttribute('waterfall-offset');
|
||||
this.offset = Number(offset) || OFFSET;
|
||||
|
||||
this.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
|
||||
|
||||
this.scrollEventListener();
|
||||
}
|
||||
|
||||
// 处理滚动函数
|
||||
function handleScrollEvent() {
|
||||
let element = this.el;
|
||||
let scrollEventTarget = this.scrollEventTarget;
|
||||
|
||||
// 已被禁止的滚动处理
|
||||
if (this.disabled) return;
|
||||
|
||||
let targetScrollTop = Utils.getScrollTop(scrollEventTarget);
|
||||
let targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
|
||||
|
||||
// 判断是否到了底
|
||||
let needLoadMoreToLower = false;
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
|
||||
} else {
|
||||
let elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
||||
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
||||
}
|
||||
if (needLoadMoreToLower) {
|
||||
this.cb['lower'] && this.cb['lower']({ target: scrollEventTarget, top: targetScrollTop });
|
||||
}
|
||||
|
||||
// 判断是否到了顶
|
||||
let needLoadMoreToUpper = false;
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToUpper = targetScrollTop < this.offset;
|
||||
} else {
|
||||
let elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
|
||||
needLoadMoreToUpper = elementTop + this.offset > 0;
|
||||
}
|
||||
if (needLoadMoreToUpper) {
|
||||
this.cb['upper'] && this.cb['upper']({ target: scrollEventTarget, top: targetScrollTop });
|
||||
}
|
||||
}
|
||||
|
||||
export default function(type) {
|
||||
return {
|
||||
bind(el, binding, vnode) {
|
||||
if (!el[CONTEXT]) {
|
||||
el[CONTEXT] = {
|
||||
el,
|
||||
vm: vnode.context,
|
||||
cb: {}
|
||||
};
|
||||
}
|
||||
el[CONTEXT].cb[type] = binding.value;
|
||||
|
||||
vnode.context.$on('hook:mounted', function() {
|
||||
if (Utils.isAttached(el)) {
|
||||
doBindEvent.call(el[CONTEXT]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
update(el) {
|
||||
el[CONTEXT].scrollEventListener();
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
const context = el[CONTEXT];
|
||||
context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import Waterfall from './directive.js';
|
||||
import Vue from 'vue';
|
||||
|
||||
const install = function(Vue) {
|
||||
Vue.directive('WaterfallLower', Waterfall('lower'));
|
||||
Vue.directive('WaterfallUpper', Waterfall('upper'));
|
||||
};
|
||||
|
||||
if (!Vue.prototype.$isServer) {
|
||||
Vue.use(install);
|
||||
}
|
||||
|
||||
Waterfall.install = install;
|
||||
export default Waterfall;
|
||||
@@ -0,0 +1,75 @@
|
||||
export default {
|
||||
debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = new Date();
|
||||
var later = function() {
|
||||
var last = (new Date()) - timestamp;
|
||||
if (last < wait) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
};
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(later, wait);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
},
|
||||
|
||||
// 找到最近的触发滚动事件的元素
|
||||
getScrollEventTarget(element) {
|
||||
var currentNode = element;
|
||||
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
||||
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
|
||||
var overflowY = this.getComputedStyle(currentNode).overflowY;
|
||||
if (overflowY === 'scroll' || overflowY === 'auto') {
|
||||
return currentNode;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return window;
|
||||
},
|
||||
|
||||
// 判断元素是否被加入到页面节点内
|
||||
isAttached(element) {
|
||||
var currentNode = element.parentNode;
|
||||
while (currentNode) {
|
||||
if (currentNode.tagName === 'HTML') {
|
||||
return true;
|
||||
}
|
||||
if (currentNode.nodeType === 11) {
|
||||
return false;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 获取滚动高度
|
||||
getScrollTop(element) {
|
||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||
},
|
||||
|
||||
// 获取元素距离顶部高度
|
||||
getElementTop(element) {
|
||||
if (element === window) {
|
||||
return this.getScrollTop(window);
|
||||
}
|
||||
return element.getBoundingClientRect().top + this.getScrollTop(window);
|
||||
},
|
||||
|
||||
getVisibleHeight(element) {
|
||||
if (element === window) {
|
||||
return element.innerHeight;
|
||||
}
|
||||
|
||||
return element.getBoundingClientRect().height;
|
||||
},
|
||||
|
||||
getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.7",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
@@ -53,6 +53,7 @@
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
&::last-child {
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.z-button {
|
||||
.zan-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b button-group {
|
||||
font-size: 0;
|
||||
|
||||
> .z-button {
|
||||
> .zan-button {
|
||||
margin-right: 10px;
|
||||
&::last-child {
|
||||
margin-right: 0;
|
||||
@@ -23,6 +23,7 @@
|
||||
}
|
||||
@b button-1 {
|
||||
@mixin button-wrap;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@b button-2 {
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
@import "./mixins/ellipsis.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b card {
|
||||
padding: 5px 15px;
|
||||
background: #FAFAFA;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@e img {
|
||||
float: left;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
margin-left: 100px;
|
||||
display: table;
|
||||
|
||||
@when center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
|
||||
.zan-card__info {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e row {
|
||||
overflow: hidden;
|
||||
padding-right: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e title {
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
max-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
max-height: 20px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e price {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b cell-group {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
@@ -19,7 +19,7 @@
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
background-color: $c-white;
|
||||
color: #333;
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: #666;
|
||||
color: $c-gray-darker;
|
||||
}
|
||||
|
||||
@e value {
|
||||
@@ -52,14 +52,18 @@
|
||||
@when link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@when alone {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-icon-arrow {
|
||||
.zan-icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
color: $c-gray-dark;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b checkbox {
|
||||
@when disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.zan-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;
|
||||
|
||||
:root{
|
||||
|
||||
/* z-index
|
||||
/* zan-index
|
||||
-------------------------- */
|
||||
--index-normal: 1;
|
||||
--index-top: 1000;
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -52,11 +52,11 @@
|
||||
overflow: hidden;
|
||||
|
||||
@when twobtn {
|
||||
.z-dialog__btn {
|
||||
.zan-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.z-dialog__cancel {
|
||||
.zan-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b field {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@when textarea {
|
||||
.z-field__control {
|
||||
.zan-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@when nolabel {
|
||||
.z-cell__title {
|
||||
.zan-cell__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.z-cell__value {
|
||||
.zan-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.z-cell__title,
|
||||
.z-cell__value {
|
||||
.zan-cell__title,
|
||||
.zan-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.z-cell__title {
|
||||
.zan-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.z-cell__value {
|
||||
.zan-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
|
||||
}
|
||||
|
||||
.zui-icon {
|
||||
.zan-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.zui-icon::before {
|
||||
.zan-icon::before {
|
||||
font-family: "zuiicon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-mozan-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
@@ -47,20 +47,20 @@
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
|
||||
|
||||
.zui-icon-album:before { content: '\e800'; } /* '' */
|
||||
.zui-icon-arrow:before { content: '\e801'; } /* '' */
|
||||
.zui-icon-camera:before { content: '\e802'; } /* '' */
|
||||
.zui-icon-certificate:before { content: '\e803'; } /* '' */
|
||||
.zui-icon-check:before { content: '\e804'; } /* '' */
|
||||
.zui-icon-checked:before { content: '\e805'; } /* '' */
|
||||
.zui-icon-close:before { content: '\e806'; } /* '' */
|
||||
.zui-icon-gift:before { content: '\e807'; } /* '' */
|
||||
.zui-icon-home:before { content: '\e808'; } /* '' */
|
||||
.zui-icon-location:before { content: '\e809'; } /* '' */
|
||||
.zui-icon-message:before { content: '\e80a'; } /* '' */
|
||||
.zui-icon-send:before { content: '\e80b'; } /* '' */
|
||||
.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
|
||||
.zui-icon-sign:before { content: '\e80d'; } /* '' */
|
||||
.zui-icon-store:before { content: '\e80e'; } /* '' */
|
||||
.zui-icon-topay:before { content: '\e80f'; } /* '' */
|
||||
.zui-icon-tosend:before { content: '\e810'; } /* '' */
|
||||
.zan-icon-album:before { content: '\e800'; } /* '' */
|
||||
.zan-icon-arrow:before { content: '\e801'; } /* '' */
|
||||
.zan-icon-camera:before { content: '\e802'; } /* '' */
|
||||
.zan-icon-certificate:before { content: '\e803'; } /* '' */
|
||||
.zan-icon-check:before { content: '\e804'; } /* '' */
|
||||
.zan-icon-checked:before { content: '\e805'; } /* '' */
|
||||
.zan-icon-close:before { content: '\e806'; } /* '' */
|
||||
.zan-icon-gift:before { content: '\e807'; } /* '' */
|
||||
.zan-icon-home:before { content: '\e808'; } /* '' */
|
||||
.zan-icon-location:before { content: '\e809'; } /* '' */
|
||||
.zan-icon-message:before { content: '\e80a'; } /* '' */
|
||||
.zan-icon-send:before { content: '\e80b'; } /* '' */
|
||||
.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
|
||||
.zan-icon-sign:before { content: '\e80d'; } /* '' */
|
||||
.zan-icon-store:before { content: '\e80e'; } /* '' */
|
||||
.zan-icon-topay:before { content: '\e80f'; } /* '' */
|
||||
.zan-icon-tosend:before { content: '\e810'; } /* '' */
|
||||
@@ -4,6 +4,7 @@
|
||||
@import './button.css';
|
||||
@import './button_group.css';
|
||||
@import './cell.css';
|
||||
@import './card.css';
|
||||
@import './dialog.css';
|
||||
@import './field.css';
|
||||
@import './icon.css';
|
||||
@@ -14,4 +15,7 @@
|
||||
@import './switch.css';
|
||||
@import './badge.css';
|
||||
@import './search.css';
|
||||
|
||||
@import './panel.css';
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b loading {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
@define-mixin multi-ellipsis $lines {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@component-namespace zan {
|
||||
@b panel {
|
||||
background: #fff;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
|
||||
@e header {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e status {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b picker {
|
||||
overflow: hidden;
|
||||
|
||||
@@ -11,26 +11,26 @@
|
||||
overflow: hidden;
|
||||
|
||||
@m 1 {
|
||||
.z-picker-column {
|
||||
.zan-picker-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 2 {
|
||||
.z-picker-column {
|
||||
.zan-picker-column {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.z-picker-column {
|
||||
.zan-picker-column {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.z-picker-center-highlight {
|
||||
.zan-picker-center-highlight {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -40,26 +40,26 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:before,
|
||||
.z-picker-center-highlight:after {
|
||||
.zan-picker-center-highlight:before,
|
||||
.zan-picker-center-highlight:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eaeaea;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
zan-index: 15;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:before {
|
||||
.zan-picker-center-highlight:before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:after {
|
||||
.zan-picker-center-highlight:after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@b modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,44 @@
|
||||
@component-namespace z {
|
||||
@b radio {
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b radio {
|
||||
@when disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.zan-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
@component-namespace zan {
|
||||
@b steps {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@component-namespace z {
|
||||
@component-namespace zan {
|
||||
@component switch {
|
||||
height: 29px;
|
||||
width: 49px;
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
background: $c-gray;
|
||||
color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), $c-gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@m success {
|
||||
background: $c-green;
|
||||
|
||||
&::after {
|
||||
border-color: $c-green;
|
||||
}
|
||||
@when plain {
|
||||
color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
@m danger {
|
||||
background: $button-danger-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
@when plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@m primary {
|
||||
background: $c-blue;
|
||||
|
||||
&::after {
|
||||
border-color: $c-blue;
|
||||
}
|
||||
@when plain {
|
||||
color: $c-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@when plain {
|
||||
background: $c-white;
|
||||
color: $c-gray;
|
||||
}
|
||||
|
||||
@when mark {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
&::after {
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user