Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen
This commit is contained in:
niunai
@@ -1 +0,0 @@
|
||||
@import "./src/button.pcss";
|
||||
@@ -0,0 +1,3 @@
|
||||
import CellGroup from '../cell/src/cell-group';
|
||||
|
||||
export default CellGroup;
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="o2-cell-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'o2-cell-group'
|
||||
};
|
||||
</script>
|
||||
@@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div class="o2-cell">
|
||||
<a class="o2-cell" :href="url" @click="handleClick">
|
||||
<div class="o2-cell-title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="o2-icon" :class="'o2-icon-' + icon"></i>
|
||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="o2-cell-text" v-text="title"></span>
|
||||
<span class="o2-cell-label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="o2-cell-value">
|
||||
<div class="o2-cell-value" :class="{ 'is-link' : isLink }">
|
||||
<slot>
|
||||
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<i class="o2-cell-arrow-right"></i>
|
||||
</div>
|
||||
<i class="zui-icon zui-icon-arrow" v-if="isLink"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -22,7 +24,17 @@ export default {
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
title: String
|
||||
title: String,
|
||||
value: String,
|
||||
url: String,
|
||||
label: String,
|
||||
isLink: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<o2-cell
|
||||
class="o2-field"
|
||||
:title="label"
|
||||
:class="{
|
||||
'is-textarea': type === 'textarea',
|
||||
'is-nolabel': !label
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="o2-field-control"
|
||||
v-model="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="o2-field-control"
|
||||
:value="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
@input="handleInput"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</o2-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import O2Cell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'o2-filed'
|
||||
name: 'o2-field',
|
||||
|
||||
components: {
|
||||
O2Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
placeholder: String,
|
||||
value: String,
|
||||
label: String,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
maxlength: [String, Number]
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleInput(event) {
|
||||
this.currentValue = event.target.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import Icon from './src/icon';
|
||||
|
||||
export default Icon;
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "o2-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "o2-icon",
|
||||
"main": "index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<i :class="'zenui-icon-' + name"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'o2-icon',
|
||||
|
||||
props: {
|
||||
name: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="o2-radio-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -1,11 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<o2-cell
|
||||
class="o2-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
}">
|
||||
</o2-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import O2Cell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'o2-radio'
|
||||
name: 'o2-radio',
|
||||
|
||||
components: {
|
||||
O2Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {}
|
||||
},
|
||||
|
||||
created() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
import SampleComponent from './src/main';
|
||||
|
||||
export default SampleComponent;
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/your-component-name",
|
||||
"version": "0.0.1",
|
||||
"description": "vue component",
|
||||
"main": "./lib/index.js",
|
||||
"author": "who r u",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
<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 +0,0 @@
|
||||
@import "./src/switch.pcss";
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../zenui/src/common/var.pcss";
|
||||
@import "./common/var.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component button {
|
||||
@@ -0,0 +1,66 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component cell-group {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@component cell {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 10px 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
background-color: $c-white;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@descendent label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@descendent value {
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
|
||||
@when link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component field {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@when textarea {
|
||||
.o2-field-control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@when nolabel {
|
||||
.o2-cell-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.o2-cell-value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.o2-cell-title,
|
||||
.o2-cell-value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.o2-cell-title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.o2-cell-value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@descendent control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
|
||||
@font-face {
|
||||
font-family: 'zuiicon';
|
||||
src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot');
|
||||
src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot?#iefix') format('embedded-opentype'),
|
||||
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff2') format('woff2'),
|
||||
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff') format('woff'),
|
||||
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
|
||||
}
|
||||
|
||||
.zui-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.zui-icon::before {
|
||||
font-family: "zuiicon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
/* margin-left: .2em; */
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
/* 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'; } /* '' */
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.pcss';
|
||||
@import './cell.pcss';
|
||||
@import './field.pcss';
|
||||
@import './icon.pcss';
|
||||
@import './switch.pcss';
|
||||
@@ -0,0 +1,20 @@
|
||||
$border-poses: top, right, bottom, left;
|
||||
|
||||
@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(.5);
|
||||
transform-origin: left top;
|
||||
-webkit-perspective: 1000;
|
||||
-webkit-backface-visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
@each $pos in $poses {
|
||||
border-$(pos): 1px solid $border-retina-color;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
@component-namespace o2{
|
||||
@component-namespace o2 {
|
||||
@component switch {
|
||||
height: 29px;
|
||||
width: 49px;
|
||||
@@ -45,4 +44,4 @@
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
/**
|
||||
css组件库 入口,从各个地方拿css文件，组装成css组件库
|
||||
*/
|
||||
@import '../../button/index.pcss';
|
||||
@import '../../switch/index.pcss';
|
||||
Reference in New Issue
Block a user