@operato/scene-switch 9.1.1 → 10.0.0-beta.1
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.
|
@@ -2,30 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { LitElement, css, html } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
let SimpleSwitchElement = class SimpleSwitchElement extends LitElement {
|
|
5
|
-
|
|
6
|
-
super(...arguments);
|
|
7
|
-
this.round = false;
|
|
8
|
-
this.value = false;
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
return html `
|
|
12
|
-
<label>
|
|
13
|
-
<input type="checkbox" .checked=${this.value} />
|
|
14
|
-
<span ?round=${this.round}></span>
|
|
15
|
-
</label>
|
|
16
|
-
`;
|
|
17
|
-
}
|
|
18
|
-
firstUpdated() {
|
|
19
|
-
this.renderRoot.addEventListener('change', (e) => {
|
|
20
|
-
var _a;
|
|
21
|
-
this.value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.checked;
|
|
22
|
-
this.dispatchEvent(new CustomEvent('value-change', {
|
|
23
|
-
detail: this.value
|
|
24
|
-
}));
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
SimpleSwitchElement.styles = css `
|
|
5
|
+
static styles = css `
|
|
29
6
|
/* The switch - the box around the slider */
|
|
30
7
|
label {
|
|
31
8
|
position: relative;
|
|
@@ -88,6 +65,25 @@ SimpleSwitchElement.styles = css `
|
|
|
88
65
|
border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
|
|
89
66
|
}
|
|
90
67
|
`;
|
|
68
|
+
round = false;
|
|
69
|
+
value = false;
|
|
70
|
+
render() {
|
|
71
|
+
return html `
|
|
72
|
+
<label>
|
|
73
|
+
<input type="checkbox" .checked=${this.value} />
|
|
74
|
+
<span ?round=${this.round}></span>
|
|
75
|
+
</label>
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
firstUpdated() {
|
|
79
|
+
this.renderRoot.addEventListener('change', (e) => {
|
|
80
|
+
this.value = e.target?.checked;
|
|
81
|
+
this.dispatchEvent(new CustomEvent('value-change', {
|
|
82
|
+
detail: this.value
|
|
83
|
+
}));
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
};
|
|
91
87
|
__decorate([
|
|
92
88
|
property({ type: Boolean })
|
|
93
89
|
], SimpleSwitchElement.prototype, "round", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-switch-element.js","sourceRoot":"","sources":["../src/simple-switch-element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"simple-switch-element.js","sourceRoot":"","sources":["../src/simple-switch-element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DlB,CAAA;IAE4B,KAAK,GAAY,KAAK,CAAA;IACtB,KAAK,GAAY,KAAK,CAAA;IAEnD,MAAM;QACJ,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,KAAK;uBAC7B,IAAI,CAAC,KAAK;;KAE5B,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtD,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,OAAO,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;;AArB4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAlExC,mBAAmB;IAD/B,aAAa,CAAC,kBAAkB,CAAC;GACrB,mBAAmB,CAuF/B","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-simple-switch')\nexport class SimpleSwitchElement extends LitElement {\n static styles = css`\n /* The switch - the box around the slider */\n label {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 100%;\n }\n\n /* Hide default HTML checkbox */\n label input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n /* The slider */\n span {\n position: absolute;\n cursor: pointer;\n width: var(--ox-simple-switch-fullwidth);\n height: var(--ox-simple-switch-fullheight);\n top: calc(0 - var(--ox-simple-switch-thumbnail-size));\n left: 0;\n background-color: var(--ox-simple-switch-off-color, #ccc);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n }\n\n span:before {\n position: absolute;\n content: '';\n height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n left: 4px;\n top: 4px;\n background-color: var(--ox-simple-switch-thumbnail-color, white);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n }\n\n input:checked + span {\n background-color: var(--ox-simple-switch-on-color, #2196f3);\n }\n\n input:checked + span:before {\n -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));\n -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));\n transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));\n }\n\n /* Rounded sliders */\n span[round] {\n border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);\n }\n\n span[round]:before {\n border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);\n }\n `\n\n @property({ type: Boolean }) round: boolean = false\n @property({ type: Boolean }) value: boolean = false\n\n render() {\n return html`\n <label>\n <input type=\"checkbox\" .checked=${this.value} />\n <span ?round=${this.round}></span>\n </label>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', (e: Event) => {\n this.value = (e.target as HTMLInputElement)?.checked\n this.dispatchEvent(\n new CustomEvent('value-change', {\n detail: this.value\n })\n )\n })\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@operato/scene-switch",
|
|
3
3
|
"description": "switch component for operato-scene",
|
|
4
4
|
"author": "heartyoh",
|
|
5
|
-
"version": "
|
|
5
|
+
"version": "10.0.0-beta.1",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.js",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"things-scene": true,
|
|
11
11
|
"publishConfig": {
|
|
12
12
|
"access": "public",
|
|
13
|
-
"@
|
|
13
|
+
"@operato:registry": "https://registry.npmjs.org"
|
|
14
14
|
},
|
|
15
15
|
"repository": {
|
|
16
16
|
"type": "git",
|
|
@@ -22,28 +22,28 @@
|
|
|
22
22
|
"serve:dev": "npm run serve",
|
|
23
23
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
24
24
|
"build": "tsc",
|
|
25
|
-
"
|
|
26
|
-
"lint": "eslint
|
|
27
|
-
"format": "eslint
|
|
25
|
+
"prepublishOnly": "tsc",
|
|
26
|
+
"lint": "eslint src/ && prettier \"src/**/*.ts\" --check",
|
|
27
|
+
"format": "eslint src/ --fix && prettier \"src/**/*.ts\" --write",
|
|
28
28
|
"migration": "things-factory-migration"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@hatiolab/things-scene": "^
|
|
31
|
+
"@hatiolab/things-scene": "^10.0.0-beta.1",
|
|
32
32
|
"lit": "^3.1.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@hatiolab/prettier-config": "^1.0.0",
|
|
36
|
-
"@things-factory/builder": "^
|
|
37
|
-
"@things-factory/operato-board": "^
|
|
38
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
39
|
-
"@typescript-eslint/parser": "^
|
|
36
|
+
"@things-factory/builder": "^10.0.0-beta.1",
|
|
37
|
+
"@things-factory/operato-board": "^10.0.0-beta.1",
|
|
38
|
+
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
39
|
+
"@typescript-eslint/parser": "^8.0.0",
|
|
40
40
|
"@web/dev-server": "^0.1.28",
|
|
41
41
|
"concurrently": "^8.0.1",
|
|
42
42
|
"eslint": "^9.18.0",
|
|
43
43
|
"eslint-config-prettier": "^10.0.1",
|
|
44
44
|
"husky": "^8.0.3",
|
|
45
|
-
"lint-staged": "^
|
|
46
|
-
"prettier": "^2.
|
|
45
|
+
"lint-staged": "^15.2.2",
|
|
46
|
+
"prettier": "^3.2.5",
|
|
47
47
|
"tslib": "^2.3.1",
|
|
48
48
|
"typescript": "^5.0.4"
|
|
49
49
|
},
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"prettier --write"
|
|
60
60
|
]
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "bb127dd516b9e962fb2d0a24bc2d8c5e108f06fb"
|
|
63
63
|
}
|