mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 09:41:57 +00:00
Merge remote-tracking branch 'origin/fix/ducheng-1022-bugs' into release/1.0.0
This commit is contained in:
金禅
commit
19a2780fd3
@ -18,6 +18,7 @@
|
||||
<link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.css" />
|
||||
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
|
||||
<!-- <script src="http://192.168.0.106:8000/lc-engine.js"></script> -->
|
||||
<script>
|
||||
var require = { paths: { vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs' } };
|
||||
</script>
|
||||
|
||||
@ -122,9 +122,9 @@ export default {
|
||||
editor.set('assets', assets);
|
||||
const simulatorUrl = [
|
||||
'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.css',
|
||||
'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
|
||||
//'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
|
||||
// for debug
|
||||
// 'http://localhost:3333/js/react-simulator-renderer.js',
|
||||
'http://localhost:3333/js/react-simulator-renderer.js',
|
||||
// 'http://localhost:3333/js/react-simulator-renderer.css',
|
||||
];
|
||||
editor.set('simulatorUrl', simulatorUrl);
|
||||
|
||||
@ -20,11 +20,32 @@
|
||||
"@ali/iceluna-comp-object-button": "^1.0.23",
|
||||
"@ali/iceluna-comp-react-node": "^1.0.5",
|
||||
"@ali/iceluna-sdk": "^1.0.5-beta.24",
|
||||
"@ali/lc-style-setter": "^0.0.1",
|
||||
"@ali/lowcode-editor-core": "^1.0.12",
|
||||
"@alifd/next": "^1.19.16",
|
||||
"@ali/intl-universal": "^0.4.9",
|
||||
"@ali/ve-choice-control": "^4.0.0",
|
||||
"@ali/ve-code-control": "^4.0.0",
|
||||
"@ali/ve-color-control": "^4.0.0",
|
||||
"@ali/ve-field": "^4.2.0-beta.8",
|
||||
"@ali/ve-image-control": "^4.0.0",
|
||||
"@ali/ve-less-variables": "^2.0.0",
|
||||
"@ali/ve-number-control": "^4.0.0",
|
||||
"@ali/ve-select-control": "^4.0.0",
|
||||
"@ali/ve-text-control": "^4.0.0",
|
||||
"@ali/vu-css-style": "^1.0.2",
|
||||
"@ali/vu-icon-base": "^1.0.2",
|
||||
"@ali/ve-icons": "^4.1.9",
|
||||
"css-border-property": "^1.1.0",
|
||||
"css-color-names": "0.0.4",
|
||||
"lodash.curry": "^4.1.1",
|
||||
"lodash.flow": "^3.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"lodash.zipobject": "^4.1.3",
|
||||
"parse-css-font": "^2.0.2",
|
||||
"postcss-value-parser": "^3.3.0",
|
||||
"acorn": "^6.4.1",
|
||||
"classnames": "^2.2.6",
|
||||
"@ali/vs-style-select": "0.0.1-beta.8",
|
||||
"intl-messageformat": "^9.3.1",
|
||||
"qs": "^6.9.1",
|
||||
"react": "^16",
|
||||
|
||||
@ -89,17 +89,17 @@ export default class ExpressionView extends PureComponent {
|
||||
return null;
|
||||
}
|
||||
|
||||
onChange(value: string, actionType: string) {
|
||||
let realInputValue = value;
|
||||
onChange(value: string) {
|
||||
const realInputValue = value;
|
||||
const realDataSource = null;
|
||||
let nextCursorIndex: number;
|
||||
// 更新值
|
||||
if (actionType === 'itemClick' || actionType === 'enter') {
|
||||
const curValue = this.state.value;
|
||||
if (curValue) {
|
||||
realInputValue = curValue + realInputValue;
|
||||
}
|
||||
}
|
||||
// if (actionType === 'itemClick' || actionType === 'enter') {
|
||||
// // const curValue = this.state.value;
|
||||
// // if (curValue) {
|
||||
// // realInputValue = curValue + realInputValue;
|
||||
// // }
|
||||
// }
|
||||
// 更新数据源
|
||||
const newState = {
|
||||
value: realInputValue,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import './style.less';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import LowStyleSetter from '@ali/lc-style-setter';
|
||||
import LowStyleSetter from './lc-style-setter';
|
||||
import { globalLocale } from '@ali/lowcode-editor-core';
|
||||
|
||||
export default class StyleSetter extends Component {
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ChoiceControl from '@ali/ve-choice-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import utils from '../utils';
|
||||
|
||||
const attchments = [{
|
||||
title: <Icons name="style.yes" size="12px" />,
|
||||
value: 'fixed',
|
||||
}, {
|
||||
title: <Icons name="style.no" size="12px" />,
|
||||
value: 'scroll',
|
||||
}];
|
||||
|
||||
class Attachment extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgrounAttachmentSetter';
|
||||
|
||||
setAttachment(attachment) {
|
||||
utils.setBackground(this.props, 'background-attachment', attachment);
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-attachment', this.props.className);
|
||||
const attachment = utils.getBackground(this.props, 'background-attachment').value;
|
||||
|
||||
return (
|
||||
<ChoiceControl
|
||||
className={className}
|
||||
value={attachment}
|
||||
options={attchments}
|
||||
onChange={(value) => this.setAttachment(value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Attachment;
|
||||
@ -0,0 +1,42 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ColorControl from '@ali/ve-color-control';
|
||||
import utils from '../utils';
|
||||
class Color extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgrounColorSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
utils.setBackground(this.props, 'background-color', color);
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-color', this.props.className);
|
||||
const { current, inherit } = utils.getBackground(this.props, 'background-color');
|
||||
|
||||
return (
|
||||
<ColorControl
|
||||
className={className}
|
||||
value={current}
|
||||
placeholder={inherit}
|
||||
onChange={(value) => this.setColor(value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Color;
|
||||
@ -0,0 +1,56 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ImageControl from '@ali/ve-image-control';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
class Image extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgroundImageSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
setImage(image) {
|
||||
if (image) {
|
||||
image = image.trim();
|
||||
}
|
||||
if (image && image !== 'none') {
|
||||
image = `url("${image}")`;
|
||||
}
|
||||
utils.setBackground(this.props, 'background-image', image);
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-image', this.props.className);
|
||||
const { current, inherit } = utils.getBackground(this.props, 'background-image');
|
||||
const url = utils.getImageUrl(current);
|
||||
|
||||
return (
|
||||
<ImageControl
|
||||
className={className}
|
||||
value={url}
|
||||
showPanel={false}
|
||||
placeholder={
|
||||
current && !url
|
||||
? $i18n.get({ id: 'styleUnsupportedImage', dm: '暂未支持的图片' })
|
||||
: inherit || $i18n.get({ id: 'stylePleaseEnterAnAddress', dm: '请输入地址或粘贴上传' })
|
||||
}
|
||||
onChange={value => this.setImage(value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Image;
|
||||
@ -0,0 +1,117 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import Color from './color';
|
||||
import Image from './image';
|
||||
import Position from './position';
|
||||
import Size from './size';
|
||||
import Repeat from './repeat';
|
||||
import Attachment from './attachment';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
class Background extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleTypographySetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
// shouldComponentUpdate() {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background', this.props.className);
|
||||
const image = utils.getBackground(this.props, 'background-image').value;
|
||||
const imageUrl = utils.getImageUrl(image);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getBackground(this.props, 'background-color').current != undefined}
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleFillColor', dm: '填充色' })}>
|
||||
<Icons name="style.fill" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Color {...this.props} />
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getBackground(this.props, 'background-image').current != undefined}
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleImage', dm: '图片' })}>
|
||||
<Icons name="style.image" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Image {...this.props} />
|
||||
</Field>
|
||||
{imageUrl && imageUrl !== 'none' ? (
|
||||
<div className="vs-style-background-advanced">
|
||||
<Field
|
||||
display="caption"
|
||||
title={$i18n.get({ id: 'stylePositioning', dm: '定位' })}
|
||||
highlight={utils.getBackground(this.props, 'background-position').current != undefined}
|
||||
>
|
||||
<Position {...this.props} />
|
||||
</Field>
|
||||
<Field display="caption" title={$i18n.get({ id: 'styleSize', dm: '大小' })}>
|
||||
<Size
|
||||
highlight={utils.getBackground(this.props, 'background-size').current != undefined}
|
||||
{...this.props}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="plain"
|
||||
className="vs-flex-field"
|
||||
highlight={utils.getBackground(this.props, 'background-repeat').current != undefined}
|
||||
>
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleTile', dm: '平铺' })}>
|
||||
<Icons name="style.repeat" size="16px" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Repeat {...this.props} />
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleFixed', dm: '固定' })}>
|
||||
<Icons name="style.fixed" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Attachment {...this.props} />
|
||||
</Field>
|
||||
</Field>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Background.Color = Color;
|
||||
|
||||
Background.Image = Image;
|
||||
|
||||
export default Background;
|
||||
@ -0,0 +1,245 @@
|
||||
import valueParser, { stringify } from 'postcss-value-parser';
|
||||
import namedColors from 'css-color-names';
|
||||
|
||||
const RE_BOX = /^(border-box|padding-box|content-box|text)$/i;
|
||||
const RE_LENGTH_PERCENTAGE = /^\d*(\.\d+)?(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/i;
|
||||
const RE_POS_PRESET = /^(left|center|right|top|bottom)$/i;
|
||||
const RE_SIZE_PRESET = /^(cover|contain)$/i;
|
||||
const RE_IMAGE_FUNC = /^(url|image(-set)?|cross\-fade|element|((repeating-)?(linear|radial)\-)gradient)$/i; // eslint-disable-line
|
||||
const RE_REPEAT = /^(repeat|repeat\-x|repeat\-y|no\-repeat|space|round)$/i;
|
||||
const RE_COLOR_FUNC = /^(rgb|rgba|hsl|hsla)$/i;
|
||||
const RE_COLOR_PRESET = /^(transparent|currentColor)$/i;
|
||||
const RE_COLOR_HEX = /^#(?:[a-f0-9]{3})?(?:[a-f0-9]{3})$/;
|
||||
const RE_ATTACHMENT = /^(scroll|fixed|local)$/i;
|
||||
|
||||
function isColorValue(word) {
|
||||
return namedColors.hasOwnProperty(word) || RE_COLOR_PRESET.test(word) || RE_COLOR_HEX.test(word);
|
||||
}
|
||||
|
||||
function isColorFunc(word) {
|
||||
return RE_COLOR_FUNC.test(word);
|
||||
}
|
||||
|
||||
function isColorNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return isColorValue(node.value);
|
||||
}
|
||||
if (node.type === 'function') {
|
||||
return isColorFunc(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isImageFunc(word) {
|
||||
return RE_IMAGE_FUNC.test(word);
|
||||
}
|
||||
function isImageNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return node.value === 'none';
|
||||
}
|
||||
if (node.type === 'function') {
|
||||
return isImageFunc(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isRepeatNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return RE_REPEAT.test(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isAttachmentNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return RE_ATTACHMENT.test(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isBoxNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return RE_BOX.test(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isPostionValue(word) {
|
||||
return RE_LENGTH_PERCENTAGE.test(word) || RE_POS_PRESET.test(word);
|
||||
}
|
||||
|
||||
function isPositionNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return isPostionValue(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isSizePreset(word) {
|
||||
return RE_SIZE_PRESET.test(word);
|
||||
}
|
||||
|
||||
function isSizeValue(word) {
|
||||
return RE_LENGTH_PERCENTAGE.test(word) || word === 'auto' || isSizePreset(word);
|
||||
}
|
||||
|
||||
function isSizeNode(node) {
|
||||
if (node.type === 'word') {
|
||||
return isSizeValue(node.value);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function eatSpace(nodes, index) {
|
||||
const node = nodes[index];
|
||||
if (!node || node.type !== 'space') {
|
||||
return index;
|
||||
}
|
||||
return index + 1;
|
||||
}
|
||||
|
||||
function readValue(nodes, index, store) {
|
||||
const node = nodes[index];
|
||||
// color
|
||||
if (isColorNode(node)) {
|
||||
store['background-color'] = stringify(node);
|
||||
return index + 1;
|
||||
}
|
||||
// image
|
||||
if (isImageNode(node)) {
|
||||
store['background-image'] = stringify(node);
|
||||
return index + 1;
|
||||
}
|
||||
// attchment
|
||||
if (isAttachmentNode(node)) {
|
||||
store['background-attachment'] = stringify(node);
|
||||
return index + 1;
|
||||
}
|
||||
// repeat
|
||||
if (isRepeatNode(node)) {
|
||||
let repeat = stringify(node);
|
||||
index = eatSpace(nodes, index + 1);
|
||||
const sibling = nodes[index];
|
||||
if (sibling && isRepeatNode(sibling)) {
|
||||
repeat = `${repeat} ${stringify(sibling)}`;
|
||||
index += 1;
|
||||
}
|
||||
store['background-repeat'] = repeat;
|
||||
return index;
|
||||
}
|
||||
// origin & clip
|
||||
if (isBoxNode(node)) {
|
||||
let origin = stringify(node);
|
||||
let clip = null;
|
||||
if (origin === 'text') {
|
||||
clip = origin;
|
||||
origin = null;
|
||||
}
|
||||
|
||||
index = eatSpace(nodes, index + 1);
|
||||
const sibling = nodes[index];
|
||||
if (sibling && isBoxNode(sibling)) {
|
||||
if (clip) {
|
||||
origin = stringify(sibling);
|
||||
} else {
|
||||
clip = stringify(sibling);
|
||||
}
|
||||
index += 1;
|
||||
}
|
||||
|
||||
if (origin) {
|
||||
store['background-origin'] = origin;
|
||||
}
|
||||
if (clip) {
|
||||
store['background-clip'] = clip;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
// position & size
|
||||
if (isPositionNode(node)) {
|
||||
let position = stringify(node);
|
||||
let size = null;
|
||||
index = eatSpace(nodes, index + 1);
|
||||
let sibling = nodes[index];
|
||||
if (sibling && isPositionNode(sibling)) {
|
||||
position = `${position} ${stringify(sibling)}`;
|
||||
index = eatSpace(nodes, index + 1);
|
||||
sibling = nodes[index];
|
||||
}
|
||||
if (sibling && sibling.type === 'div' && sibling.value === '/') {
|
||||
index = eatSpace(nodes, index + 1);
|
||||
sibling = nodes[index];
|
||||
if (sibling && isSizeNode(sibling)) {
|
||||
size = stringify(sibling);
|
||||
if (!isSizePreset(size)) {
|
||||
index = eatSpace(nodes, index + 1);
|
||||
sibling = nodes[index];
|
||||
if (sibling && isSizeNode(sibling)) {
|
||||
size = `${size} ${stringify(sibling)}`;
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
store['background-position'] = position;
|
||||
if (size) {
|
||||
store['background-size'] = size;
|
||||
}
|
||||
|
||||
return index;
|
||||
}
|
||||
|
||||
return index + 1;
|
||||
}
|
||||
|
||||
function parser(bakcground) {
|
||||
const nodes = valueParser(typeof bakcground === 'string' ? bakcground : '').nodes;
|
||||
const l = nodes.length;
|
||||
const items = [];
|
||||
let item;
|
||||
const append = () => {
|
||||
item = {};
|
||||
items.push(item);
|
||||
};
|
||||
append();
|
||||
|
||||
let node;
|
||||
let type;
|
||||
let value;
|
||||
let i = 0;
|
||||
while (i < l) {
|
||||
node = nodes[i];
|
||||
type = node.type;
|
||||
value = node.value;
|
||||
if (type === 'word' || type === 'function') {
|
||||
i = readValue(nodes, i, item);
|
||||
continue;
|
||||
}
|
||||
i++;
|
||||
// div = ,
|
||||
if (type === 'div' && value === ',') {
|
||||
append();
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function build(bg) {
|
||||
if (Array.isArray(bg)) {
|
||||
return bg.map(build).join(',');
|
||||
}
|
||||
|
||||
let pos = bg['background-position'];
|
||||
if (pos && bg['background-size']) {
|
||||
pos = `${pos}/${bg['background-size']}`;
|
||||
}
|
||||
|
||||
return ['image', 'repeat', 'attachment', 'position', 'origin', 'clip', 'color'].map(key => {
|
||||
return (key === 'position' ? pos : bg[`background-${key}`]) || '';
|
||||
}).filter(item => item !== '').join(' ');
|
||||
}
|
||||
|
||||
parser.build = build;
|
||||
|
||||
export default parser;
|
||||
@ -0,0 +1,292 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
function isZero(v) {
|
||||
return v === 0 || /^0(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/.test(v);
|
||||
}
|
||||
|
||||
const offsetPresets = [
|
||||
{
|
||||
title: 'left top',
|
||||
value: { X: '0%', Y: '0%' },
|
||||
test({ x, y }) {
|
||||
return (isZero(x) || x === 'left') && (isZero(y) || y === 'top');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'center top',
|
||||
value: { X: '50%', Y: '0%' },
|
||||
test({ x, y }) {
|
||||
return (x === '50%' || x === 'center') && (isZero(y) || y === 'top');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'right top',
|
||||
value: { X: '100%', Y: '0%' },
|
||||
test({ x, y }) {
|
||||
return (x === '100%' || x === 'right') && (isZero(y) || y === 'top');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'left center',
|
||||
value: { X: '0%', Y: '50%' },
|
||||
test({ x, y }) {
|
||||
return (isZero(x) || x === 'left') && (y === '50%' || y === 'center');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'center',
|
||||
value: { X: '50%', Y: '50%' },
|
||||
test({ x, y }) {
|
||||
return (x === '50%' || x === 'center') && (y === '50%' || y === 'center');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'right center',
|
||||
value: { X: '100%', Y: '50%' },
|
||||
test({ x, y }) {
|
||||
return (x === '100%' || x === 'right') && (y === '50%' || y === 'center');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'left bottom',
|
||||
value: { X: '0%', Y: '100%' },
|
||||
test({ x, y }) {
|
||||
return (isZero(x) || x === 'left') && (y === '100%' || y === 'bottom');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'center bottom',
|
||||
value: { X: '50%', Y: '100%' },
|
||||
test({ x, y }) {
|
||||
return (x === '50%' || x === 'center') && (y === '100%' || y === 'bottom');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'right bottom',
|
||||
value: { X: '100%', Y: '100%' },
|
||||
test({ x, y }) {
|
||||
return (x === '100%' || x === 'right') && (y === '100%' || y === 'bottom');
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
class Presets extends Component {
|
||||
static propTypes = {
|
||||
value: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, onChange } = this.props;
|
||||
|
||||
const presets = offsetPresets.map((item, index) => {
|
||||
const className = classNames('vs-preset-item', `vs-preset-${item.title.replace(' ', '-')}`, {
|
||||
've-active': item.test(value),
|
||||
});
|
||||
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className={className}
|
||||
data-tip={item.title}
|
||||
onClick={() => onChange(item.value)}
|
||||
>
|
||||
<Icons name={`style.${item.title === 'center' ? 'center' : 'dir'}`} size="12px" />
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
return <div className="vs-style-position-preset">{presets}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
const RE_PERCENT = /^\d*(\.\d+)?%$/;
|
||||
|
||||
function isPercent(val) {
|
||||
return RE_PERCENT.test(val);
|
||||
}
|
||||
|
||||
function normalizePosition(pos, x, y) {
|
||||
if (utils.isEmptyCssValue(pos) || pos === 'initial') {
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
effects: {
|
||||
x: utils.notEmptyValue(x, '0%'),
|
||||
y: utils.notEmptyValue(y, '0%'),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const xy = pos.split(/\s+/);
|
||||
if (utils.isEmptyCssValue(x)) {
|
||||
x = xy[0];
|
||||
}
|
||||
if (utils.isEmptyCssValue(y)) {
|
||||
y = xy[1];
|
||||
}
|
||||
const effects = { x, y };
|
||||
const ret = { x, y, effects };
|
||||
|
||||
if (utils.isEmptyCssValue(y)) {
|
||||
if (isPercent(x)) {
|
||||
effects.y = '50%';
|
||||
} else if (x === 'left' || x === 'right' || x === 'center') {
|
||||
effects.y = 'center';
|
||||
} else if (x === 'top' || x === 'bottom') {
|
||||
effects.y = x;
|
||||
effects.x = 'center';
|
||||
ret.y = x;
|
||||
ret.x = '';
|
||||
}
|
||||
} else if (x === 'top' || x === 'bottom' || y === 'left' || y === 'right') {
|
||||
effects.y = x;
|
||||
effects.x = y;
|
||||
ret.y = x;
|
||||
ret.x = y;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
class Offset extends Component {
|
||||
static propTypes = {
|
||||
current: PropTypes.any,
|
||||
effects: PropTypes.any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NumberControl
|
||||
value={this.props.current}
|
||||
placeholder={this.props.effects}
|
||||
units={[
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'left',
|
||||
preset: true,
|
||||
},
|
||||
{
|
||||
type: 'right',
|
||||
preset: true,
|
||||
},
|
||||
{
|
||||
type: 'center',
|
||||
preset: true,
|
||||
},
|
||||
{
|
||||
type: 'top',
|
||||
preset: true,
|
||||
},
|
||||
{
|
||||
type: 'bottom',
|
||||
preset: true,
|
||||
},
|
||||
|
||||
'px',
|
||||
'em',
|
||||
'rem',
|
||||
'pt',
|
||||
'ex',
|
||||
'ch',
|
||||
'vh',
|
||||
'vw',
|
||||
'vmin',
|
||||
'vmax',
|
||||
'mm',
|
||||
'q',
|
||||
'cm',
|
||||
'in',
|
||||
'pc',
|
||||
]}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Position extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgrounPositionSetter';
|
||||
|
||||
setPosition(x, y) {
|
||||
if (utils.isEmptyCssValue(x) || utils.isEmptyCssValue(y)) {
|
||||
utils.setBackground(this.props, 'background-position', null);
|
||||
utils.setPropertyValue(this.props, 'background-position-x', x);
|
||||
utils.setPropertyValue(this.props, 'background-position-y', y);
|
||||
} else {
|
||||
utils.setBackground(this.props, 'background-position', `${x} ${y}`);
|
||||
utils.setPropertyValue(this.props, 'background-position-x', null);
|
||||
utils.setPropertyValue(this.props, 'background-position-y', null);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-position', this.props.className);
|
||||
const { current, inherit } = utils.getBackground(this.props, 'background-position');
|
||||
const x = utils.getPropertyValue(this.props, 'background-position-x');
|
||||
const y = utils.getPropertyValue(this.props, 'background-position-y');
|
||||
|
||||
const currentXY = normalizePosition(current, x.current, y.current);
|
||||
const inheritXY = normalizePosition(inherit, x.inherit, y.inherit);
|
||||
|
||||
const effects = {
|
||||
x: utils.notEmptyValue(currentXY.effects.x, inheritXY.effects.x),
|
||||
y: utils.notEmptyValue(currentXY.effects.y, inheritXY.effects.y),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Presets value={effects} onChange={({ X, Y }) => this.setPosition(X, Y)} />
|
||||
|
||||
<div className="vs-style-position-custom">
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleLateralOffset', dm: '横向偏移' })}>
|
||||
<Icons name="style.offset" className="vs-style-rotate-90-r" size="14px" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Offset
|
||||
current={currentXY.x}
|
||||
effects={effects.x}
|
||||
onChange={value => this.setPosition(value, currentXY.y)}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleVerticalOffset', dm: '纵向偏移' })}>
|
||||
<Icons name="style.offset" size="14px" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Offset
|
||||
current={currentXY.y}
|
||||
effects={effects.y}
|
||||
onChange={value => this.setPosition(currentXY.x, value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Position;
|
||||
@ -0,0 +1,47 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ChoiceControl from '@ali/ve-choice-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import utils from '../utils';
|
||||
const repeats = [{
|
||||
title: <Icons name="style.repeat-a" size="12px" />,
|
||||
value: 'repeat',
|
||||
}, {
|
||||
title: <Icons name="style.repeat-x" size="12px" />,
|
||||
value: 'repeat-x',
|
||||
}, {
|
||||
title: <Icons name="style.repeat-y" size="12px" />,
|
||||
value: 'repeat-y',
|
||||
}, {
|
||||
title: <Icons name="style.no" size="12px" />,
|
||||
value: 'no-repeat',
|
||||
}];
|
||||
|
||||
class Repeat extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgrounRepeatSetter';
|
||||
|
||||
setRepeat(repeat) {
|
||||
utils.setBackground(this.props, 'background-repeat', repeat);
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-repeat', this.props.className);
|
||||
const repeat = utils.getBackground(this.props, 'background-repeat').value;
|
||||
|
||||
return (
|
||||
<ChoiceControl
|
||||
className={className}
|
||||
value={repeat}
|
||||
options={repeats}
|
||||
onChange={(value) => this.setRepeat(value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Repeat;
|
||||
@ -0,0 +1,174 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ChoiceControl from '@ali/ve-choice-control';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import Field from '@ali/ve-field';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
const RE_SIZE_PRESETS = /^(cover|contain)$/i;
|
||||
|
||||
function getEffects(current, inherit) {
|
||||
const size = utils.isEmptyCssValue(current) || current === 'initial' ? inherit : current;
|
||||
|
||||
if (utils.isEmptyCssValue(size) || RE_SIZE_PRESETS.test(size)) {
|
||||
return { x: 'auto', y: 'auto' };
|
||||
}
|
||||
|
||||
const xy = size.split(/\s+/);
|
||||
|
||||
return {
|
||||
x: utils.isEmptyCssValue(xy[0]) ? 'auto' : xy[0],
|
||||
y: utils.isEmptyCssValue(xy[1]) ? 'auto' : xy[1],
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeCurrent(current) {
|
||||
if (utils.isEmptyCssValue(current) || current === 'initial' || RE_SIZE_PRESETS.test(current)) {
|
||||
return {
|
||||
x: '',
|
||||
y: '',
|
||||
};
|
||||
}
|
||||
|
||||
const xy = current.split(/\s+/);
|
||||
|
||||
return {
|
||||
x: utils.isEmptyCssValue(xy[0]) ? '' : xy[0],
|
||||
y: utils.isEmptyCssValue(xy[1]) ? '' : xy[1],
|
||||
};
|
||||
}
|
||||
|
||||
class SizeItem extends Component {
|
||||
static propTypes = {
|
||||
current: PropTypes.any,
|
||||
effects: PropTypes.any,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NumberControl
|
||||
value={this.props.current}
|
||||
placeholder={this.props.effects}
|
||||
min={0}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'auto',
|
||||
preset: true,
|
||||
},
|
||||
|
||||
'em',
|
||||
'rem',
|
||||
'pt',
|
||||
'ex',
|
||||
'ch',
|
||||
'vh',
|
||||
'vw',
|
||||
'vmin',
|
||||
'vmax',
|
||||
'mm',
|
||||
'q',
|
||||
'cm',
|
||||
'in',
|
||||
'pc',
|
||||
]}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Size extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBackgrounSizeSetter';
|
||||
|
||||
setSize(sizeX, sizeY) {
|
||||
let size;
|
||||
if (utils.isEmptyCssValue(sizeX) && utils.isEmptyCssValue(sizeY)) {
|
||||
size = '';
|
||||
} else if (RE_SIZE_PRESETS.test(sizeX) || utils.isEmptyCssValue(sizeY)) {
|
||||
size = sizeX;
|
||||
} else if (utils.isEmptyCssValue(sizeX) && !utils.isEmptyCssValue(sizeY)) {
|
||||
size = `auto ${sizeY}`;
|
||||
} else {
|
||||
size = `${sizeX} ${sizeY}`;
|
||||
}
|
||||
utils.setBackground(this.props, 'background-size', size);
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-background-size', this.props.className);
|
||||
const { current, inherit, value } = utils.getBackground(this.props, 'background-size');
|
||||
|
||||
const currentXY = normalizeCurrent(current);
|
||||
const effects = getEffects(current, inherit);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<ChoiceControl
|
||||
className="vs-style-bgsize-preset"
|
||||
options={[
|
||||
{
|
||||
title: <Icons name="style.cover" size="medium" />,
|
||||
value: 'cover',
|
||||
},
|
||||
{
|
||||
title: <Icons name="style.contain" size="medium" />,
|
||||
value: 'contain',
|
||||
},
|
||||
]}
|
||||
value={value}
|
||||
onChange={val => this.setSize(val, null)}
|
||||
loose
|
||||
/>
|
||||
|
||||
<div className="vs-style-bgsize-custom">
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleWidth', dm: '宽度' })}>
|
||||
<Icons name="style.height" className="vs-style-rotate-90" size="14px" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<SizeItem
|
||||
current={currentXY.x}
|
||||
effects={effects.x}
|
||||
onChange={val => this.setSize(val, currentXY.y)}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleHeight', dm: '高度' })}>
|
||||
<Icons name="style.height" size="14px" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<SizeItem
|
||||
current={currentXY.y}
|
||||
effects={effects.y}
|
||||
onChange={val => this.setSize(currentXY.x, val)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Size;
|
||||
@ -0,0 +1,186 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import SelectControl from '@ali/ve-select-control';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import ColorControl from '@ali/ve-color-control';
|
||||
import borderParser from './borderParser';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
const BORDER_STYLES = {
|
||||
none: $i18n.get({ id: 'styleNo', dm: '无' }),
|
||||
solid: $i18n.get({ id: 'styleSolidLine', dm: '实线' }),
|
||||
dotted: $i18n.get({ id: 'styleDottedLine', dm: '点线' }),
|
||||
dashed: $i18n.get({ id: 'styleDottedLine.1', dm: '虚线' }),
|
||||
};
|
||||
|
||||
const borderStyles = Object.keys(BORDER_STYLES).map(i => ({
|
||||
text: BORDER_STYLES[i],
|
||||
value: i,
|
||||
}));
|
||||
|
||||
class BorderStyle extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleBorderSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
state = {
|
||||
// state variable to indicate which border have use selected
|
||||
// enum: border-left | border-right | border-top | border-bottom | border
|
||||
currentSelected: 'border',
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
setValue(type, val, props) {
|
||||
if (this.state.currentSelected === 'border') {
|
||||
utils.setPropertyValue(props, `border-${type}`, val);
|
||||
} else {
|
||||
utils.setPropertyValue(props, `${this.state.currentSelected}-${type}`, val);
|
||||
}
|
||||
}
|
||||
|
||||
changeSelectedBorder(type) {
|
||||
this.setState({ currentSelected: type });
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-border-style', this.props.className);
|
||||
const border = borderParser(this.props, this.state.currentSelected);
|
||||
const { current, inherit } = border;
|
||||
const borderWidth = current.width;
|
||||
const borderColor = current.color;
|
||||
const borderStyle = current.style;
|
||||
|
||||
const inheritWidth = inherit.width || '0px';
|
||||
const inheritColor = inherit.color || '#000';
|
||||
const inheritStyle = inherit.style || 'none';
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="vs-style-border-setter-left-pane">
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedBorder.bind(this, 'border-left')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-left' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleLeftBorder', dm: '左边框' })}>┣</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedBorder.bind(this, 'border-top')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-top' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleTopBorder', dm: '上边框' })}>┳</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.changeSelectedBorder.bind(this, 'border')}
|
||||
className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.changeSelectedBorder.bind(this, 'border-bottom')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-bottom' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleBottomBorder', dm: '下边框' })}>┻</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedBorder.bind(this, 'border-right')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-right' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleRightBorder', dm: '右边框' })}>┫</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-right-pane">
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleLinear', dm: '线形' })}
|
||||
compact
|
||||
highlight={borderStyle}
|
||||
>
|
||||
<SelectControl
|
||||
key={this.state.currentSelected}
|
||||
value={borderStyle || inheritStyle}
|
||||
onChange={(val) => {
|
||||
this.setValue('style', val, this.props);
|
||||
}}
|
||||
options={borderStyles}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleWidth', dm: '宽度' })}
|
||||
compact
|
||||
highlight={borderWidth}
|
||||
>
|
||||
<NumberControl
|
||||
key={this.state.currentSelected}
|
||||
placeholder={inheritWidth}
|
||||
value={borderWidth}
|
||||
onChange={(val) => {
|
||||
this.setValue('width', val, this.props);
|
||||
}}
|
||||
min={0}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleColour', dm: '颜色' })}
|
||||
compact
|
||||
highlight={borderColor}
|
||||
>
|
||||
<ColorControl
|
||||
key={this.state.currentSelected}
|
||||
placeholder={inheritColor}
|
||||
value={borderColor}
|
||||
onChange={(val) => {
|
||||
this.setValue('color', val, this.props);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BorderStyle;
|
||||
@ -0,0 +1,141 @@
|
||||
import compose from 'lodash.flow';
|
||||
import curry from 'lodash.curry';
|
||||
import zipObject from 'lodash.zipobject';
|
||||
import { parse as parseBorder } from 'css-border-property';
|
||||
import utils from '../utils';
|
||||
// const logger = (val) => {
|
||||
// console.log(val);
|
||||
// return val;
|
||||
// };
|
||||
const keys = Object.keys;
|
||||
const getProp = p => (v => v[p]);
|
||||
const stateMutator = {
|
||||
setKey: (s, k, r) => {
|
||||
s[k].c = r['border-color'];
|
||||
s[k].s = r['border-style'];
|
||||
s[k].w = r['border-width'];
|
||||
},
|
||||
setKeyOnly: (s, k, k2, r, o) => {
|
||||
s[k][k2] = r[o];
|
||||
},
|
||||
border: (s, r) => keys(s).forEach(k => stateMutator.setKey(s, k, r)),
|
||||
'border-left': (s, r) => stateMutator.setKey(s, 'l', r),
|
||||
'border-right': (s, r) => stateMutator.setKey(s, 'r', r),
|
||||
'border-top': (s, r) => stateMutator.setKey(s, 't', r),
|
||||
'border-bottom': (s, r) => stateMutator.setKey(s, 'b', r),
|
||||
|
||||
'border-style': (s, r) => keys(s).forEach(k => { s[k].s = r['border-style']; }),
|
||||
'border-width': (s, r) => keys(s).forEach(k => { s[k].w = r['border-width']; }),
|
||||
'border-color': (s, r) => keys(s).forEach(k => { s[k].c = r['border-color']; }),
|
||||
|
||||
'border-left-color': (s, r) => stateMutator.setKeyOnly(s, 'l', 'c', r, 'border-color'),
|
||||
'border-left-width': (s, r) => stateMutator.setKeyOnly(s, 'l', 'w', r, 'border-width'),
|
||||
'border-left-style': (s, r) => stateMutator.setKeyOnly(s, 'l', 's', r, 'border-style'),
|
||||
|
||||
'border-right-color': (s, r) => stateMutator.setKeyOnly(s, 'r', 'c', r, 'border-color'),
|
||||
'border-right-width': (s, r) => stateMutator.setKeyOnly(s, 'r', 'w', r, 'border-width'),
|
||||
'border-right-style': (s, r) => stateMutator.setKeyOnly(s, 'r', 's', r, 'border-style'),
|
||||
|
||||
'border-top-color': (s, r) => stateMutator.setKeyOnly(s, 't', 'c', r, 'border-color'),
|
||||
'border-top-width': (s, r) => stateMutator.setKeyOnly(s, 't', 'w', r, 'border-width'),
|
||||
'border-top-style': (s, r) => stateMutator.setKeyOnly(s, 't', 's', r, 'border-style'),
|
||||
|
||||
'border-bottom-color': (s, r) => stateMutator.setKeyOnly(s, 'b', 'c', r, 'border-color'),
|
||||
'border-bottom-width': (s, r) => stateMutator.setKeyOnly(s, 'b', 'w', r, 'border-width'),
|
||||
'border-bottom-style': (s, r) => stateMutator.setKeyOnly(s, 'b', 's', r, 'border-style'),
|
||||
};
|
||||
|
||||
const mergeToObj = val => zipObject(val.map(getProp('property')), val.map(getProp('value')));
|
||||
const mapRuleToState = (rule, ruleState, applyFn) => {
|
||||
const val = parseBorder(typeof rule === 'string' ? rule : '');
|
||||
const r = mergeToObj(val);
|
||||
applyFn.call(null, ruleState, r);
|
||||
return ruleState;
|
||||
};
|
||||
|
||||
const mapStateToCurrentValue = (state, type) => {
|
||||
switch (type) {
|
||||
case 'border':
|
||||
return {
|
||||
// @todo consider to convert color to judge equal
|
||||
color: keys(state).every(k => state[k].c === state.l.c)
|
||||
? state.l.c : '',
|
||||
style: keys(state).every(k => state[k].s === state.l.s)
|
||||
? state.l.s : '',
|
||||
width: keys(state).every(k => state[k].w === state.l.w)
|
||||
? state.l.w : '',
|
||||
};
|
||||
case 'border-left':
|
||||
return {
|
||||
color: state.l.c,
|
||||
style: state.l.s,
|
||||
width: state.l.w,
|
||||
};
|
||||
case 'border-right':
|
||||
return {
|
||||
color: state.r.c,
|
||||
style: state.r.s,
|
||||
width: state.r.w,
|
||||
};
|
||||
case 'border-top':
|
||||
return {
|
||||
color: state.t.c,
|
||||
style: state.t.s,
|
||||
width: state.t.w,
|
||||
};
|
||||
case 'border-bottom':
|
||||
return {
|
||||
color: state.b.c,
|
||||
style: state.b.s,
|
||||
width: state.b.w,
|
||||
};
|
||||
default:
|
||||
}
|
||||
return {
|
||||
color: '',
|
||||
style: '',
|
||||
width: '',
|
||||
};
|
||||
};
|
||||
|
||||
const getEmptyRuleSet = () => ({
|
||||
l: { c: '', s: '', w: '' }, // left: color | style | width
|
||||
r: { c: '', s: '', w: '' }, // right: color | style | width
|
||||
t: { c: '', s: '', w: '' }, // top: color | style | width
|
||||
b: { c: '', s: '', w: '' }, // bottom: color | style | width
|
||||
});
|
||||
|
||||
export const parseToBorder = curry((type, mapfn, rules) => {
|
||||
const ruleState = Object.assign({}, getEmptyRuleSet());
|
||||
rules.forEach(rule => mapRuleToState(rule[1], ruleState, stateMutator[rule[0]]));
|
||||
return mapfn(ruleState, type);
|
||||
});
|
||||
|
||||
const getRule = (rules, fn = v => v) => {
|
||||
return fn(rules);
|
||||
};
|
||||
|
||||
export const getRelatedRules = (rules, mutator) => {
|
||||
const filterRules = ruleSet => keys(ruleSet)
|
||||
.filter(v => !!mutator[v])
|
||||
.map(n => [n, getRule(rules)[n]]);
|
||||
return getRule(rules, filterRules);
|
||||
};
|
||||
|
||||
export default function borderParser(props, state, mutator = stateMutator) {
|
||||
const rules = props.value || props.defaultValue || {};
|
||||
const current = compose(
|
||||
getRelatedRules,
|
||||
// logger,
|
||||
parseToBorder(state, mapStateToCurrentValue),
|
||||
)(rules, mutator);
|
||||
const inheritStr = utils.getInheritPropertyValue(
|
||||
rules, state, props.node);
|
||||
const inheritValue = mergeToObj(parseBorder(typeof inheritStr !== 'string' ? '' : inheritStr));
|
||||
const inherit = {
|
||||
color: inheritValue['border-color'],
|
||||
style: inheritValue['border-style'],
|
||||
width: inheritValue['border-width'],
|
||||
};
|
||||
return { current, inherit, value: utils.notEmptyValue(current, inherit) };
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import BorderStyle from './border';
|
||||
import BorderRadius from './radius';
|
||||
import utils from '../utils';
|
||||
class Border extends Component {
|
||||
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
static displayName = 'StyleBorderSetter';
|
||||
static transducer = utils.transducer;
|
||||
|
||||
// shouldComponentUpdate() {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-border', this.props.className);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<BorderStyle {...this.props} />
|
||||
<BorderRadius {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Border;
|
||||
@ -0,0 +1,141 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import radiusParser from './radiusParser';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
class RadiusStyle extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'BorderRadiusStyleSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
state = {
|
||||
// state variable to indicate which border have use selected
|
||||
// enum: border-top-left | border-top-right
|
||||
// border-bottom-left | border-bottom-right | border
|
||||
currentSelected: 'border',
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
setValue(val, props) {
|
||||
if (this.state.currentSelected === 'border') {
|
||||
utils.setPropertyValue(props, 'border-radius', val);
|
||||
} else {
|
||||
utils.setPropertyValue(props, `${this.state.currentSelected}-radius`, val);
|
||||
}
|
||||
}
|
||||
|
||||
changeSelectedRadius(type) {
|
||||
this.setState({ currentSelected: type });
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-border-radius', this.props.className);
|
||||
const radius = radiusParser(this.props, `${this.state.currentSelected}-radius`);
|
||||
const radiusCurrent = radius.current;
|
||||
const radiusInherit = radius.inherit;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="vs-style-border-setter-left-pane">
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedRadius.bind(this, 'border-top-left')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-top-left' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleUpperLeftCorner', dm: '左上角' })}>┏</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.changeSelectedRadius.bind(this, 'border-bottom-left')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-bottom-left'
|
||||
? 'vs-style-border-selected'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┗</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedRadius.bind(this, 'border')}
|
||||
className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-row">
|
||||
<div
|
||||
onClick={this.changeSelectedRadius.bind(this, 'border-top-right')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-top-right' ? 'vs-style-border-selected' : ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleUpperRightCorner', dm: '右上角' })}>┓</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.changeSelectedRadius.bind(this, 'border-bottom-right')}
|
||||
className={
|
||||
this.state.currentSelected === 'border-bottom-right'
|
||||
? 'vs-style-border-selected'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┛</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="vs-style-border-setter-right-pane">
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleFillet', dm: '圆角' })}
|
||||
compact
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'border-radius')}
|
||||
>
|
||||
<NumberControl
|
||||
key={this.state.currentSelected}
|
||||
placeholder={radiusInherit}
|
||||
onChange={(val) => {
|
||||
this.setValue(val, this.props);
|
||||
}}
|
||||
value={radiusCurrent || null}
|
||||
min={0}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RadiusStyle;
|
||||
@ -0,0 +1,54 @@
|
||||
import compose from 'lodash.flow';
|
||||
import curry from 'lodash.curry';
|
||||
import { getRelatedRules } from './borderParser';
|
||||
import utils from '../utils';
|
||||
const keys = Object.keys;
|
||||
const getRadiusEmptyState = () => ({
|
||||
tl: null,
|
||||
tr: null,
|
||||
bl: null,
|
||||
br: null,
|
||||
});
|
||||
|
||||
const stateMutator = {
|
||||
'border-radius': (s, r) => keys(s).forEach(k => { s[k] = r; }),
|
||||
'border-top-left-radius': (s, r) => { s.tl = r; },
|
||||
'border-top-right-radius': (s, r) => { s.tr = r; },
|
||||
'border-bottom-left-radius': (s, r) => { s.bl = r; },
|
||||
'border-bottom-right-radius': (s, r) => { s.br = r; },
|
||||
};
|
||||
|
||||
const mapStateToCurrentValue = (state, type) => {
|
||||
switch (type) {
|
||||
case 'border-radius':
|
||||
return keys(state).every(k => state[k] === state.tl) ? state.tl : null;
|
||||
case 'border-top-left-radius':
|
||||
return state.tl;
|
||||
case 'border-top-right-radius':
|
||||
return state.tr;
|
||||
case 'border-bottom-left-radius':
|
||||
return state.bl;
|
||||
case 'border-bottom-right-radius':
|
||||
return state.br;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const parseToRadius = curry((type, mapfn, rules) => {
|
||||
const ruleState = Object.assign({}, getRadiusEmptyState());
|
||||
rules.forEach(rule => stateMutator[rule[0]](ruleState, rule[1]));
|
||||
return mapfn(ruleState, type);
|
||||
});
|
||||
|
||||
export default function radiusParser(props, state) {
|
||||
const rules = props.value || props.defaultValue || {};
|
||||
const current = compose(
|
||||
getRelatedRules,
|
||||
parseToRadius(state, mapStateToCurrentValue)
|
||||
)(rules, stateMutator);
|
||||
const inherit = utils.getInheritPropertyValue(
|
||||
rules, state, props.node);
|
||||
return { current, inherit, value: utils.notEmptyValue(current, inherit) };
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import SelectControl from '@ali/ve-select-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import utils from '../utils';
|
||||
const CURSOR_TYPE = ['default', 'pointer'];
|
||||
|
||||
class Cursor extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleOpacitySetter';
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-cursor', this.props.className);
|
||||
const cursor = utils.getPropertyValue(this.props, 'cursor');
|
||||
const options = CURSOR_TYPE.map((item, index) => ({
|
||||
text: <div key={index}><Icons name={`style.cursor-${item}`} size="small" />{item}</div>,
|
||||
value: item,
|
||||
}));
|
||||
return (
|
||||
<SelectControl
|
||||
className={className}
|
||||
value={cursor.value}
|
||||
options={options}
|
||||
onChange={(val) => utils.setPropertyValue(this.props, 'cursor', val)}
|
||||
min={0}
|
||||
max={100}
|
||||
syncTargetWidth
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Cursor;
|
||||
@ -0,0 +1,67 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import Field from '@ali/ve-field';
|
||||
import Opacity from './opacity';
|
||||
import Cursor from './cursor';
|
||||
import Shadow from './shadow';
|
||||
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
class Effects extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleEffectsSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
// shouldComponentUpdate() {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-effects', this.props.className);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'opacity')}
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleTransparency', dm: '透明度' })}>
|
||||
<Icons name="style.opacity" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Opacity {...this.props} />
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'cursor')}
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleMouseGesture', dm: '鼠标手势' })}>
|
||||
<Icons name="style.cursor" size="small" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<Cursor {...this.props} />
|
||||
</Field>
|
||||
<Shadow {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Effects;
|
||||
@ -0,0 +1,47 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import utils from '../utils';
|
||||
class Opacity extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleOpacitySetter';
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-opacity', this.props.className);
|
||||
const opacity = utils.getPropertyValue(this.props, 'opacity');
|
||||
const getFloat = v => parseFloat(v).toFixed(2);
|
||||
const current = opacity.current ? `${parseInt(opacity.current * 100, 10)}%` : null;
|
||||
return (
|
||||
<NumberControl
|
||||
className={className}
|
||||
placeholder={`${getFloat(opacity.inherit) * 100}%`}
|
||||
value={current}
|
||||
onChange={(val) => {
|
||||
const value = (parseFloat((val.split('%')[0])) / 100).toFixed(2);
|
||||
utils.setPropertyValue(this.props, 'opacity', value);
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
units={[{
|
||||
type: '%',
|
||||
list: true,
|
||||
}]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Opacity;
|
||||
@ -0,0 +1,210 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import ColorControl from '@ali/ve-color-control';
|
||||
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
const generateShadow = (c = 'rgba(0,0,0,0)', x = '0', y = '0', b = '0', s = '0') => `${c} ${x} ${y} ${b} ${s}`;
|
||||
|
||||
class Shadow extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleShadowSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-shadow', this.props.className);
|
||||
const shadow = utils.getPropertyValue(this.props, 'box-shadow').value;
|
||||
|
||||
let c = ''; // color
|
||||
let x = ''; // x
|
||||
let y = ''; // y
|
||||
let b = ''; // blur
|
||||
let s = ''; // spread
|
||||
|
||||
// @todo shadow parser 比较复杂考虑情况比较多，这里有明显的 Bug
|
||||
// 由于时间问题，这里先留坑，满足可用性，后面有时间再来修复一下。
|
||||
if (shadow !== 'none' && !!shadow && typeof shadow === 'string') {
|
||||
const res = shadow.split(' ');
|
||||
s = res.pop();
|
||||
b = res.pop();
|
||||
y = res.pop();
|
||||
x = res.pop();
|
||||
c = res.join(' ');
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="ve-style-box-shadow-select">
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
|
||||
title={(
|
||||
<span data-tip={$i18n.get({ id: 'styleColour', dm: '颜色' })}>
|
||||
<Icons name="style.fill" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<ColorControl
|
||||
value={c}
|
||||
placeholder="#000"
|
||||
onChange={(val) => {
|
||||
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(val, x, y, b, s));
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="ve-style-box-shadow-select">
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
|
||||
title="X"
|
||||
>
|
||||
<NumberControl
|
||||
className={className}
|
||||
value={x}
|
||||
placeholder="0"
|
||||
onChange={(val) => {
|
||||
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, val, y, b, s));
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
|
||||
title="Y"
|
||||
>
|
||||
<NumberControl
|
||||
className={className}
|
||||
placeholder="0"
|
||||
value={y}
|
||||
onChange={(val) => {
|
||||
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, val, b, s));
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="ve-style-box-shadow-select">
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
|
||||
title={(
|
||||
<span data-tip="blur">
|
||||
<Icons name="style.blur" size="medium" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<NumberControl
|
||||
className={className}
|
||||
placeholder="0"
|
||||
value={b}
|
||||
onChange={(val) => {
|
||||
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, val, s));
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
|
||||
title={(
|
||||
<span data-tip="spread">
|
||||
<Icons name="style.layer" size="small" />
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<NumberControl
|
||||
value={s}
|
||||
placeholder="0"
|
||||
className={className}
|
||||
onChange={(val) => {
|
||||
utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, b, val));
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
units={[
|
||||
{
|
||||
type: 'px',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: '%',
|
||||
list: true,
|
||||
},
|
||||
{
|
||||
type: 'em',
|
||||
list: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Shadow;
|
||||
@ -0,0 +1,45 @@
|
||||
const { provideIntl, destroyIntl } = require('@ali/intl-universal');
|
||||
const strings = require('./strings');
|
||||
|
||||
let intl;
|
||||
const MEDUSA_APP_NAME = 'legao-designer';
|
||||
const PSEUDO_LANGUAGE_TAG = 'pd-KV';
|
||||
const CURRENT_LANGUAGE = (window.locale || window.localStorage.getItem('vdev-locale') || '').replace(/_/, '-') || 'zh-CN';
|
||||
|
||||
function update(language) {
|
||||
destroyIntl();
|
||||
intl = provideIntl({
|
||||
locale: language,
|
||||
messagesAIO: strings,
|
||||
});
|
||||
}
|
||||
|
||||
function get(id, variable) {
|
||||
if (!intl) update();
|
||||
let string = '';
|
||||
let key = '';
|
||||
if (typeof id === 'string') {
|
||||
key = id;
|
||||
string = intl.formatMessage({ id }, variable);
|
||||
}
|
||||
if (typeof id === 'object' && id.dm) {
|
||||
id.defaultMessage = id.dm;
|
||||
}
|
||||
key = id.id;
|
||||
string = intl.formatMessage(id, variable);
|
||||
if (CURRENT_LANGUAGE === PSEUDO_LANGUAGE_TAG) {
|
||||
return `##@@@${key}##${MEDUSA_APP_NAME}@@@##${string}`;
|
||||
}
|
||||
return string;
|
||||
}
|
||||
|
||||
if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) {
|
||||
update('en-US');
|
||||
} else {
|
||||
update(CURRENT_LANGUAGE);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
get,
|
||||
update,
|
||||
};
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"styleImpactBlackBody": "Impact, black body",
|
||||
"styleImpactMicrosoftYahei": "Impact, Microsoft Yahei",
|
||||
"styleComicSansMSBlackbody": "Comic Sans MS, Blackbody",
|
||||
"styleGeorgiaMicrosoftYahei": "Georgia, Microsoft Yahei",
|
||||
"styleArialHelveticaBlackBody": "Arial, Helvetica, black body",
|
||||
"styleLateralOffset": "Horizontal offset",
|
||||
"styleAlign": "text-align",
|
||||
"styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, Microsoft Yahei",
|
||||
"styleTrebuchetMSBlackBody": "Trebuchet MS, black body",
|
||||
"styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, Microsoft Yahei",
|
||||
"styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, Microsoft Yahei",
|
||||
"styleRowHeight": "line-height",
|
||||
"styleFontColor": "font-color",
|
||||
"styleSolidLine": "solid line",
|
||||
"styleLinear": "style",
|
||||
"styleLucidaConsoleBlackbody": "Lucida Console, Blackbody",
|
||||
"styleStyle": "font-style",
|
||||
"styleWordWeight": "font-width",
|
||||
"styleLayout": "layout",
|
||||
"styleSourceEditor": "Source editor",
|
||||
"styleTopBorder": "Top border",
|
||||
"styleStatus": "status",
|
||||
"styleText": "Text",
|
||||
"stylePleaseEnterAnAddress": "Please enter an address or paste upload",
|
||||
"styleDefaultState": "Default state",
|
||||
"styleRightBorder": "Right border",
|
||||
"styleHigh": "high",
|
||||
"styleBottomBorder": "Bottom border",
|
||||
"styleTransparency": "opacity",
|
||||
"styleBottomRightCorner": "Bottom right corner",
|
||||
"styleUpperRightCorner": "Upper right corner",
|
||||
"styleColour": "color",
|
||||
"styleUnsupportedImage": "Unsupported image",
|
||||
"styleTimesNewRomanBlackbody": "Times New Roman, Blackbody",
|
||||
"styleLucidaConsoleMicrosoftYahei": "Lucida Console, Microsoft Yahei",
|
||||
"styleDisplay": "display",
|
||||
"styleFlexibleLayout": "Flexible layout",
|
||||
"styleSize": "font-size",
|
||||
"styleFillet": "radius",
|
||||
"styleEffect": "effect",
|
||||
"stylePositioning": "Positioning",
|
||||
"styleLeftBorder": "Left border",
|
||||
"styleBackground": "background",
|
||||
"styleFillColor": "background-color",
|
||||
"stylePalatinoLinotypeBlackBody": "Palatino Linotype, black body",
|
||||
"styleFont": "font-family",
|
||||
"styleMouseGesture": "cursor",
|
||||
"styleAir": "empty",
|
||||
"styleAll": "All",
|
||||
"styleTimesNewRomanMicrosoft": "Times New Roman, Microsoft Yahei",
|
||||
"styleUpperLeftCorner": "Upper left corner",
|
||||
"styleCourierNewMicrosoftYahei": "Courier New, Microsoft Yahei",
|
||||
"styleCourierNewBlackbody": "Courier New, Blackbody",
|
||||
"styleFrame": "Border",
|
||||
"styleImage": "background-image",
|
||||
"styleComicSansMSMicrosoft": "Comic Sans MS, Microsoft Yahei",
|
||||
"styleVerdanaBlackBody": "Verdana, black body",
|
||||
"stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, Microsoft Yahei",
|
||||
"styleGeorgiaBlackbody": "Georgia, Blackbody",
|
||||
"styleWidth": "width",
|
||||
"styleVerticalOffset": "Vertical offset",
|
||||
"styleModification": "text-decoration",
|
||||
"styleHeight": "height",
|
||||
"styleFixed": "fixed",
|
||||
"styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, Blackbody",
|
||||
"styleVerdanaMicrosoftYahei": "Verdana, Microsoft Yahei",
|
||||
"styleNo": "no",
|
||||
"styleTile": "Tile",
|
||||
"styleDottedLine": "dotted line",
|
||||
"styleDottedLine.1": "dashed line"
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
'en-US': require('./en-US.json'),
|
||||
'zh-CN': require('./zh-CN.json'),
|
||||
};
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"styleAir": "空",
|
||||
"stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, 微软雅黑",
|
||||
"styleMouseGesture": "鼠标手势",
|
||||
"styleAll": "全部",
|
||||
"styleImpactBlackBody": "Impact, 黑体",
|
||||
"styleFont": "字体",
|
||||
"styleFrame": "边框",
|
||||
"styleImage": "图片",
|
||||
"styleRowHeight": "行高",
|
||||
"styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, 微软雅黑",
|
||||
"styleUpperLeftCorner": "左上角",
|
||||
"styleCourierNewMicrosoftYahei": "Courier New, 微软雅黑",
|
||||
"styleTimesNewRomanMicrosoft": "Times New Roman, 微软雅黑",
|
||||
"styleFixed": "固定",
|
||||
"styleModification": "修饰",
|
||||
"stylePleaseEnterAnAddress": "请输入地址或粘贴上传",
|
||||
"styleText": "文字",
|
||||
"styleVerticalOffset": "纵向偏移",
|
||||
"styleComicSansMSMicrosoft": "Comic Sans MS, 微软雅黑",
|
||||
"styleLinear": "线形",
|
||||
"styleWidth": "宽",
|
||||
"styleVerdanaBlackBody": "Verdana, 黑体",
|
||||
"styleGeorgiaBlackbody": "Georgia, 黑体",
|
||||
"styleTrebuchetMSBlackBody": "Trebuchet MS, 黑体",
|
||||
"styleFillet": "圆角",
|
||||
"styleFlexibleLayout": "弹性布局",
|
||||
"styleDottedLine": "点线",
|
||||
"styleLeftBorder": "左边框",
|
||||
"styleNo": "无",
|
||||
"styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, 黑体",
|
||||
"styleLucidaConsoleMicrosoftYahei": "Lucida Console, 微软雅黑",
|
||||
"styleSize": "大小",
|
||||
"styleLateralOffset": "横向偏移",
|
||||
"styleAlign": "对齐",
|
||||
"styleImpactMicrosoftYahei": "Impact, 微软雅黑",
|
||||
"styleArialHelveticaBlackBody": "Arial, Helvetica, 黑体",
|
||||
"styleComicSansMSBlackbody": "Comic Sans MS, 黑体",
|
||||
"stylePalatinoLinotypeBlackBody": "Palatino Linotype, 黑体",
|
||||
"styleGeorgiaMicrosoftYahei": "Georgia, 微软雅黑",
|
||||
"styleDefaultState": "默认状态",
|
||||
"styleFontColor": "字体颜色",
|
||||
"styleSolidLine": "实线",
|
||||
"styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, 微软雅黑",
|
||||
"styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, 微软雅黑",
|
||||
"styleStyle": "样式",
|
||||
"styleTransparency": "透明度",
|
||||
"styleSourceEditor": "源码编辑",
|
||||
"styleStatus": "状态",
|
||||
"styleHigh": "高",
|
||||
"styleTopBorder": "上边框",
|
||||
"styleBottomBorder": "下边框",
|
||||
"styleRightBorder": "右边框",
|
||||
"styleHeight": "高度",
|
||||
"styleLayout": "布局",
|
||||
"styleUnsupportedImage": "暂未支持的图片",
|
||||
"styleLucidaConsoleBlackbody": "Lucida Console, 黑体",
|
||||
"styleWordWeight": "字重",
|
||||
"styleCourierNewBlackbody": "Courier New, 黑体",
|
||||
"styleFillColor": "填充色",
|
||||
"styleTile": "平铺",
|
||||
"styleBackground": "背景",
|
||||
"stylePositioning": "定位",
|
||||
"styleEffect": "效果",
|
||||
"styleBottomRightCorner": "右下角",
|
||||
"styleDottedLine.1": "虚线",
|
||||
"styleColour": "颜色",
|
||||
"styleTimesNewRomanBlackbody": "Times New Roman, 黑体",
|
||||
"styleUpperRightCorner": "右上角",
|
||||
"styleVerdanaMicrosoftYahei": "Verdana, 微软雅黑",
|
||||
"styleDisplay": "显示"
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import { registerDict } from '@ali/ve-icons';
|
||||
import { normalizeStyle } from '@ali/vu-css-style';
|
||||
|
||||
import Layout from './layout';
|
||||
import Typography from './typography';
|
||||
import Background from './background';
|
||||
import Border from './border';
|
||||
import Effects from './effects';
|
||||
|
||||
import utils from './utils';
|
||||
import SvgLib from './svglib';
|
||||
import './style.less';
|
||||
import $i18n from './i18n/index';
|
||||
|
||||
registerDict('style', SvgLib);
|
||||
|
||||
/**
|
||||
* state
|
||||
* json: JSON模式
|
||||
* ----
|
||||
* layout
|
||||
* display
|
||||
* flexItem
|
||||
* padding+margin
|
||||
* size
|
||||
* width
|
||||
* height
|
||||
* min+max advanced
|
||||
* float advanced
|
||||
* clear advanced
|
||||
* overflow advanced
|
||||
* position advanced
|
||||
* background
|
||||
* color
|
||||
* image
|
||||
* border
|
||||
* border
|
||||
* radius
|
||||
* typography
|
||||
* font-family
|
||||
* color
|
||||
* font-size
|
||||
* text-align
|
||||
* line-height
|
||||
* font-weight
|
||||
* text-decoration
|
||||
* font-style
|
||||
* letter-spacing advanced
|
||||
* text-indent advanced
|
||||
* text-transform advanced
|
||||
* direction advanced
|
||||
* effects
|
||||
* opacity
|
||||
* cursor
|
||||
* svg
|
||||
* fill
|
||||
*/
|
||||
|
||||
class StyleSetter extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
static defaultProps = {
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
const className = classNames(
|
||||
'vs-style',
|
||||
'vs-style-advanced',
|
||||
this.props.className,
|
||||
);
|
||||
// react style -> css style
|
||||
const value = this.props.value ? normalizeStyle(this.props.value) : null;
|
||||
const defaultValue = this.props.defaultValue ? normalizeStyle(this.props.defaultValue) : null;
|
||||
const props = {...this.props, value, defaultValue};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Field display="accordion" title={$i18n.get({ id: 'styleLayout', dm: '布局' })}>
|
||||
<Layout {...props} />
|
||||
</Field>
|
||||
<Field display="accordion" title={$i18n.get({ id: 'styleText', dm: '文字' })}>
|
||||
<Typography {...props} />
|
||||
</Field>
|
||||
<Field display="accordion" title={$i18n.get({ id: 'styleBackground', dm: '背景' })}>
|
||||
<Background {...props} />
|
||||
</Field>
|
||||
<Field display="accordion" title={$i18n.get({ id: 'styleFrame', dm: '边框' })}>
|
||||
<Border {...props} />
|
||||
</Field>
|
||||
<Field display="accordion" title={$i18n.get({ id: 'styleEffect', dm: '效果' })}>
|
||||
<Effects {...props} />
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
StyleSetter.Layout = Layout;
|
||||
StyleSetter.Typography = Typography;
|
||||
StyleSetter.Background = Background;
|
||||
StyleSetter.Effects = Effects;
|
||||
StyleSetter.Border = Border;
|
||||
|
||||
// StyleSetter.Svg = Svg;
|
||||
|
||||
export default StyleSetter;
|
||||
@ -0,0 +1,44 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ChoiceControl from '@ali/ve-choice-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import utils from '../utils';
|
||||
class Display extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutDisplaySetter';
|
||||
|
||||
render() {
|
||||
const display = utils.getPropertyValue(this.props, 'display').value;
|
||||
return (
|
||||
<ChoiceControl
|
||||
className="vs-style-layout-diplay"
|
||||
value={display}
|
||||
options={[{
|
||||
title: <Icons name="style.block" size="medium" />,
|
||||
value: 'block',
|
||||
}, {
|
||||
title: <Icons name="style.inline-block" size="medium" />,
|
||||
value: 'inline-block',
|
||||
}, {
|
||||
title: <Icons name="style.inline" size="medium" />,
|
||||
value: 'inline',
|
||||
}, {
|
||||
title: <Icons name="style.flex" size="medium" />,
|
||||
value: 'flex',
|
||||
},
|
||||
// {
|
||||
// title: <Icons name="hidden" size="medium" />,
|
||||
// value: 'none',
|
||||
// }
|
||||
]}
|
||||
onChange={val => utils.setPropertyValue(this.props, 'display', val)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Display;
|
||||
@ -0,0 +1,176 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import ChoiceControl from '@ali/ve-choice-control';
|
||||
import Icons from '@ali/ve-icons';
|
||||
import Field from '@ali/ve-field';
|
||||
import utils from '../utils';
|
||||
class Flex extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutFlexSetter';
|
||||
|
||||
render() {
|
||||
// flex-direction
|
||||
const direction = utils.getPropertyValue(this.props, 'flex-direction').value;
|
||||
// align-items
|
||||
const align = utils.getPropertyValue(this.props, 'align-items').value;
|
||||
// justify-content
|
||||
const justify = utils.getPropertyValue(this.props, 'justify-content').value;
|
||||
/*
|
||||
// flex-warp
|
||||
const wrap = getPropertyValue(this.props, 'flex-wrap').value;
|
||||
const isWrap = /^wrap/.test(wrap);
|
||||
// align-content
|
||||
const alignColumns = getPropertyValue(this.props, 'align-content').value;
|
||||
*/
|
||||
|
||||
const isVertical = /^column/.test(direction);
|
||||
const v = isVertical ? '-v' : '';
|
||||
const reverseClass = /reverse$/.test(direction)
|
||||
? `vs-style-reverse${isVertical ? '-v' : '-h'}` : null;
|
||||
|
||||
return (
|
||||
<div className="vs-style-layout-flex">
|
||||
<ChoiceControl
|
||||
className="vs-style-flex-property"
|
||||
value={direction}
|
||||
options={[{
|
||||
title: <Icons name="style.direction-row" size="medium" />,
|
||||
tip: 'Direction:row',
|
||||
value: 'row',
|
||||
}, {
|
||||
title: <Icons name="style.direction-column" size="medium" />,
|
||||
tip: 'Direction:column',
|
||||
value: 'column',
|
||||
}, {
|
||||
title: <Icons name="style.direction-row" className="vs-style-reverse-h" size="medium" />,
|
||||
tip: 'Direction:row-reverse',
|
||||
value: 'row-reverse',
|
||||
}, {
|
||||
title: (<Icons
|
||||
name="style.direction-column" className="vs-style-reverse-v" size="medium"
|
||||
/>),
|
||||
tip: 'Direction:column-reverse',
|
||||
value: 'column-reverse',
|
||||
}]}
|
||||
onChange={(val) => utils.setPropertyValue(this.props, 'flex-direction', val)}
|
||||
/>
|
||||
<ChoiceControl
|
||||
className="vs-style-flex-property"
|
||||
value={align}
|
||||
options={[{
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.align-start${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Align:flex-start',
|
||||
value: 'flex-start',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.align-center${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Align:center',
|
||||
value: 'center',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.align-end${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Align:flex-end',
|
||||
value: 'flex-end',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.align-stretch${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Align:stretch',
|
||||
value: 'stretch',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.align-baseline${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Align:baseline',
|
||||
value: 'baseline',
|
||||
}]}
|
||||
onChange={(val) => utils.setPropertyValue(this.props, 'align-items', val)}
|
||||
/>
|
||||
<ChoiceControl
|
||||
className="vs-style-flex-property"
|
||||
value={justify}
|
||||
options={[{
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.justify-start${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Justify:flex-start',
|
||||
value: 'flex-start',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.justify-center${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Justify:center',
|
||||
value: 'center',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.justify-end${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Justify:flex-end',
|
||||
value: 'flex-end',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.justify-between${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Justify:space-between',
|
||||
value: 'space-between',
|
||||
}, {
|
||||
title: (
|
||||
<Icons
|
||||
className={reverseClass}
|
||||
name={`style.justify-around${v}`}
|
||||
size="medium"
|
||||
/>
|
||||
),
|
||||
tip: 'Justify:space-around',
|
||||
value: 'space-around',
|
||||
}]}
|
||||
onChange={(val) => utils.setPropertyValue(this.props, 'justify-content', val)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Flex;
|
||||
@ -0,0 +1,10 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class FlexItem extends Component {
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default FlexItem;
|
||||
@ -0,0 +1,19 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import Size from './size';
|
||||
import utils from '../utils';
|
||||
class Height extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutWidthSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
render() {
|
||||
return <Size {...this.props} field="height" />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Height;
|
||||
@ -0,0 +1,107 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Field from '@ali/ve-field';
|
||||
import Display from './display';
|
||||
import Flex from './flex';
|
||||
import FlexItem from './flexitem';
|
||||
import PaddingMargin from './padding+margin';
|
||||
import Width from './width';
|
||||
import Height from './height';
|
||||
import Position from './position'; // advanced
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
function inFlexBox(node) {
|
||||
const nativeNode = node;
|
||||
if (!nativeNode) return false;
|
||||
const { parentNode } = nativeNode;
|
||||
if (!parentNode) return false;
|
||||
const display = window.getComputedStyle(parentNode).getPropertyValue('display');
|
||||
return /flex/.test(display);
|
||||
}
|
||||
|
||||
function isFlexBox(props) {
|
||||
const display = utils.getPropertyValue(props, 'display').value;
|
||||
return /flex$/.test(display);
|
||||
}
|
||||
|
||||
class Layout extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutSetter';
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
// shouldComponentUpdate() {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-layout', this.props.className);
|
||||
const aFlexBox = isFlexBox(this.props);
|
||||
const aFlexItem = inFlexBox(this.props.node);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleDisplay', dm: '显示' })}
|
||||
className="vs-field-display"
|
||||
compact
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'display')}
|
||||
>
|
||||
<Display {...this.props} />
|
||||
</Field>
|
||||
{aFlexBox && (
|
||||
<Field
|
||||
display="caption"
|
||||
className="vs-field-flex"
|
||||
title={$i18n.get({ id: 'styleFlexibleLayout', dm: '弹性布局' })}
|
||||
>
|
||||
<Flex {...this.props} />
|
||||
</Field>
|
||||
)}
|
||||
{/* todo: aFlexItem && <Field display="caption" title="Flex Item">
|
||||
<FlexItem />
|
||||
</Field> */}
|
||||
<Field display="plain">
|
||||
<PaddingMargin {...this.props} />
|
||||
</Field>
|
||||
<Field display="plain" className="vs-flex-field">
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleWidth', dm: '宽' })}
|
||||
compact
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'width')}
|
||||
>
|
||||
<Width {...this.props} />
|
||||
</Field>
|
||||
<Field
|
||||
display="inline"
|
||||
title={$i18n.get({ id: 'styleHigh', dm: '高' })}
|
||||
compact
|
||||
highlight={utils.getCurrentPropertyHighlight(this.props, 'height')}
|
||||
>
|
||||
<Height {...this.props} />
|
||||
</Field>
|
||||
</Field>
|
||||
{/* todo:
|
||||
{advanced && <Field display="inline" title="Position">
|
||||
<Position />
|
||||
</Field>}
|
||||
*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@ -0,0 +1,504 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Icons, { Button } from '@ali/ve-icons';
|
||||
import utils from '../utils';
|
||||
import $i18n from '../i18n/index';
|
||||
|
||||
function diplayValue(value) {
|
||||
if (utils.isEmptyCssValue(value)) {
|
||||
return $i18n.get({ id: 'styleAir', dm: '空' });
|
||||
}
|
||||
|
||||
const m = /^(.+)px/.exec(value);
|
||||
if (m) {
|
||||
return m[1];
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
class Input extends Component {
|
||||
componentDidMount() {
|
||||
if (this.input) {
|
||||
this.input.select();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<input
|
||||
className="vs-inline-input-input"
|
||||
type="text"
|
||||
ref={(ref) => {
|
||||
this.input = ref;
|
||||
}}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class InlineInput extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
|
||||
inheritValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
|
||||
onChange: PropTypes.func,
|
||||
negtive: PropTypes.bool,
|
||||
compute: PropTypes.func,
|
||||
highlight: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
compute() {
|
||||
return '0px';
|
||||
},
|
||||
highlight: false,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
value: '',
|
||||
editing: false,
|
||||
};
|
||||
|
||||
this.pattern = this.props.negtive
|
||||
? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
|
||||
: /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.value !== this.props.value) {
|
||||
this.setState({ value: utils.isEmptyCssValue(nextProps.value) ? '' : nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
setValue(value) {
|
||||
this.setState({ value });
|
||||
if (this.isValid(value) && this.props.onChange) {
|
||||
this.props.onChange(value.trim());
|
||||
}
|
||||
}
|
||||
|
||||
isValid(value) {
|
||||
return value.trim() === '' || this.pattern.test(value);
|
||||
}
|
||||
|
||||
keyDown(e) {
|
||||
if (e.keyCode === 27 || e.keyCode === 13) {
|
||||
this.exitEdit();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (e.keyCode !== 38 && e.keyCode !== 40) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
const factor = e.keyCode === 40 ? -1 : 1;
|
||||
let value = e.target.value.trim();
|
||||
if (!this.isValid(value)) {
|
||||
value = utils.isEmptyCssValue(this.props.value) ? this.props.inheritValue : this.props.value;
|
||||
}
|
||||
|
||||
if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
|
||||
value = this.props.compute(value);
|
||||
}
|
||||
|
||||
const m = this.pattern.exec(value);
|
||||
if (!m[1]) return;
|
||||
let n = parseFloat(m[1]) + factor;
|
||||
if (!this.props.negtive && n < 0) {
|
||||
n = 0;
|
||||
}
|
||||
this.setValue(`${n}${m[2] || 'px'}`);
|
||||
}
|
||||
|
||||
exitEdit() {
|
||||
if (!/\D+$/.test(this.state.value)) {
|
||||
this.setValue(`${this.state.value}px`);
|
||||
} else if (!this.pattern.test(this.state.value)) {
|
||||
this.setValue(`${/\d+/.exec(this.state.value)[0]}px`);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
editing: false,
|
||||
});
|
||||
}
|
||||
|
||||
enterEdit() {
|
||||
this.setState({
|
||||
editing: true,
|
||||
value: utils.isEmptyCssValue(this.props.value) ? '' : this.props.value,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, inheritValue, highlight } = this.props;
|
||||
const className = classNames('vs-inline-input', this.props.className, {
|
||||
've-highlight': highlight,
|
||||
});
|
||||
|
||||
const display = diplayValue(utils.isEmptyCssValue(value) ? inheritValue : value);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{!this.state.editing && (
|
||||
<span className="vs-inline-input-text" onClick={this.enterEdit.bind(this)}>
|
||||
{display}
|
||||
</span>
|
||||
)}
|
||||
{this.state.editing && (
|
||||
<Input
|
||||
value={this.state.value}
|
||||
placeholder={inheritValue}
|
||||
onChange={e => this.setValue(e.target.value)}
|
||||
onKeyDown={this.keyDown.bind(this)}
|
||||
onBlur={this.exitEdit.bind(this)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function spliteMargin(all) {
|
||||
if (!all) {
|
||||
return {
|
||||
top: null,
|
||||
right: null,
|
||||
bottom: null,
|
||||
left: null,
|
||||
};
|
||||
}
|
||||
let [top, right, bottom, left] = all.trim().split(/\s+/); // eslint-disable-line
|
||||
if (utils.isEmptyCssValue(right)) {
|
||||
right = top;
|
||||
}
|
||||
if (utils.isEmptyCssValue(bottom)) {
|
||||
bottom = top;
|
||||
}
|
||||
if (utils.isEmptyCssValue(left)) {
|
||||
left = right;
|
||||
}
|
||||
return {
|
||||
top, right, bottom, left,
|
||||
};
|
||||
}
|
||||
|
||||
function compositeMargin(all, top, right, bottom, left) {
|
||||
const ret = spliteMargin(all);
|
||||
|
||||
if (!utils.isEmptyCssValue(top)) {
|
||||
ret.top = top;
|
||||
}
|
||||
if (!utils.isEmptyCssValue(right)) {
|
||||
ret.right = right;
|
||||
}
|
||||
if (!utils.isEmptyCssValue(bottom)) {
|
||||
ret.bottom = bottom;
|
||||
}
|
||||
if (!utils.isEmptyCssValue(left)) {
|
||||
ret.left = left;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function isFull(box) {
|
||||
return (
|
||||
!utils.isEmptyCssValue(box.top)
|
||||
&& !utils.isEmptyCssValue(box.right)
|
||||
&& !utils.isEmptyCssValue(box.bottom)
|
||||
&& !utils.isEmptyCssValue(box.left)
|
||||
);
|
||||
}
|
||||
|
||||
class LayoutBox extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
negtive: PropTypes.bool,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.pattern = this.props.negtive
|
||||
? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
|
||||
: /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.shell.addEventListener('mousedown', (e) => {
|
||||
// todo: dragging & interval add
|
||||
const t = e.target;
|
||||
if (t.dataset && t.dataset.handle) {
|
||||
this.add(t.dataset.handle);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
add(dir, factor = 1) {
|
||||
if (!this.current || !this.inherit) return;
|
||||
let value = utils.isEmptyCssValue(this.current[dir]) ? this.inherit[dir] : this.current[dir];
|
||||
|
||||
if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
|
||||
value = this.compute(dir);
|
||||
}
|
||||
|
||||
const m = this.pattern.exec(value);
|
||||
if (!m[1]) return;
|
||||
let n = parseFloat(m[1]) + factor;
|
||||
if (!this.props.negtive && n < 0) {
|
||||
n = 0;
|
||||
}
|
||||
this.change(this.current, dir, `${n}${m[2] || 'px'}`);
|
||||
}
|
||||
|
||||
change(box, dir, val) {
|
||||
const { name } = this.props;
|
||||
box[dir] = val;
|
||||
if (isFull(box)) {
|
||||
utils.setPropertyValue(
|
||||
this.props,
|
||||
{
|
||||
[name]: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
|
||||
[`${name}-top`]: null,
|
||||
[`${name}-right`]: null,
|
||||
[`${name}-bottom`]: null,
|
||||
[`${name}-left`]: null,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
utils.setPropertyValue(
|
||||
this.props,
|
||||
{
|
||||
[name]: null,
|
||||
[`${name}-top`]: box.top,
|
||||
[`${name}-right`]: box.right,
|
||||
[`${name}-bottom`]: box.bottom,
|
||||
[`${name}-left`]: box.left,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
compute(dir) {
|
||||
const { name, node } = this.props;
|
||||
// if (external) {
|
||||
// return getComputePropertyValue(node, `${name}-${dir}`);
|
||||
// }
|
||||
return '0px';
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
name, negtive,
|
||||
} = this.props;
|
||||
|
||||
const all = utils.getPropertyValue(this.props, name);
|
||||
const top = utils.getPropertyValue(this.props, `${name}-top`);
|
||||
const right = utils.getPropertyValue(this.props, `${name}-right`);
|
||||
const bottom = utils.getPropertyValue(this.props, `${name}-bottom`);
|
||||
const left = utils.getPropertyValue(this.props, `${name}-left`);
|
||||
|
||||
const current = compositeMargin(
|
||||
all.current,
|
||||
top.current,
|
||||
right.current,
|
||||
bottom.current,
|
||||
left.current,
|
||||
);
|
||||
|
||||
const inherit = compositeMargin(
|
||||
all.inherit,
|
||||
top.inherit,
|
||||
right.inherit,
|
||||
bottom.inherit,
|
||||
left.inherit,
|
||||
);
|
||||
|
||||
this.current = current;
|
||||
this.inherit = inherit;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('vs-layout-box', this.props.className)}
|
||||
ref={(ref) => {
|
||||
this.shell = ref;
|
||||
}}
|
||||
>
|
||||
<div className="vs-layout-handle vs-handle-top" data-handle="top">
|
||||
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
|
||||
</div>
|
||||
<InlineInput
|
||||
className="vs-layout-input-top"
|
||||
value={current.top}
|
||||
inheritValue={inherit.top}
|
||||
compute={() => this.compute('top')}
|
||||
negtive={negtive}
|
||||
highlight={current.top != undefined}
|
||||
onChange={val => this.change(current, 'top', val)}
|
||||
/>
|
||||
|
||||
<div className="vs-layout-handle vs-handle-right" data-handle="right">
|
||||
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
|
||||
</div>
|
||||
<InlineInput
|
||||
className="vs-layout-input-right"
|
||||
value={current.right}
|
||||
inheritValue={inherit.right}
|
||||
negtive={negtive}
|
||||
highlight={current.right != undefined}
|
||||
compute={() => this.compute('right')}
|
||||
onChange={val => this.change(current, 'right', val)}
|
||||
/>
|
||||
|
||||
<div className="vs-layout-handle vs-handle-bottom" data-handle="bottom">
|
||||
<span className="vs-handle-inscription">{name}</span>
|
||||
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
|
||||
</div>
|
||||
<InlineInput
|
||||
className="vs-layout-input-bottom"
|
||||
value={current.bottom}
|
||||
inheritValue={inherit.bottom}
|
||||
negtive={negtive}
|
||||
highlight={current.bottom != undefined}
|
||||
compute={() => this.compute('bottom')}
|
||||
onChange={val => this.change(current, 'bottom', val)}
|
||||
/>
|
||||
|
||||
<div className="vs-layout-handle vs-handle-left" data-handle="left">
|
||||
<Icons name="style.handle" className="vs-handle-icon" size="12px" />
|
||||
</div>
|
||||
<InlineInput
|
||||
className="vs-layout-input-left"
|
||||
value={current.left}
|
||||
inheritValue={inherit.left}
|
||||
negtive={negtive}
|
||||
highlight={current.left != undefined}
|
||||
compute={() => this.compute('left')}
|
||||
onChange={val => this.change(current, 'left', val)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MarginAuto extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
};
|
||||
|
||||
setAuto(box) {
|
||||
box.left = 'auto';
|
||||
box.right = 'auto';
|
||||
if (isFull(box)) {
|
||||
utils.setPropertyValue(
|
||||
this.props,
|
||||
{
|
||||
margin: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
|
||||
'margin-top': null,
|
||||
'margin-right': null,
|
||||
'margin-bottom': null,
|
||||
'margin-left': null,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
utils.setPropertyValue(
|
||||
this.props,
|
||||
{
|
||||
margin: null,
|
||||
'margin-top': box.top,
|
||||
'margin-right': box.right,
|
||||
'margin-bottom': box.bottom,
|
||||
'margin-left': box.left,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const all = utils.getPropertyValue(this.props, 'margin');
|
||||
const top = utils.getPropertyValue(this.props, 'margin-top');
|
||||
const bottom = utils.getPropertyValue(this.props, 'margin-bottom');
|
||||
const right = utils.getPropertyValue(this.props, 'margin-right');
|
||||
const left = utils.getPropertyValue(this.props, 'margin-left');
|
||||
|
||||
const current = compositeMargin(
|
||||
all.current,
|
||||
top.current,
|
||||
right.current,
|
||||
bottom.current,
|
||||
left.current,
|
||||
);
|
||||
|
||||
const inherit = compositeMargin(
|
||||
all.inherit,
|
||||
top.inherit,
|
||||
right.inherit,
|
||||
bottom.inherit,
|
||||
left.inherit,
|
||||
);
|
||||
|
||||
const eright = utils.isEmptyCssValue(current.right) ? inherit.right : current.right;
|
||||
const eleft = utils.isEmptyCssValue(current.left) ? inherit.left : current.left;
|
||||
|
||||
const className = classNames('vs-margin-auto', {
|
||||
've-active': eright === 'auto' && eleft === 'auto',
|
||||
});
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={className}
|
||||
name="style.auto"
|
||||
size="medium"
|
||||
onClick={() => this.setAuto(current)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PaddingMargin extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-layout-padding-margin', this.props.className);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<LayoutBox
|
||||
className="vs-margin-box"
|
||||
name="margin"
|
||||
negtive
|
||||
{...this.props}
|
||||
/>
|
||||
|
||||
<LayoutBox className="vs-padding-box" name="padding" {...this.props} />
|
||||
|
||||
<MarginAuto {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PaddingMargin;
|
||||
@ -0,0 +1,10 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class Position extends Component {
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default Position;
|
||||
@ -0,0 +1,82 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import NumberControl from '@ali/ve-number-control';
|
||||
import utils from '../utils';
|
||||
function getRectSize(node, field) {
|
||||
const nativeNode = node;
|
||||
if (!nativeNode) return 0;
|
||||
return nativeNode.getBoundingClientRect()[field];
|
||||
}
|
||||
|
||||
function getPercent(node, field) {
|
||||
const nativeNode = node;
|
||||
if (!nativeNode) return 100;
|
||||
const parentNode = nativeNode.parentNode;
|
||||
if (!parentNode) return 100;
|
||||
const s = nativeNode.getBoundingClientRect()[field];
|
||||
const p = parentNode.getBoundingClientRect()[field];
|
||||
return (s / p * 100).toFixed(0);
|
||||
}
|
||||
|
||||
class Size extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
field: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutSizeSetter';
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames('vs-style-layout-size', this.props.className);
|
||||
const { field, node } = this.props;
|
||||
const { current, inherit } = utils.getPropertyValue(this.props, field);
|
||||
|
||||
return (
|
||||
<NumberControl
|
||||
className={className}
|
||||
placeholder={inherit}
|
||||
value={current}
|
||||
onChange={(val) => utils.setPropertyValue(this.props, field, val)}
|
||||
min={0}
|
||||
compute={() => `${getRectSize(node, field)}px`}
|
||||
units={[{
|
||||
type: 'px',
|
||||
cast(v, validNumber) {
|
||||
if (v === 'auto') {
|
||||
v = getRectSize(node, field);
|
||||
} else if (!validNumber) {
|
||||
v = '0';
|
||||
}
|
||||
return `${v}px`;
|
||||
},
|
||||
list: true,
|
||||
}, {
|
||||
type: '%',
|
||||
list: true,
|
||||
cast(v, validNumber) {
|
||||
if (v === 'auto') {
|
||||
return '100%';
|
||||
}
|
||||
v = getPercent(node, field) || '100';
|
||||
return `${v}%`;
|
||||
},
|
||||
}, {
|
||||
type: 'auto',
|
||||
preset: true,
|
||||
list: true,
|
||||
}, 'em', 'rem', 'pt', 'ex', 'ch', 'vh', 'vw', 'vmin', 'vmax', 'mm', 'q', 'cm', 'in', 'pc']}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Size;
|
||||
@ -0,0 +1,20 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import Size from './size';
|
||||
import utils from '../utils';
|
||||
|
||||
class Width extends Component {
|
||||
static propTypes = {
|
||||
prop: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
static displayName = 'StyleLayoutWidthSetter';
|
||||
|
||||
static transducer = utils.transducer;
|
||||
|
||||
render() {
|
||||
return <Size {...this.props} field="width" />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Width;
|
||||
@ -0,0 +1,633 @@
|
||||
@import "~@ali/ve-less-variables/index.less";
|
||||
@layout-handle-color: rgba(0, 0, 0, .3);
|
||||
// todo remove
|
||||
:root {
|
||||
--color-brand: #006cff;
|
||||
--color-brand-light: #197aff;
|
||||
--color-brand-dark: #0060e5;
|
||||
--color-canvas-background: rgba(31, 56, 88, 0.06);
|
||||
--color-icon-normal: rgba(31, 56, 88, 0.4);
|
||||
--color-icon-hover: rgba(31, 56, 88, 0.6);
|
||||
--color-icon-active: #006cff;
|
||||
--color-icon-reverse: #ffffff;
|
||||
--color-line-normal: rgba(31, 56, 88, 0.1);
|
||||
--color-line-darken: rgba(18, 32, 50, 0.1);
|
||||
--color-title: rgba(0, 0, 0, 0.8);
|
||||
--color-text: rgba(0, 0, 0, 0.6);
|
||||
--color-text-dark: rgba(0, 0, 0, 0.6);
|
||||
--color-text-light: rgba(26, 26, 26, 0.6);
|
||||
--color-text-reverse: rgba(255, 255, 255, 0.8);
|
||||
--color-text-regular: rgba(31, 56, 88, 0.8);
|
||||
--color-field-label: rgba(0, 0, 0, 0.4);
|
||||
--color-field-text: rgba(0, 0, 0, 0.6);
|
||||
--color-field-placeholder: rgba(31, 56, 88, 0.3);
|
||||
--color-field-border: rgba(31, 56, 88, 0.3);
|
||||
--color-field-border-hover: rgba(31, 56, 88, 0.4);
|
||||
--color-field-border-active: rgba(31, 56, 88, 0.6);
|
||||
--color-field-background: #ffffff;
|
||||
--color-function-success: #66bc5c;
|
||||
--color-function-success-dark: #4da243;
|
||||
--color-function-success-light: #88cb80;
|
||||
--color-function-warning: #fabd0e;
|
||||
--color-function-warning-dark: #d19c04;
|
||||
--color-function-warning-light: #fbcb40;
|
||||
--color-function-information: #2E76A6;
|
||||
--color-function-information-dark: #235a7e;
|
||||
--color-function-information-light: #3e91c9;
|
||||
--color-function-error: #f04631;
|
||||
--color-function-error-dark: #de2710;
|
||||
--color-function-error-light: #f37161;
|
||||
--color-pane-background: #ffffff;
|
||||
--color-block-background-normal: #ffffff;
|
||||
--color-block-background-light: rgba(31, 56, 88, 0.04);
|
||||
--color-block-background-shallow: rgba(31, 56, 88, 0.06);
|
||||
--color-block-background-dark: rgba(31, 56, 88, 0.1);
|
||||
--color-block-background-disabled: rgba(31, 56, 88, 0.2);
|
||||
--color-block-background-deep-dark: #BAC3CC;
|
||||
--color-layer-mask-background: rgba(0, 0, 0, 0.1);
|
||||
--color-layer-tooltip-background: rgba(44, 47, 51, 0.8);
|
||||
}
|
||||
|
||||
.gradient-dark-mixin() {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.gradient-white-mixin() {
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.border-dark-mixin() {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.vs-style {
|
||||
.vs-style-source {
|
||||
box-sizing: border-box;
|
||||
min-width: 80px;
|
||||
width: auto;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-brand, @brand-color-1);
|
||||
color: var(--color-text-reverse, @white-alpha-2);
|
||||
font-size: 12px;
|
||||
outline: 0;
|
||||
&:hover {
|
||||
background-color: var(--color-brand-dark, @brand-color-1-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.vs-flex-reverse {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.vs-flex-reverse-v {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.vs-style-reverse-h {
|
||||
transform-origin: center;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.vs-style-reverse-v {
|
||||
transform-origin: center;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.vs-style-reverse-v-h {
|
||||
transform-origin: center;
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.vs-style-rotate-180 {
|
||||
transform-origin: center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.vs-style-rotate-180-r {
|
||||
transform-origin: center;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.vs-style-rotate-90 {
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.vs-style-rotate-90-r {
|
||||
transform-origin: center;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.vs-style-rotate-45 {
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.vs-style-rotate-45-r {
|
||||
transform-origin: center;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.ve-field.vs-flex-field {
|
||||
display: flex;
|
||||
>.ve-field {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
&.ve-inline-field .ve-field-title {
|
||||
width: 20px;
|
||||
letter-spacing: 0;
|
||||
margin-right: 3px;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ve-field-title svg>* {
|
||||
fill: var(--color-icon-normal, @normal-alpha-4);
|
||||
}
|
||||
|
||||
.vs-style-layout {
|
||||
>.vs-field-display {
|
||||
>.ve-field-head>.ve-field-title {
|
||||
width: auto;
|
||||
margin-right: 3px;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
.vs-style-diplay {}
|
||||
.vs-style-layout-flex {
|
||||
margin: 8px 5px 5px;
|
||||
>.vs-style-flex-property {
|
||||
&:not(:first-child) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
>.ve-option {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vs-style-layout-padding-margin {
|
||||
// width: 190px;
|
||||
height: 107px;
|
||||
margin: 25px 32px;
|
||||
position: relative;
|
||||
.vs-layout-box {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
.vs-inline-input {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 16px;
|
||||
>.vs-inline-input-text {
|
||||
display: block;
|
||||
font-family: @font-family;
|
||||
color: @text-color;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
opacity: 0.6;
|
||||
cursor: text;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
>.vs-inline-input-input {
|
||||
font-family: @font-family;
|
||||
color: @text-color;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
padding: 0 2px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
&.vs-layout-input-top,
|
||||
&.vs-layout-input-bottom {
|
||||
left: 50%;
|
||||
margin-left: -18px;
|
||||
text-align: center;
|
||||
.vs-inline-input-input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.vs-layout-input-left,
|
||||
&.vs-layout-input-right {
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
&.vs-layout-input-top {
|
||||
top: -17px;
|
||||
}
|
||||
&.vs-layout-input-bottom {
|
||||
bottom: -17px;
|
||||
}
|
||||
&.vs-layout-input-left {
|
||||
left: -38px;
|
||||
text-align: right;
|
||||
.vs-inline-input-input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&.vs-layout-input-right {
|
||||
right: -38px;
|
||||
}
|
||||
}
|
||||
.vs-layout-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
border: solid 14px transparent;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.8;
|
||||
.vs-handle-icon {
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.vs-handle-top {
|
||||
top: 0;
|
||||
border-top-color: @layout-handle-color;
|
||||
border-bottom-width: 0;
|
||||
.vs-handle-icon {
|
||||
bottom: 1px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
&.vs-handle-right {
|
||||
right: 0;
|
||||
border-right-color: @layout-handle-color;
|
||||
border-left-width: 0;
|
||||
.vs-handle-icon {
|
||||
left: 1px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
&.vs-handle-bottom {
|
||||
bottom: 0;
|
||||
border-bottom-color: @layout-handle-color;
|
||||
border-top-width: 0;
|
||||
.vs-handle-icon {
|
||||
top: 1px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
}
|
||||
.vs-handle-inscription {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 1px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
transform-origin: left;
|
||||
transform: scale(0.6);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.vs-handle-left {
|
||||
left: 0;
|
||||
border-left-color: @layout-handle-color;
|
||||
border-right-width: 0;
|
||||
.vs-handle-icon {
|
||||
right: 1px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
&.vs-handle-top,
|
||||
&.vs-handle-bottom {
|
||||
height: 0;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
&.vs-handle-left,
|
||||
&.vs-handle-right {
|
||||
width: 0;
|
||||
bottom: 2px;
|
||||
top: 2px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.vs-padding-box {
|
||||
top: 18px;
|
||||
bottom: 18px;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
.vs-handle-icon>path {
|
||||
transform-origin: center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.vs-inline-input {
|
||||
&.vs-layout-input-top {
|
||||
top: 16px;
|
||||
}
|
||||
&.vs-layout-input-bottom {
|
||||
bottom: 16px;
|
||||
}
|
||||
&.vs-layout-input-left {
|
||||
left: 16px;
|
||||
text-align: left;
|
||||
.vs-inline-input-input {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&.vs-layout-input-right {
|
||||
right: 16px;
|
||||
text-align: right;
|
||||
.vs-inline-input-input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vs-margin-auto {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -35px;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
&.ve-active {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
.ve-highlight {
|
||||
.vs-inline-input-text {
|
||||
font-weight: bold;
|
||||
color: var(--color-brand, '#006cff') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vs-style-typography {
|
||||
.ve-field.ve-inline-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
>.ve-field-head .ve-field-title {
|
||||
width: 20px;
|
||||
margin-right: 3px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.ve-choice-control.ve-compact .ve-option {
|
||||
padding: 1px;
|
||||
}
|
||||
.vs-style-font-family {
|
||||
width: 100%;
|
||||
}
|
||||
.vs-style-font-weight {
|
||||
width: 143px;
|
||||
}
|
||||
.vs-style-font-color {
|
||||
width: 100%;
|
||||
}
|
||||
.vs-style-text-align {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vs-style-background {
|
||||
.ve-field.ve-inline-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
>.ve-field-head .ve-field-title {
|
||||
width: 20px;
|
||||
margin-right: 3px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.ve-choice-control.ve-compact .ve-option {
|
||||
padding: 1px;
|
||||
}
|
||||
.vs-style-background-color {
|
||||
width: 100%;
|
||||
}
|
||||
.vs-style-background-repeat {
|
||||
width: 126px;
|
||||
}
|
||||
.vs-style-background-image {
|
||||
width: 100%;
|
||||
}
|
||||
.vs-style-background-position {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.vs-style-position-preset {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: relative;
|
||||
.vs-preset-item {
|
||||
.gradient-white-mixin;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1px;
|
||||
transition: background 0.2s;
|
||||
opacity: 0.8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
&.ve-active {
|
||||
.gradient-dark-mixin;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.vs-preset-left-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
&.vs-preset-center-top {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
top: 0;
|
||||
}
|
||||
&.vs-preset-right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
&.vs-preset-left-center {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
&.vs-preset-center {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
&.vs-preset-right-center {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&.vs-preset-left-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
&.vs-preset-center-bottom {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
bottom: 0;
|
||||
>.ve-svgicon {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
&.vs-preset-right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
>.ve-svgicon {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vs-style-position-custom {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.vs-style-background-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.vs-style-bgsize-preset {}
|
||||
.vs-style-bgsize-custom {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vs-style-effects {
|
||||
.ve-field.ve-inline-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
>.ve-field-head .ve-field-title {
|
||||
width: 20px;
|
||||
margin-right: 3px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.ve-number-control.vs-style-opacity.ve-has-units {
|
||||
width: 100%;
|
||||
}
|
||||
.ve-select-control.vs-style-cursor {
|
||||
width: 100%;
|
||||
path {
|
||||
fill: var(--color-text, @normal-alpha-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vs-style-pseudo-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.vs-style-source {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.vs-style-pseudo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.vs-style-pseudo-select-control {
|
||||
width: 105px;
|
||||
}
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-button-mixin() {
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vs-style-border-style,
|
||||
.vs-style-border-radius {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
.border-dark-mixin;
|
||||
.vs-style-border-setter-left-pane,
|
||||
.vs-style-border-setter-right-pane {
|
||||
display: flex;
|
||||
}
|
||||
.vs-style-border-setter-right-pane {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ve-number-control,
|
||||
.ve-color-control,
|
||||
.ve-select-control {
|
||||
width: 80px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.vs-style-border-setter-left-pane {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.vs-style-border-setter-row {
|
||||
>div {
|
||||
.gradient-white-mixin;
|
||||
.control-button-mixin;
|
||||
}
|
||||
.vs-style-border-selected {
|
||||
.gradient-dark-mixin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ve-style-box-shadow-select {
|
||||
display: flex;
|
||||
.ve-color-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class Svg extends Component {
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default Svg;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignBaselineV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2V9zm1 1h2v3H3v-3z"/><path opacity=".4" d="M5 4h5v3H5z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignBaselineV.displayName = 'AlignBaselineV';
|
||||
|
||||
module.exports = AlignBaselineV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignBaseline(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 11" {...props}>
|
||||
<g fillRule="evenodd"><path d="M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z" opacity=".5"/><path d="M11 1h5v9h-5V1zm1 1h3v3h-3V2z"/><path opacity=".4" d="M6 5h3v5H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignBaseline.displayName = 'AlignBaseline';
|
||||
|
||||
module.exports = AlignBaseline;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignCenterV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 9 17" {...props}>
|
||||
<g fillRule="evenodd"><path d="M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z" opacity=".5"/><path d="M0 9h9v5H0z"/><path opacity=".4" d="M1 4h7v3H1z"/><path d="M1 4v3h7V4H1zM0 3h9v5H0V3z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignCenterV.displayName = 'AlignCenterV';
|
||||
|
||||
module.exports = AlignCenterV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignCenter(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 9" {...props}>
|
||||
<g fillRule="evenodd"><path d="M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z" opacity=".5"/><path d="M11 0h5v9h-5z"/><path opacity=".4" d="M6 1h3v7H6z"/><path d="M6 1v7h3V1H6zM5 0h5v9H5V0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignCenter.displayName = 'AlignCenter';
|
||||
|
||||
module.exports = AlignCenter;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignEndV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"/><path d="M13 9h9v5h-9z"/><path opacity=".4" d="M14 4h7v3h-7z"/><path d="M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignEndV.displayName = 'AlignEndV';
|
||||
|
||||
module.exports = AlignEndV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignEnd(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0z"/><path d="M11 7h5v9h-5z"/><path opacity=".4" d="M6 8h3v7H6z"/><path d="M6 8v7h3V8H6zM5 7h5v9H5V7z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignEnd.displayName = 'AlignEnd';
|
||||
|
||||
module.exports = AlignEnd;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignStartV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2z"/><path opacity=".4" d="M3 4h7v3H3z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignStartV.displayName = 'AlignStartV';
|
||||
|
||||
module.exports = AlignStartV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignStart(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M11 2h5v9h-5z"/><path opacity=".4" d="M6 3h3v7H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignStart.displayName = 'AlignStart';
|
||||
|
||||
module.exports = AlignStart;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignStretchV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1zM0 0h1v17H0z"/><path d="M2 9h20v5H2z"/><path opacity=".4" d="M3 4h18v3H3z"/><path d="M3 4v3h18V4H3zM2 3h20v5H2V3z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignStretchV.displayName = 'AlignStretchV';
|
||||
|
||||
module.exports = AlignStretchV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function AlignStretch(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"/><path d="M11 2h5v14h-5z"/><path opacity=".4" d="M6 3h3v12H6z"/><path d="M6 3v12h3V3H6zM5 2h5v14H5V2z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
AlignStretch.displayName = 'AlignStretch';
|
||||
|
||||
module.exports = AlignStretch;
|
||||
@ -0,0 +1,17 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Auto(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M486.4 102.4l51.2 0 0 409.6-51.2 0 0-409.6Z"/>
|
||||
<path d="M486.4 819.2l51.2 0 0 102.4-51.2 0 0-102.4Z"/>
|
||||
<path d="M307.2 204.8l409.6 0 0 256-409.6 0 0-256Z"/>
|
||||
<path d="M768 563.2l0 204.8L256 768l0-204.8L768 563.2M819.2 512 204.8 512l0 307.2 614.4 0L819.2 512 819.2 512z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Auto.displayName = 'Auto';
|
||||
|
||||
module.exports = Auto;
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Block(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 22 14" {...props}>
|
||||
<path opacity=".15" d="M19 3v8H3V3h16m1-1H2v10h18V2z"/>
|
||||
<path d="M19.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h17.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 19.8 1zm.2 11H2V2h18v10z"/>
|
||||
<path opacity=".35" d="M3 3h16v8H3z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Block.displayName = 'Block';
|
||||
|
||||
module.exports = Block;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Blur(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M598.016 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 726.016q18.005333 0 31.018667 11.989333t13.013333 29.994667-13.013333 29.994667-31.018667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM425.984 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 873.984q20.010667 0 20.010667 22.016t-20.010667 22.016q-22.016 0-22.016-22.016t22.016-22.016zM598.016 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-31.018667-11.989333-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333zM896 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM768 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM768 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333zM425.984 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 297.984q-18.005333 0-29.994667-11.989333t-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333 31.018667 11.989333 13.013333 29.994667-13.013333 29.994667-31.018667 11.989333zM425.984 150.016q-20.010667 0-20.010667-22.016t20.010667-22.016q22.016 0 22.016 22.016t-22.016 22.016zM425.984 873.984q22.016 0 22.016 22.016t-22.016 22.016q-20.010667 0-20.010667-22.016t20.010667-22.016zM128 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM598.016 150.016q-22.016 0-22.016-22.016t22.016-22.016q20.010667 0 20.010667 22.016t-20.010667 22.016zM598.016 297.984q-18.005333 0-31.018667-11.989333t-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333 29.994667 11.989333 11.989333 29.994667-11.989333 29.994667-29.994667 11.989333zM896 448q-22.016 0-22.016-22.016 0-20.010667 22.016-20.010667t22.016 20.010667q0 22.016-22.016 22.016zM256 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM128 406.016q22.016 0 22.016 20.010667 0 22.016-22.016 22.016t-22.016-22.016q0-20.010667 22.016-20.010667zM256 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM256 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM256 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Blur.displayName = 'Blur';
|
||||
|
||||
module.exports = Blur;
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function BorderAll(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 20" {...props}>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fillRule="evenodd">
|
||||
<g transform="translate(-40.000000, -40.000000)">
|
||||
<g transform="translate(40.000000, 40.000000)">
|
||||
<g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
|
||||
<rect x="4" y="4" width="12" height="12"/>
|
||||
<path d="M0,-1.77635684e-15 L20,-1.77635684e-15 L20,20 L0,20 L0,-1.77635684e-15 Z M4,4 L16,4 L16,16 L4,16 L4,4 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
BorderAll.displayName = 'BorderAll';
|
||||
|
||||
module.exports = BorderAll;
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function BorderBottom(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 20" {...props}>
|
||||
<g stroke="none" stroke-width="1" fillRule="evenodd">
|
||||
<g transform="translate(-40.000000, -40.000000)">
|
||||
<rect x="30" y="30" width="40" height="40"/>
|
||||
<g transform="translate(40.000000, 40.000000)">
|
||||
<g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) ">
|
||||
<rect x="0" y="0" width="20" height="4"/>
|
||||
<rect x="0" y="4" width="20" height="16"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
BorderBottom.displayName = 'BorderBottom';
|
||||
|
||||
module.exports = BorderBottom;
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function BorderLeft(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 20" {...props}>
|
||||
<g stroke="none" stroke-width="1" fillRule="evenodd">
|
||||
<g transform="translate(-40.000000, -40.000000)">
|
||||
<rect x="30" y="30" width="40" height="40"/>
|
||||
<g transform="translate(40.000000, 40.000000)">
|
||||
<g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
|
||||
<rect x="0" y="-1.77635684e-15" width="20" height="4"/>
|
||||
<rect x="0" y="4" width="20" height="16"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
BorderLeft.displayName = 'BorderLeft';
|
||||
|
||||
module.exports = BorderLeft;
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function BorderRight(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 20" {...props}>
|
||||
<g stroke="none" stroke-width="1" fillRule="evenodd">
|
||||
<g transform="translate(-40.000000, -40.000000)">
|
||||
<rect x="30" y="30" width="40" height="40"/>
|
||||
<g transform="translate(40.000000, 40.000000)">
|
||||
<g transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) ">
|
||||
<rect x="0" y="0" width="20" height="4"/>
|
||||
<rect x="0" y="4" width="20" height="16"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
BorderRight.displayName = 'BorderRight';
|
||||
|
||||
module.exports = BorderRight;
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function BorderTop(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 20" {...props}>
|
||||
<g stroke="none" stroke-width="1" fillRule="evenodd">
|
||||
<g transform="translate(-40.000000, -40.000000)">
|
||||
<g transform="translate(40.000000, 40.000000)">
|
||||
<g>
|
||||
<rect x="0" y="0" width="20" height="4"/>
|
||||
<rect x="0" y="4" width="20" height="16"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
BorderTop.displayName = 'BorderTop';
|
||||
|
||||
module.exports = BorderTop;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Capitalize(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M20.6470588,3.95798319 L24,3.95798319 L23.8739496,5.77310924 C23.403359,5.6722684 22.903364,5.60084055 22.3739496,5.55882353 C21.8445352,5.51680651 21.2689107,5.49579832 20.6470588,5.49579832 L20.6470588,14.2941176 C20.6470588,15.0504239 21.016803,15.4285714 21.7563025,15.4285714 C22.1428591,15.4285714 22.4075623,15.3235305 22.5504202,15.1134454 C22.693278,14.9033603 22.7647059,14.6302538 22.7647059,14.2941176 L22.7647059,12.8319328 L24,12.8319328 L24,13.9411765 C24,14.3949603 23.953782,14.8067208 23.8613445,15.1764706 C23.7689071,15.5462203 23.6008416,15.8613432 23.3571429,16.1218487 C23.1134442,16.3823542 22.789918,16.5882345 22.3865546,16.7394958 C21.9831913,16.8907571 21.4705913,16.9663866 20.8487395,16.9663866 C19.5378086,16.9663866 18.6008432,16.6722718 18.0378151,16.0840336 C17.4747871,15.4957954 17.1932773,14.6722742 17.1932773,13.6134454 L17.1932773,5.49579832 L15,5.49579832 L15,4.28571429 C15.4705906,4.25210067 15.9117626,4.18487445 16.3235294,4.08403361 C16.7352962,3.98319277 17.0966371,3.80672395 17.407563,3.55462185 C17.7184889,3.30251975 17.962184,2.9495821 18.1386555,2.49579832 C18.3151269,2.04201454 18.4033613,1.45378513 18.4033613,0.731092437 L18.4033613,0.176470588 L20.6470588,0 L20.6470588,3.95798319 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Capitalize.displayName = 'Capitalize';
|
||||
|
||||
module.exports = Capitalize;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Center(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M0 472.615385h393.846154v78.76923H0zM630.153846 472.615385h393.846154v78.76923H630.153846zM472.615385 0h78.76923v393.846154h-78.76923zM472.615385 630.153846h78.76923v393.846154h-78.76923z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Center.displayName = 'Center';
|
||||
|
||||
module.exports = Center;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Color(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 17" {...props}>
|
||||
<path d="M7.057923,6.94048365 C7.04979017,6.90724028 7.03471462,6.87699953 7.01408497,6.85190615 L4.23205608,1.83580276 L3.7688805,1 L3.30530819,1.83558828 L0.506021801,6.88386268 C0.49907913,6.8965166 0.493524987,6.90938501 0.489161015,6.92289683 C0.169202902,7.53478935 0,8.2260371 0,8.92500579 C0,11.1720434 1.69064045,13 3.76907885,13 C5.84712054,13 7.53795938,11.1720434 7.53795938,8.92500579 C7.53795938,8.23268578 7.37212861,7.54808671 7.057923,6.94048365 L7.057923,6.94048365 Z"/>
|
||||
<path d="M14.296,10.288 L8.944,10.288 L7.408,14.152 C7.3279996,14.344001 7.288,14.5039994 7.288,14.632 C7.288,14.9680017 7.77599512,15.2079993 8.752,15.352 C8.86400056,15.3680001 8.9399998,15.4119996 8.98,15.484 C9.0200002,15.5560004 9.04,15.6399995 9.04,15.736 C9.04,15.8320005 9.02400016,15.9599992 8.992,16.12 C8.55999784,16.0879998 8.1040024,16.0600001 7.624,16.036 C7.1439976,16.0119999 6.67200232,16 6.208,16 C5.8879984,16 5.56000168,16.0079999 5.224,16.024 C4.88799832,16.0400001 4.53600184,16.0719998 4.168,16.12 C4.13599984,15.9919994 4.12,15.8640006 4.12,15.736 C4.12,15.6239994 4.1399998,15.5280004 4.18,15.448 C4.2200002,15.3679996 4.30399936,15.3200001 4.432,15.304 C4.92800248,15.2239996 5.29999876,15.1240006 5.548,15.004 C5.79600124,14.8839994 5.97599944,14.6960013 6.088,14.44 L11.872,0.52 C11.9840006,0.24799864 12.135999,0.112 12.328,0.112 C12.3920003,0.112 12.4879994,0.12799984 12.616,0.16 L18.424,14.512 C18.5200005,14.7360011 18.7359983,14.9119994 19.072,15.04 C19.4080017,15.1680006 19.7359984,15.2559998 20.056,15.304 C20.1520005,15.3360002 20.2279997,15.3799997 20.284,15.436 C20.3400003,15.4920003 20.368,15.5919993 20.368,15.736 C20.368,15.8320005 20.3520002,15.9599992 20.32,16.12 C19.8079974,16.0879998 19.3040025,16.0600001 18.808,16.036 C18.3119975,16.0119999 17.8480022,16 17.416,16 C16.9679978,16 16.4560029,16.0119999 15.88,16.036 C15.3039971,16.0600001 14.7840023,16.0879998 14.32,16.12 C14.2879998,15.9599992 14.272,15.8320005 14.272,15.736 C14.272,15.5919993 14.2999997,15.4920003 14.356,15.436 C14.4120003,15.3799997 14.4639998,15.352 14.512,15.352 C14.9280021,15.2719996 15.2639987,15.1800005 15.52,15.076 C15.7760013,14.9719995 15.904,14.816001 15.904,14.608 C15.904,14.5119995 15.8720003,14.3920007 15.808,14.248 L14.296,10.288 Z M13.912,9.304 L11.68,3.424 L9.352,9.304 L13.912,9.304 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Color.displayName = 'Color';
|
||||
|
||||
module.exports = Color;
|
||||
@ -0,0 +1,17 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Contain(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 34 20" {...props}>
|
||||
<g fillRule="evenodd">
|
||||
<path d="M28,3 L28,17 L6,17 L6,3 L28,3 Z M10.6221729,13.9997445 C10.5839635,14.0888999 10.5584905,14.1907918 10.5584905,14.2799471 C10.5584905,14.3945754 10.5839635,14.5092038 10.6476459,14.6110956 C10.7622742,14.8021428 10.9660579,14.9167712 11.1825781,14.9167712 L22.518046,14.9167712 C22.7345662,14.9167712 22.9383499,14.8021428 23.0529782,14.6110956 C23.1166606,14.5092038 23.1421336,14.3945754 23.1421336,14.2799471 C23.1421336,14.1780553 23.1166606,14.0888999 23.0784512,13.9997445 L19.2702434,6.38332901 C19.1683516,6.17954532 18.9645679,6.05218051 18.7480477,6.03944403 L18.7098383,6.03944403 C18.4933181,6.03944403 18.3022709,6.14133587 18.1749061,6.3196466 L15.2455155,11.0066715 L14.1501781,9.18535479 C14.0355498,9.07072646 13.8699756,8.99430758 13.7044013,8.99430758 C13.6661919,8.99430758 13.6407189,8.99430758 13.6025095,9.00704406 C13.3987258,9.0452535 13.2331515,9.17261831 13.1312597,9.35092904 L10.6221729,13.9997445 L10.6221729,13.9997445 L10.6221729,13.9997445 Z M13.9279567,6.11938052 C13.9279567,5.20788931 13.1811928,4.46112543 12.2697016,4.46112543 C11.3582104,4.46112543 10.6114465,5.20788931 10.6114465,6.11938052 C10.6114465,7.03087172 11.3582104,7.7776356 12.2697016,7.7776356 C13.1811928,7.7776356 13.9279567,7.04185354 13.9279567,6.11938052 L13.9279567,6.11938052 L13.9279567,6.11938052 Z"/>
|
||||
<path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z" opacity="0.6"/>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Contain.displayName = 'Contain';
|
||||
|
||||
module.exports = Contain;
|
||||
@ -0,0 +1,17 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Cover(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 34 23" {...props}>
|
||||
<g fillRule="evenodd">
|
||||
<path d="M31,3 L31,23 L3,23 L3,3 L31,3 Z M8.46071454,19.1879428 C8.40310965,19.3223542 8.36470639,19.4759672 8.36470639,19.6103786 C8.36470639,19.7831933 8.40310965,19.956008 8.49911781,20.1096211 C8.67193249,20.3976455 8.97915858,20.5704602 9.30558631,20.5704602 L26.3950378,20.5704602 C26.7214656,20.5704602 27.0286916,20.3976455 27.2015063,20.1096211 C27.2975145,19.956008 27.3359177,19.7831933 27.3359177,19.6103786 C27.3359177,19.4567656 27.2975145,19.3223542 27.2399096,19.1879428 L21.4986219,7.70536748 C21.3450089,7.39814138 21.0377828,7.20612507 20.7113551,7.18692344 L20.6537502,7.18692344 C20.3273225,7.18692344 20.039298,7.34053649 19.8472817,7.60935932 L15.4309066,14.6755595 L13.7795663,11.9297263 C13.6067516,11.7569116 13.3571304,11.6417018 13.1075092,11.6417018 C13.0499043,11.6417018 13.0115011,11.6417018 12.9538962,11.6609034 C12.6466701,11.7185083 12.3970489,11.9105246 12.2434358,12.1793475 L8.46071454,19.1879428 L8.46071454,19.1879428 L8.46071454,19.1879428 Z M13.4445433,7.3074364 C13.4445433,5.93326421 12.3187155,4.8074364 10.9445433,4.8074364 C9.57037111,4.8074364 8.4445433,5.93326421 8.4445433,7.3074364 C8.4445433,8.68160858 9.57037111,9.8074364 10.9445433,9.8074364 C12.3187155,9.8074364 13.4445433,8.69816488 13.4445433,7.3074364 L13.4445433,7.3074364 L13.4445433,7.3074364 Z"/>
|
||||
<path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z"/>
|
||||
</g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Cover.displayName = 'Cover';
|
||||
|
||||
module.exports = Cover;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function CursorDefault(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M256 0l612.650667 573.824-250.282667 22.741333-45.44 4.096 18.901333 41.557333 151.850667 332.544L631.68 1024l-144.896-336.128-18.176-42.368-33.578667 31.530667-177.792 166.741333L256 0"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
CursorDefault.displayName = 'CursorDefault';
|
||||
|
||||
module.exports = CursorDefault;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function CursorPointer(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M426.666667 85.333333C473.6 85.333333 512 123.733333 512 170.666667L512 362.666667C512 362.666667 597.333333 352 597.333333 394.666667 597.333333 394.666667 682.666667 384 682.666667 426.666667 682.666667 426.666667 768 416 768 458.666667 768 458.666667 853.333333 448 853.333333 490.666667L853.333333 640C853.333333 682.666667 725.333333 896 725.333333 938.666667L384 938.666667C384 938.666667 298.666667 640 170.666667 554.666667 170.666667 554.666667 128 298.666667 341.333333 512L341.333333 170.666667C341.333333 123.733333 379.733333 85.333333 426.666667 85.333333Z">
|
||||
</path>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
CursorPointer.displayName = 'CursorPointer';
|
||||
|
||||
module.exports = CursorPointer;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Cursor(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M597.333333 981.333333C597.333333 981.333333 597.333333 981.333333 597.333333 981.333333c-17.066667 0-34.133333-12.8-38.4-29.866667l-98.133333-294.4c-8.533333-21.333333 4.266667-46.933333 25.6-55.466667 21.333333-8.533333 46.933333 4.266667 55.466667 25.6l59.733333 183.466667 260.266667-652.8L209.066667 422.4l183.466667 59.733333c21.333333 8.533333 34.133333 29.866667 25.6 55.466667-8.533333 21.333333-29.866667 34.133333-55.466667 25.6l-294.4-98.133333C55.466667 460.8 42.666667 443.733333 42.666667 426.666667c0-17.066667 8.533333-34.133333 25.6-42.666667l853.333333-341.333333C938.666667 38.4 955.733333 42.666667 968.533333 55.466667 981.333333 68.266667 985.6 85.333333 977.066667 102.4l-341.333333 853.333333C631.466667 972.8 614.4 981.333333 597.333333 981.333333z"/>
|
||||
<path d="M170.666667 981.333333c-34.133333 0-64-12.8-89.6-38.4-51.2-51.2-51.2-132.266667 0-179.2l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C132.266667 832 128 840.533333 128 853.333333s4.266667 21.333333 12.8 29.866667c17.066667 17.066667 42.666667 17.066667 59.733333 0l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C234.666667 968.533333 204.8 981.333333 170.666667 981.333333z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Cursor.displayName = 'Cursor';
|
||||
|
||||
module.exports = Cursor;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Dir(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M814.622854 508.742816 514.923074 145.338133 209.3751 508.742816 448.612832 508.742816 448.612832 878.661867 575.386144 878.661867 575.386144 508.742816Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Dir.displayName = 'Dir';
|
||||
|
||||
module.exports = Dir;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function DirectionColumn(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 9 18" {...props}>
|
||||
<g fillRule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"/><path opacity=".4" d="M1 1h7v3H1z"/><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
DirectionColumn.displayName = 'DirectionColumn';
|
||||
|
||||
module.exports = DirectionColumn;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function DirectionRow(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 19 9" {...props}>
|
||||
<g fillRule="evenodd"><path d="M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"/><path opacity=".4" d="M1 1h3v7H1z"/><path d="M1 1v7h3V1H1zM0 0h5v9H0V0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
DirectionRow.displayName = 'DirectionRow';
|
||||
|
||||
module.exports = DirectionRow;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Fill(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Fill.displayName = 'Fill';
|
||||
|
||||
module.exports = Fill;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Fixed(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M314.816 666.624l-187.52-198.72 177.792 44.096 285.952-265.024L591.04 129.152l305.472 309.248L760.832 431.04 516.16 732.928l29.184 161.984L365.184 710.848l-233.472 183.552L314.816 666.624z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Fixed.displayName = 'Fixed';
|
||||
|
||||
module.exports = Fixed;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Flex(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 23 14" {...props}>
|
||||
<g fillRule="evenodd"><path d="M21 2v10H2V2h19zm1-1H1v12h21V1z" opacity=".15"/><path d="M1.2 0A1.2 1.2 0 0 0 0 1.2v11.6A1.2 1.2 0 0 0 1.2 14h20.6a1.2 1.2 0 0 0 1.2-1.2V1.2A1.2 1.2 0 0 0 21.8 0H1.2zM22 13H1V1h21v12z"/><path opacity=".4" d="M3 3h5v8H3z"/><path d="M4 4v6h3V4H4zm4-1v8H3V3h5z"/><path opacity=".4" d="M9 3h5v8H9z"/><path d="M10 4v6h3V4h-3zm4-1v8H9V3h5z"/><path opacity=".4" d="M15 3h5v8h-5z"/><path d="M16 4v6h3V4h-3zm4-1v8h-5V3h5z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Flex.displayName = 'Flex';
|
||||
|
||||
module.exports = Flex;
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function FontSize(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 25 17" {...props}>
|
||||
<path d="M5.194,7.474 L5.194,14.95 C5.194,15.1646677 5.28266578,15.3163329 5.46,15.405 C5.63733422,15.4936671 5.9359979,15.5613331 6.356,15.608 C6.45866718,15.608 6.51,15.6826659 6.51,15.832 C6.51,15.8973337 6.50066676,15.9766662 6.482,16.07 C6.18333184,16.0513332 5.86833499,16.0350001 5.537,16.021 C5.20566501,16.0069999 4.87200168,16 4.536,16 C4.2093317,16 3.87566837,16.0069999 3.535,16.021 C3.19433163,16.0350001 2.87466816,16.0513332 2.576,16.07 C2.55733324,15.9766662 2.548,15.8973337 2.548,15.832 C2.548,15.7013327 2.5946662,15.6266668 2.688,15.608 C3.1080021,15.5519997 3.4113324,15.4820004 3.598,15.398 C3.7846676,15.3139996 3.878,15.1646677 3.878,14.95 L3.878,7.474 L2.436,7.474 C2.1559986,7.474 1.92033429,7.50199972 1.729,7.558 C1.53766571,7.61400028 1.3720007,7.69799944 1.232,7.81 C1.0919993,7.92200056 0.97066718,8.06666578 0.868,8.244 C0.76533282,8.42133422 0.65800056,8.6266655 0.546,8.86 C0.52733324,8.9066669 0.49700021,8.93933324 0.455,8.958 C0.41299979,8.97666676 0.37333352,8.986 0.336,8.986 C0.23333282,8.986 0.14466704,8.95800028 0.07,8.902 C0.1633338,8.56599832 0.2333331,8.26733464 0.28,8.006 C0.3266669,7.74466536 0.36866648,7.52766753 0.406,7.355 C0.44333352,7.18233247 0.48299979,7.0493338 0.525,6.956 C0.56700021,6.8626662 0.6346662,6.816 0.728,6.816 C0.79333366,6.816 0.88666606,6.82066662 1.008,6.83 C1.12933394,6.83933338 1.25766599,6.84866662 1.393,6.858 C1.52833401,6.86733338 1.6659993,6.87666662 1.806,6.886 C1.9460007,6.89533338 2.07666606,6.9 2.198,6.9 L6.874,6.9 C6.98600056,6.9 7.1119993,6.89533338 7.252,6.886 C7.3920007,6.87666662 7.5319993,6.86733338 7.672,6.858 C7.8120007,6.84866662 7.94033275,6.83933338 8.057,6.83 C8.17366725,6.82066662 8.26933296,6.816 8.344,6.816 C8.4373338,6.816 8.50499979,6.86499951 8.547,6.963 C8.58900021,7.06100049 8.62866648,7.19866578 8.666,7.376 C8.70333352,7.55333422 8.74299979,7.77266536 8.785,8.034 C8.82700021,8.29533464 8.89933282,8.58466508 9.002,8.902 C8.9553331,8.92066676 8.91100021,8.93933324 8.869,8.958 C8.82699979,8.97666676 8.77800028,8.986 8.722,8.986 C8.68466648,8.986 8.6426669,8.97666676 8.596,8.958 C8.5493331,8.93933324 8.51666676,8.9066669 8.498,8.86 C8.39533282,8.6266655 8.29266718,8.42133422 8.19,8.244 C8.08733282,8.06666578 7.96833401,7.92200056 7.833,7.81 C7.69766599,7.69799944 7.53433429,7.61400028 7.343,7.558 C7.15166571,7.50199972 6.9160014,7.474 6.636,7.474 L5.194,7.474 Z M17.962,1.384 L17.962,14.2 C17.962,14.5680018 18.1139985,14.8279992 18.418,14.98 C18.7220015,15.1320008 19.2339964,15.2479996 19.954,15.328 C20.1300009,15.328 20.218,15.4559987 20.218,15.712 C20.218,15.8240006 20.2020002,15.9599992 20.17,16.12 C19.6579974,16.0879998 19.1180028,16.0600001 18.55,16.036 C17.9819972,16.0119999 17.4100029,16 16.834,16 C16.2739972,16 15.7020029,16.0119999 15.118,16.036 C14.5339971,16.0600001 13.9860026,16.0879998 13.474,16.12 C13.4419998,15.9599992 13.426,15.8240006 13.426,15.712 C13.426,15.4879989 13.5059992,15.3600002 13.666,15.328 C14.3860036,15.2319995 14.9059984,15.1120007 15.226,14.968 C15.5460016,14.8239993 15.706,14.5680018 15.706,14.2 L15.706,1.384 L13.234,1.384 C12.7539976,1.384 12.3500016,1.43199952 12.022,1.528 C11.6939984,1.62400048 11.4100012,1.76799904 11.17,1.96 C10.9299988,2.15200096 10.7220009,2.39999848 10.546,2.704 C10.3699991,3.00800152 10.186001,3.359998 9.994,3.76 C9.96199984,3.8400004 9.91000036,3.89599984 9.838,3.928 C9.76599964,3.96000016 9.69800032,3.976 9.634,3.976 C9.45799912,3.976 9.30600064,3.92800048 9.178,3.832 C9.3380008,3.25599712 9.4579996,2.74400224 9.538,2.296 C9.6180004,1.84799776 9.68999968,1.47600148 9.754,1.18 C9.81800032,0.88399852 9.88599964,0.6560008 9.958,0.496 C10.0300004,0.3359992 10.1459992,0.256 10.306,0.256 C10.4180006,0.256 10.577999,0.26399992 10.786,0.28 C10.994001,0.29600008 11.2139988,0.31199992 11.446,0.328 C11.6780012,0.34400008 11.9139988,0.35999992 12.154,0.376 C12.3940012,0.39200008 12.617999,0.4 12.826,0.4 L20.842,0.4 C21.034001,0.4 21.2499988,0.39200008 21.49,0.376 C21.7300012,0.35999992 21.9699988,0.34400008 22.21,0.328 C22.4500012,0.31199992 22.669999,0.29600008 22.87,0.28 C23.070001,0.26399992 23.2339994,0.256 23.362,0.256 C23.5220008,0.256 23.6379996,0.33999916 23.71,0.508 C23.7820004,0.67600084 23.8499997,0.91199848 23.914,1.216 C23.9780003,1.52000152 24.0459996,1.89599776 24.118,2.344 C24.1900004,2.79200224 24.3139991,3.28799728 24.49,3.832 C24.4099996,3.86400016 24.3340004,3.89599984 24.262,3.928 C24.1899996,3.96000016 24.1060005,3.976 24.01,3.976 C23.9459997,3.976 23.8740004,3.96000016 23.794,3.928 C23.7139996,3.89599984 23.6580002,3.8400004 23.626,3.76 C23.4499991,3.359998 23.2740009,3.00800152 23.098,2.704 C22.9219991,2.39999848 22.7180012,2.15200096 22.486,1.96 C22.2539988,1.76799904 21.9740016,1.62400048 21.646,1.528 C21.3179984,1.43199952 20.9140024,1.384 20.434,1.384 L17.962,1.384 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
FontSize.displayName = 'FontSize';
|
||||
|
||||
module.exports = FontSize;
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function FontWeight(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 30 17" {...props}>
|
||||
<path d="M10.296,10.288 L4.944,10.288 L3.408,14.152 C3.3279996,14.344001 3.288,14.5039994 3.288,14.632 C3.288,14.9680017 3.77599512,15.2079993 4.752,15.352 C4.86400056,15.3680001 4.9399998,15.4119996 4.98,15.484 C5.0200002,15.5560004 5.04,15.6399995 5.04,15.736 C5.04,15.8320005 5.02400016,15.9599992 4.992,16.12 C4.55999784,16.0879998 4.1040024,16.0600001 3.624,16.036 C3.1439976,16.0119999 2.67200232,16 2.208,16 C1.8879984,16 1.56000168,16.0079999 1.224,16.024 C0.88799832,16.0400001 0.53600184,16.0719998 0.168,16.12 C0.13599984,15.9919994 0.12,15.8640006 0.12,15.736 C0.12,15.6239994 0.1399998,15.5280004 0.18,15.448 C0.2200002,15.3679996 0.30399936,15.3200001 0.432,15.304 C0.92800248,15.2239996 1.29999876,15.1240006 1.548,15.004 C1.79600124,14.8839994 1.97599944,14.6960013 2.088,14.44 L7.872,0.52 C7.98400056,0.24799864 8.13599904,0.112 8.328,0.112 C8.39200032,0.112 8.48799936,0.12799984 8.616,0.16 L14.424,14.512 C14.5200005,14.7360011 14.7359983,14.9119994 15.072,15.04 C15.4080017,15.1680006 15.7359984,15.2559998 16.056,15.304 C16.1520005,15.3360002 16.2279997,15.3799997 16.284,15.436 C16.3400003,15.4920003 16.368,15.5919993 16.368,15.736 C16.368,15.8320005 16.3520002,15.9599992 16.32,16.12 C15.8079974,16.0879998 15.3040025,16.0600001 14.808,16.036 C14.3119975,16.0119999 13.8480022,16 13.416,16 C12.9679978,16 12.4560029,16.0119999 11.88,16.036 C11.3039971,16.0600001 10.7840023,16.0879998 10.32,16.12 C10.2879998,15.9599992 10.272,15.8320005 10.272,15.736 C10.272,15.5919993 10.2999997,15.4920003 10.356,15.436 C10.4120003,15.3799997 10.4639998,15.352 10.512,15.352 C10.9280021,15.2719996 11.2639987,15.1800005 11.52,15.076 C11.7760013,14.9719995 11.904,14.816001 11.904,14.608 C11.904,14.5119995 11.8720003,14.3920007 11.808,14.248 L10.296,10.288 Z M9.912,9.304 L7.68,3.424 L5.352,9.304 L9.912,9.304 Z" opacity="0.7"/>
|
||||
<path d="M16.296,10.288 L10.944,10.288 L9.408,14.152 C9.3279996,14.344001 9.288,14.5039994 9.288,14.632 C9.288,14.9680017 9.77599512,15.2079993 10.752,15.352 C10.8640006,15.3680001 10.9399998,15.4119996 10.98,15.484 C11.0200002,15.5560004 11.04,15.6399995 11.04,15.736 C11.04,15.8320005 11.0240002,15.9599992 10.992,16.12 C10.5599978,16.0879998 10.1040024,16.0600001 9.624,16.036 C9.1439976,16.0119999 8.67200232,16 8.208,16 C7.8879984,16 7.56000168,16.0079999 7.224,16.024 C6.88799832,16.0400001 6.53600184,16.0719998 6.168,16.12 C6.13599984,15.9919994 6.12,15.8640006 6.12,15.736 C6.12,15.6239994 6.1399998,15.5280004 6.18,15.448 C6.2200002,15.3679996 6.30399936,15.3200001 6.432,15.304 C6.92800248,15.2239996 7.29999876,15.1240006 7.548,15.004 C7.79600124,14.8839994 7.97599944,14.6960013 8.088,14.44 L13.872,0.52 C13.9840006,0.24799864 14.135999,0.112 14.328,0.112 C14.3920003,0.112 14.4879994,0.12799984 14.616,0.16 L20.424,14.512 C20.5200005,14.7360011 20.7359983,14.9119994 21.072,15.04 C21.4080017,15.1680006 21.7359984,15.2559998 22.056,15.304 C22.1520005,15.3360002 22.2279997,15.3799997 22.284,15.436 C22.3400003,15.4920003 22.368,15.5919993 22.368,15.736 C22.368,15.8320005 22.3520002,15.9599992 22.32,16.12 C21.8079974,16.0879998 21.3040025,16.0600001 20.808,16.036 C20.3119975,16.0119999 19.8480022,16 19.416,16 C18.9679978,16 18.4560029,16.0119999 17.88,16.036 C17.3039971,16.0600001 16.7840023,16.0879998 16.32,16.12 C16.2879998,15.9599992 16.272,15.8320005 16.272,15.736 C16.272,15.5919993 16.2999997,15.4920003 16.356,15.436 C16.4120003,15.3799997 16.4639998,15.352 16.512,15.352 C16.9280021,15.2719996 17.2639987,15.1800005 17.52,15.076 C17.7760013,14.9719995 17.904,14.816001 17.904,14.608 C17.904,14.5119995 17.8720003,14.3920007 17.808,14.248 L16.296,10.288 Z M15.912,9.304 L13.68,3.424 L11.352,9.304 L15.912,9.304 Z" opacity="0.9"/>
|
||||
<path d="M22.96,10.72 L17.92,10.72 L16.672,14.056 C16.6239998,14.1360004 16.5920001,14.2239995 16.576,14.32 C16.5599999,14.4160005 16.552,14.4879998 16.552,14.536 C16.552,14.7120009 16.6359992,14.8559994 16.804,14.968 C16.9720008,15.0800006 17.3119974,15.1759996 17.824,15.256 C18.0480011,15.2880002 18.16,15.4399986 18.16,15.712 C18.16,15.8240006 18.1440002,15.9599992 18.112,16.12 C17.6799978,16.0879998 17.2240024,16.0600001 16.744,16.036 C16.2639976,16.0119999 15.7920023,16 15.328,16 C15.0079984,16 14.6720018,16.0079999 14.32,16.024 C13.9679982,16.0400001 13.5760022,16.0719998 13.144,16.12 C13.1119998,16.0559997 13.096,15.9840004 13.096,15.904 L13.096,15.712 C13.096,15.4079985 13.199999,15.2480001 13.408,15.232 C13.9040025,15.1359995 14.2599989,15.0320006 14.476,14.92 C14.6920011,14.8079994 14.8639994,14.6160014 14.992,14.344 L20.776,0.52 C20.9040006,0.24799864 21.0959987,0.112 21.352,0.112 C21.4320004,0.112 21.5119996,0.11599996 21.592,0.124 C21.6720004,0.13200004 21.7599995,0.14399992 21.856,0.16 L27.64,14.416 C27.7360005,14.6560012 27.9199986,14.8359994 28.192,14.956 C28.4640014,15.0760006 28.7599984,15.1599998 29.08,15.208 C29.3200012,15.2560002 29.44,15.4159986 29.44,15.688 C29.44,15.8160006 29.4240002,15.9599992 29.392,16.12 C28.8799974,16.0879998 28.3760025,16.0600001 27.88,16.036 C27.3839975,16.0119999 26.9200022,16 26.488,16 C26.2639989,16 25.9920016,16.004 25.672,16.012 C25.3519984,16.02 25.0240017,16.0319999 24.688,16.048 C24.3519983,16.0640001 24.0200016,16.076 23.692,16.084 C23.3639984,16.092 23.0880011,16.1039999 22.864,16.12 C22.8319998,16.0559997 22.816,15.9840004 22.816,15.904 L22.816,15.712 C22.816,15.5679993 22.8439997,15.4600004 22.9,15.388 C22.9560003,15.3159996 23.0159997,15.2720001 23.08,15.256 C23.4960021,15.1759996 23.803999,15.0840005 24.004,14.98 C24.204001,14.8759995 24.304,14.720001 24.304,14.512 C24.304,14.4159995 24.2800002,14.2960007 24.232,14.152 L22.96,10.72 Z M22.504,9.52 L20.464,4.12 L18.376,9.52 L22.504,9.52 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
FontWeight.displayName = 'FontWeight';
|
||||
|
||||
module.exports = FontWeight;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Handle(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1566 1024" {...props}>
|
||||
<path d="M445.44 291.84h675.84v153.6H445.44zM220.16 578.56h1126.4v153.6H220.16zM0 870.4h1566.72v153.6H0zM670.72 0h230.4v153.6h-230.4z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Handle.displayName = 'Handle';
|
||||
|
||||
module.exports = Handle;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Height(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M525.837333 51.733333c-3.406667-3.397333-8.109333-5.126667-13.228-4.874666l-0.348 0.017333-0.34-0.017333c-5.110667-0.252-9.813333 1.477333-13.245333 4.892l-103.454667 103.053333-4.902666 4.986667-26.517334 26.425333-9.621333 9.626667c-3.789333 3.789333-5.876 8.733333-5.876 13.912 0 4.710667 1.773333 9.08 5.006667 12.313333 5.414667 5.396 13.724 6.516 20.92 2.901333l36.817333-36.677333 4.902667-4.978667 78.857333-78.550666v343.032c0 9.576 7.822667 17.370667 17.453333 17.370666 9.629333 0 17.46-7.794667 17.46-17.370666V104.754667l86.88 86.553333h-0.008l30.924 30.813333c6.910667 5.421333 16.757333 4.804 23.050667-1.478666a17.365333 17.365333 0 0 0 5.128-12.354667c0-4.632-1.8-8.985333-5.076-12.253333L650.533333 175.973333l-17.956-17.882666 0.008-0.008-106.748-106.346667zM178.666667 0h666.666666v40H178.666667z"/>
|
||||
<path d="M525.837333 972.266667c-3.406667 3.397333-8.109333 5.126667-13.228 4.874666l-0.348-0.017333-0.34 0.017333c-5.110667 0.252-9.813333-1.477333-13.245333-4.892l-103.454667-103.053333-4.902666-4.986667-26.517334-26.425333-9.621333-9.626667c-3.789333-3.789333-5.876-8.733333-5.876-13.912 0-4.710667 1.773333-9.08 5.006667-12.313333 5.414667-5.396 13.724-6.516 20.92-2.901333l36.817333 36.677333 4.902667 4.978667 78.857333 78.550666V576.205333c0-9.576 7.822667-17.370667 17.453333-17.370666 9.629333 0 17.46 7.794667 17.46 17.370666v343.04l86.88-86.553333h-0.008l30.924-30.813333c6.910667-5.421333 16.757333-4.804 23.050667 1.478666a17.365333 17.365333 0 0 1 5.128 12.354667c0 4.632-1.8 8.985333-5.076 12.253333L650.533333 848.026667l-17.956 17.882666 0.008 0.008-106.748 106.346667zM178.666667 1024h666.666666v-40H178.666667z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Height.displayName = 'Height';
|
||||
|
||||
module.exports = Height;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Image(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M736 448c53 0 96-43 96-96 0-53-43-96-96-96-53 0-96 43-96 96C640 405 683 448 736 448z"/>
|
||||
<path d="M904 128 120 128c-31.2 0-56 25.4-56 56.6l0 654.8c0 31.2 24.8 56.6 56 56.6l784 0c31.2 0 56-25.4 56-56.6L960 184.6C960 153.4 935.2 128 904 128zM697.8 523.4c-6-7-15.2-12.4-25.6-12.4-10.2 0-17.4 4.8-25.6 11.4l-37.4 31.6c-7.8 5.6-14 9.4-23 9.4-8.6 0-16.4-3.2-22-8.2-2-1.8-5.6-5.2-8.6-8.2L448 430.6c-8-9.2-20-15-33.4-15-13.4 0-25.8 6.6-33.6 15.6L128 736.4 128 215.4c2-13.6 12.6-23.4 26.2-23.4l715.4 0c13.8 0 25 10.2 25.8 24l0.6 520.8L697.8 523.4z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Image.displayName = 'Image';
|
||||
|
||||
module.exports = Image;
|
||||
@ -0,0 +1,90 @@
|
||||
module.exports = {
|
||||
'align-baseline-v': require('./align-baseline-v'),
|
||||
'align-baseline': require('./align-baseline'),
|
||||
'align-center-v': require('./align-center-v'),
|
||||
'align-center': require('./align-center'),
|
||||
'align-end-v': require('./align-end-v'),
|
||||
'align-end': require('./align-end'),
|
||||
'align-start-v': require('./align-start-v'),
|
||||
'align-start': require('./align-start'),
|
||||
'align-stretch-v': require('./align-stretch-v'),
|
||||
'align-stretch': require('./align-stretch'),
|
||||
'auto': require('./auto'),
|
||||
'block': require('./block'),
|
||||
'blur': require('./blur'),
|
||||
'border-all': require('./border-all'),
|
||||
'border-bottom': require('./border-bottom'),
|
||||
'border-left': require('./border-left'),
|
||||
'border-right': require('./border-right'),
|
||||
'border-top': require('./border-top'),
|
||||
'capitalize': require('./capitalize'),
|
||||
'center': require('./center'),
|
||||
'color': require('./color'),
|
||||
'contain': require('./contain'),
|
||||
'cover': require('./cover'),
|
||||
'cursor-default': require('./cursor-default'),
|
||||
'cursor-pointer': require('./cursor-pointer'),
|
||||
'cursor': require('./cursor'),
|
||||
'dir': require('./dir'),
|
||||
'direction-column': require('./direction-column'),
|
||||
'direction-row': require('./direction-row'),
|
||||
'fill': require('./fill'),
|
||||
'fixed': require('./fixed'),
|
||||
'flex': require('./flex'),
|
||||
'font-family': require('./font-family'),
|
||||
'font-size': require('./font-size'),
|
||||
'font-style': require('./font-style'),
|
||||
'font-weight': require('./font-weight'),
|
||||
'handle': require('./handle'),
|
||||
'height': require('./height'),
|
||||
'image': require('./image'),
|
||||
'inline-block': require('./inline-block'),
|
||||
'inline': require('./inline'),
|
||||
'italic': require('./italic'),
|
||||
'justify-around-v': require('./justify-around-v'),
|
||||
'justify-around': require('./justify-around'),
|
||||
'justify-between-v': require('./justify-between-v'),
|
||||
'justify-between': require('./justify-between'),
|
||||
'justify-center-v': require('./justify-center-v'),
|
||||
'justify-center': require('./justify-center'),
|
||||
'justify-end-v': require('./justify-end-v'),
|
||||
'justify-end': require('./justify-end'),
|
||||
'justify-start-v': require('./justify-start-v'),
|
||||
'justify-start': require('./justify-start'),
|
||||
'layer': require('./layer'),
|
||||
'letter-spacing': require('./letter-spacing'),
|
||||
'line-height': require('./line-height'),
|
||||
'line-through': require('./line-through'),
|
||||
'lowercase': require('./lowercase'),
|
||||
'no': require('./no'),
|
||||
'none': require('./none'),
|
||||
'normal': require('./normal'),
|
||||
'offset': require('./offset'),
|
||||
'opacity': require('./opacity'),
|
||||
'repeat-a': require('./repeat-a'),
|
||||
'repeat-x': require('./repeat-x'),
|
||||
'repeat-y': require('./repeat-y'),
|
||||
'repeat': require('./repeat'),
|
||||
'text-align-center': require('./text-align-center'),
|
||||
'text-align-justify': require('./text-align-justify'),
|
||||
'text-align-left': require('./text-align-left'),
|
||||
'text-align': require('./text-align'),
|
||||
'text-decoration': require('./text-decoration'),
|
||||
'text-indent': require('./text-indent'),
|
||||
'text-transform': require('./text-transform'),
|
||||
'underline': require('./underline'),
|
||||
'uppercase': require('./uppercase'),
|
||||
'wrap-around-v': require('./wrap-around-v'),
|
||||
'wrap-around': require('./wrap-around'),
|
||||
'wrap-between-v': require('./wrap-between-v'),
|
||||
'wrap-between': require('./wrap-between'),
|
||||
'wrap-center-v': require('./wrap-center-v'),
|
||||
'wrap-center': require('./wrap-center'),
|
||||
'wrap-end-v': require('./wrap-end-v'),
|
||||
'wrap-end': require('./wrap-end'),
|
||||
'wrap-start-v': require('./wrap-start-v'),
|
||||
'wrap-start': require('./wrap-start'),
|
||||
'wrap-stretch-v': require('./wrap-stretch-v'),
|
||||
'wrap-stretch': require('./wrap-stretch'),
|
||||
'yes': require('./yes'),
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function InlineBlock(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 28 14" {...props}>
|
||||
<path d="M25 3v8H3V3h22m1-1H2v10h24V2z" opacity=".15"/>
|
||||
<path opacity=".35" d="M8.418 9.8H7.66L7.25 11h1.58l-.232-.676-.18-.525zM3 11h.567l2.916-7.94h3.15L11 6.78V3H3v8zm15.12-1.002a3.302 3.302 0 0 1-.48-.586c-.173.343-.42.653-.73.888.002 0 .004-.002.005-.003l-.008.006.003-.003a3.145 3.145 0 0 1-1.092.55c-.4.11-.825.15-1.303.15h6.017a4.416 4.416 0 0 1-1.12-.215 3.51 3.51 0 0 1-1.292-.787zM14.237 3c.49 0 .853.014 1.167.06.335.05.656.16.953.314h.003l.004.003c.365.19.694.492.898.866.13.234.197.49.24.747.16-.298.343-.58.578-.82v-.002c.358-.366.8-.643 1.287-.826a4.373 4.373 0 0 1 1.557-.272 5.67 5.67 0 0 1 1.442.18l.01.002.01.003c.205.06.4.126.59.208.15.064.283.125.407.185l.562.274v3.016h-1.54l-.28-.24a7.018 7.018 0 0 0-.233-.188 2.703 2.703 0 0 0-.26-.175 1.594 1.594 0 0 0-.277-.125h-.006l-.2-.03a.772.772 0 0 0-.26.042l-.16.102a.63.63 0 0 0-.13.22 1.486 1.486 0 0 0-.075.516c0 .266.04.436.074.513a.59.59 0 0 0 .13.212l.15.09h.003a.868.868 0 0 0 .265.045l.236-.037h.008a1.04 1.04 0 0 0 .25-.113l.007-.004.01-.005.24-.16a6.41 6.41 0 0 0 .216-.17l.285-.254h1.536v3.017l-.59.266c-.15.066-.292.13-.422.184a4.19 4.19 0 0 1-.53.19 5.918 5.918 0 0 1-.636.15c-.076.012-.16.02-.24.026H25V3H14.237z"/>
|
||||
<path d="M25.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h23.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 25.8 1zm.2 11H2V2h24v10zm-7.186-2.72c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.412-.19V8.16h-.154c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.485.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3c-.15-.14-.28-.33-.38-.57a2.36 2.36 0 0 1-.152-.9c0-.347.047-.64.14-.88s.216-.433.367-.58c.157-.15.33-.26.517-.325a1.786 1.786 0 0 1 1.116-.014c.164.056.316.125.457.206a4.868 4.868 0 0 1 .644.466h.17V4.54a13.03 13.03 0 0 0-.367-.168 3.667 3.667 0 0 0-1.005-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.675.333-.924.59c-.26.262-.457.58-.59.95S18 6.6 18 7.055c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.607c.272-.076.52-.2.75-.38.195-.15.35-.338.46-.567.113-.23.17-.488.17-.778 0-.4-.11-.722-.332-.967-.22-.245-.52-.406-.896-.484v-.03a1.46 1.46 0 0 0 .623-.51 1.36 1.36 0 0 0 .22-.77c0-.25-.052-.47-.16-.665a1.15 1.15 0 0 0-.49-.465 2.065 2.065 0 0 0-.64-.215A7.67 7.67 0 0 0 14.237 4H12v6h2.515c.418 0 .763-.037 1.035-.113zM13.478 5.1h.14c.29 0 .517.002.678.006s.296.027.404.07c.12.05.206.123.253.223a.69.69 0 0 1 .072.29.86.86 0 0 1-.062.34c-.042.1-.13.18-.263.24a1.05 1.05 0 0 1-.39.08c-.166.007-.366.01-.6.01h-.233V5.1zm.108 3.8h-.108V7.405h.324c.222 0 .434 0 .638.004.203 0 .363.02.48.05.17.05.29.13.36.23s.106.25.106.44c0 .144-.03.272-.087.384s-.17.2-.32.27a1.257 1.257 0 0 1-.5.104c-.18.003-.48.004-.9.004zm-6.64-.1h2.187l.41 1.2h1.574L8.935 4.06H7.182L5 10h1.535l.412-1.2zM8.04 5.58l.727 2.13H7.313l.727-2.13z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
InlineBlock.displayName = 'InlineBlock';
|
||||
|
||||
module.exports = InlineBlock;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Inline(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 8" {...props}>
|
||||
<path d="M14.814 6.25c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.41-.19V5.13h-.153c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.484.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3 1.566 1.566 0 0 1-.38-.57c-.1-.24-.152-.54-.152-.9 0-.346.048-.638.14-.878s.217-.437.368-.58c.16-.155.33-.26.52-.33a1.786 1.786 0 0 1 1.117-.013c.165.055.317.124.458.205a4.385 4.385 0 0 1 .643.47h.17V1.52c-.107-.05-.23-.107-.37-.168a3.613 3.613 0 0 0-1.003-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.674.33-.923.59c-.26.26-.458.58-.59.95S14 3.57 14 4.02c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.608c.272-.075.52-.2.75-.377a1.5 1.5 0 0 0 .46-.56 1.72 1.72 0 0 0 .17-.77c0-.4-.11-.72-.332-.96-.22-.244-.52-.404-.896-.48v-.04a1.46 1.46 0 0 0 .623-.516c.147-.22.22-.474.22-.763 0-.25-.052-.47-.16-.66a1.152 1.152 0 0 0-.49-.46 2.06 2.06 0 0 0-.64-.212A7.67 7.67 0 0 0 10.237 1H8v5.97h2.515c.418 0 .763-.037 1.035-.112zM9.478 2.095h.14c.29 0 .517.002.678.006.162.01.296.03.404.07a.46.46 0 0 1 .253.23.69.69 0 0 1 .072.298.85.85 0 0 1-.062.34.492.492 0 0 1-.263.24 1.052 1.052 0 0 1-.39.08c-.166.006-.366.01-.6.01h-.232v-1.27zm.108 3.78h-.108V4.388h.324c.222 0 .434 0 .638.004a1.8 1.8 0 0 1 .48.056c.17.05.29.127.36.23.07.104.106.25.106.44 0 .144-.03.272-.087.383s-.17.2-.32.27-.32.1-.5.11c-.18.004-.48.004-.9.004zm-6.64-.106h2.187l.41 1.2h1.574L4.935 1.03H3.182L1 6.97h1.535l.412-1.2zM4.04 2.55l.727 2.13H3.313l.727-2.13z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Inline.displayName = 'Inline';
|
||||
|
||||
module.exports = Inline;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Italic(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 13 18" {...props}>
|
||||
<path d="M12.2851562,0.78125 L12.0625,1.49609375 C12.0468749,1.50390629 12.0039066,1.51367182 11.9335938,1.52539062 C11.8632809,1.53710943 11.791016,1.54882807 11.7167969,1.56054688 C11.6425778,1.57226568 11.5976563,1.58203121 11.5820312,1.58984375 C10.824215,1.73046945 10.3281262,1.86523373 10.09375,1.99414062 C9.85937383,2.12304752 9.68359434,2.31640496 9.56640625,2.57421875 C9.3554677,3.10547141 9.05664256,3.99022818 8.66992188,5.22851562 C8.28320119,6.46680307 7.8945332,7.7636651 7.50390625,9.11914062 C7.1132793,10.4746162 6.80859484,11.5976518 6.58984375,12.4882812 C6.58203121,12.5273439 6.45312625,13.0390576 6.203125,14.0234375 C5.95312375,15.0078174 5.828125,15.5351559 5.828125,15.6054688 C5.828125,15.7226568 5.87499953,15.8203121 5.96875,15.8984375 C6.03125031,15.9531253 6.60546332,16.1054675 7.69140625,16.3554688 C7.94922004,16.402344 8.078125,16.4257812 8.078125,16.4257812 L7.8671875,17.1171875 C7.49218562,17.0937499 7.02734652,17.0703126 6.47265625,17.046875 C5.70702742,17.0156248 5.00390945,17 4.36328125,17 C3.32421355,17 2.14844406,17.0390621 0.8359375,17.1171875 L1.046875,16.4257812 C1.05468754,16.4257812 1.08203102,16.4199219 1.12890625,16.4082031 C1.17578148,16.3964843 1.23828086,16.3847657 1.31640625,16.3730469 C1.39453164,16.3613281 1.47265586,16.3476563 1.55078125,16.3320312 C2.25390977,16.1992181 2.71093645,16.0820318 2.921875,15.9804688 C3.13281355,15.8789057 3.30859305,15.7304697 3.44921875,15.5351562 C3.62890715,15.2617174 3.98827855,14.2070404 4.52734375,12.3710938 C4.55078137,12.2773433 4.69335807,11.7773483 4.95507812,10.8710938 C5.21679818,9.96483922 5.37890594,9.39843863 5.44140625,9.171875 C5.60546957,8.58593457 5.78320217,7.95898771 5.97460938,7.29101562 C6.16601658,6.62304354 6.30859328,6.10547059 6.40234375,5.73828125 C6.82422086,4.22264867 7.09374941,3.19140898 7.2109375,2.64453125 C7.2500002,2.52734316 7.26953125,2.41796926 7.26953125,2.31640625 C7.26953125,2.16015547 7.20312566,2.05468777 7.0703125,2 C6.99218711,1.9609373 6.68554955,1.87695377 6.15039062,1.74804688 C5.6152317,1.61913998 5.25000098,1.53515645 5.0546875,1.49609375 L5.2421875,0.78125 C6.50781883,0.875000469 7.65233863,0.921875 8.67578125,0.921875 C10.0820383,0.921875 11.2851513,0.875000469 12.2851562,0.78125 L12.2851562,0.78125 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Italic.displayName = 'Italic';
|
||||
|
||||
module.exports = Italic;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyAroundV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 13" {...props}>
|
||||
<g fillRule="evenodd"><path d="M0 2h21v1H0V2zm5.5 0h10v1h-10V2zM0 10h21v1H0v-1zm5.5 0h10v1h-10v-1z" opacity=".5"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 1h7v3H7z"/><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyAroundV.displayName = 'JustifyAroundV';
|
||||
|
||||
module.exports = JustifyAroundV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyAround(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 16 17" {...props}>
|
||||
<g fillRule="evenodd"><path d="M2 0h1v17H2V0zm0 3.5h1v10H2v-10zM13 0h1v17h-1V0zm0 3.5h1v10h-1v-10z" opacity=".5"/><path d="M11 4h5v9h-5z"/><path opacity=".4" d="M1 5h3v7H1z"/><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyAround.displayName = 'JustifyAround';
|
||||
|
||||
module.exports = JustifyAround;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyBetweenV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0zm0 17h21v1H0z"/><path d="M6 11h9v5H6z"/><path opacity=".4" d="M7 3h7v3H7z"/><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyBetweenV.displayName = 'JustifyBetweenV';
|
||||
|
||||
module.exports = JustifyBetweenV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyBetween(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm23 0h1v17h-1z"/><path d="M17 4h5v9h-5z"/><path opacity=".4" d="M3 5h3v7H3z"/><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyBetween.displayName = 'JustifyBetween';
|
||||
|
||||
module.exports = JustifyBetween;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyCenterV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 13" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 6h21v1H0z"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 1h7v3H7z"/><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyCenterV.displayName = 'JustifyCenterV';
|
||||
|
||||
module.exports = JustifyCenterV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyCenter(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 13 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M6 0h1v17H6z"/><path d="M8 4h5v9H8z"/><path opacity=".4" d="M1 5h3v7H1z"/><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyCenter.displayName = 'JustifyCenter';
|
||||
|
||||
module.exports = JustifyCenter;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyEndV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path d="M6 11h9v5H6z"/><path opacity=".4" d="M7 6h7v3H7z"/><path d="M7 6v3h7V6H7zM6 5h9v5H6V5z"/><path opacity=".5" d="M0 17h21v1H0z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyEndV.displayName = 'JustifyEndV';
|
||||
|
||||
module.exports = JustifyEndV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyEnd(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"/><path d="M17 4h5v9h-5z"/><path opacity=".4" d="M12 5h3v7h-3z"/><path d="M12 5v7h3V5h-3zm-1-1h5v9h-5V4z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyEnd.displayName = 'JustifyEnd';
|
||||
|
||||
module.exports = JustifyEnd;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyStartV(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 18" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 3h7v3H7z"/><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyStartV.displayName = 'JustifyStartV';
|
||||
|
||||
module.exports = JustifyStartV;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function JustifyStart(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 24 17" {...props}>
|
||||
<g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M8 4h5v9H8z"/><path opacity=".4" d="M3 5h3v7H3z"/><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"/></g>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
JustifyStart.displayName = 'JustifyStart';
|
||||
|
||||
module.exports = JustifyStart;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Layer(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M512.28 881.25 124.847 579.972l-85.104 66.192 472.799 367.732 472.799-367.732-85.629-66.454C899.712 579.71 512.28 881.25 512.28 881.25zM512.542 747.816 899.45 447.063l85.892-66.98L512.542 12.351 39.743 380.083l85.629 66.454L512.542 747.816z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Layer.displayName = 'Layer';
|
||||
|
||||
module.exports = Layer;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function LetterSpacing(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 42 33" {...props}>
|
||||
<path d="M16,21.86 L16,22 L18,22 L18,0 L16,0 L16,20.6992542 C15.1019614,20.6856486 14.588633,20.485899 14.46,20.1 L9.64,7 L6.74,7 L1.74,20.12 C1.673333,20.3066676 1.506668,20.4466662 1.24,20.54 C0.973332,20.6333338 0.5600028,20.68 0,20.68 L0,21.86 L5.46,21.86 L5.46,20.7 L4.22,20.7 C3.6333304,20.7 3.34,20.5266684 3.34,20.18 C3.34,20.0999996 3.3533332,20.0200004 3.38,19.94 L4.12,17.94 L10.26,17.94 L11.06,20.1 C11.1000002,20.2066672 11.12,20.2799998 11.12,20.32 C11.12,20.5733346 10.9266686,20.7 10.54,20.7 L8.78,20.7 L8.78,21.86 L16,21.86 Z M26,20.6037894 L26,0 L24,0 L24,22 L26,22 L26,21.86 L30.46,21.86 L30.46,20.7 L29.22,20.7 C28.6333304,20.7 28.34,20.5266684 28.34,20.18 C28.34,20.0999996 28.3533332,20.0200004 28.38,19.94 L29.12,17.94 L35.26,17.94 L36.06,20.1 C36.1000002,20.2066672 36.12,20.2799998 36.12,20.32 C36.12,20.5733346 35.9266686,20.7 35.54,20.7 L33.78,20.7 L33.78,21.86 L41.1,21.86 L41.1,20.7 C40.1399952,20.7 39.593334,20.500002 39.46,20.1 L34.64,7 L31.74,7 L26.74,20.12 C26.673333,20.3066676 26.506668,20.4466662 26.24,20.54 C26.1700821,20.5644712 26.0900822,20.5857344 26,20.6037894 Z M17.9759154,30 L17.9759154,33 L11,29 L17.9759154,25 L17.9759154,28 L24,28 L24,30 L17.9759154,30 Z M30.9759154,29 L24,33 L24,25 L30.9759154,29 Z M16,21.86 L16,20.6992542 C16.0328195,20.6997514 16.0661528,20.7 16.1,20.7 L16.1,21.86 L16,21.86 Z M30,16.04 L35.12,16.04 L32.58,9 L30,16.04 Z M5,16.04 L10.12,16.04 L7.58,9 L5,16.04 Z"/>
|
||||
<rect opacity="0.5" x="18" y="0" width="6" height="22"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
LetterSpacing.displayName = 'LetterSpacing';
|
||||
|
||||
module.exports = LetterSpacing;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function LineHeight(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 29 34" {...props}>
|
||||
<path d="M5,27.8833008 L5,20 L3,20 L3,27.8833008 L0.457763672,27.8833008 L3.96508789,34 L7.47241211,27.8833008 L5,27.8833008 Z M9,14 L29,14 L29,16 L9,16 L9,14 Z M9,32 L29,32 L29,34 L9,34 L9,32 Z M3.96508789,13.8833008 L7.47241211,20 L0.457763672,20 L3.96508789,13.8833008 Z M21.015625,10.6054688 C20.2421836,11.1367214 19.5332063,11.5292956 18.8886719,11.7832031 C18.2441374,12.0371106 17.6406278,12.1640625 17.078125,12.1640625 C16.1484329,12.1640625 15.4042997,11.8828153 14.8457031,11.3203125 C14.2871066,10.7578097 14.0078125,10.0156296 14.0078125,9.09375 C14.0078125,8.07030738 14.4277302,7.26562793 15.2675781,6.6796875 C16.1074261,6.09374707 18.0234225,5.44140984 21.015625,4.72265625 L21.015625,3.9609375 C21.015625,2.95311996 20.8515641,2.2539082 20.5234375,1.86328125 C20.1953109,1.4726543 19.6250041,1.27734375 18.8125,1.27734375 C18.507811,1.27734375 18.2070327,1.30859344 17.9101562,1.37109375 C17.6132798,1.43359406 17.3046891,1.52734313 16.984375,1.65234375 L16.984375,3.66796875 L15.3320312,3.66796875 C15.0429673,3.66796875 14.8457037,3.6152349 14.7402344,3.50976563 C14.6347651,3.40429635 14.5820312,3.21093891 14.5820312,2.9296875 C14.5820312,2.14843359 15.0331986,1.50000258 15.9355469,0.984375 C16.8378951,0.468747422 18.0038991,0.2109375 19.4335938,0.2109375 C20.6914125,0.2109375 21.6054659,0.484372266 22.1757812,1.03125 C22.7460966,1.57812773 23.03125,2.4570252 23.03125,3.66796875 L23.03125,10.6289062 L23.4414062,11.015625 L24.7070312,11.1328125 L24.7070312,12 L21.3320312,12 L21.015625,10.6054688 Z M21.015625,9.796875 L21.015625,5.56640625 C19.0078025,6.12109652 17.6894563,6.62890395 17.0605469,7.08984375 C16.4316375,7.55078355 16.1171875,8.15624625 16.1171875,8.90625 C16.1171875,9.50781551 16.2910139,9.98632635 16.6386719,10.3417969 C16.9863299,10.6972674 17.4531221,10.875 18.0390625,10.875 C18.4140644,10.875 18.8457007,10.7851571 19.3339844,10.6054688 C19.8222681,10.4257804 20.3828093,10.1562518 21.015625,9.796875 Z M21.015625,28.6054688 C20.2421836,29.1367214 19.5332063,29.5292956 18.8886719,29.7832031 C18.2441374,30.0371106 17.6406278,30.1640625 17.078125,30.1640625 C16.1484329,30.1640625 15.4042997,29.8828153 14.8457031,29.3203125 C14.2871066,28.7578097 14.0078125,28.0156296 14.0078125,27.09375 C14.0078125,26.0703074 14.4277302,25.2656279 15.2675781,24.6796875 C16.1074261,24.0937471 18.0234225,23.4414098 21.015625,22.7226562 L21.015625,21.9609375 C21.015625,20.95312 20.8515641,20.2539082 20.5234375,19.8632812 C20.1953109,19.4726543 19.6250041,19.2773438 18.8125,19.2773438 C18.507811,19.2773438 18.2070327,19.3085934 17.9101562,19.3710938 C17.6132798,19.4335941 17.3046891,19.5273431 16.984375,19.6523438 L16.984375,21.6679688 L15.3320312,21.6679688 C15.0429673,21.6679688 14.8457037,21.6152349 14.7402344,21.5097656 C14.6347651,21.4042963 14.5820312,21.2109389 14.5820312,20.9296875 C14.5820312,20.1484336 15.0331986,19.5000026 15.9355469,18.984375 C16.8378951,18.4687474 18.0038991,18.2109375 19.4335938,18.2109375 C20.6914125,18.2109375 21.6054659,18.4843723 22.1757812,19.03125 C22.7460966,19.5781277 23.03125,20.4570252 23.03125,21.6679688 L23.03125,28.6289062 L23.4414062,29.015625 L24.7070312,29.1328125 L24.7070312,30 L21.3320312,30 L21.015625,28.6054688 Z M21.015625,27.796875 L21.015625,23.5664062 C19.0078025,24.1210965 17.6894563,24.6289039 17.0605469,25.0898438 C16.4316375,25.5507836 16.1171875,26.1562462 16.1171875,26.90625 C16.1171875,27.5078155 16.2910139,27.9863263 16.6386719,28.3417969 C16.9863299,28.6972674 17.4531221,28.875 18.0390625,28.875 C18.4140644,28.875 18.8457007,28.7851571 19.3339844,28.6054688 C19.8222681,28.4257804 20.3828093,28.1562518 21.015625,27.796875 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
LineHeight.displayName = 'LineHeight';
|
||||
|
||||
module.exports = LineHeight;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function LineThrough(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 21 26" {...props}>
|
||||
<path d="M12.656,12 L12.656,2.212 L15.176,2.212 C15.8106698,2.212 16.361331,2.30999902 16.828,2.506 C17.294669,2.70200098 17.6913317,3.04733086 18.018,3.542 C18.3446683,4.03666914 18.133333,4.40132708 18.208,5.652 L20.972,5.568 L20.972,0 L0,0 L0,5.568 L2.764,5.652 C2.83866704,4.40132708 2.6273317,4.03666914 2.954,3.542 C3.2806683,3.04733086 3.677331,2.70200098 4.144,2.506 C4.610669,2.30999902 5.16133016,2.212 5.796,2.212 L8.344,2.212 L8.344,12 L0,12 L0,14 L8.344,14 L8.344,22.892 C8.344,23.750671 7.51334164,24.18 5.852,24.18 L5.852,25.804 L15.176,25.804 L15.176,24.18 C13.4959916,24.18 12.656,23.750671 12.656,22.892 L12.656,14 L21,14 L21,12 L12.656,12 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
LineThrough.displayName = 'LineThrough';
|
||||
|
||||
module.exports = LineThrough;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Lowercase(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 20 17" {...props}>
|
||||
<path d="M5.64705882,3.95798319 L9,3.95798319 L8.87394958,5.77310924 C8.40335899,5.6722684 7.90336399,5.60084055 7.37394958,5.55882353 C6.84453517,5.51680651 6.26891067,5.49579832 5.64705882,5.49579832 L5.64705882,14.2941176 C5.64705882,15.0504239 6.01680303,15.4285714 6.75630252,15.4285714 C7.14285908,15.4285714 7.40756231,15.3235305 7.55042017,15.1134454 C7.69327803,14.9033603 7.76470588,14.6302538 7.76470588,14.2941176 L7.76470588,12.8319328 L9,12.8319328 L9,13.9411765 C9,14.3949603 8.95378197,14.8067208 8.86134454,15.1764706 C8.7689071,15.5462203 8.60084155,15.8613432 8.35714286,16.1218487 C8.11344416,16.3823542 7.78991798,16.5882345 7.38655462,16.7394958 C6.98319126,16.8907571 6.47059134,16.9663866 5.8487395,16.9663866 C4.53780857,16.9663866 3.60084315,16.6722718 3.03781513,16.0840336 C2.4747871,15.4957954 2.19327731,14.6722742 2.19327731,13.6134454 L2.19327731,5.49579832 L0,5.49579832 L0,4.28571429 C0.470590588,4.25210067 0.911762647,4.18487445 1.32352941,4.08403361 C1.73529618,3.98319277 2.0966371,3.80672395 2.40756303,3.55462185 C2.71848895,3.30251975 2.96218399,2.9495821 3.13865546,2.49579832 C3.31512693,2.04201454 3.40336134,1.45378513 3.40336134,0.731092437 L3.40336134,0.176470588 L5.64705882,0 L5.64705882,3.95798319 Z M16.6470588,3.95798319 L20,3.95798319 L19.8739496,5.77310924 C19.403359,5.6722684 18.903364,5.60084055 18.3739496,5.55882353 C17.8445352,5.51680651 17.2689107,5.49579832 16.6470588,5.49579832 L16.6470588,14.2941176 C16.6470588,15.0504239 17.016803,15.4285714 17.7563025,15.4285714 C18.1428591,15.4285714 18.4075623,15.3235305 18.5504202,15.1134454 C18.693278,14.9033603 18.7647059,14.6302538 18.7647059,14.2941176 L18.7647059,12.8319328 L20,12.8319328 L20,13.9411765 C20,14.3949603 19.953782,14.8067208 19.8613445,15.1764706 C19.7689071,15.5462203 19.6008416,15.8613432 19.3571429,16.1218487 C19.1134442,16.3823542 18.789918,16.5882345 18.3865546,16.7394958 C17.9831913,16.8907571 17.4705913,16.9663866 16.8487395,16.9663866 C15.5378086,16.9663866 14.6008432,16.6722718 14.0378151,16.0840336 C13.4747871,15.4957954 13.1932773,14.6722742 13.1932773,13.6134454 L13.1932773,5.49579832 L11,5.49579832 L11,4.28571429 C11.4705906,4.25210067 11.9117626,4.18487445 12.3235294,4.08403361 C12.7352962,3.98319277 13.0966371,3.80672395 13.407563,3.55462185 C13.7184889,3.30251975 13.962184,2.9495821 14.1386555,2.49579832 C14.3151269,2.04201454 14.4033613,1.45378513 14.4033613,0.731092437 L14.4033613,0.176470588 L16.6470588,0 L16.6470588,3.95798319 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Lowercase.displayName = 'Lowercase';
|
||||
|
||||
module.exports = Lowercase;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function No(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M571.733333 512l238.933333 238.933333L750.933333 810.666667 512 571.733333 273.066667 810.666667 213.333333 750.933333l238.933333-238.933333L213.333333 273.066667 273.066667 213.333333l238.933333 238.933333L750.933333 213.333333 810.666667 273.066667 571.733333 512z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
No.displayName = 'No';
|
||||
|
||||
module.exports = No;
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function None(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 1024 1024" {...props}>
|
||||
<path d="M461.952 746.432l-258.56 0 0-99.776 258.56 0L461.952 746.432z"/>
|
||||
<path d="M853.056 746.432l-258.56 0 0-99.776 258.56 0L853.056 746.432z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
None.displayName = 'None';
|
||||
|
||||
module.exports = None;
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
const React = require('react');
|
||||
const IconBase = require('@ali/vu-icon-base');
|
||||
|
||||
function Normal(props) {
|
||||
return (
|
||||
<IconBase viewBox="0 0 9 18" {...props}>
|
||||
<path d="M8.203125,0.5 L8.203125,1.19140625 C7.92968613,1.25390656 7.72656316,1.29687488 7.59375,1.3203125 C6.5546823,1.5000009 5.95312582,1.66992107 5.7890625,1.83007812 C5.62499918,1.99023518 5.54296875,2.34765348 5.54296875,2.90234375 L5.54296875,3.3125 L5.49609375,8.0234375 L5.53125,14.8671875 C5.53125,15.4140652 5.61132732,15.761718 5.77148438,15.9101562 C5.93164143,16.0585945 6.48046406,16.1874995 7.41796875,16.296875 C7.59765715,16.3203126 7.85937328,16.3671871 8.203125,16.4375 L8.203125,17.1289062 C6.94530621,17.0429683 5.73438082,17 4.5703125,17 C3.36718148,17 2.04688219,17.0429683 0.609375,17.1289062 L0.609375,16.4375 C0.835938633,16.3749997 1.00781191,16.3359376 1.125,16.3203125 C2.23438055,16.1406241 2.86913982,15.9746101 3.02929688,15.8222656 C3.18945393,15.6699211 3.26953125,15.2851593 3.26953125,14.6679688 L3.2578125,14.0820312 L3.28125,9.78125 C3.28125,5.35935289 3.27343758,2.91406484 3.2578125,2.4453125 C3.24218742,2.18749871 3.15820389,1.98828195 3.00585938,1.84765625 C2.85351486,1.70703055 2.26172391,1.53906348 1.23046875,1.34375 C1.08984305,1.31249984 0.882813867,1.2617191 0.609375,1.19140625 L0.609375,0.5 C2.30469598,0.58593793 3.62890148,0.62890625 4.58203125,0.62890625 C5.64453656,0.62890625 6.85155574,0.58593793 8.203125,0.5 L8.203125,0.5 Z"/>
|
||||
</IconBase>
|
||||
);
|
||||
}
|
||||
Normal.displayName = 'Normal';
|
||||
|
||||
module.exports = Normal;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user