DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

publish(#omiu/checkbox)

This commit is contained in:
dntzhang 2020-04-23 22:52:52 +08:00
parent 332205a54b
commit 358e336917
19 changed files with 491 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/checkbox/demos/omi-demo/package.json
View File

@ -14,7 +14,7 @@
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.3.1",
"@omiu/checkbox": "^0.0.4",
"@omiu/checkbox": "latest",
"autoprefixer": "7.1.6",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "7.2.3",

2
components/checkbox/demos/preact-demo/package.json
View File

@ -25,6 +25,6 @@
"dependencies": {
"preact": "^10.1.0",
"preact-render-to-string": "^5.1.2",
"@omiu/checkbox": "^0.0.4"
"@omiu/checkbox": "latest"
}
}

2
components/checkbox/demos/react-demo/package.json
View File

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@omiu/checkbox": "^0.0.4",
"@omiu/checkbox": "latest",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",

2
components/checkbox/demos/vue-demo/package.json
View File

@ -11,7 +11,7 @@
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"@omiu/checkbox": "^0.0.4"
"@omiu/checkbox": "latest"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",

14
components/checkbox/package.json
View File

@ -1,12 +1,13 @@
{
"name": "@omiu/checkbox",
"version": "0.0.5",
"version": "0.0.6",
"description": "Omi UI Components.",
"main": "src/index.js",
"module": "src/index.esm.js",
"types": "src/index.d.ts",
"scripts": {
"start": "node ./scripts/webpack.build.js -- demo",
"build": "node ./scripts/webpack.build.js -- build"
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
},
"typings": "./dist/index.d.ts",
"repository": {
@ -37,6 +38,7 @@
},
"homepage": "http://omijs.org",
"devDependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"css": "^2.2.4",
"css-loader": "^1.0.1",
"file": "^0.2.2",
@ -49,7 +51,13 @@
"omi": "latest",
"omio": "latest",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"progress-bar-webpack-plugin": "^2.1.0",
"resolve-url-loader": "^3.1.0",
"rollup": "^2.7.1",
"rollup-plugin-license": "^2.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-scss": "^2.4.0",
"rollup-plugin-typescript": "^1.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"to-string-loader": "^1.1.5",
@ -85,6 +93,6 @@
"useTabs": false
},
"dependencies": {
"@omiu/common": "latest"
}
}

38
components/checkbox/scripts/rollup.config.js Normal file
View File

@ -0,0 +1,38 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
});
export default {
input: "src/index.tsx",
output: {
format: "es",
file: "./src/index.esm.js",
name: pkg.name,
sourcemap: true,
strict: true
},
plugins: [
nodeResolve({
main: true
}),
scss({
//output: false,
output: function (styles, styleNodes) {
fs.writeFileSync('./src/index.css', styles)
},
}),
typescript(),
commonjs(),
licensePlugin
],
external: ['omi']
};

16
components/checkbox/scripts/rollup.end.js Normal file
View File

@ -0,0 +1,16 @@
const fs = require('fs')
const css = fs.readFileSync('./src/index.css')
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
fs.writeFileSync('./src/index.esm.js',
js.replace(`var css = /*#__PURE__*/Object.freeze({
__proto__: null
});`, `
var css = \`${css}\`
`)
)

5
components/checkbox/scripts/webpack.build.js
View File

@ -1,7 +1,7 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const pkgName = require('../package.json')
const componentName = pkgName.name.split('/')[1]
@ -11,6 +11,9 @@ const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUppe
const config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
[name]: './src/index.tsx'
},

124
components/checkbox/src/index.css Normal file
View File

@ -0,0 +1,124 @@
:host {
display: inline-block; }
* {
box-sizing: border-box; }
.o-checkbox {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap; }
.o-checkbox:hover {
cursor: pointer; }
.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #2170b8;
background-color: var(--o-primary, #07c160);
opacity: 1; }
.o-checkbox__indeterminate .o-checkbox__checkmark {
opacity: 0; }
.o-checkbox__checkmark {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
color: #ffffff; }
.o-checkbox__checkmark-path {
transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
stroke: currentColor;
stroke-width: 3.12px;
stroke-dashoffset: 29.78334;
stroke-dasharray: 29.78334; }
.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path,
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {
stroke-dashoffset: 0; }
.o-checkbox__background {
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 45%;
height: 45%;
border: 2px solid currentColor;
border-radius: 2px;
background-color: transparent;
pointer-events: none;
will-change: background-color, border-color;
transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__background,
.o-checkbox__label {
display: inline-block;
height: 18px;
vertical-align: middle; }
.o-checkbox__background {
width: 18px; }
.o-checkbox__label {
margin-left: 10px; }
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {
transform: scaleX(1) rotate(0deg);
opacity: 1; }
.o-checkbox__mixedmark {
width: 100%;
height: 0;
transform: scaleX(0) rotate(0deg);
border: 1px solid white;
top: 50%;
position: relative;
margin-top: -1px;
opacity: 0;
transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__native-control {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit; }
.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.54);
color: white; }
.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #2170b8;
background-color: var(--o-primary, #07c160);
opacity: 0.5; }
.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.34);
color: white; }
.o-checkbox__disabled .o-checkbox__label {
color: #888; }
.o-checkbox__disabled:hover {
cursor: not-allowed; }

1
components/checkbox/src/index.d.ts vendored
View File

@ -1,5 +1,4 @@
import { WeElement } from 'omi';
import '../theme.ts';
interface Props {
disabled: boolean;
checked: boolean;

251
components/checkbox/src/index.esm.js Normal file
View File

@ -0,0 +1,251 @@
/**
* @omiu/checkbox v0.0.6 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
import { h, extractClass, tag, WeElement } from 'omi';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
var css = `:host {
display: inline-block; }
* {
box-sizing: border-box; }
.o-checkbox {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap; }
.o-checkbox:hover {
cursor: pointer; }
.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #2170b8;
background-color: var(--o-primary, #07c160);
opacity: 1; }
.o-checkbox__indeterminate .o-checkbox__checkmark {
opacity: 0; }
.o-checkbox__checkmark {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
color: #ffffff; }
.o-checkbox__checkmark-path {
transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
stroke: currentColor;
stroke-width: 3.12px;
stroke-dashoffset: 29.78334;
stroke-dasharray: 29.78334; }
.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path,
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {
stroke-dashoffset: 0; }
.o-checkbox__background {
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 45%;
height: 45%;
border: 2px solid currentColor;
border-radius: 2px;
background-color: transparent;
pointer-events: none;
will-change: background-color, border-color;
transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__background,
.o-checkbox__label {
display: inline-block;
height: 18px;
vertical-align: middle; }
.o-checkbox__background {
width: 18px; }
.o-checkbox__label {
margin-left: 10px; }
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {
transform: scaleX(1) rotate(0deg);
opacity: 1; }
.o-checkbox__mixedmark {
width: 100%;
height: 0;
transform: scaleX(0) rotate(0deg);
border: 1px solid white;
top: 50%;
position: relative;
margin-top: -1px;
opacity: 0;
transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }
.o-checkbox__native-control {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: inherit; }
.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.54);
color: white; }
.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background,
.o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-primary, #07c160);
background-color: #2170b8;
background-color: var(--o-primary, #07c160);
opacity: 0.5; }
.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.34);
color: white; }
.o-checkbox__disabled .o-checkbox__label {
color: #888; }
.o-checkbox__disabled:hover {
cursor: not-allowed; }
`
var Table = /** @class */ (function (_super) {
__extends(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.changeHandler = function (e) {
if (_this.props.disabled) {
return;
}
_this.fire('change', e.currentTarget.checked);
if (_this.props.indeterminate) {
_this.props.checked = true;
_this.props.indeterminate = false;
if (_this.prevProps) {
_this.prevProps.checked = true;
_this.prevProps.indeterminate = false;
}
_this.update(true);
}
};
return _this;
}
Table.prototype.render = function (props) {
return (h("div", __assign({}, extractClass(props, 'o-checkbox', {
'o-checkbox__disabled': props.disabled,
'o-checkbox__indeterminate': props.indeterminate
})),
h("input", __assign({ type: "checkbox", disabled: props.disabled, onChange: this.changeHandler }, extract(props, ['checked', 'value', 'indeterminate']), { class: "o-checkbox__native-control", id: "checkbox" })),
h("div", { class: "o-checkbox__background" },
h("svg", { class: "o-checkbox__checkmark", viewBox: "0 0 24 24" },
h("path", { class: "o-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
h("div", { class: "o-checkbox__mixedmark" })),
props.label && h("label", { class: "o-checkbox__label", for: "checkbox" }, props.label)));
};
Table.css = css;
Table.propTypes = {
label: String,
disabled: Boolean,
indeterminate: Boolean,
checked: Boolean,
value: String
};
Table = __decorate([
tag('o-checkbox')
], Table);
return Table;
}(WeElement));
function extract(props, prop) {
var _a;
if (typeof prop === 'string') {
if (props.hasOwnProperty(prop)) {
return _a = {}, _a[prop] = props[prop], _a;
}
}
else {
var res_1 = {};
prop.forEach(function (key) {
if (props.hasOwnProperty(key)) {
res_1[key] = props[key];
}
});
return res_1;
}
}
export default Table;
//# sourceMappingURL=index.esm.js.map

1
components/checkbox/src/index.esm.js.map Normal file
View File

File diff suppressed because one or more lines are too long

36
components/checkbox/src/index.js
View File

@ -108,7 +108,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1
// module
exports.push([module.i, ":host {\n display: inline-block; }\n\n* {\n box-sizing: border-box; }\n\n.o-checkbox {\n position: relative;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.87);\n white-space: nowrap; }\n\n.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background, .o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {\n border-color: #07c160;\n border-color: var(--o-theme-primary, #07c160);\n background-color: #2170b8;\n background-color: var(--o-theme-primary, #07c160);\n opacity: 1; }\n\n.o-checkbox__indeterminate .o-checkbox__checkmark {\n opacity: 0; }\n\n.o-checkbox__checkmark {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n opacity: 1;\n transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n color: #ffffff; }\n\n.o-checkbox__checkmark-path {\n transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n stroke: currentColor;\n stroke-width: 3.12px;\n stroke-dashoffset: 29.78334;\n stroke-dasharray: 29.78334; }\n\n.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path, .o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {\n stroke-dashoffset: 0; }\n\n.o-checkbox__background {\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 45%;\n height: 45%;\n border: 2px solid currentColor;\n border-radius: 2px;\n background-color: transparent;\n pointer-events: none;\n will-change: background-color, border-color;\n transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }\n\n.o-checkbox__background, .o-checkbox__label {\n display: inline-block;\n height: 18px;\n vertical-align: middle; }\n\n.o-checkbox__background {\n width: 18px; }\n\n.o-checkbox__label {\n margin-left: 10px; }\n\n.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {\n transform: scaleX(1) rotate(0deg);\n opacity: 1; }\n\n.o-checkbox__mixedmark {\n width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border: 1px solid white;\n top: 50%;\n position: relative;\n margin-top: -1px;\n opacity: 0;\n transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }\n\n.o-checkbox__native-control {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit; }\n\n.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {\n background-color: transparent;\n border: 1px solid rgba(0, 0, 0, 0.54);\n color: white; }\n\n.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background, .o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {\n border-color: #07c160;\n border-color: var(--o-theme-primary, #07c160);\n background-color: #2170b8;\n background-color: var(--o-theme-primary, #07c160);\n opacity: 0.5; }\n\n.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {\n background-color: transparent;\n border: 1px solid rgba(0, 0, 0, 0.34);\n color: white; }\n\n.o-checkbox__disabled .o-checkbox__label {\n color: #888; }\n", ""]);
exports.push([module.i, ":host {\n display: inline-block; }\n\n* {\n box-sizing: border-box; }\n\n.o-checkbox {\n position: relative;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.87);\n white-space: nowrap; }\n .o-checkbox:hover {\n cursor: pointer; }\n\n.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background,\n.o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {\n border-color: #07c160;\n border-color: var(--o-primary, #07c160);\n background-color: #2170b8;\n background-color: var(--o-primary, #07c160);\n opacity: 1; }\n\n.o-checkbox__indeterminate .o-checkbox__checkmark {\n opacity: 0; }\n\n.o-checkbox__checkmark {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n opacity: 1;\n transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n color: #ffffff; }\n\n.o-checkbox__checkmark-path {\n transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n stroke: currentColor;\n stroke-width: 3.12px;\n stroke-dashoffset: 29.78334;\n stroke-dasharray: 29.78334; }\n\n.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path,\n.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {\n stroke-dashoffset: 0; }\n\n.o-checkbox__background {\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 45%;\n height: 45%;\n border: 2px solid currentColor;\n border-radius: 2px;\n background-color: transparent;\n pointer-events: none;\n will-change: background-color, border-color;\n transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }\n\n.o-checkbox__background,\n.o-checkbox__label {\n display: inline-block;\n height: 18px;\n vertical-align: middle; }\n\n.o-checkbox__background {\n width: 18px; }\n\n.o-checkbox__label {\n margin-left: 10px; }\n\n.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {\n transform: scaleX(1) rotate(0deg);\n opacity: 1; }\n\n.o-checkbox__mixedmark {\n width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border: 1px solid white;\n top: 50%;\n position: relative;\n margin-top: -1px;\n opacity: 0;\n transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); }\n\n.o-checkbox__native-control {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit; }\n\n.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {\n background-color: transparent;\n border: 1px solid rgba(0, 0, 0, 0.54);\n color: white; }\n\n.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background,\n.o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {\n border-color: #07c160;\n border-color: var(--o-primary, #07c160);\n background-color: #2170b8;\n background-color: var(--o-primary, #07c160);\n opacity: 0.5; }\n\n.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .o-checkbox__background {\n background-color: transparent;\n border: 1px solid rgba(0, 0, 0, 0.34);\n color: white; }\n\n.o-checkbox__disabled .o-checkbox__label {\n color: #888; }\n\n.o-checkbox__disabled:hover {\n cursor: not-allowed; }\n", ""]);
// exports
@ -263,8 +263,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
//@ts-ignore
__webpack_require__(/*! ../theme.ts */ "./theme.ts");
var Table = /** @class */ (function (_super) {
__extends(Table, _super);
function Table() {
@ -331,38 +329,6 @@ function extract(props, prop) {
}
/***/ }),
/***/ "./theme.ts":
/*!******************!*\
!*** ./theme.ts ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
theme();
document.addEventListener('DOMContentLoaded', function () {
theme();
});
function theme() {
if (document.body && !document.body.style.getPropertyValue('--o-theme-primary')) {
document.body.style.setProperty('--o-theme-primary', '#07c160');
document.body.style.setProperty('--o-theme-secondary', '#07c160');
document.body.style.setProperty('--o-theme-error', '#f5222d');
document.body.style.setProperty('--o-theme-surface', '#ffffff');
document.body.style.setProperty('--o-theme-on-primary', '#ffffff');
document.body.style.setProperty('--o-theme-on-secondary', '#ffffff');
document.body.style.setProperty('--o-theme-on-error', '#ffffff');
document.body.style.setProperty('--o-theme-on-surface', '#000000');
document.body.style.setProperty('--o-theme-background', '#ffffff');
document.body.style.setProperty('--o-shape-small-component-radius', '4px');
document.body.style.setProperty('--o-shape-medium-component-radius', '4px');
document.body.style.setProperty('--o-shape-large-component-radius', '0px');
document.body.style.setProperty('--o-typography--font-family', 'Roboto, sans-serif');
}
}
/***/ }),
/***/ "omi":

2
components/checkbox/src/index.js.map
View File

File diff suppressed because one or more lines are too long

60
components/checkbox/src/index.scss
View File

@ -1,5 +1,7 @@
@import "@omiu/common/theme.scss";
:host {
display: inline-block;
display: inline-block;
}
* {
@ -11,18 +13,25 @@
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap;
&:hover {
cursor: pointer;
}
}
.o-checkbox__native-control:enabled:checked ~ .o-checkbox__background, .o-checkbox__native-control:enabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-theme-primary, #07c160);
.o-checkbox__native-control:enabled:checked~.o-checkbox__background,
.o-checkbox__native-control:enabled:indeterminate~.o-checkbox__background {
border-color: $o-primary;
border-color: var(--o-primary, $o-primary);
background-color: #2170b8;
background-color: var(--o-theme-primary, #07c160);
background-color: var(--o-primary, $o-primary);
opacity: 1;
}
.o-checkbox__indeterminate .o-checkbox__checkmark{
.o-checkbox__indeterminate .o-checkbox__checkmark {
opacity: 0;
}
@ -47,11 +56,12 @@
stroke-dasharray: 29.78334;
}
.o-checkbox__native-control:checked ~ .o-checkbox__background .o-checkbox__checkmark-path, .o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__checkmark-path {
.o-checkbox__native-control:checked~.o-checkbox__background .o-checkbox__checkmark-path,
.o-checkbox__native-control:indeterminate~.o-checkbox__background .o-checkbox__checkmark-path {
stroke-dashoffset: 0;
}
.o-checkbox__background{
.o-checkbox__background {
position: relative;
align-items: center;
justify-content: center;
@ -66,21 +76,22 @@
transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}
.o-checkbox__background,.o-checkbox__label{
.o-checkbox__background,
.o-checkbox__label {
display: inline-block;
height: 18px;
vertical-align: middle;
}
.o-checkbox__background{
.o-checkbox__background {
width: 18px;
}
.o-checkbox__label{
.o-checkbox__label {
margin-left: 10px;
}
.o-checkbox__native-control:indeterminate ~ .o-checkbox__background .o-checkbox__mixedmark {
.o-checkbox__native-control:indeterminate~.o-checkbox__background .o-checkbox__mixedmark {
transform: scaleX(1) rotate(0deg);
opacity: 1;
}
@ -97,7 +108,7 @@
transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}
.o-checkbox__native-control{
.o-checkbox__native-control {
appearance: none;
-webkit-appearance: none;
position: absolute;
@ -113,27 +124,34 @@
.o-checkbox__native-control:enabled:not(:checked):not(:indeterminate)~.o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0,0,0,.54);
border: 1px solid rgba(0, 0, 0, .54);
color: white;
}
.o-checkbox__native-control:disabled:checked ~ .o-checkbox__background, .o-checkbox__native-control:disabled:indeterminate ~ .o-checkbox__background {
border-color: #07c160;
border-color: var(--o-theme-primary, #07c160);
.o-checkbox__native-control:disabled:checked~.o-checkbox__background,
.o-checkbox__native-control:disabled:indeterminate~.o-checkbox__background {
border-color: $o-primary;
border-color: var(--o-primary, $o-primary);
background-color: #2170b8;
background-color: var(--o-theme-primary, #07c160);
background-color: var(--o-primary, $o-primary);
opacity: 0.5;
}
.o-checkbox__native-control:disabled:not(:checked):not(:indeterminate)~.o-checkbox__background {
background-color: transparent;
border: 1px solid rgba(0,0,0,.34);
border: 1px solid rgba(0, 0, 0, .34);
color: white;
}
.o-checkbox__disabled .o-checkbox__label{
color: #888;
.o-checkbox__disabled {
.o-checkbox__label {
color: #888;
}
&:hover {
cursor: not-allowed;
}
}

3
components/checkbox/src/index.tsx
View File

@ -1,7 +1,6 @@
import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
//@ts-ignore
import '../theme.ts'
interface Props {
disabled: boolean,

1
components/checkbox/theme.d.ts vendored
View File

@ -1 +0,0 @@
declare function theme(): void;

15
components/checkbox/theme.scss
View File

@ -1,15 +0,0 @@
$o-theme-primary: #07c160;
$o-theme-secondary: desaturate($o-theme-primary, 30%);
$o-theme-error: #f5222d;
$o-theme-surface: #ffffff;
$o-theme-on-primary: #ffffff;
$o-theme-on-secondary: #ffffff;
$o-theme-on-error: #ffffff;
$o-theme-on-surface: #000000;
$o-theme-background: #ffffff;
$o-shape-small-component-radius: 4px;
$o-shape-medium-component-radius: 4px;
$o-shape-large-component-radius: 0px;
$o-typography--font-family: Roboto, sans-serif;

23
components/checkbox/theme.ts
View File

@ -1,23 +0,0 @@
theme()
document.addEventListener('DOMContentLoaded', () => {
theme()
})
function theme(){
if (document.body && !document.body.style.getPropertyValue('--o-theme-primary')) {
document.body.style.setProperty('--o-theme-primary', '#07c160')
document.body.style.setProperty('--o-theme-secondary', '#07c160')
document.body.style.setProperty('--o-theme-error', '#f5222d')
document.body.style.setProperty('--o-theme-surface', '#ffffff')
document.body.style.setProperty('--o-theme-on-primary', '#ffffff')
document.body.style.setProperty('--o-theme-on-secondary', '#ffffff')
document.body.style.setProperty('--o-theme-on-error', '#ffffff')
document.body.style.setProperty('--o-theme-on-surface', '#000000')
document.body.style.setProperty('--o-theme-background', '#ffffff')
document.body.style.setProperty('--o-shape-small-component-radius', '4px')
document.body.style.setProperty('--o-shape-medium-component-radius', '4px')
document.body.style.setProperty('--o-shape-large-component-radius', '0px')
document.body.style.setProperty('--o-typography--font-family', 'Roboto, sans-serif')
}
}