z- to zan-

This commit is contained in:
cookfront
2017-02-28 17:12:02 +08:00
parent d5e174b632
commit 048049d506
62 changed files with 441 additions and 441 deletions

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-button",
"name": "@youzan/zan-button",
"version": "0.0.1",
"description": "button component",
"main": "./index.js",

View File

@@ -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,
@@ -57,9 +57,9 @@ export default {
type={nativeType}
disabled={disabled}
class={[
'z-button',
'z-button--' + type,
'z-button--' + size,
'zan-button',
'zan-button--' + type,
'zan-button--' + size,
{
'is-disabled': disabled,
'is-loading': loading,
@@ -69,9 +69,9 @@ export default {
onClick={this.handleClick}
>
{
loading ? <i class="z-icon-loading"></i> : null
loading ? <i class="zan-icon-loading"></i> : null
}
<span class="z-button-text">{this.$slots.default}</span>
<span class="zan-button-text">{this.$slots.default}</span>
</Tag>
);
}

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-card",
"name": "@youzan/zan-card",
"version": "0.0.1",
"description": "card component",
"main": "./index.js",

View File

@@ -1,13 +1,13 @@
<template>
<div class="z-card">
<img :src="thumb" alt="" class="z-card__img">
<div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
<div class="z-card__info">
<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="z-card__title"></h4>
<h4 v-text="title" class="zan-card__title"></h4>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="z-card__title"></p>
<p v-if="desc" v-text="desc" class="zan-card__title"></p>
</slot>
<slot name="tags"></slot>
</div>
@@ -18,7 +18,7 @@
<script>
export default {
name: 'z-card',
name: 'zan-card',
props: {
thumb: {
type: String,

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-cell",
"name": "@youzan/zan-cell",
"version": "0.0.1",
"description": "cell component",
"main": "./index.js",

View File

@@ -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>

View File

@@ -1,15 +1,15 @@
<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>
</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="{
<div class="zan-cell__value" :class="{
'is-link': isLink,
'is-alone': !title && !label
}">
@@ -23,7 +23,7 @@
<script>
export default {
name: 'z-cell',
name: 'zan-cell',
props: {
icon: String,

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-dialog",
"name": "@youzan/zan-dialog",
"version": "0.0.1",
"description": "dialog component",
"main": "./index.js",

View File

@@ -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],

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-field",
"name": "@youzan/zan-field",
"version": "0.0.1",
"description": "form field component",
"main": "./index.js",

View File

@@ -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

View File

@@ -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": {},

View File

@@ -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

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-loading",
"name": "@youzan/zan-loading",
"version": "0.0.1",
"description": "loading component",
"main": "./lib/index.js",

View File

@@ -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>

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-panel",
"name": "@youzan/zan-panel",
"version": "0.0.1",
"description": "panel component",
"main": "./index.js",

View File

@@ -1,16 +1,16 @@
<template>
<div class="z-panel">
<div class="z-panel__header">
<div class="zan-panel">
<div class="zan-panel__header">
<slot name="header">
<h4 class="z-panel__title" v-text="title"></h4>
<span class="z-panel__desc" v-if="desc" v-text="desc"></span>
<span class="z-panel__status" v-if="status" v-text="status"></span>
<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="z-panel__content">
<div class="zan-panel__content">
<slot></slot>
</div>
<div class="z-panel__footer" v-if="this.$slots.footer">
<div class="zan-panel__footer" v-if="this.$slots.footer">
<slot name="footer"></slot>
</div>
</div>
@@ -18,7 +18,7 @@
<script>
export default {
name: 'z-panel',
name: 'zan-panel',
props: {
title: String,
desc: String,

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-picker",
"name": "@youzan/zan-picker",
"version": "0.0.1",
"description": "picker component",
"main": "./index.js",

View File

@@ -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) => {

View File

@@ -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];
},

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-popup",
"name": "@youzan/zan-popup",
"version": "0.0.1",
"description": "popup component",
"main": "./index.js",

View File

@@ -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],

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-radio",
"name": "@youzan/zan-radio",
"version": "0.0.1",
"description": "radio component",
"main": "./index.js",

View File

@@ -1,12 +1,12 @@
<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: {},

View File

@@ -1,15 +1,15 @@
<template>
<div
class="z-radio"
class="zan-radio"
:class="{
'is-disabled': isDisabled
}">
<span class="z-radio__input">
<span class="zan-radio__input">
<input
:value="name"
v-model="currentValue"
type="radio"
class="z-radio__control"
class="zan-radio__control"
:disabled="isDisabled">
<span class="zui-icon" :class="{
'zui-icon-checked': currentValue === name,
@@ -17,7 +17,7 @@
}">
</span>
</span>
<span class="z-radio__label">
<span class="zan-radio__label">
<slot></slot>
</span>
</div>
@@ -25,7 +25,7 @@
<script>
export default {
name: 'z-radio',
name: 'zan-radio',
props: {
disabled: Boolean,
@@ -40,12 +40,12 @@ export default {
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) {
this.parentGroup.$emit('input', val);
this.parentGroup && this.parentGroup.$emit('input', val);
} else {
this.$emit('input', val);
}
@@ -54,7 +54,7 @@ export default {
isDisabled() {
return this.isGroup
? this.parentGroup.disabled || this.disabled
? (this.parentGroup && this.parentGroup.disabled) || this.disabled
: this.disabled;
}
},
@@ -65,7 +65,7 @@ export default {
let parent = this.$parent;
while (parent) {
if (parent.$options.name === 'z-radio-group') {
if (parent.$options.name === 'zan-radio-group') {
this.parentGroup = parent;
break;
} else {

View File

@@ -1,5 +1,5 @@
{
"name": "@youzan/z-switch",
"name": "@youzan/zan-switch",
"version": "0.0.1",
"description": "switch component",
"main": "./index.js",

View File

@@ -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,

View File

@@ -1,6 +1,6 @@
@import "./common/var.css";
@component-namespace z {
@component-namespace zan {
@b button {
position: relative;
padding: 0;

View File

@@ -5,16 +5,16 @@
&: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;

View File

@@ -1,6 +1,6 @@
@import "./mixins/ellipsis.css";
@component-namespace z {
@component-namespace zan {
@b card {
padding: 5px 15px;
background: #FAFAFA;
@@ -27,7 +27,7 @@
display: table;
height: 90px;
.z-card__info {
.zan-card__info {
display: table-cell;
vertical-align: middle;
}
@@ -80,7 +80,7 @@
right: 15px;
bottom: 5px;
.z-button {
.zan-button {
margin-left: 5px;
}
}

View File

@@ -1,7 +1,7 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace z {
@component-namespace zan {
@b cell-group {
padding-left: 10px;
position: relative;

View File

@@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;
:root{
/* z-index
/* zan-index
-------------------------- */
--index-normal: 1;
--index-top: 1000;

View File

@@ -1,6 +1,6 @@
@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);
}

View File

@@ -1,42 +1,42 @@
@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;
}

View File

@@ -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'; } /* '' */

View File

@@ -19,7 +19,7 @@
}
}
@component-namespace z {
@component-namespace zan {
@b loading {
height: 30px;
width: 30px;

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b panel {
background: #fff;
border-top: 1px solid #E5E5E5;

View File

@@ -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;

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b modal {
position: fixed;
width: 100%;

View File

@@ -1,6 +1,6 @@
@import "./common/var.css";
@component-namespace z {
@component-namespace zan {
@b radio {
@when disabled {
.zui-icon {

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b steps {
color: red;
}

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@component switch {
height: 29px;
width: 49px;