@web-atoms/web-controls 2.1.5 → 2.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/basic/Button.d.ts +19 -0
- package/dist/basic/Button.d.ts.map +1 -0
- package/dist/basic/Button.js +63 -0
- package/dist/basic/Button.js.map +1 -0
- package/dist/basic/Checkbox.d.ts +5 -0
- package/dist/basic/Checkbox.d.ts.map +1 -0
- package/dist/basic/Checkbox.js +39 -0
- package/dist/basic/Checkbox.js.map +1 -0
- package/dist/basic/IElement.d.ts +11 -0
- package/dist/basic/IElement.d.ts.map +1 -0
- package/dist/basic/IElement.js +13 -0
- package/dist/basic/IElement.js.map +1 -0
- package/dist/basic/Input.d.ts +5 -0
- package/dist/basic/Input.d.ts.map +1 -0
- package/dist/basic/Input.js +30 -0
- package/dist/basic/Input.js.map +1 -0
- package/dist/basic/Panel.d.ts +6 -0
- package/dist/basic/Panel.d.ts.map +1 -0
- package/dist/basic/Panel.js +37 -0
- package/dist/basic/Panel.js.map +1 -0
- package/dist/basic/PopupButton.d.ts +17 -0
- package/dist/basic/PopupButton.d.ts.map +1 -0
- package/dist/basic/PopupButton.js +85 -0
- package/dist/basic/PopupButton.js.map +1 -0
- package/dist/basic/Switch.d.ts +7 -0
- package/dist/basic/Switch.d.ts.map +1 -0
- package/dist/basic/Switch.js +96 -0
- package/dist/basic/Switch.js.map +1 -0
- package/dist/basic/combineClasses.d.ts +2 -0
- package/dist/basic/combineClasses.d.ts.map +1 -0
- package/dist/basic/combineClasses.js +17 -0
- package/dist/basic/combineClasses.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +2 -2
- package/src/basic/Button.tsx +97 -0
- package/src/basic/Checkbox.tsx +48 -0
- package/src/basic/IElement.ts +10 -0
- package/src/basic/Input.tsx +30 -0
- package/src/basic/Panel.tsx +43 -0
- package/src/basic/PopupButton.tsx +114 -0
- package/src/basic/Switch.tsx +110 -0
- package/src/basic/combineClasses.ts +3 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface IButton {
|
|
2
|
+
id?: string;
|
|
3
|
+
icon?: string;
|
|
4
|
+
text?: string;
|
|
5
|
+
eventClick?: any;
|
|
6
|
+
href?: string;
|
|
7
|
+
target?: string;
|
|
8
|
+
title?: string;
|
|
9
|
+
styleDisplay?: string;
|
|
10
|
+
class?: string;
|
|
11
|
+
isVisible?: any;
|
|
12
|
+
subClass?: string;
|
|
13
|
+
}
|
|
14
|
+
declare function Button({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }: IButton): any;
|
|
15
|
+
declare namespace Button {
|
|
16
|
+
var className: string;
|
|
17
|
+
}
|
|
18
|
+
export default Button;
|
|
19
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/basic/Button.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,OAAO;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAqCD,iBAAwB,MAAM,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACX,EAAE,OAAO,OA6BT;kBAxCuB,MAAM;;;eAAN,MAAM"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const Colors_1 = require("@web-atoms/core/dist/core/Colors");
|
|
13
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
14
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
15
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
16
|
+
const css = (0, CSS_1.default)((0, StyleRule_1.default)()
|
|
17
|
+
.padding(8)
|
|
18
|
+
.marginLeft(3)
|
|
19
|
+
.marginRight(3)
|
|
20
|
+
.roundBorderFull()
|
|
21
|
+
.display("inline-block")
|
|
22
|
+
.height(40)
|
|
23
|
+
.minWidth(40)
|
|
24
|
+
.defaultBoxShadow()
|
|
25
|
+
.cursor("pointer")
|
|
26
|
+
.backgroundColor(Colors_1.default.transparent)
|
|
27
|
+
.hoverBackgroundColor(Colors_1.default.lightGreen)
|
|
28
|
+
.and((0, StyleRule_1.default)(".pressed")
|
|
29
|
+
.backgroundColor(Colors_1.default.lightSteelBlue))
|
|
30
|
+
.child((0, StyleRule_1.default)("label.label")
|
|
31
|
+
.display("flex")
|
|
32
|
+
.alignItems("center")
|
|
33
|
+
.gap("5px")
|
|
34
|
+
.child((0, StyleRule_1.default)(".fad")
|
|
35
|
+
.fontSize(18)
|
|
36
|
+
.width("100%")
|
|
37
|
+
.color(Colors_1.default.purple.withAlphaPercent(0.5))
|
|
38
|
+
.cursor("pointer")
|
|
39
|
+
.and((0, StyleRule_1.default)(".red")
|
|
40
|
+
.color(Colors_1.default.red)))
|
|
41
|
+
.child((0, StyleRule_1.default)("span")
|
|
42
|
+
.whiteSpace("nowrap"))));
|
|
43
|
+
function Button({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }) {
|
|
44
|
+
const cn = className !== null && className !== void 0 ? className : (subClass
|
|
45
|
+
? subClass + " " + css
|
|
46
|
+
: css);
|
|
47
|
+
if (href) {
|
|
48
|
+
if (text) {
|
|
49
|
+
return XNode_1.default.create("a", { id: id, class: cn, target: target, title: title, styleDisplay: styleDisplay },
|
|
50
|
+
XNode_1.default.create("label", { class: "label" },
|
|
51
|
+
XNode_1.default.create("i", { class: icon }),
|
|
52
|
+
text && XNode_1.default.create("span", { text: text })));
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return XNode_1.default.create("button", { id: id, class: cn, eventClick: eventClick, title: title, styleDisplay: styleDisplay },
|
|
56
|
+
XNode_1.default.create("label", { class: "label" },
|
|
57
|
+
XNode_1.default.create("i", { class: icon }),
|
|
58
|
+
text && XNode_1.default.create("span", { text: text })));
|
|
59
|
+
}
|
|
60
|
+
exports.default = Button;
|
|
61
|
+
Button.className = css;
|
|
62
|
+
});
|
|
63
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/basic/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,6DAAsD;IACtD,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAgBtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,GAAE;SACV,OAAO,CAAC,CAAC,CAAC;SACV,UAAU,CAAC,CAAC,CAAC;SACb,WAAW,CAAC,CAAC,CAAC;SACd,eAAe,EAAE;SACjB,OAAO,CAAC,cAAc,CAAC;SACvB,MAAM,CAAC,EAAE,CAAC;SACV,QAAQ,CAAC,EAAE,CAAC;SACZ,gBAAgB,EAAE;SAClB,MAAM,CAAC,SAAS,CAAC;SACjB,eAAe,CAAC,gBAAM,CAAC,WAAW,CAAC;SACnC,oBAAoB,CAAC,gBAAM,CAAC,UAAU,CAAC;SACvC,GAAG,CAAC,IAAA,mBAAS,EAAC,UAAU,CAAC;SACrB,eAAe,CAAC,gBAAM,CAAC,cAAc,CAAC,CAC1C;SACA,KAAK,CAAC,IAAA,mBAAS,EAAC,aAAa,CAAC;SAC1B,OAAO,CAAC,MAAM,CAAC;SACf,UAAU,CAAC,QAAQ,CAAC;SACpB,GAAG,CAAC,KAAK,CAAC;SACV,KAAK,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACnB,QAAQ,CAAC,EAAE,CAAC;SACZ,KAAK,CAAC,MAAM,CAAC;SACb,KAAK,CAAC,gBAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;SAC1C,MAAM,CAAC,SAAS,CAAC;SACjB,GAAG,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACjB,KAAK,CAAC,gBAAM,CAAC,GAAG,CAAC,CACrB,CACJ;SACA,KAAK,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACnB,UAAU,CAAC,QAAQ,CAAC,CACxB,CACJ,CACJ,CAAC;IAEF,SAAwB,MAAM,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACF;QAEN,MAAM,EAAE,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAE,QAAQ;YAC9B,CAAC,CAAC,QAAQ,GAAG,GAAG,GAAG,GAAG;YACtB,CAAC,CAAC,GAAG,CACR,CAAC;QAEF,IAAI,IAAI,EAAE;YAEN,IAAI,IAAI,EAAE;gBACN,OAAO,8BAAG,EAAE,EAAE,EAAE,EACZ,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY;oBAE1B,kCAAO,KAAK,EAAC,OAAO;wBAChB,8BAAG,KAAK,EAAE,IAAI,GAAG;wBACf,IAAI,IAAI,iCAAM,IAAI,EAAE,IAAI,GAAG,CACzB,CACR,CAAC;aACR;SACJ;QACD,OAAO,mCAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY;YAC1F,kCAAO,KAAK,EAAC,OAAO;gBAChB,8BAAG,KAAK,EAAE,IAAI,GAAG;gBACf,IAAI,IAAI,iCAAM,IAAI,EAAE,IAAI,GAAG,CACzB,CACH,CAAC;IAClB,CAAC;IAxCD,yBAwCC;IAED,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/basic/Checkbox.tsx"],"names":[],"mappings":"AA+BA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,OAAO,EACP,IAAI,EACP,EAAE;IACC,OAAO,EAAE,GAAG,CAAC;IACb,IAAI,EAAE,MAAM,CAAA;CACf,OAUA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
13
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
14
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
15
|
+
const css = (0, CSS_1.default)((0, StyleRule_1.default)("check-box")
|
|
16
|
+
.display("inline-block")
|
|
17
|
+
.child((0, StyleRule_1.default)("label")
|
|
18
|
+
.display("flex")
|
|
19
|
+
.paddingLeft(5)
|
|
20
|
+
.paddingRight(5)
|
|
21
|
+
.child((0, StyleRule_1.default)("input[type=checkbox]")
|
|
22
|
+
.borderRadius(3)
|
|
23
|
+
.margin(0)
|
|
24
|
+
.padding(0)
|
|
25
|
+
.alignSelf("center"))
|
|
26
|
+
.child((0, StyleRule_1.default)("span")
|
|
27
|
+
.alignSelf("center")
|
|
28
|
+
.whiteSpace("nowrap")
|
|
29
|
+
.marginLeft(5)
|
|
30
|
+
.flexStretch())));
|
|
31
|
+
function Checkbox({ checked, text }) {
|
|
32
|
+
return XNode_1.default.create("div", { class: css },
|
|
33
|
+
XNode_1.default.create("label", null,
|
|
34
|
+
XNode_1.default.create("input", { type: "checkbox", checked: checked }),
|
|
35
|
+
XNode_1.default.create("span", { text: text })));
|
|
36
|
+
}
|
|
37
|
+
exports.default = Checkbox;
|
|
38
|
+
});
|
|
39
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/basic/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;IACA,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAEtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,EAAC,WAAW,CAAC;SACrB,OAAO,CAAC,cAAc,CAAC;SACvB,KAAK,CACF,IAAA,mBAAS,EAAC,OAAO,CAAC;SACjB,OAAO,CAAC,MAAM,CAAC;SACf,WAAW,CAAC,CAAC,CAAC;SACd,YAAY,CAAC,CAAC,CAAC;SACf,KAAK,CAEF,IAAA,mBAAS,EAAC,sBAAsB,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC;SACf,MAAM,CAAC,CAAC,CAAC;SACT,OAAO,CAAC,CAAC,CAAC;SACV,SAAS,CAAC,QAAQ,CAAC,CACvB;SACA,KAAK,CACF,IAAA,mBAAS,EAAC,MAAM,CAAC;SAChB,SAAS,CAAC,QAAQ,CAAC;SACnB,UAAU,CAAC,QAAQ,CAAC;SACpB,UAAU,CAAC,CAAC,CAAC;SACb,WAAW,EAAE,CAEjB,CAAC,CACT,CAAC;IAEF,SAAwB,QAAQ,CAAC,EAC7B,OAAO,EACP,IAAI,EAIP;QACG,OAAO,gCAAK,KAAK,EAAE,GAAG;YAClB;gBACI,kCACI,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,GAAG;gBACvB,iCACI,IAAI,EAAE,IAAI,GAAS,CACnB,CACN,CAAC;IACX,CAAC;IAhBD,2BAgBC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IElement.d.ts","sourceRoot":"","sources":["../../src/basic/IElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,WAAW,QAAQ;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=IElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IElement.js","sourceRoot":"","sources":["../../src/basic/IElement.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/basic/Input.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC1B,KAAK,EACL,WAAW,EACd,EAAC;IACE,KAAK,EAAC,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAA;CACtB,OAKA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
13
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
14
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
15
|
+
const css = (0, CSS_1.default)((0, StyleRule_1.default)("input")
|
|
16
|
+
.display("inline-block")
|
|
17
|
+
.child((0, StyleRule_1.default)("input[type=input]")
|
|
18
|
+
.margin(0)
|
|
19
|
+
.padding(5)
|
|
20
|
+
.height(25)
|
|
21
|
+
.marginRight(5)
|
|
22
|
+
.outline("none")
|
|
23
|
+
.alignSelf("center")));
|
|
24
|
+
function Input({ value, placeholder }) {
|
|
25
|
+
return XNode_1.default.create("div", { class: css },
|
|
26
|
+
XNode_1.default.create("input", { type: "input", placeholder: placeholder }));
|
|
27
|
+
}
|
|
28
|
+
exports.default = Input;
|
|
29
|
+
});
|
|
30
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/basic/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAEtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,EAAC,OAAO,CAAC;SACjB,OAAO,CAAC,cAAc,CAAC;SACvB,KAAK,CACF,IAAA,mBAAS,EAAC,mBAAmB,CAAC;SAC7B,MAAM,CAAC,CAAC,CAAC;SACT,OAAO,CAAC,CAAC,CAAC;SACV,MAAM,CAAC,EAAE,CAAC;SACV,WAAW,CAAC,CAAC,CAAC;SACd,OAAO,CAAC,MAAM,CAAC;SACf,SAAS,CAAC,QAAQ,CAAC,CACvB,CACJ,CAAC;IAEF,SAAwB,KAAK,CAAC,EAC1B,KAAK,EACL,WAAW,EAId;QACG,OAAO,gCAAK,KAAK,EAAE,GAAG;YACf,kCAAO,IAAI,EAAC,OAAO,EACnB,WAAW,EAAE,WAAW,GAAI,CAC7B,CAAC;IACX,CAAC;IAXD,wBAWC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/basic/Panel.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,EACI,MAAM,EACN,KAAK,EAAE,SAAS,EACnB,EAAE,gBAAgB,EACnB,GAAI,QAAQ,EAAE,GAAG,EAAE,OAetB"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const Colors_1 = require("@web-atoms/core/dist/core/Colors");
|
|
13
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
14
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
15
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
16
|
+
const css = (0, CSS_1.default)((0, StyleRule_1.default)("panel")
|
|
17
|
+
.display("inline-block")
|
|
18
|
+
.padding(5)
|
|
19
|
+
.margin(3)
|
|
20
|
+
.borderRadius(9999)
|
|
21
|
+
.defaultBoxShadow()
|
|
22
|
+
.child((0, StyleRule_1.default)(".header")
|
|
23
|
+
.backgroundColor(Colors_1.default.lightGray)
|
|
24
|
+
.borderRadius(5)
|
|
25
|
+
.padding(5)));
|
|
26
|
+
function Panel({ header, class: className }, ...children) {
|
|
27
|
+
className = className ? css + " " + className : css;
|
|
28
|
+
if (header) {
|
|
29
|
+
return XNode_1.default.create("div", { class: className },
|
|
30
|
+
XNode_1.default.create("label", { class: "header" }, header),
|
|
31
|
+
...children);
|
|
32
|
+
}
|
|
33
|
+
return XNode_1.default.create("div", { class: className }, ...children);
|
|
34
|
+
}
|
|
35
|
+
exports.default = Panel;
|
|
36
|
+
});
|
|
37
|
+
//# sourceMappingURL=Panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../src/basic/Panel.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,6DAAsD;IACtD,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAOtD,MAAM,GAAG,GAAG,IAAA,aAAG,EAAC,IAAA,mBAAS,EAAC,OAAO,CAAC;SAC7B,OAAO,CAAC,cAAc,CAAC;SACvB,OAAO,CAAC,CAAC,CAAC;SACV,MAAM,CAAC,CAAC,CAAC;SACT,YAAY,CAAC,IAAI,CAAC;SAClB,gBAAgB,EAAE;SAClB,KAAK,CAAC,IAAA,mBAAS,EAAC,SAAS,CAAC;SACtB,eAAe,CAAC,gBAAM,CAAC,SAAS,CAAC;SACjC,YAAY,CAAC,CAAC,CAAC;SACf,OAAO,CAAC,CAAC,CAAC,CACd,CAAC,CAAC;IAEP,SAAwB,KAAK,CACzB,EACI,MAAM,EACN,KAAK,EAAE,SAAS,EACD,EACnB,GAAI,QAAe;QAEnB,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;QAEpD,IAAI,MAAM,EAAE;YACR,OAAO,gCAAK,KAAK,EAAE,SAAS;gBACxB,kCAAO,KAAK,EAAC,QAAQ,IAAE,MAAM,CAAS;mBAChC,QAAQ,CACZ,CAAC;SACV;QAED,OAAO,gCAAK,KAAK,EAAE,SAAS,OAClB,QAAQ,CACZ,CAAC;IAEX,CAAC;IApBD,wBAoBC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
2
|
+
export interface IMenuItem {
|
|
3
|
+
label?: string;
|
|
4
|
+
icon?: string;
|
|
5
|
+
eventClick?: any;
|
|
6
|
+
href?: string;
|
|
7
|
+
target?: string;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
export interface IPopupButton {
|
|
11
|
+
icon?: string;
|
|
12
|
+
label?: string;
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}
|
|
15
|
+
export declare function MenuItem({ label, icon, eventClick, href, target, ...others }: IMenuItem): any;
|
|
16
|
+
export default function PopupButton({ icon, label, ...others }: IPopupButton, ...menus: Array<IMenuItem | XNode>): any;
|
|
17
|
+
//# sourceMappingURL=PopupButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupButton.d.ts","sourceRoot":"","sources":["../../src/basic/PopupButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAgBpD,MAAM,WAAW,SAAS;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,GAAI,MAAM,EACb,EAAE,SAAS,OAWX;AAUD,MAAM,CAAC,OAAO,UAAU,WAAW,CACnC,EACI,IAAI,EACJ,KAAK,EACL,GAAI,MAAM,EACb,EAAE,YAAY,EACf,GAAI,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,OA8ClC"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
(function (factory) {
|
|
13
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
14
|
+
var v = factory(require, exports);
|
|
15
|
+
if (v !== undefined) module.exports = v;
|
|
16
|
+
}
|
|
17
|
+
else if (typeof define === "function" && define.amd) {
|
|
18
|
+
define(["require", "exports", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
19
|
+
}
|
|
20
|
+
})(function (require, exports) {
|
|
21
|
+
"use strict";
|
|
22
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
+
exports.MenuItem = void 0;
|
|
24
|
+
const Bind_1 = require("@web-atoms/core/dist/core/Bind");
|
|
25
|
+
const Colors_1 = require("@web-atoms/core/dist/core/Colors");
|
|
26
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
27
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
28
|
+
const PopupService_1 = require("@web-atoms/core/dist/web/services/PopupService");
|
|
29
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
30
|
+
const menuCss = (0, CSS_1.default)((0, StyleRule_1.default)()
|
|
31
|
+
.child((0, StyleRule_1.default)(".menu")
|
|
32
|
+
.padding(5)
|
|
33
|
+
.margin(3)
|
|
34
|
+
.borderRadius(5)
|
|
35
|
+
.cursor("pointer")
|
|
36
|
+
.hoverBackgroundColor(Colors_1.default.lightGreen)));
|
|
37
|
+
function MenuItem(_a) {
|
|
38
|
+
var { label, icon, eventClick, href, target } = _a, others = __rest(_a, ["label", "icon", "eventClick", "href", "target"]);
|
|
39
|
+
if (label) {
|
|
40
|
+
return XNode_1.default.create("div", Object.assign({ class: "menu", eventClick: eventClick }, others),
|
|
41
|
+
XNode_1.default.create("i", { class: icon }),
|
|
42
|
+
XNode_1.default.create("span", null, label));
|
|
43
|
+
}
|
|
44
|
+
return XNode_1.default.create("div", Object.assign({ class: "menu", eventClick: eventClick }, others),
|
|
45
|
+
XNode_1.default.create("i", { class: icon }));
|
|
46
|
+
}
|
|
47
|
+
exports.MenuItem = MenuItem;
|
|
48
|
+
const iconLabelCss = (0, CSS_1.default)((0, StyleRule_1.default)(".label")
|
|
49
|
+
.display("inline-flex")
|
|
50
|
+
.child((0, StyleRule_1.default)("span")
|
|
51
|
+
.flexStretch()));
|
|
52
|
+
function PopupButton(_a, ...menus) {
|
|
53
|
+
var { icon, label } = _a, others = __rest(_a, ["icon", "label"]);
|
|
54
|
+
let popup = null;
|
|
55
|
+
function openPopup(s, e) {
|
|
56
|
+
const button = e.currentTarget;
|
|
57
|
+
if (popup) {
|
|
58
|
+
button.classList.remove("pressed");
|
|
59
|
+
popup.dispose();
|
|
60
|
+
popup = null;
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const menu = document.createElement("div");
|
|
64
|
+
s.render(XNode_1.default.create("div", { class: menuCss }, ...menus), menu);
|
|
65
|
+
const ps = s.resolve(PopupService_1.default);
|
|
66
|
+
popup = ps.show(button, menu);
|
|
67
|
+
const dispose = () => {
|
|
68
|
+
popup === null || popup === void 0 ? void 0 : popup.dispose();
|
|
69
|
+
popup = null;
|
|
70
|
+
};
|
|
71
|
+
menu.addEventListener("click", dispose);
|
|
72
|
+
popup.registerDisposable(() => menu.removeEventListener("click", dispose));
|
|
73
|
+
}
|
|
74
|
+
if (label) {
|
|
75
|
+
return XNode_1.default.create("button", Object.assign({}, others, { eventClick: Bind_1.default.event((s, e) => openPopup(s, e)) }),
|
|
76
|
+
XNode_1.default.create("label", { class: iconLabelCss },
|
|
77
|
+
XNode_1.default.create("i", { class: icon }),
|
|
78
|
+
XNode_1.default.create("span", null, label)));
|
|
79
|
+
}
|
|
80
|
+
return XNode_1.default.create("button", Object.assign({}, others, { eventClick: Bind_1.default.event((s, e) => openPopup(s, e)) }),
|
|
81
|
+
XNode_1.default.create("i", { class: icon }));
|
|
82
|
+
}
|
|
83
|
+
exports.default = PopupButton;
|
|
84
|
+
});
|
|
85
|
+
//# sourceMappingURL=PopupButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../src/basic/PopupButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAAA,yDAAkD;IAClD,6DAAsD;IACtD,2DAAoD;IACpD,oEAA6D;IAE7D,iFAAsF;IACtF,6DAAsD;IAEtD,MAAM,OAAO,GAAG,IAAA,aAAG,EAAC,IAAA,mBAAS,GAAE;SAC1B,KAAK,CAAC,IAAA,mBAAS,EAAC,OAAO,CAAC;SACpB,OAAO,CAAC,CAAC,CAAC;SACV,MAAM,CAAC,CAAC,CAAC;SACT,YAAY,CAAC,CAAC,CAAC;SACf,MAAM,CAAC,SAAS,CAAC;SACjB,oBAAoB,CAAC,gBAAM,CAAC,UAAU,CAAC,CAC3C,CACJ,CAAC;IAiBF,SAAgB,QAAQ,CAAC,EAOb;YAPa,EACrB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,OAEE,EADJ,MAAM,cANW,iDAOxB,CADa;QAGV,IAAI,KAAK,EAAE;YACP,OAAO,8CAAK,KAAK,EAAC,MAAM,EAAC,UAAU,EAAE,UAAU,IAAQ,MAAM;gBACzD,8BAAG,KAAK,EAAE,IAAI,GAAG;gBACjB,qCAAO,KAAK,CAAQ,CAClB,CAAC;SACV;QACD,OAAO,8CAAK,KAAK,EAAC,MAAM,EAAC,UAAU,EAAE,UAAU,IAAQ,MAAM;YACzD,8BAAG,KAAK,EAAE,IAAI,GAAG,CACf,CAAC;IACX,CAAC;IAlBD,4BAkBC;IAED,MAAM,YAAY,GAAG,IAAA,aAAG,EACpB,IAAA,mBAAS,EAAC,QAAQ,CAAC;SACd,OAAO,CAAC,aAAa,CAAC;SACtB,KAAK,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACnB,WAAW,EAAE,CACjB,CACR,CAAC;IAEF,SAAwB,WAAW,CACnC,EAIe,EACf,GAAI,KAA+B;YALnC,EACI,IAAI,EACJ,KAAK,OAEM,EADP,MAAM,cAHd,iBAIC,CADa;QAIV,IAAI,KAAK,GAAW,IAAI,CAAC;QACzB,SAAS,SAAS,CAAC,CAAc,EAAE,CAAQ;YACvC,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;YAC9C,IAAI,KAAK,EAAE;gBACP,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBACnC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChB,KAAK,GAAG,IAAI,CAAC;gBACb,OAAO;aACV;YAED,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAS,CAAC,MAAM,CAAC,gCAAK,KAAK,EAAE,OAAO,OAC3B,KAAK,CACT,EAAE,IAAI,CAAC,CAAC;YAEd,MAAM,EAAE,GAAI,CAAS,CAAC,OAAO,CAAC,sBAAY,CAAiB,CAAC;YAC5D,KAAK,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAE9B,MAAM,OAAO,GAAG,GAAG,EAAE;gBACjB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAE,CAAC;gBACjB,KAAK,GAAG,IAAI,CAAC;YACjB,CAAC,CAAC;YAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAExC,KAAK,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QAC/E,CAAC;QAED,IAAI,KAAK,EAAE;YACP,OAAO,mDACG,MAAM,IACZ,UAAU,EAAE,cAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAgB,EAAE,CAAC,CAAC,CAAC;gBAChE,kCAAO,KAAK,EAAE,YAAY;oBACtB,8BAAG,KAAK,EAAE,IAAI,GAAG;oBACjB,qCAAO,KAAK,CAAQ,CAChB,CACH,CAAC;SACb;QAED,OAAO,mDACG,MAAM,IACZ,UAAU,EAAE,cAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAgB,EAAE,CAAC,CAAC,CAAC;YAChE,8BAAG,KAAK,EAAE,IAAI,GAAG,CACZ,CAAC;IACd,CAAC;IApDD,8BAoDC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/basic/Switch.tsx"],"names":[],"mappings":"AA4FA,MAAM,WAAW,OAAO;IACvB,OAAO,MAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,EAAE,OAAO,OAOT"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
13
|
+
const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
|
|
14
|
+
const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
|
|
15
|
+
/**
|
|
16
|
+
* Original source = https://www.htmllion.com/css3-toggle-switch-button.html
|
|
17
|
+
*/
|
|
18
|
+
const css = (0, CSS_1.default)((0, StyleRule_1.default)()
|
|
19
|
+
.position("relative")
|
|
20
|
+
.display("inline-block")
|
|
21
|
+
.verticalAlign("top")
|
|
22
|
+
.width(70)
|
|
23
|
+
.height(30)
|
|
24
|
+
.padding(3)
|
|
25
|
+
.margin("0 10px 10px 0")
|
|
26
|
+
.background("linear-gradient(to bottom, #eeeeee, #FFFFFF 25px)")
|
|
27
|
+
.backgroundImage("-webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px)")
|
|
28
|
+
.borderRadius(18)
|
|
29
|
+
.boxShadow("inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05)")
|
|
30
|
+
.cursor("pointer")
|
|
31
|
+
.boxSizing("content-box")
|
|
32
|
+
.child((0, StyleRule_1.default)(".switch-input")
|
|
33
|
+
.absolutePosition({ top: 0, left: 0 })
|
|
34
|
+
.opacity(0)
|
|
35
|
+
.boxSizing("content-box"))
|
|
36
|
+
.child((0, StyleRule_1.default)(".switch-label")
|
|
37
|
+
.position("relative")
|
|
38
|
+
.display("block")
|
|
39
|
+
.height("inherit")
|
|
40
|
+
.fontSize(10)
|
|
41
|
+
.textTransform("uppercase")
|
|
42
|
+
.backgroundColor("#eceeef")
|
|
43
|
+
.borderRadius("inherit")
|
|
44
|
+
.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15)")
|
|
45
|
+
.boxSizing("content-box")
|
|
46
|
+
.and((0, StyleRule_1.default)(":before, .switch-label:after")
|
|
47
|
+
.position("absolute")
|
|
48
|
+
.top("50%")
|
|
49
|
+
.marginTop("-.5em")
|
|
50
|
+
.lineHeight("1")
|
|
51
|
+
.webkitTransition("inherit")
|
|
52
|
+
.transition("inherit")
|
|
53
|
+
.boxSizing("content-box"))
|
|
54
|
+
.and((0, StyleRule_1.default)(":before")
|
|
55
|
+
.content("attr(data-off)")
|
|
56
|
+
.right(11)
|
|
57
|
+
.color("#aaaaaa")
|
|
58
|
+
.textShadow("0 1px rgba(255, 255, 255, 0.5)"))
|
|
59
|
+
.and((0, StyleRule_1.default)(":after")
|
|
60
|
+
.content("attr(data-on)")
|
|
61
|
+
.left(11)
|
|
62
|
+
.color("#FFFFFF")
|
|
63
|
+
.textShadow("0 1px rgba(0, 0, 0, 0.2)")
|
|
64
|
+
.opacity("0")))
|
|
65
|
+
.child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label")
|
|
66
|
+
.backgroundColor("#E1B42B")
|
|
67
|
+
.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2)"))
|
|
68
|
+
.child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label:before")
|
|
69
|
+
.opacity("0"))
|
|
70
|
+
.child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label:after")
|
|
71
|
+
.opacity("1"))
|
|
72
|
+
.child((0, StyleRule_1.default)(".switch-handle")
|
|
73
|
+
.absolutePosition({ top: 4, left: 4, width: 28, height: 28 })
|
|
74
|
+
.background("linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0)")
|
|
75
|
+
.borderRadius("100%")
|
|
76
|
+
.boxShadow("1px 1px 5px rgba(0, 0, 0, 0.2)")
|
|
77
|
+
.and((0, StyleRule_1.default)(":before")
|
|
78
|
+
.content("")
|
|
79
|
+
.absolutePosition({ top: "50%", left: "50%", width: 12, height: 12 })
|
|
80
|
+
.background("linear-gradient(to bottom, #eeeeee, #FFFFFF)")
|
|
81
|
+
.borderRadius(6)
|
|
82
|
+
.boxShadow("inset 0 1px rgba(0, 0, 0, 0.02)")))
|
|
83
|
+
.child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-handle")
|
|
84
|
+
.left(44)
|
|
85
|
+
.boxShadow("-1px 1px 5px rgba(0, 0, 0, 0.2)"))
|
|
86
|
+
.child((0, StyleRule_1.default)(".switch-label, .switch-handle")
|
|
87
|
+
.transition("All 0.3s ease")));
|
|
88
|
+
function Switch({ checked, onLabel, offLabel }) {
|
|
89
|
+
return XNode_1.default.create("label", { class: css },
|
|
90
|
+
XNode_1.default.create("input", { class: "switch-input", type: "checkbox", checked: checked }),
|
|
91
|
+
XNode_1.default.create("span", { class: "switch-label", "data-on": onLabel !== null && onLabel !== void 0 ? onLabel : "On", "data-off": offLabel !== null && offLabel !== void 0 ? offLabel : "Off" }),
|
|
92
|
+
XNode_1.default.create("span", { class: "switch-handle" }));
|
|
93
|
+
}
|
|
94
|
+
exports.default = Switch;
|
|
95
|
+
});
|
|
96
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/basic/Switch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combineClasses.d.ts","sourceRoot":"","sources":["../../src/basic/combineClasses.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,GAAI,KAAK,EAAE,MAAM,EAAE,UAEzD"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
(function (factory) {
|
|
2
|
+
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
+
var v = factory(require, exports);
|
|
4
|
+
if (v !== undefined) module.exports = v;
|
|
5
|
+
}
|
|
6
|
+
else if (typeof define === "function" && define.amd) {
|
|
7
|
+
define(["require", "exports"], factory);
|
|
8
|
+
}
|
|
9
|
+
})(function (require, exports) {
|
|
10
|
+
"use strict";
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
function combineClasses(...names) {
|
|
13
|
+
return names.filter((n) => n).join(" ");
|
|
14
|
+
}
|
|
15
|
+
exports.default = combineClasses;
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=combineClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combineClasses.js","sourceRoot":"","sources":["../../src/basic/combineClasses.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,SAAwB,cAAc,CAAC,GAAI,KAAe;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;IAFD,iCAEC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"program":{"fileNames":["../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es5.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.dom.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.core.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../../../../opt/hostedtoolcache/node/12.22.7/x64/lib/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../src/ModuleFiles.ts","../node_modules/reflect-metadata/index.d.ts","../node_modules/@web-atoms/core/dist/core/types.d.ts","../node_modules/@web-atoms/core/dist/services/http/AjaxOptions.d.ts","../node_modules/@web-atoms/core/dist/core/IValueConverter.d.ts","../node_modules/@web-atoms/core/dist/core/Bind.d.ts","../node_modules/@web-atoms/core/dist/core/XNode.d.ts","../node_modules/@web-atoms/core/dist/core/AtomBridge.d.ts","../node_modules/@web-atoms/core/dist/core/AtomDispatcher.d.ts","../node_modules/@web-atoms/core/dist/core/AtomUri.d.ts","../node_modules/@web-atoms/core/dist/core/IScreen.d.ts","../node_modules/@web-atoms/core/dist/di/ServiceCollection.d.ts","../node_modules/@web-atoms/core/dist/di/ServiceProvider.d.ts","../node_modules/@web-atoms/core/dist/App.d.ts","../node_modules/@web-atoms/core/dist/core/AtomDisposableList.d.ts","../node_modules/@web-atoms/core/dist/core/AtomWatcher.d.ts","../node_modules/@web-atoms/core/dist/core/AtomComponent.d.ts","../node_modules/@web-atoms/core/dist/web/styles/AtomStyleSheet.d.ts","../node_modules/@web-atoms/core/dist/core/Colors.d.ts","../node_modules/@web-atoms/core/dist/core/WebImage.d.ts","../node_modules/@web-atoms/core/dist/web/styles/IStyleDeclaration.d.ts","../node_modules/@web-atoms/core/dist/web/styles/AtomStyle.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomControl.d.ts","../src/setupBridge.ts","../node_modules/@web-atoms/core/dist/view-model/baseTypes.d.ts","../node_modules/@web-atoms/core/dist/view-model/AtomViewModel.d.ts","../node_modules/@web-atoms/core/dist/view-model/AtomWindowViewModel.d.ts","../node_modules/@web-atoms/core/dist/Atom.d.ts","../node_modules/@web-atoms/core/dist/core/BindableProperty.d.ts","../node_modules/@web-atoms/core/dist/core/FormattedString.d.ts","../node_modules/@web-atoms/core/dist/services/NavigationService.d.ts","../node_modules/@web-atoms/core/dist/services/ReferenceService.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomTemplateControl.d.ts","../node_modules/@web-atoms/core/dist/services/JsonService.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomTemplate.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomWindow.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomAlertWindow.d.ts","../node_modules/@web-atoms/core/dist/web/services/WindowService.d.ts","../node_modules/@web-atoms/core/dist/web/styles/AtomTheme.d.ts","../node_modules/@web-atoms/core/dist/core/Color.d.ts","../node_modules/@web-atoms/core/dist/web/styles/StyleBuilder.d.ts","../src/auto-complete/AutoCompleteBoxStyle.ts","../node_modules/@web-atoms/core/dist/core/AtomList.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomItemsControl.d.ts","../src/auto-complete/ItemHost.tsx","../src/auto-complete/AutoCompleteBox.tsx","../src/auto-complete/AppComboBoxViewModel.ts","../node_modules/@web-atoms/core/dist/style/StyleRule.d.ts","../node_modules/@web-atoms/core/dist/web/styles/CSS.d.ts","../src/basic/Button.tsx","../src/basic/Checkbox.tsx","../src/basic/IElement.ts","../src/basic/Input.tsx","../src/basic/Panel.tsx","../node_modules/@web-atoms/core/dist/web/services/PopupService.d.ts","../src/basic/PopupButton.tsx","../src/basic/Switch.tsx","../src/basic/combineClasses.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomPageLink.d.ts","../src/buttons/AtomPopupButtonStyle.ts","../src/buttons/AtomPopupButton.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomComboBox.d.ts","../src/calendar/AtomCalendarStyle.ts","../node_modules/@web-atoms/date-time/dist/TimeSpan.d.ts","../node_modules/@web-atoms/date-time/dist/DateTime.d.ts","../src/calendar/CalendarViewModel.ts","../node_modules/@web-atoms/core/dist/di/IMockOrInject.d.ts","../node_modules/@web-atoms/core/dist/di/DISingleton.d.ts","../src/calendar/res/SRCalendar.ts","../src/calendar/AtomCalendar.tsx","../src/calendar/res/en-US/SRCalendar.ts","../src/data-grid/AtomColumn.tsx","../src/data-grid/AtomDataGridStyle.ts","../node_modules/@web-atoms/core/dist/di/Inject.d.ts","../node_modules/@web-atoms/core/dist/view-model/Load.d.ts","../src/data-grid/AtomDataGridViewModel.ts","../src/data-grid/GridTemplate.ts","../src/data-grid/AtomDataGrid.ts","../src/data-pager/AtomDataPager.tsx","../src/date-field/AtomDateField.tsx","../node_modules/@web-atoms/core/dist/core/AtomBinder.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomContentControl.d.ts","../src/form/HelpPopup.tsx","../src/form/AtomField.tsx","../src/form/AtomFormStyle.ts","../src/form/AtomForm.ts","../src/form/AtomFormGroup.ts","../node_modules/@web-atoms/core/dist/core/AtomLoader.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomFrame.d.ts","../node_modules/@web-atoms/core/dist/web/styles/AtomFrameStyle.d.ts","../src/mobile/pages/AtomPageFrameStyle.ts","../src/mobile/pages/AtomPageFrameTemplate.tsx","../src/mobile/pages/Page.ts","../node_modules/@web-atoms/core/dist/view-model/bindUrlParameter.d.ts","../src/mobile/pages/PageFrameViewModel.ts","../src/mobile/pages/TitleTemplate.tsx","../src/mobile/pages/AtomPageFrame.ts","../src/switch/AtomSwitchStyle.ts","../src/switch/AtomSwitch.tsx","../src/tests/basic/PopupTest.tsx","../src/tests/calendar/CalendarTest.tsx","../node_modules/@web-atoms/core/dist/web/controls/AtomGridView.d.ts","../src/tests/data-grid/GridTestViewModel.ts","../src/tests/data-grid/GridTest.tsx","../src/tests/data-pager/DataPagerTest.tsx","../src/tests/date-field/DateFieldTest.tsx","../src/tests/date-field/PopupTest.tsx","../src/tests/form/CustomHelp.tsx","../src/tests/form/FormViewModel.ts","../src/tests/form/FormTest.tsx","../src/tests/mobile-pages/DetailPage.tsx","../src/tests/mobile-pages/HomePage.tsx","../src/tests/mobile-pages/ListPageViewModel.ts","../src/tests/mobile-pages/ListPage.tsx","../src/tests/mobile-pages/MenuPageViewModel.ts","../src/tests/mobile-pages/MenuPage.tsx","../src/tests/mobile-pages/PageApp.tsx","../src/tests/sample/ListPage.tsx","../src/tests/switch/SwitchTest.tsx","../node_modules/@web-atoms/core/dist/core/PropertyBinding.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomListBox.d.ts","../node_modules/@web-atoms/core/dist/web/controls/AtomToggleButtonBar.d.ts","../src/time-field/AtomTimeFieldStyle.ts","../src/time-field/AtomTimeField.tsx","../src/tests/time-field/TimeFieldTest.tsx"],"fileInfos":[{"version":"6adbf5efd0e374ff5f427a4f26a5a413e9734eee5067a0e86da69aea41910b52","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6",{"version":"abba1071bfd89e55e88a054b0c851ea3e8a494c340d0f3fab19eb18f6afb0c9e","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"4378fc8122ec9d1a685b01eb66c46f62aba6b239ca7228bb6483bcf8259ee493","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},"6de7a6f56710bc62426fb06b58b3b4aeb5ff745d66f399312585c47a380835b3",{"version":"8d6d51a5118d000ed3bfe6e1dd1335bebfff3fef23cd2af2f84a24d30f90cc90","affectsGlobalScope":true},{"version":"8cd6178dbb1921f944c16adbb1f38b1c11a8549a20b74b2512620f5c32a95f8c","affectsGlobalScope":true},"d310deb462cc7222e6010ca9b07516d87e5dc00f299d0e9681742e9c6ca19e81","422188ce09149dac83498e33911bdd777220d60b5b864ccb684ecbf5775e3727","7119c89475733462434265f272f533030d8b36675bd0bd75fc54c3f7b981ab96",{"version":"fcaeea9970cdfac9bb6ad4af7ce6a0fd7b11d858ab328079988a540802ea7fc0","affectsGlobalScope":true},"d4042faefef4a45f83cc0b9b57633cb9fec967f5c4dfe519acb3e668d98d9b19","13c6df760172a6fc22d37187f5f671d9e11fb95d1989d86d3f67f9ff14e7948d","abc8f94e554e374fb958fc4dab31216b164bece7fc70c4c3a9cc5f95e8a1dc3a","3edceb622979d3ee2c815ac726d11a71b84791be093395e5f1ee5381bfb72b73","b8d38c321966c045501ad84a8dee312e2c282a4308e6eb1ed8479c5aa7921d76","fb7860eb4a778c3e76d1f0e30569f4a9c9e168d30f4d0e993281c6ecd1ccd7ff","a0d1438a8f08629646343acc4a33d6341a3a2e85986e75b46975be8cb811b111","5675e6f4a83bcc135b216707d0ab152668382f72e2fe052f6dd85781651f6990","bc299aadba93fa5d8cbf2697b625b4ad9765ffca8cd1c69214a4fed0605421b3","86531e30404a0b4b37020d3dadac2098ea766cb35361eaaf361353c103b6c808","5d12ca7b308140827fa8c273a8922bd77a599cb9016223d3491d87e6b6e40364","1945a364e768114de501aaa8e678c7cb65f9d889848af64fe946eb9dc71c0c93","fbce0c2eeae4605f375942e4d1c637ebc92bb9aac1cc770695bd1666c70ab67e","409ff63ff1645b3ca623a7a0253610cbb4b33251a821494ae3f541524a15a33d","7e1c44e82832dd140922fb391291148a5045a595c00b8bebf0a6260494f9a923",{"version":"cf73768df03bb312f7cc172b159c7a47e6191830670bd2ca66d6a4e5cb08858e","affectsGlobalScope":true},"abe80bbc39bf99670619a8830ae4784bcfab31ae6632b5dd4dc09212e7e80cae","6e28e279e828d82a95a66d9193e2a36862eb7ab0ae54d7d6480fdc606d4b7de3","fb5ae838f95fbe9315fdf2407272c3ade554fba6105a2277d1ea71c17646c796","3ee4539ba44420daf074966c0750e0f5d8c48df73e1b7a6464e1479e89fb8a2d","5c1879e3a0ad72bb265466acd72c235e0c55cd50bbee3fedf80bb4da81384acd","270eec2d2b99d1ca831e24a8bde654331fdfcd2fe30e16d0afe1f7f7e593627c","8641f35f3c098fe2d671000a0051ebbd846c9d0749f3c73baf51115386ccc67a","c04b2bebb72a97ec76610e35a3ef68dde9e8f54cbfa363b42240bf95f3dd749f","8aabd9953bb40f1276e670de13a0056db4a448593a9bb3d5847c224b8078c5d3","f99e03ffc443bc8a57875e9cabac3dae4a042b486a41cdb9bdf4b8c5a3c69126","c874199bf01776c65c815879f1030f3d1bdc45c2f5551da7e3e39dd1757c2c40","8c9f44386c61405bb6ac6cee218bb4ce731b348e26888707334e73f8008bcafb","c7f4d64eac2da1fcf607e7e5317de89142398a231be445e7f1687a6a8321217f","dc65e2d8a19de3f47c194235b5146a0e66ab62aa3a3a39ed0a4d303701e3a9d3","773d76d60ff5945c264809d3b9fbb41fb5f6263b2a7c1c482e7c8fbd4e71e67c","91f18db7a918ce1ce9a057a75f47eba41973a62a0c51411ff3670eadcbe51e86","7a112206c938c8bdb0bae3f1b27b0b1f9b56e659e23a9c63a6dc796226a2ab85","a834d4e1c5eb21c72ac01751d3e9229f6112680eac1006b85f385d8fddc1481f","b8a9d3a2c18d7847bdf1f9432ac8276b4738c7f1e60be0fe8e61104fe0371d32",{"version":"99a08706a3bbc43c3d7825f0061faee3140978418ea7e6a762a73c9681bd3e32","affectsGlobalScope":true},"2fa694acfd00848544243b649b4f8668e4078f169a64b30f9a1b1ae50a911c45","bea7aebc5a5c1701365988481eb322ec52cf7a54564108915ad30c528668ec45","fefe362eb50dc0ec8ff47b93f0e6f77489d6375b1f8e8c5b824018ca3a9181b2","4be89420b37e6215b875b42465c3ca0e2bd4a095a68319747c7d79b9c8765709","37bb1473acf769cdf43991a520c62991e93742d0078091def151a5a68cdf68c2","429ab992f5f06885c159d1d552c6da2a38788c2a11b4d33b9c23b9938bdbaea3","2b6b13df6cda309b96476662517834fb5af20b9e949b213cb0a03af2a13f7388","1983346264648c2912066c7debd394f7d6f3df7d1608cef5f3884ce6cc462689","c5310f1c6ab77deb86e0da8c60b43419546d8876147005b2d99a8a7442667c71","9bdd1a72f062f6286515ea1388e221d46fa6abfb361157b72f53e18cc171b92e","9f781c0c2196f15812bb44cc404292521e0cd01c8f6280886f10bcfa86512ce2","9cb47471f5fb521df68e510c65003f7cc7461a705b30e7b437e1c6bd3c552bad","d3561e1de856632d55feb1e5c10087eb04f0f345aa7b15fe974e85cf8c928387","c7bbea919f0cfcb16b2ac251cfe6aec63252575bf40b77b430384094c566b31c","5459c9c3b53e4844492036f6072d2286224879100660ed1319876bbf7e62251a","3d08dbe9837ae976b32e8e30c27b72ede4395521f217123e5490aae2de9d9fcc","da1880434d5e1200ce007c4295a91865658b4a7b3f2ac137a79beb219e45b1f6","fc92a659ea90b6a5302c59679077659cdcc26c7c6cf38a79d731f554f22b62d1","7dbda88d34a5d693075d8548776b416c4ef67a5f82389d7ac8048ba5d165e508","47e6fcbe7467efcfcb6af0b44f9634c2033ff6efc53710b63180ac35a288fb9f","f6d7b9bf5008d341f64b6182190e0b3d15e5b493c1eae62890d7aa03e01383f5","04295489d0e8479ba876845f99f4e5c006677db19344c9bf8d37522a0555e547","85f06779bf612c7e1a8cbcbe474ed38722eed7040fd7c7c80c76d0d8ddeefe71","c86dccae996420639650ce94cc76b645395e17e0ec85df56932d09e16ac65ae1","5ecbb06875b6b81e7b7b6e7d31fb47a66ed421bc9cc5dea8d6b345a5b352e2eb","73d67c83fb4a7196fbe3d1894d11eaaa480e5f671daa9c376abad16622f9f050","a3fdd3029143e03eb314549f3c39595f33c2927a71b84ad8fed99de46f52f75e","3885071658a89e86d84166b4178f5210208dedc546daf37c54853a1395ceb116","3e41fa348cec6fee4d78ed4112e7beda06faab32090e484c45d1e0a9bc3c9ed2","b93dd9e4c67f386a2368a39487ce6d1968f7b8adde741ca70db90344223afb99","ce4f9b9d3e8d66a332d7ce65915db7e18bf91c79ad0845c6caa8231ad6433c9d","db086e26a390685ffe0c65f969e303371d66b90569d285d8fd142304e2afebd3","98572b4d0fbc5ecd8c6bb940794684a79f1fbeff517063533b558649b1c99812","626f5a81c422fbe58ad6c574a31c56ca26958bb342f944de6e9a323aeea0b639","d6f1dc1d2fa5c2344abda822d53161c0abd03d1fe397d4e0f86b59e1f7db590e","d9c7b7ed79f8be4a8faa2e24d1b4b45523f205c738dec5310ed3074abdbd7e66","51462bb0dcc77ccd5c9ba85e81ddc1339666ffe3af622b516751f720f7d99172","9eb205ebb2e5b06200ad9ebb4b7f8eee19d134a2d3ce9cba5b9d92b41efe2e0c","97647bd7f530ead06dde9ac6b9048cfb996d23903b48825abe4c5457aa4c3855","f1d68b4987e45cca964feab373f62a50f7d1e3ed7c56d989c5786b1bae6a6dd9","0256706508f3ce671eb5eb459d5ecc2d3c75c9456e052067305d9fe3d9c65d02","8d9ad6e2f35a53f001d0d88bd1cc6dffc251359ae4c386296e2a0fb90cce851b","1b90ad723f64fdff8d118250dcf74f6e4705ef41e0cb567e2eba7cb5e08bcd06","8d12191d8de2629a4b3b898ac09302d432ff86e8edced1ce774e7b57ba8a0ada","e19d0683a6877697bc6bbeb43643a178d959dc688d953a9df2807f9cfaac6240","dd8d5cc747d2a3a3949bc300340705a4be020ae047abf2c862df2270774e0cbf","1575205e815a88ea800dc66549516418b8fc1810f56b862a377ccbce09a9e152","e8a95da9476006d785e7c8c33efee274d0d3c942726856f8b0b0233344e96ab6","1bed5dcb91842f24a9ad5fd04cb6d5d20ac7c786f6e80e1a4d522f40c496fd0a","6f2019417bcb14c691bea2ecb15ad7cd2cbb3f218099cf99fb3b9ee182c9661b","ce1e2a6f4203b201b796d61e67d4263c96d14d8444e3b6a067aec96eb99f6985","676caaca9b0e2248e05a628de5ad930d0753c3814f2cb8be6f4098912d40ba75","0d03644937001d00aaacbc67641379060e2f6e0fa6c06aa0bc0474293201f33c","5582b500a9ea8f20d662e45a22c73b819c3e37226cceef76b7de51b098d017ac","cf2db8b5d264f8d1b0df3728bde3e55863edd9d3145b49b72aefa734ea74c124","040a774deb16b6cea16976653f4c349fa0f1e53e793c98b4cd9e541a2ed9a57c","1ea15072e9c6831dfbf2846dc479e981281fa60b60a621de1bd7928b6b82724c","427d9784900c50eea1d90cd4d2d33aa7c07fbf2ddfd16c50889647be30b8a9d1","e2036ee53abb60cb2d8cd5f266891c427813c8e921cb073e0020048ae15572f6","31314e08c6d6a3b53e8ca87dc9cf6c6d018d6f089895eba10a18529df91a533a","d196aaff68ce16f0944201ad400a8f1f765eebbe0f87162b72bdf5bd886c1b03","7a023be5e6af678b3b9a122a7caf0d5ef7c3414a9c5e9056dcf4de3edce02801","730c3ff7d774847a989c470e6b1cbd0e6db156fc7a972ee14a9b5abdf0da5e3c","02922e6eb2c5f5a8f4b660ce56b775993849b7a4935a42b6408c842f30dd7c0c","dd06b611b4cb6dc6272627824becb8231654be5a60c61a65659e22918e140f00","15d6aed6919ef5de132de2809318bbf7b53fa7dda7c2608a2768ebb9757d9beb","13bcf6bf5b2930b750edc4c454745111448815a793a425d016a9d0c46003d065","78bde9b88b63355ac0d29cbf9a1f64d78ed5504072df824d8d0e3ab65525345a","2445fe69a8bf69288db95a184cd68c0d6fb7e53de2f978ee4b7b583214202c9c","f328e5cac8f9fef282362c8586c3b8a6529edd3680dd5f5c2f57e0fe73d2aa55","ccd8d78b3f03bbc7d405afadaf87ef519f3f00fa47fc67cd168e640f6b984fa4","4aaca204afd9cea53405d9f1c51076dfc3daab0a672266471b5e2e3e21305074","e1526706930901a3854ed1275ec7633c269dbaa4b4b5ee47d129b954e419f797","48a77df6860e0672cac153d9dc9312d339e1af474e89bf489383c1a0bbee154b","d5c7a2e5635e0b11da324287d3b4a9bd6e31fa6431dd4530fdb68c966b7516d5","bbad41faf198e46c089cbb2575ac6db3f3bf747d291cf4b2e21de76cd889ebc0","e4ab9a57db62fb67e638b724ad1ee2519bb11177f529265ef08d670ec7eb5afb","b5191c63ca99ba7d744d4817aa97f8d652829c617eb6985193f852a15b91d6b4","0d0f1d0e7c4d0d7d84a2ae13dfbc77c9ec1c766ab2c68c4ffdf9b7da5dc6e1f9","9c9132904331b85c90cf25d4d5506ef4a7c801cd8c4f213f43d79930defe363c","ccaf4515495a076d0dae26bdbe8d2629a1c0c54665265c88f4dbac851656d268","a5390860c1fa48faa78d2ff0c009e5e74c34debdf3088bd1cdb3149542b5ae23"],"options":{"declaration":true,"declarationMap":true,"downlevelIteration":false,"emitDecoratorMetadata":true,"experimentalDecorators":true,"jsx":2,"module":3,"outDir":"./","sourceMap":true,"target":2},"fileIdsList":[[15,21,22,23,25],[15,26],[15],[15,16,19],[15,17,19,26,27,28],[22,26,27],[17],[31],[26],[29],[15,18],[14],[79],[25],[15,24],[15,22,26,42],[31,32,33],[15,26,37],[38],[15,38],[39,48],[26,56],[33,34,35],[26,29,30,34],[15,22,26,35],[35],[15,19,35,55],[35,56],[15,19,26,35,43],[15,35],[26,133],[15,19,35,47],[27],[15,22,23,26,35,42,43,46,49],[33,34],[15,30,33],[15,26,34],[15,26,30,31,43],[33,60],[31,32],[33,52],[76],[38,39,58],[15,18,19,35,40,41,43,44,45,50,54,57,59],[33,34,51,53],[18,19,35,45,56,59],[19,31,60,61],[19,60,61],[18,19,31,35,60,61,67],[15,41,43,44,71,72],[31,33,34],[18,19,35,41,56,74,75,78,81],[31,33,34,51],[38,77],[80],[81],[18,19,35,41,42],[41,56,84,85,88,89],[26,38,84,86,87],[15,26,28,35,84],[18,19,31,33,34,35,38,56],[18,19,41,73,81,82],[15,18,19,35,41,43,93,94,95],[15,20,35,41,93,97],[35,98],[18,19,35],[19,20,22,35,39,40,41,43,93,100,101,104,105,107,108],[31,33,34,102],[18,19,35,41,103],[19,26,35,41],[15,22,35,38,40,43,86,93,106],[19,20,35],[18,19,35,41,110],[19,35,68],[18,19,35,41,82],[18,19,41,90,114,115],[18,19,35,74,91],[18,19,35,41,92],[18,19,35,41,71,92],[18,19,35,36,96,98,121],[38,43,86],[19,35,105],[18,19,41,105],[18,19,41,105,125],[38,43,86,123],[18,19,35,41,127],[39,43,86,126],[18,19,41,109],[18,19,35,111],[18,19,35,38,41,76,77,87,92,136],[18,19,35,38,41,76,77,132,134,135]],"referencedMap":[[26,1],[40,2],[93,3],[20,4],[29,5],[27,3],[55,3],[100,6],[22,3],[28,3],[18,7],[52,8],[42,9],[132,10],[19,11],[15,12],[80,13],[24,14],[25,15],[46,7],[43,16],[16,3],[60,17],[38,18],[39,19],[87,19],[37,3],[106,20],[49,21],[74,22],[94,23],[35,24],[101,25],[114,26],[56,27],[133,28],[71,29],[47,26],[45,30],[134,31],[48,32],[67,33],[50,34],[102,35],[34,36],[30,37],[51,38],[61,39],[33,40],[53,41],[77,42],[59,43],[58,44],[54,45],[57,46],[62,47],[63,47],[65,48],[66,47],[68,49],[69,48],[73,50],[72,51],[82,52],[75,53],[78,54],[81,55],[83,56],[84,57],[90,58],[85,51],[88,59],[89,60],[91,61],[92,62],[96,63],[98,64],[99,65],[97,51],[95,66],[109,67],[103,68],[104,69],[105,70],[107,71],[108,66],[36,72],[111,73],[110,51],[112,74],[113,75],[116,76],[115,19],[117,77],[118,78],[119,79],[120,72],[122,80],[121,81],[123,82],[124,83],[126,84],[125,85],[128,86],[127,87],[129,88],[130,84],[131,89],[137,90],[136,91],[135,35]],"exportedModulesMap":[[26,1],[40,2],[93,3],[20,4],[29,5],[27,3],[55,3],[100,6],[22,3],[28,3],[18,7],[52,8],[42,9],[132,10],[19,11],[15,12],[80,13],[24,14],[25,15],[46,7],[43,16],[16,3],[60,17],[38,18],[39,19],[87,19],[37,3],[106,20],[49,21],[74,22],[94,23],[35,24],[101,25],[114,26],[56,27],[133,28],[71,29],[47,26],[45,30],[134,31],[48,32],[67,33],[50,34],[102,35],[34,36],[30,37],[51,38],[61,39],[33,40],[53,41],[77,42],[59,43],[58,44],[54,45],[57,46],[62,47],[63,47],[65,48],[66,47],[68,49],[69,48],[73,50],[72,51],[82,52],[75,53],[78,54],[81,55],[83,56],[84,57],[90,58],[85,51],[88,59],[89,60],[91,61],[92,62],[96,63],[98,64],[99,65],[97,51],[95,66],[109,67],[103,68],[104,69],[105,70],[107,71],[108,66],[36,72],[111,73],[110,51],[112,74],[113,75],[116,76],[115,19],[117,77],[118,78],[119,79],[120,72],[122,80],[121,81],[123,82],[124,83],[126,84],[125,85],[128,86],[127,87],[129,88],[130,84],[131,89],[137,90],[136,91],[135,35]],"semanticDiagnosticsPerFile":[26,40,93,20,29,21,27,55,100,22,28,18,41,52,31,42,23,17,132,32,19,15,80,79,86,24,25,46,43,44,16,60,38,39,87,37,106,49,74,94,35,101,114,56,133,71,47,45,134,48,67,50,102,34,30,51,61,33,53,77,76,14,13,59,58,54,57,62,63,64,65,66,68,69,70,73,72,82,75,78,81,83,84,90,85,88,89,91,92,96,98,99,97,95,109,103,104,105,107,108,36,111,110,112,113,116,115,117,118,119,120,122,121,123,124,126,125,128,127,129,130,131,137,136,135,3,5,4,2,6,7,8,9,10,11,12,1]},"version":"4.5.2"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@web-atoms/web-controls",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.9",
|
|
4
4
|
"description": "HTML controls for web atoms core",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://github.com/web-atoms/web-controls#readme",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@web-atoms/core": "^2.1.
|
|
21
|
+
"@web-atoms/core": "^2.1.88",
|
|
22
22
|
"@web-atoms/date-time": "^1.0.26",
|
|
23
23
|
"@web-atoms/module-loader": "^2.0.9",
|
|
24
24
|
"reflect-metadata": "^0.1.13"
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import Colors from "@web-atoms/core/dist/core/Colors";
|
|
2
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
3
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
4
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
5
|
+
|
|
6
|
+
export interface IButton {
|
|
7
|
+
id?: string;
|
|
8
|
+
icon?: string;
|
|
9
|
+
text?: string;
|
|
10
|
+
eventClick?: any;
|
|
11
|
+
href?: string;
|
|
12
|
+
target?: string;
|
|
13
|
+
title?: string;
|
|
14
|
+
styleDisplay?: string;
|
|
15
|
+
class?: string;
|
|
16
|
+
isVisible?: any;
|
|
17
|
+
subClass?: string;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const css = CSS(
|
|
21
|
+
StyleRule()
|
|
22
|
+
.padding(8)
|
|
23
|
+
.marginLeft(3)
|
|
24
|
+
.marginRight(3)
|
|
25
|
+
.roundBorderFull()
|
|
26
|
+
.display("inline-block")
|
|
27
|
+
.height(40)
|
|
28
|
+
.minWidth(40)
|
|
29
|
+
.defaultBoxShadow()
|
|
30
|
+
.cursor("pointer")
|
|
31
|
+
.backgroundColor(Colors.transparent)
|
|
32
|
+
.hoverBackgroundColor(Colors.lightGreen)
|
|
33
|
+
.and(StyleRule(".pressed")
|
|
34
|
+
.backgroundColor(Colors.lightSteelBlue)
|
|
35
|
+
)
|
|
36
|
+
.child(StyleRule("label.label")
|
|
37
|
+
.display("flex")
|
|
38
|
+
.alignItems("center")
|
|
39
|
+
.gap("5px")
|
|
40
|
+
.child(StyleRule(".fad")
|
|
41
|
+
.fontSize(18)
|
|
42
|
+
.width("100%")
|
|
43
|
+
.color(Colors.purple.withAlphaPercent(0.5))
|
|
44
|
+
.cursor("pointer")
|
|
45
|
+
.and(StyleRule(".red")
|
|
46
|
+
.color(Colors.red)
|
|
47
|
+
)
|
|
48
|
+
)
|
|
49
|
+
.child(StyleRule("span")
|
|
50
|
+
.whiteSpace("nowrap")
|
|
51
|
+
)
|
|
52
|
+
)
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
export default function Button({
|
|
56
|
+
id,
|
|
57
|
+
icon,
|
|
58
|
+
text,
|
|
59
|
+
eventClick,
|
|
60
|
+
href,
|
|
61
|
+
target,
|
|
62
|
+
title,
|
|
63
|
+
styleDisplay,
|
|
64
|
+
class: className,
|
|
65
|
+
subClass
|
|
66
|
+
}: IButton) {
|
|
67
|
+
|
|
68
|
+
const cn = className ?? ( subClass
|
|
69
|
+
? subClass + " " + css
|
|
70
|
+
: css
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
if (href) {
|
|
74
|
+
|
|
75
|
+
if (text) {
|
|
76
|
+
return <a id={id}
|
|
77
|
+
class={cn}
|
|
78
|
+
target={target}
|
|
79
|
+
title={title}
|
|
80
|
+
styleDisplay={styleDisplay}
|
|
81
|
+
>
|
|
82
|
+
<label class="label">
|
|
83
|
+
<i class={icon}/>
|
|
84
|
+
{ text && <span text={text}/> }
|
|
85
|
+
</label>
|
|
86
|
+
</a>;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return <button id={id} class={cn} eventClick={eventClick} title={title} styleDisplay={styleDisplay}>
|
|
90
|
+
<label class="label">
|
|
91
|
+
<i class={icon}/>
|
|
92
|
+
{ text && <span text={text}/> }
|
|
93
|
+
</label>
|
|
94
|
+
</button>;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
Button.className = css;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import Colors from "@web-atoms/core/dist/core/Colors";
|
|
2
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
3
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
4
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
5
|
+
|
|
6
|
+
const css = CSS(
|
|
7
|
+
StyleRule("check-box")
|
|
8
|
+
.display("inline-block")
|
|
9
|
+
.child(
|
|
10
|
+
StyleRule("label")
|
|
11
|
+
.display("flex")
|
|
12
|
+
.paddingLeft(5)
|
|
13
|
+
.paddingRight(5)
|
|
14
|
+
.child(
|
|
15
|
+
|
|
16
|
+
StyleRule("input[type=checkbox]")
|
|
17
|
+
.borderRadius(3)
|
|
18
|
+
.margin(0)
|
|
19
|
+
.padding(0)
|
|
20
|
+
.alignSelf("center")
|
|
21
|
+
)
|
|
22
|
+
.child(
|
|
23
|
+
StyleRule("span")
|
|
24
|
+
.alignSelf("center")
|
|
25
|
+
.whiteSpace("nowrap")
|
|
26
|
+
.marginLeft(5)
|
|
27
|
+
.flexStretch()
|
|
28
|
+
|
|
29
|
+
))
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
export default function Checkbox({
|
|
33
|
+
checked,
|
|
34
|
+
text
|
|
35
|
+
}: {
|
|
36
|
+
checked: any,
|
|
37
|
+
text: string
|
|
38
|
+
}) {
|
|
39
|
+
return <div class={css}>
|
|
40
|
+
<label>
|
|
41
|
+
<input
|
|
42
|
+
type="checkbox"
|
|
43
|
+
checked={checked}/>
|
|
44
|
+
<span
|
|
45
|
+
text={text}></span>
|
|
46
|
+
</label>
|
|
47
|
+
</div>;
|
|
48
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
2
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
3
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
4
|
+
|
|
5
|
+
const css = CSS(
|
|
6
|
+
StyleRule("input")
|
|
7
|
+
.display("inline-block")
|
|
8
|
+
.child(
|
|
9
|
+
StyleRule("input[type=input]")
|
|
10
|
+
.margin(0)
|
|
11
|
+
.padding(5)
|
|
12
|
+
.height(25)
|
|
13
|
+
.marginRight(5)
|
|
14
|
+
.outline("none")
|
|
15
|
+
.alignSelf("center")
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
export default function Input({
|
|
20
|
+
value,
|
|
21
|
+
placeholder
|
|
22
|
+
}:{
|
|
23
|
+
value:string,
|
|
24
|
+
placeholder: string
|
|
25
|
+
}){
|
|
26
|
+
return <div class={css}>
|
|
27
|
+
<input type="input"
|
|
28
|
+
placeholder={placeholder} />
|
|
29
|
+
</div>;
|
|
30
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import Colors from "@web-atoms/core/dist/core/Colors";
|
|
2
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
3
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
4
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
5
|
+
|
|
6
|
+
export interface IPanelAttributes {
|
|
7
|
+
header?: string;
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const css = CSS(StyleRule("panel")
|
|
12
|
+
.display("inline-block")
|
|
13
|
+
.padding(5)
|
|
14
|
+
.margin(3)
|
|
15
|
+
.borderRadius(9999)
|
|
16
|
+
.defaultBoxShadow()
|
|
17
|
+
.child(StyleRule(".header")
|
|
18
|
+
.backgroundColor(Colors.lightGray)
|
|
19
|
+
.borderRadius(5)
|
|
20
|
+
.padding(5)
|
|
21
|
+
));
|
|
22
|
+
|
|
23
|
+
export default function Panel(
|
|
24
|
+
{
|
|
25
|
+
header,
|
|
26
|
+
class: className
|
|
27
|
+
}: IPanelAttributes,
|
|
28
|
+
... children: any[]) {
|
|
29
|
+
|
|
30
|
+
className = className ? css + " " + className : css;
|
|
31
|
+
|
|
32
|
+
if (header) {
|
|
33
|
+
return <div class={className}>
|
|
34
|
+
<label class="header">{header}</label>
|
|
35
|
+
{ ... children }
|
|
36
|
+
</div>;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return <div class={className}>
|
|
40
|
+
{ ... children }
|
|
41
|
+
</div>;
|
|
42
|
+
|
|
43
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import Bind from "@web-atoms/core/dist/core/Bind";
|
|
2
|
+
import Colors from "@web-atoms/core/dist/core/Colors";
|
|
3
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
4
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
5
|
+
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
6
|
+
import PopupService, { IPopup } from "@web-atoms/core/dist/web/services/PopupService";
|
|
7
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
8
|
+
|
|
9
|
+
const menuCss = CSS(StyleRule()
|
|
10
|
+
.child(StyleRule(".menu")
|
|
11
|
+
.padding(5)
|
|
12
|
+
.margin(3)
|
|
13
|
+
.borderRadius(5)
|
|
14
|
+
.cursor("pointer")
|
|
15
|
+
.hoverBackgroundColor(Colors.lightGreen)
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
export interface IMenuItem {
|
|
20
|
+
label?: string;
|
|
21
|
+
icon?: string;
|
|
22
|
+
eventClick?: any;
|
|
23
|
+
href?: string;
|
|
24
|
+
target?: string;
|
|
25
|
+
[key: string]: any;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface IPopupButton {
|
|
29
|
+
icon?: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
[key: string]: any;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export function MenuItem({
|
|
35
|
+
label,
|
|
36
|
+
icon,
|
|
37
|
+
eventClick,
|
|
38
|
+
href,
|
|
39
|
+
target,
|
|
40
|
+
... others
|
|
41
|
+
}: IMenuItem) {
|
|
42
|
+
|
|
43
|
+
if (label) {
|
|
44
|
+
return <div class="menu" eventClick={eventClick} { ... others }>
|
|
45
|
+
<i class={icon}/>
|
|
46
|
+
<span>{label}</span>
|
|
47
|
+
</div>;
|
|
48
|
+
}
|
|
49
|
+
return <div class="menu" eventClick={eventClick} { ... others }>
|
|
50
|
+
<i class={icon}/>
|
|
51
|
+
</div>;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const iconLabelCss = CSS(
|
|
55
|
+
StyleRule(".label")
|
|
56
|
+
.display("inline-flex")
|
|
57
|
+
.child(StyleRule("span")
|
|
58
|
+
.flexStretch()
|
|
59
|
+
)
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
export default function PopupButton(
|
|
63
|
+
{
|
|
64
|
+
icon,
|
|
65
|
+
label,
|
|
66
|
+
... others
|
|
67
|
+
}: IPopupButton,
|
|
68
|
+
... menus: Array<IMenuItem | XNode>) {
|
|
69
|
+
|
|
70
|
+
let popup: IPopup = null;
|
|
71
|
+
function openPopup(s: AtomControl, e: Event) {
|
|
72
|
+
const button = e.currentTarget as HTMLElement;
|
|
73
|
+
if (popup) {
|
|
74
|
+
button.classList.remove("pressed");
|
|
75
|
+
popup.dispose();
|
|
76
|
+
popup = null;
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const menu = document.createElement("div");
|
|
81
|
+
(s as any).render(<div class={menuCss}>
|
|
82
|
+
{ ... menus}
|
|
83
|
+
</div>, menu);
|
|
84
|
+
|
|
85
|
+
const ps = (s as any).resolve(PopupService) as PopupService;
|
|
86
|
+
popup = ps.show(button, menu);
|
|
87
|
+
|
|
88
|
+
const dispose = () => {
|
|
89
|
+
popup?.dispose();
|
|
90
|
+
popup = null;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
menu.addEventListener("click", dispose);
|
|
94
|
+
|
|
95
|
+
popup.registerDisposable(() => menu.removeEventListener("click", dispose));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (label) {
|
|
99
|
+
return <button
|
|
100
|
+
{ ... others }
|
|
101
|
+
eventClick={Bind.event((s, e) => openPopup(s as AtomControl, e))}>
|
|
102
|
+
<label class={iconLabelCss}>
|
|
103
|
+
<i class={icon}/>
|
|
104
|
+
<span>{label}</span>
|
|
105
|
+
</label>
|
|
106
|
+
</button>;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return <button
|
|
110
|
+
{ ... others }
|
|
111
|
+
eventClick={Bind.event((s, e) => openPopup(s as AtomControl, e))}>
|
|
112
|
+
<i class={icon}/>
|
|
113
|
+
</button>;
|
|
114
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
2
|
+
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
|
|
3
|
+
import CSS from "@web-atoms/core/dist/web/styles/CSS";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Original source = https://www.htmllion.com/css3-toggle-switch-button.html
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
const css = CSS(StyleRule()
|
|
10
|
+
.position("relative")
|
|
11
|
+
.display("inline-block")
|
|
12
|
+
.verticalAlign("top")
|
|
13
|
+
.width(70)
|
|
14
|
+
.height(30)
|
|
15
|
+
.padding(3)
|
|
16
|
+
.margin("0 10px 10px 0")
|
|
17
|
+
.background("linear-gradient(to bottom, #eeeeee, #FFFFFF 25px)" as any)
|
|
18
|
+
.backgroundImage("-webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px)")
|
|
19
|
+
.borderRadius(18)
|
|
20
|
+
.boxShadow("inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05)")
|
|
21
|
+
.cursor("pointer")
|
|
22
|
+
.boxSizing("content-box")
|
|
23
|
+
.child(StyleRule(".switch-input")
|
|
24
|
+
.absolutePosition({ top: 0, left: 0})
|
|
25
|
+
.opacity(0 as any)
|
|
26
|
+
.boxSizing("content-box")
|
|
27
|
+
)
|
|
28
|
+
.child(StyleRule(".switch-label")
|
|
29
|
+
.position("relative")
|
|
30
|
+
.display("block")
|
|
31
|
+
.height("inherit")
|
|
32
|
+
.fontSize(10)
|
|
33
|
+
.textTransform("uppercase")
|
|
34
|
+
.backgroundColor("#eceeef")
|
|
35
|
+
.borderRadius("inherit")
|
|
36
|
+
.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15)")
|
|
37
|
+
.boxSizing("content-box")
|
|
38
|
+
.and(StyleRule(":before, .switch-label:after")
|
|
39
|
+
.position("absolute")
|
|
40
|
+
.top("50%")
|
|
41
|
+
.marginTop("-.5em")
|
|
42
|
+
.lineHeight("1")
|
|
43
|
+
.webkitTransition("inherit")
|
|
44
|
+
.transition("inherit")
|
|
45
|
+
.boxSizing("content-box")
|
|
46
|
+
)
|
|
47
|
+
.and(StyleRule(":before")
|
|
48
|
+
.content("attr(data-off)" as any)
|
|
49
|
+
.right(11)
|
|
50
|
+
.color("#aaaaaa")
|
|
51
|
+
.textShadow("0 1px rgba(255, 255, 255, 0.5)")
|
|
52
|
+
)
|
|
53
|
+
.and(StyleRule(":after")
|
|
54
|
+
.content("attr(data-on)" as any)
|
|
55
|
+
.left(11)
|
|
56
|
+
.color("#FFFFFF")
|
|
57
|
+
.textShadow("0 1px rgba(0, 0, 0, 0.2)")
|
|
58
|
+
.opacity("0")
|
|
59
|
+
)
|
|
60
|
+
)
|
|
61
|
+
.child(StyleRule(".switch-input:checked ~ .switch-label")
|
|
62
|
+
.backgroundColor("#E1B42B")
|
|
63
|
+
.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2)")
|
|
64
|
+
)
|
|
65
|
+
.child(StyleRule(".switch-input:checked ~ .switch-label:before")
|
|
66
|
+
.opacity("0")
|
|
67
|
+
)
|
|
68
|
+
.child(StyleRule(".switch-input:checked ~ .switch-label:after")
|
|
69
|
+
.opacity("1")
|
|
70
|
+
)
|
|
71
|
+
.child(StyleRule(".switch-handle")
|
|
72
|
+
.absolutePosition({top: 4, left: 4, width: 28, height: 28})
|
|
73
|
+
.background("linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0)" as any)
|
|
74
|
+
.borderRadius("100%")
|
|
75
|
+
.boxShadow("1px 1px 5px rgba(0, 0, 0, 0.2)")
|
|
76
|
+
.and(StyleRule(":before")
|
|
77
|
+
.content("")
|
|
78
|
+
.absolutePosition({ top: "50%", left: "50%", width: 12, height: 12 })
|
|
79
|
+
.background("linear-gradient(to bottom, #eeeeee, #FFFFFF)" as any)
|
|
80
|
+
.borderRadius(6)
|
|
81
|
+
.boxShadow("inset 0 1px rgba(0, 0, 0, 0.02)")
|
|
82
|
+
)
|
|
83
|
+
)
|
|
84
|
+
.child(StyleRule(".switch-input:checked ~ .switch-handle")
|
|
85
|
+
.left(44)
|
|
86
|
+
.boxShadow("-1px 1px 5px rgba(0, 0, 0, 0.2)")
|
|
87
|
+
)
|
|
88
|
+
.child(StyleRule(".switch-label, .switch-handle")
|
|
89
|
+
.transition("All 0.3s ease")
|
|
90
|
+
)
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
export interface ISwitch {
|
|
94
|
+
checked;
|
|
95
|
+
onLabel?: string;
|
|
96
|
+
offLabel?: string;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default function Switch({
|
|
100
|
+
checked,
|
|
101
|
+
onLabel,
|
|
102
|
+
offLabel
|
|
103
|
+
}: ISwitch) {
|
|
104
|
+
|
|
105
|
+
return <label class={css}>
|
|
106
|
+
<input class="switch-input" type="checkbox" checked={checked} />
|
|
107
|
+
<span class="switch-label" data-on={onLabel ?? "On"} data-off={offLabel ?? "Off"}></span>
|
|
108
|
+
<span class="switch-handle"></span>
|
|
109
|
+
</label>;
|
|
110
|
+
}
|