feat(omiu): init o-tree
This commit is contained in:
dntzhang
parent
164e7a48d2
commit
f4b4c6db6c
|
|
@ -0,0 +1,484 @@
|
|||
'use strict';
|
||||
|
||||
var colorString = require('color-string');
|
||||
var convert = require('color-convert');
|
||||
|
||||
var _slice = [].slice;
|
||||
|
||||
var skippedModels = [
|
||||
// to be honest, I don't really feel like keyword belongs in color convert, but eh.
|
||||
'keyword',
|
||||
|
||||
// gray conflicts with some method names, and has its own method defined.
|
||||
'gray',
|
||||
|
||||
// shouldn't really be in color-convert either...
|
||||
'hex'
|
||||
];
|
||||
|
||||
var hashedModelKeys = {};
|
||||
Object.keys(convert).forEach(function (model) {
|
||||
hashedModelKeys[_slice.call(convert[model].labels).sort().join('')] = model;
|
||||
});
|
||||
|
||||
var limiters = {};
|
||||
|
||||
function Color(obj, model) {
|
||||
if (!(this instanceof Color)) {
|
||||
return new Color(obj, model);
|
||||
}
|
||||
|
||||
if (model && model in skippedModels) {
|
||||
model = null;
|
||||
}
|
||||
|
||||
if (model && !(model in convert)) {
|
||||
throw new Error('Unknown model: ' + model);
|
||||
}
|
||||
|
||||
var i;
|
||||
var channels;
|
||||
|
||||
if (obj == null) { // eslint-disable-line no-eq-null,eqeqeq
|
||||
this.model = 'rgb';
|
||||
this.color = [0, 0, 0];
|
||||
this.valpha = 1;
|
||||
} else if (obj instanceof Color) {
|
||||
this.model = obj.model;
|
||||
this.color = obj.color.slice();
|
||||
this.valpha = obj.valpha;
|
||||
} else if (typeof obj === 'string') {
|
||||
var result = colorString.get(obj);
|
||||
if (result === null) {
|
||||
throw new Error('Unable to parse color from string: ' + obj);
|
||||
}
|
||||
|
||||
this.model = result.model;
|
||||
channels = convert[this.model].channels;
|
||||
this.color = result.value.slice(0, channels);
|
||||
this.valpha = typeof result.value[channels] === 'number' ? result.value[channels] : 1;
|
||||
} else if (obj.length) {
|
||||
this.model = model || 'rgb';
|
||||
channels = convert[this.model].channels;
|
||||
var newArr = _slice.call(obj, 0, channels);
|
||||
this.color = zeroArray(newArr, channels);
|
||||
this.valpha = typeof obj[channels] === 'number' ? obj[channels] : 1;
|
||||
} else if (typeof obj === 'number') {
|
||||
// this is always RGB - can be converted later on.
|
||||
obj &= 0xFFFFFF;
|
||||
this.model = 'rgb';
|
||||
this.color = [
|
||||
(obj >> 16) & 0xFF,
|
||||
(obj >> 8) & 0xFF,
|
||||
obj & 0xFF
|
||||
];
|
||||
this.valpha = 1;
|
||||
} else {
|
||||
this.valpha = 1;
|
||||
|
||||
var keys = Object.keys(obj);
|
||||
if ('alpha' in obj) {
|
||||
keys.splice(keys.indexOf('alpha'), 1);
|
||||
this.valpha = typeof obj.alpha === 'number' ? obj.alpha : 0;
|
||||
}
|
||||
|
||||
var hashedKeys = keys.sort().join('');
|
||||
if (!(hashedKeys in hashedModelKeys)) {
|
||||
throw new Error('Unable to parse color from object: ' + JSON.stringify(obj));
|
||||
}
|
||||
|
||||
this.model = hashedModelKeys[hashedKeys];
|
||||
|
||||
var labels = convert[this.model].labels;
|
||||
var color = [];
|
||||
for (i = 0; i < labels.length; i++) {
|
||||
color.push(obj[labels[i]]);
|
||||
}
|
||||
|
||||
this.color = zeroArray(color);
|
||||
}
|
||||
|
||||
// perform limitations (clamping, etc.)
|
||||
if (limiters[this.model]) {
|
||||
channels = convert[this.model].channels;
|
||||
for (i = 0; i < channels; i++) {
|
||||
var limit = limiters[this.model][i];
|
||||
if (limit) {
|
||||
this.color[i] = limit(this.color[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.valpha = Math.max(0, Math.min(1, this.valpha));
|
||||
|
||||
if (Object.freeze) {
|
||||
Object.freeze(this);
|
||||
}
|
||||
}
|
||||
|
||||
Color.prototype = {
|
||||
toString: function () {
|
||||
return this.string();
|
||||
},
|
||||
|
||||
toJSON: function () {
|
||||
return this[this.model]();
|
||||
},
|
||||
|
||||
string: function (places) {
|
||||
var self = this.model in colorString.to ? this : this.rgb();
|
||||
self = self.round(typeof places === 'number' ? places : 1);
|
||||
var args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
|
||||
return colorString.to[self.model](args);
|
||||
},
|
||||
|
||||
percentString: function (places) {
|
||||
var self = this.rgb().round(typeof places === 'number' ? places : 1);
|
||||
var args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
|
||||
return colorString.to.rgb.percent(args);
|
||||
},
|
||||
|
||||
array: function () {
|
||||
return this.valpha === 1 ? this.color.slice() : this.color.concat(this.valpha);
|
||||
},
|
||||
|
||||
object: function () {
|
||||
var result = {};
|
||||
var channels = convert[this.model].channels;
|
||||
var labels = convert[this.model].labels;
|
||||
|
||||
for (var i = 0; i < channels; i++) {
|
||||
result[labels[i]] = this.color[i];
|
||||
}
|
||||
|
||||
if (this.valpha !== 1) {
|
||||
result.alpha = this.valpha;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
unitArray: function () {
|
||||
var rgb = this.rgb().color;
|
||||
rgb[0] /= 255;
|
||||
rgb[1] /= 255;
|
||||
rgb[2] /= 255;
|
||||
|
||||
if (this.valpha !== 1) {
|
||||
rgb.push(this.valpha);
|
||||
}
|
||||
|
||||
return rgb;
|
||||
},
|
||||
|
||||
unitObject: function () {
|
||||
var rgb = this.rgb().object();
|
||||
rgb.r /= 255;
|
||||
rgb.g /= 255;
|
||||
rgb.b /= 255;
|
||||
|
||||
if (this.valpha !== 1) {
|
||||
rgb.alpha = this.valpha;
|
||||
}
|
||||
|
||||
return rgb;
|
||||
},
|
||||
|
||||
round: function (places) {
|
||||
places = Math.max(places || 0, 0);
|
||||
return new Color(this.color.map(roundToPlace(places)).concat(this.valpha), this.model);
|
||||
},
|
||||
|
||||
alpha: function (val) {
|
||||
if (arguments.length) {
|
||||
return new Color(this.color.concat(Math.max(0, Math.min(1, val))), this.model);
|
||||
}
|
||||
|
||||
return this.valpha;
|
||||
},
|
||||
|
||||
// rgb
|
||||
red: getset('rgb', 0, maxfn(255)),
|
||||
green: getset('rgb', 1, maxfn(255)),
|
||||
blue: getset('rgb', 2, maxfn(255)),
|
||||
|
||||
hue: getset(['hsl', 'hsv', 'hsl', 'hwb', 'hcg'], 0, function (val) { return ((val % 360) + 360) % 360; }), // eslint-disable-line brace-style
|
||||
|
||||
saturationl: getset('hsl', 1, maxfn(100)),
|
||||
lightness: getset('hsl', 2, maxfn(100)),
|
||||
|
||||
saturationv: getset('hsv', 1, maxfn(100)),
|
||||
value: getset('hsv', 2, maxfn(100)),
|
||||
|
||||
chroma: getset('hcg', 1, maxfn(100)),
|
||||
gray: getset('hcg', 2, maxfn(100)),
|
||||
|
||||
white: getset('hwb', 1, maxfn(100)),
|
||||
wblack: getset('hwb', 2, maxfn(100)),
|
||||
|
||||
cyan: getset('cmyk', 0, maxfn(100)),
|
||||
magenta: getset('cmyk', 1, maxfn(100)),
|
||||
yellow: getset('cmyk', 2, maxfn(100)),
|
||||
black: getset('cmyk', 3, maxfn(100)),
|
||||
|
||||
x: getset('xyz', 0, maxfn(100)),
|
||||
y: getset('xyz', 1, maxfn(100)),
|
||||
z: getset('xyz', 2, maxfn(100)),
|
||||
|
||||
l: getset('lab', 0, maxfn(100)),
|
||||
a: getset('lab', 1),
|
||||
b: getset('lab', 2),
|
||||
|
||||
keyword: function (val) {
|
||||
if (arguments.length) {
|
||||
return new Color(val);
|
||||
}
|
||||
|
||||
return convert[this.model].keyword(this.color);
|
||||
},
|
||||
|
||||
hex: function (val) {
|
||||
if (arguments.length) {
|
||||
return new Color(val);
|
||||
}
|
||||
|
||||
return colorString.to.hex(this.rgb().round().color);
|
||||
},
|
||||
|
||||
rgbNumber: function () {
|
||||
var rgb = this.rgb().color;
|
||||
return ((rgb[0] & 0xFF) << 16) | ((rgb[1] & 0xFF) << 8) | (rgb[2] & 0xFF);
|
||||
},
|
||||
|
||||
luminosity: function () {
|
||||
// http://www.w3.org/TR/WCAG20/#relativeluminancedef
|
||||
var rgb = this.rgb().color;
|
||||
|
||||
var lum = [];
|
||||
for (var i = 0; i < rgb.length; i++) {
|
||||
var chan = rgb[i] / 255;
|
||||
lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);
|
||||
}
|
||||
|
||||
return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
|
||||
},
|
||||
|
||||
contrast: function (color2) {
|
||||
// http://www.w3.org/TR/WCAG20/#contrast-ratiodef
|
||||
var lum1 = this.luminosity();
|
||||
var lum2 = color2.luminosity();
|
||||
|
||||
if (lum1 > lum2) {
|
||||
return (lum1 + 0.05) / (lum2 + 0.05);
|
||||
}
|
||||
|
||||
return (lum2 + 0.05) / (lum1 + 0.05);
|
||||
},
|
||||
|
||||
level: function (color2) {
|
||||
var contrastRatio = this.contrast(color2);
|
||||
if (contrastRatio >= 7.1) {
|
||||
return 'AAA';
|
||||
}
|
||||
|
||||
return (contrastRatio >= 4.5) ? 'AA' : '';
|
||||
},
|
||||
|
||||
isDark: function () {
|
||||
// YIQ equation from http://24ways.org/2010/calculating-color-contrast
|
||||
var rgb = this.rgb().color;
|
||||
var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||
return yiq < 128;
|
||||
},
|
||||
|
||||
isLight: function () {
|
||||
return !this.isDark();
|
||||
},
|
||||
|
||||
negate: function () {
|
||||
var rgb = this.rgb();
|
||||
for (var i = 0; i < 3; i++) {
|
||||
rgb.color[i] = 255 - rgb.color[i];
|
||||
}
|
||||
return rgb;
|
||||
},
|
||||
|
||||
lighten: function (ratio) {
|
||||
var hsl = this.hsl();
|
||||
//hsl.color[2] += hsl.color[2] * ratio;
|
||||
hsl.color[2] += ratio * 100;
|
||||
return hsl;
|
||||
},
|
||||
|
||||
darken: function (ratio) {
|
||||
var hsl = this.hsl();
|
||||
//hsl.color[2] -= hsl.color[2] * ratio;
|
||||
hsl.color[2] -= ratio * 100;
|
||||
return hsl;
|
||||
},
|
||||
|
||||
saturate: function (ratio) {
|
||||
var hsl = this.hsl();
|
||||
hsl.color[1] += hsl.color[1] * ratio;
|
||||
return hsl;
|
||||
},
|
||||
|
||||
desaturate: function (ratio) {
|
||||
var hsl = this.hsl();
|
||||
hsl.color[1] -= hsl.color[1] * ratio;
|
||||
return hsl;
|
||||
},
|
||||
|
||||
whiten: function (ratio) {
|
||||
var hwb = this.hwb();
|
||||
hwb.color[1] += hwb.color[1] * ratio;
|
||||
return hwb;
|
||||
},
|
||||
|
||||
blacken: function (ratio) {
|
||||
var hwb = this.hwb();
|
||||
hwb.color[2] += hwb.color[2] * ratio;
|
||||
return hwb;
|
||||
},
|
||||
|
||||
grayscale: function () {
|
||||
// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
|
||||
var rgb = this.rgb().color;
|
||||
var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
|
||||
return Color.rgb(val, val, val);
|
||||
},
|
||||
|
||||
fade: function (ratio) {
|
||||
return this.alpha(this.valpha - (this.valpha * ratio));
|
||||
},
|
||||
|
||||
opaquer: function (ratio) {
|
||||
return this.alpha(this.valpha + (this.valpha * ratio));
|
||||
},
|
||||
|
||||
rotate: function (degrees) {
|
||||
var hsl = this.hsl();
|
||||
var hue = hsl.color[0];
|
||||
hue = (hue + degrees) % 360;
|
||||
hue = hue < 0 ? 360 + hue : hue;
|
||||
hsl.color[0] = hue;
|
||||
return hsl;
|
||||
},
|
||||
|
||||
mix: function (mixinColor, weight) {
|
||||
// ported from sass implementation in C
|
||||
// https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
|
||||
if (!mixinColor || !mixinColor.rgb) {
|
||||
throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof mixinColor);
|
||||
}
|
||||
var color1 = mixinColor.rgb();
|
||||
var color2 = this.rgb();
|
||||
var p = weight === undefined ? 0.5 : weight;
|
||||
|
||||
var w = 2 * p - 1;
|
||||
var a = color1.alpha() - color2.alpha();
|
||||
|
||||
var w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
|
||||
var w2 = 1 - w1;
|
||||
|
||||
return Color.rgb(
|
||||
w1 * color1.red() + w2 * color2.red(),
|
||||
w1 * color1.green() + w2 * color2.green(),
|
||||
w1 * color1.blue() + w2 * color2.blue(),
|
||||
color1.alpha() * p + color2.alpha() * (1 - p));
|
||||
}
|
||||
};
|
||||
|
||||
// model conversion methods and static constructors
|
||||
Object.keys(convert).forEach(function (model) {
|
||||
if (skippedModels.indexOf(model) !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
var channels = convert[model].channels;
|
||||
|
||||
// conversion methods
|
||||
Color.prototype[model] = function () {
|
||||
if (this.model === model) {
|
||||
return new Color(this);
|
||||
}
|
||||
|
||||
if (arguments.length) {
|
||||
return new Color(arguments, model);
|
||||
}
|
||||
|
||||
var newAlpha = typeof arguments[channels] === 'number' ? channels : this.valpha;
|
||||
return new Color(assertArray(convert[this.model][model].raw(this.color)).concat(newAlpha), model);
|
||||
};
|
||||
|
||||
// 'static' construction methods
|
||||
Color[model] = function (color) {
|
||||
if (typeof color === 'number') {
|
||||
color = zeroArray(_slice.call(arguments), channels);
|
||||
}
|
||||
return new Color(color, model);
|
||||
};
|
||||
});
|
||||
|
||||
function roundTo(num, places) {
|
||||
return Number(num.toFixed(places));
|
||||
}
|
||||
|
||||
function roundToPlace(places) {
|
||||
return function (num) {
|
||||
return roundTo(num, places);
|
||||
};
|
||||
}
|
||||
|
||||
function getset(model, channel, modifier) {
|
||||
model = Array.isArray(model) ? model : [model];
|
||||
|
||||
model.forEach(function (m) {
|
||||
(limiters[m] || (limiters[m] = []))[channel] = modifier;
|
||||
});
|
||||
|
||||
model = model[0];
|
||||
|
||||
return function (val) {
|
||||
var result;
|
||||
|
||||
if (arguments.length) {
|
||||
if (modifier) {
|
||||
val = modifier(val);
|
||||
}
|
||||
|
||||
result = this[model]();
|
||||
result.color[channel] = val;
|
||||
return result;
|
||||
}
|
||||
|
||||
result = this[model]().color[channel];
|
||||
if (modifier) {
|
||||
result = modifier(result);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
function maxfn(max) {
|
||||
return function (v) {
|
||||
return Math.max(0, Math.min(max, v));
|
||||
};
|
||||
}
|
||||
|
||||
function assertArray(val) {
|
||||
return Array.isArray(val) ? val : [val];
|
||||
}
|
||||
|
||||
function zeroArray(arr, length) {
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (typeof arr[i] !== 'number') {
|
||||
arr[i] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
module.exports = Color;
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu Button</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<script src="../../../o-icon/ac-unit-outlined.js"></script>
|
||||
<script src="../../../o-icon/accessible-rounded.js"></script>
|
||||
<style>
|
||||
o-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div>
|
||||
<o-button>Default</o-button>
|
||||
<o-button type="primary">Primary</o-button>
|
||||
|
||||
<o-button type="danger">Danger</o-button>
|
||||
|
||||
<o-button type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button disabled>Default</o-button>
|
||||
<o-button disabled type="primary">Primary</o-button>
|
||||
|
||||
<o-button disabled type="danger">Danger</o-button>
|
||||
|
||||
<o-button disabled type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button disabled type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button plain>Plain</o-button>
|
||||
<o-button plain type="primary">Primary</o-button>
|
||||
|
||||
<o-button plain type="danger">Danger</o-button>
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button plain type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
|
||||
<o-button plain type="danger" size="medium">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
<o-button plain type="danger" size="small">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
<o-button plain type="danger" size="mini">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<o-button plain loading>Plain</o-button>
|
||||
<o-button plain loading type="primary">Primary</o-button>
|
||||
|
||||
<o-button plain loading type="danger">Danger</o-button>
|
||||
|
||||
|
||||
<o-button plain loading type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain loading type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<o-button>Default</o-button>
|
||||
<o-button size="medium">Medium</o-button>
|
||||
<o-button size="small">Small</o-button>
|
||||
<o-button size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button round>Default</o-button>
|
||||
<o-button round size="medium">Medium</o-button>
|
||||
<o-button round size="small">Small</o-button>
|
||||
<o-button round size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"name": "@omiu/tree",
|
||||
"version": "0.0.0",
|
||||
"description": "Omi UI Components.",
|
||||
"main": "src/index.js",
|
||||
"types": "src/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"typings.json"
|
||||
],
|
||||
"keywords": [
|
||||
"omiu",
|
||||
"omi",
|
||||
"omio",
|
||||
"preact",
|
||||
"react",
|
||||
"virtual dom",
|
||||
"vdom",
|
||||
"components",
|
||||
"virtual",
|
||||
"dom"
|
||||
],
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "http://omijs.org",
|
||||
"devDependencies": {
|
||||
"css": "^2.2.4",
|
||||
"css-loader": "^1.0.1",
|
||||
"file": "^0.2.2",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.5",
|
||||
"node-sass": "^4.12.0",
|
||||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"ts-loader": "^5.4.4",
|
||||
"typescript": "^3.2.1",
|
||||
"url": "^0.11.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.42.1",
|
||||
"webpack-cli": "^3.3.1",
|
||||
"webpack-dev-server": "^3.1.10",
|
||||
"webpack-merge": "^4.1.4"
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
"babel-cli",
|
||||
"babel-core",
|
||||
"babel-eslint",
|
||||
"babel-loader",
|
||||
"jscodeshift",
|
||||
"rollup-plugin-babel"
|
||||
]
|
||||
},
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/omim.min.js",
|
||||
"threshold": "4Kb"
|
||||
}
|
||||
],
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
const path = require('path')
|
||||
const glob = require('glob')
|
||||
const webpack = require('webpack')
|
||||
|
||||
const pkgName = require('../package.json')
|
||||
const componentName = pkgName.name.split('/')[1]
|
||||
|
||||
const name = 'o-' + componentName
|
||||
const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
|
||||
|
||||
|
||||
const config = {
|
||||
devtool: 'source-map',
|
||||
entry: {
|
||||
[name]: './src/index.tsx'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../src/'),
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'umd',
|
||||
library: library,
|
||||
libraryExport: "default",
|
||||
globalObject: 'this'
|
||||
},
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
|
||||
// mdc-web doesn't use sass-loader's normal syntax for imports
|
||||
// across modules, so we add all module directories containing
|
||||
// mdc-web components to the Sass include path
|
||||
// https://github.com/material-components/material-components-web/issues/351
|
||||
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
'less-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
loader: "url-loader"
|
||||
},
|
||||
{
|
||||
test: /\.[t|j]sx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
watch: process.argv[3] === 'demo',
|
||||
externals: {
|
||||
'omi': {
|
||||
commonjs: "omi",
|
||||
commonjs2: "omi",
|
||||
amd: "omi",
|
||||
root: "Omi"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
webpack(config, (err, stats) => { // Stats Object
|
||||
if (err || stats.hasErrors()) {
|
||||
// Handle errors here
|
||||
}
|
||||
// Done processing
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '../theme.ts';
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini';
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
|
||||
plain?: boolean;
|
||||
round?: boolean;
|
||||
circle?: boolean;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
icon?: string;
|
||||
autofocus?: boolean;
|
||||
nativeType?: 'button' | 'submit' | 'reset';
|
||||
block?: boolean;
|
||||
}
|
||||
export default class Button extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
plain: boolean;
|
||||
round: boolean;
|
||||
circle: boolean;
|
||||
loading: boolean;
|
||||
disabled: boolean;
|
||||
autofocus: boolean;
|
||||
nativeType: string;
|
||||
block: boolean;
|
||||
};
|
||||
static propTypes: {
|
||||
size: StringConstructor;
|
||||
type: StringConstructor;
|
||||
plain: BooleanConstructor;
|
||||
round: BooleanConstructor;
|
||||
circle: BooleanConstructor;
|
||||
loading: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
icon: StringConstructor;
|
||||
autofocus: BooleanConstructor;
|
||||
nativeType: StringConstructor;
|
||||
block: BooleanConstructor;
|
||||
};
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,639 @@
|
|||
@import "../theme.scss";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.o-fade-in-enter,
|
||||
.o-fade-in-leave-active,
|
||||
.o-fade-in-linear-enter,
|
||||
.o-fade-in-linear-leave,
|
||||
.o-fade-in-linear-leave-active,
|
||||
.fade-in-linear-enter,
|
||||
.fade-in-linear-leave,
|
||||
.fade-in-linear-leave-active {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.o-checkbox,
|
||||
.o-checkbox__input {
|
||||
display: inline-block;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
-webkit-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear
|
||||
}
|
||||
|
||||
.o-fade-in-linear-enter-active,
|
||||
.o-fade-in-linear-leave-active {
|
||||
-webkit-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear
|
||||
}
|
||||
|
||||
.o-fade-in-enter-active,
|
||||
.o-fade-in-leave-active {
|
||||
-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
|
||||
transition: all .3s cubic-bezier(.55, 0, .1, 1)
|
||||
}
|
||||
|
||||
.o-zoom-in-center-enter-active,
|
||||
.o-zoom-in-center-leave-active {
|
||||
-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
|
||||
transition: all .3s cubic-bezier(.55, 0, .1, 1)
|
||||
}
|
||||
|
||||
.o-zoom-in-center-enter,
|
||||
.o-zoom-in-center-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0)
|
||||
}
|
||||
|
||||
.o-zoom-in-top-enter-active,
|
||||
.o-zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
-webkit-transform-origin: center top;
|
||||
transform-origin: center top
|
||||
}
|
||||
|
||||
.o-zoom-in-top-enter,
|
||||
.o-zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0)
|
||||
}
|
||||
|
||||
.o-zoom-in-bottom-enter-active,
|
||||
.o-zoom-in-bottom-leave-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom
|
||||
}
|
||||
|
||||
.o-zoom-in-bottom-enter,
|
||||
.o-zoom-in-bottom-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0)
|
||||
}
|
||||
|
||||
.o-zoom-in-left-enter-active,
|
||||
.o-zoom-in-left-leave-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
|
||||
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left
|
||||
}
|
||||
|
||||
.o-zoom-in-left-enter,
|
||||
.o-zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.45, .45);
|
||||
transform: scale(.45, .45)
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
-webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
|
||||
transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
-webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out;
|
||||
transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out
|
||||
}
|
||||
|
||||
.o-list-enter-active,
|
||||
.o-list-leave-active {
|
||||
-webkit-transition: all 1s;
|
||||
transition: all 1s
|
||||
}
|
||||
|
||||
.o-list-enter,
|
||||
.o-list-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-30px);
|
||||
transform: translateY(-30px)
|
||||
}
|
||||
|
||||
.o-opacity-transition {
|
||||
-webkit-transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1)
|
||||
}
|
||||
|
||||
.o-checkbox {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 30px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered {
|
||||
padding: 9px 20px 9px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DCDFE6;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: normal;
|
||||
height: 40px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.is-checked {
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.is-disabled {
|
||||
border-color: #EBEEF5;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered+.o-checkbox.is-bordered {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--medium {
|
||||
padding: 7px 20px 7px 10px;
|
||||
border-radius: 4px;
|
||||
height: 36px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__label {
|
||||
line-height: 17px;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--medium .o-checkbox__inner {
|
||||
height: 14px;
|
||||
width: 14px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--small {
|
||||
padding: 5px 15px 5px 10px;
|
||||
border-radius: 3px;
|
||||
height: 32px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__label {
|
||||
line-height: 15px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner {
|
||||
height: 12px;
|
||||
width: 12px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--small .o-checkbox__inner::after {
|
||||
height: 6px;
|
||||
width: 2px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--mini {
|
||||
padding: 3px 15px 3px 10px;
|
||||
border-radius: 3px;
|
||||
height: 28px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__label {
|
||||
line-height: 12px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner,
|
||||
.o-checkbox__input {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner {
|
||||
height: 12px;
|
||||
width: 12px
|
||||
}
|
||||
|
||||
.o-checkbox.is-bordered.o-checkbox--mini .o-checkbox__inner::after {
|
||||
height: 6px;
|
||||
width: 2px
|
||||
}
|
||||
|
||||
.o-checkbox__input {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled .o-checkbox__inner {
|
||||
background-color: #edf2fc;
|
||||
border-color: #DCDFE6;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled .o-checkbox__inner::after {
|
||||
cursor: not-allowed;
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled .o-checkbox__inner+.o-checkbox__label {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled.is-checked .o-checkbox__inner::after {
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled.is-indeterminate .o-checkbox__inner::before {
|
||||
background-color: #C0C4CC;
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-checked .o-checkbox__inner,
|
||||
.o-checkbox__input.is-indeterminate .o-checkbox__inner {
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-disabled+span.o-checkbox__label {
|
||||
color: #C0C4CC;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-checked .o-checkbox__inner::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1)
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-checked+.o-checkbox__label {
|
||||
color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-focus .o-checkbox__inner {
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-indeterminate .o-checkbox__inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #FFF;
|
||||
height: 2px;
|
||||
-webkit-transform: scale(.5);
|
||||
transform: scale(.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5px
|
||||
}
|
||||
|
||||
.o-checkbox__input.is-indeterminate .o-checkbox__inner::after {
|
||||
display: none
|
||||
}
|
||||
|
||||
.o-checkbox__inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #FFF;
|
||||
z-index: 1;
|
||||
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
|
||||
}
|
||||
|
||||
.o-checkbox__inner:hover {
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox__inner::after {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
-webkit-transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.o-checkbox__original {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.o-checkbox-button,
|
||||
.o-checkbox-button__inner {
|
||||
display: inline-block;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.o-checkbox__label {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
line-height: 19px;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.o-checkbox:last-of-type {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner {
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: #FFF;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-left: 0;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner.is-round {
|
||||
padding: 12px 20px
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner:hover {
|
||||
color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner [class*=el-icon-] {
|
||||
line-height: .9
|
||||
}
|
||||
|
||||
.o-checkbox-button__inner [class*=el-icon-]+span {
|
||||
margin-left: 5px
|
||||
}
|
||||
|
||||
.o-checkbox-button__original {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.o-checkbox-button.is-checked .o-checkbox-button__inner {
|
||||
color: #FFF;
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
-webkit-box-shadow: -1px 0 0 0 #8cc5ff;
|
||||
box-shadow: -1px 0 0 0 #8cc5ff
|
||||
}
|
||||
|
||||
.o-checkbox-button.is-checked:first-child .o-checkbox-button__inner {
|
||||
border-left-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox-button.is-disabled .o-checkbox-button__inner {
|
||||
color: #C0C4CC;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #FFF;
|
||||
border-color: #EBEEF5;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.o-checkbox-button.is-disabled:first-child .o-checkbox-button__inner {
|
||||
border-left-color: #EBEEF5
|
||||
}
|
||||
|
||||
.o-checkbox-button:first-child .o-checkbox-button__inner {
|
||||
border-left: 1px solid #DCDFE6;
|
||||
border-radius: 4px 0 0 4px;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important
|
||||
}
|
||||
|
||||
.o-checkbox-button.is-focus .o-checkbox-button__inner {
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.o-checkbox-button:last-child .o-checkbox-button__inner {
|
||||
border-radius: 0 4px 4px 0
|
||||
}
|
||||
|
||||
.o-checkbox-button--medium .o-checkbox-button__inner {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.o-checkbox-button--medium .o-checkbox-button__inner.is-round {
|
||||
padding: 10px 20px
|
||||
}
|
||||
|
||||
.o-checkbox-button--small .o-checkbox-button__inner {
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.o-checkbox-button--small .o-checkbox-button__inner.is-round {
|
||||
padding: 9px 15px
|
||||
}
|
||||
|
||||
.o-checkbox-button--mini .o-checkbox-button__inner {
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.o-checkbox-button--mini .o-checkbox-button__inner.is-round {
|
||||
padding: 7px 15px
|
||||
}
|
||||
|
||||
.o-checkbox-group {
|
||||
font-size: 0
|
||||
}
|
||||
|
||||
.o-tree {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: #FFF;
|
||||
color: #606266
|
||||
}
|
||||
|
||||
.o-tree__empty-block {
|
||||
position: relative;
|
||||
min-height: 60px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.o-tree__empty-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
color: #909399;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.o-tree__drop-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: #409EFF
|
||||
}
|
||||
|
||||
.o-tree-node {
|
||||
white-space: nowrap;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.o-tree-node:focus>.o-tree-node__content {
|
||||
background-color: #F5F7FA
|
||||
}
|
||||
|
||||
.o-tree-node.is-drop-inner>.o-tree-node__content .o-tree-node__label {
|
||||
background-color: #409EFF;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.o-tree-node__content {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.o-tree-node__content>.o-tree-node__expand-icon {
|
||||
padding: 6px
|
||||
}
|
||||
|
||||
.o-tree-node__content>label.o-checkbox {
|
||||
margin-right: 8px
|
||||
}
|
||||
|
||||
.o-tree-node__content:hover {
|
||||
background-color: #F5F7FA
|
||||
}
|
||||
|
||||
.o-tree.is-dragging .o-tree-node__content {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.o-tree.is-dragging .o-tree-node__content * {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.o-tree.is-dragging.is-drop-not-allow .o-tree-node__content {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.o-tree-node__expand-icon {
|
||||
cursor: pointer;
|
||||
color: #C0C4CC;
|
||||
font-size: 12px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
-webkit-transition: -webkit-transform .3s ease-in-out;
|
||||
transition: -webkit-transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
|
||||
}
|
||||
|
||||
.o-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
|
||||
.o-tree-node__expand-icon.is-leaf {
|
||||
color: transparent;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.o-tree-node__label {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.o-tree-node__loading-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #C0C4CC
|
||||
}
|
||||
|
||||
.o-tree-node>.o-tree-node__children {
|
||||
overflow: hidden;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.o-tree-node.is-expanded>.o-tree-node__children {
|
||||
display: block
|
||||
}
|
||||
|
||||
.o-tree--highlight-current .o-tree-node.is-current>.o-tree-node__content {
|
||||
background-color: #f0f7ff
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
//@ts-ignore
|
||||
import '../theme.ts'
|
||||
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini',
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
plain?: boolean,
|
||||
round?: boolean,
|
||||
circle?: boolean,
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
icon?: string,
|
||||
autofocus?: boolean,
|
||||
nativeType?: 'button' | 'submit' | 'reset',
|
||||
block?: boolean
|
||||
}
|
||||
|
||||
|
||||
|
||||
@tag('o-button')
|
||||
export default class Button extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
|
||||
static defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
}
|
||||
|
||||
|
||||
static propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean
|
||||
}
|
||||
|
||||
|
||||
render(props) {
|
||||
|
||||
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block
|
||||
})} type={props.nativeType} >
|
||||
{props.loading && [<svg class="loading" viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>, ' ']}
|
||||
<slot></slot>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export {};
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
$o-primary: #07c160;
|
||||
$o-primary-active: darken($o-primary, 10%);
|
||||
$o-primary-fade-little : fade-out($o-primary, 0.382);
|
||||
$o-primary-fade-some: fade-out($o-primary, 0.618);
|
||||
$o-primary-fade-lot: fade-out($o-primary, 0.9);
|
||||
|
||||
$o-primary-hover-border: fade-out($o-primary, 0.618);
|
||||
$o-primary-hover-bg: fade-out($o-primary, 0.9);
|
||||
|
||||
$o-danger: #fa5151;
|
||||
$o-danger-active: darken($o-danger, 10%);
|
||||
$o-danger-fade-little : fade-out($o-danger, 0.382);
|
||||
$o-danger-fade-some: fade-out($o-danger, 0.618);
|
||||
$o-danger-fade-lot: fade-out($o-danger, 0.9);
|
||||
|
||||
|
||||
$options: (
|
||||
primary: $o-primary,
|
||||
primary-active: $o-primary-active,
|
||||
primary-fade-little: $o-primary-fade-little,
|
||||
primary-fade-some: $o-primary-fade-some,
|
||||
primary-fade-lot: $o-primary-fade-lot,
|
||||
|
||||
danger: $o-danger,
|
||||
danger-active: $o-danger-active,
|
||||
danger-fade-little: $o-danger-fade-little,
|
||||
danger-fade-some: $o-danger-fade-some,
|
||||
danger-fade-lot: $o-danger-fade-lot,
|
||||
);
|
||||
|
||||
$o-surface: #ffffff;
|
||||
|
||||
$o-on-primary: #ffffff;
|
||||
$o-on-secondary: #ffffff;
|
||||
$o-on-danger: #ffffff;
|
||||
$o-on-surface: #000000;
|
||||
$o-background: #ffffff;
|
||||
|
||||
$o-small-radius: 4px;
|
||||
$o-medium-radius: 4px;
|
||||
$o-large-radius: 0px;
|
||||
$o-font-family: -apple-system-font,"Helvetica Neue",sans-serif;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import * as Color from './color'
|
||||
|
||||
theme()
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
theme()
|
||||
})
|
||||
|
||||
function theme() {
|
||||
if (document.body && !document.body.style.getPropertyValue('--o-primary')) {
|
||||
setTheme('primary', '#07c160')
|
||||
setTheme('danger', '#f5222d')
|
||||
setTheme('surface', '#ffffff')
|
||||
setTheme('on-primary', '#ffffff')
|
||||
setTheme('on-danger', '#ffffff')
|
||||
setTheme('on-surface', '#000000')
|
||||
setTheme('background', '#ffffff')
|
||||
setTheme('small-radius', '4px')
|
||||
setTheme('medium-radius', '4px')
|
||||
setTheme('large-radius', '0px')
|
||||
setTheme('font-family', '-apple-system-font,"Helvetica Neue",sans-serif')
|
||||
}
|
||||
}
|
||||
|
||||
function setTheme(key, value) {
|
||||
const style = document.body.style
|
||||
|
||||
style.setProperty('--o-' + key, value)
|
||||
switch (key) {
|
||||
case 'primary':
|
||||
style.setProperty('--o-primary-fade-little', Color(value).fade(0.382))
|
||||
style.setProperty('--o-primary-fade-some', Color(value).fade(0.618))
|
||||
style.setProperty('--o-primary-fade-lot', Color(value).fade(0.9))
|
||||
style.setProperty('--o-primary-active', Color(value).darken(0.1))
|
||||
|
||||
|
||||
|
||||
style.setProperty('--o-primary-hover-border', Color(value).fade(0.618))
|
||||
style.setProperty('--o-primary-hover-bg', Color(value).fade(0.9))
|
||||
|
||||
break
|
||||
case 'danger':
|
||||
style.setProperty('--o-danger-fade-little', Color(value).fade(0.382))
|
||||
style.setProperty('--o-danger-fade-some', Color(value).fade(0.618))
|
||||
style.setProperty('--o-danger-fade-lot', Color(value).fade(0.9))
|
||||
style.setProperty('--o-danger-active', Color(value).darken(0.1))
|
||||
break
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (typeof window !== undefined) {
|
||||
//@ts-ignore
|
||||
window.Omiu = {
|
||||
setTheme: setTheme,
|
||||
setThemePrimary: function (color) {
|
||||
setTheme('primary', color)
|
||||
},
|
||||
setThemeError: function (color) {
|
||||
setTheme('error', color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"outDir": "dist",
|
||||
"allowJs": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue