slicejs-web-framework 2.3.5 → 2.4.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.
- package/LICENSE +21 -21
- package/README.md +24 -5
- package/Slice/Components/Structural/Controller/Controller.js +156 -154
- package/Slice/Components/Structural/Debugger/Debugger.css +619 -619
- package/Slice/Components/Structural/Debugger/Debugger.html +72 -72
- package/Slice/Components/Structural/Logger/Log.js +10 -10
- package/Slice/Components/Structural/StylesManager/StylesManager.js +6 -3
- package/Slice/Slice.js +118 -51
- package/api/index.js +261 -233
- package/api/middleware/securityMiddleware.js +252 -252
- package/package.json +37 -37
- package/sliceConfig.schema.json +4 -0
- package/src/App/index.html +22 -22
- package/src/App/index.js +23 -23
- package/src/App/style.css +40 -40
- package/src/Components/AppComponents/HomePage/HomePage.css +204 -204
- package/src/Components/AppComponents/HomePage/HomePage.html +48 -48
- package/src/Components/AppComponents/HomePage/HomePage.js +195 -195
- package/src/Components/AppComponents/Playground/Playground.css +11 -11
- package/src/Components/AppComponents/Playground/Playground.js +111 -111
- package/src/Components/Service/FetchManager/FetchManager.js +133 -133
- package/src/Components/Service/IndexedDbManager/IndexedDbManager.js +141 -141
- package/src/Components/Service/LocalStorageManager/LocalStorageManager.js +45 -45
- package/src/Components/Visual/Button/Button.css +47 -47
- package/src/Components/Visual/Button/Button.html +5 -5
- package/src/Components/Visual/Button/Button.js +92 -92
- package/src/Components/Visual/Card/Card.css +68 -68
- package/src/Components/Visual/Card/Card.html +7 -7
- package/src/Components/Visual/Card/Card.js +107 -107
- package/src/Components/Visual/Checkbox/Checkbox.css +87 -87
- package/src/Components/Visual/Checkbox/Checkbox.html +8 -8
- package/src/Components/Visual/Checkbox/Checkbox.js +86 -86
- package/src/Components/Visual/CodeVisualizer/CodeVisualizer.css +129 -129
- package/src/Components/Visual/CodeVisualizer/CodeVisualizer.html +3 -3
- package/src/Components/Visual/CodeVisualizer/CodeVisualizer.js +259 -259
- package/src/Components/Visual/Details/Details.css +70 -70
- package/src/Components/Visual/Details/Details.html +9 -9
- package/src/Components/Visual/Details/Details.js +76 -76
- package/src/Components/Visual/DropDown/DropDown.css +60 -60
- package/src/Components/Visual/DropDown/DropDown.html +5 -5
- package/src/Components/Visual/DropDown/DropDown.js +63 -63
- package/src/Components/Visual/Grid/Grid.css +7 -7
- package/src/Components/Visual/Grid/Grid.html +1 -1
- package/src/Components/Visual/Grid/Grid.js +57 -57
- package/src/Components/Visual/Icon/Icon.css +510 -510
- package/src/Components/Visual/Icon/Icon.js +89 -89
- package/src/Components/Visual/Icon/slc.json +554 -554
- package/src/Components/Visual/Icon/slc.styl +507 -507
- package/src/Components/Visual/Icon/slc.svg +1485 -1485
- package/src/Components/Visual/Icon/slc.symbol.svg +1058 -1058
- package/src/Components/Visual/Input/Input.css +91 -91
- package/src/Components/Visual/Input/Input.html +4 -4
- package/src/Components/Visual/Input/Input.js +215 -215
- package/src/Components/Visual/Layout/Layout.js +49 -49
- package/src/Components/Visual/Loading/Loading.css +56 -56
- package/src/Components/Visual/Loading/Loading.html +83 -83
- package/src/Components/Visual/Loading/Loading.js +38 -38
- package/src/Components/Visual/MultiRoute/MultiRoute.js +93 -93
- package/src/Components/Visual/Navbar/Navbar.css +115 -115
- package/src/Components/Visual/Navbar/Navbar.html +44 -44
- package/src/Components/Visual/Navbar/Navbar.js +141 -141
- package/src/Components/Visual/NotFound/NotFound.css +116 -116
- package/src/Components/Visual/NotFound/NotFound.html +23 -23
- package/src/Components/Visual/NotFound/NotFound.js +16 -16
- package/src/Components/Visual/Route/Route.js +93 -93
- package/src/Components/Visual/Select/Select.css +84 -84
- package/src/Components/Visual/Select/Select.html +8 -8
- package/src/Components/Visual/Select/Select.js +195 -195
- package/src/Components/Visual/Switch/Switch.css +76 -76
- package/src/Components/Visual/Switch/Switch.html +8 -8
- package/src/Components/Visual/Switch/Switch.js +102 -102
- package/src/Components/Visual/TreeItem/TreeItem.css +36 -36
- package/src/Components/Visual/TreeItem/TreeItem.html +1 -1
- package/src/Components/Visual/TreeItem/TreeItem.js +126 -126
- package/src/Components/Visual/TreeView/TreeView.css +8 -8
- package/src/Components/Visual/TreeView/TreeView.html +1 -1
- package/src/Components/Visual/TreeView/TreeView.js +48 -48
- package/src/Styles/sliceStyles.css +34 -34
- package/src/Themes/Dark.css +42 -42
- package/src/Themes/Light.css +31 -31
- package/src/Themes/Slice.css +47 -47
- package/src/routes.js +15 -15
- package/src/sliceConfig.json +8 -3
- package/src/testing.js +887 -887
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
export default class Icon extends HTMLElement {
|
|
2
|
-
constructor(props) {
|
|
3
|
-
super();
|
|
4
|
-
|
|
5
|
-
slice.attachTemplate(this);
|
|
6
|
-
this.$icon = this.querySelector('i');
|
|
7
|
-
|
|
8
|
-
if (!this.iconStyle) {
|
|
9
|
-
this._iconStyle = 'filled';
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
slice.controller.setComponentProps(this, props);
|
|
13
|
-
this.debuggerProps = ['name', 'size', 'color', 'iconStyle'];
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
get random() {
|
|
17
|
-
return this.$icon.classList;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
set random(value) {}
|
|
21
|
-
|
|
22
|
-
init() {
|
|
23
|
-
if (!this._name) {
|
|
24
|
-
this.name = 'youtube';
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
if (!this._size) {
|
|
28
|
-
this.size = 'small';
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (!this._color) {
|
|
32
|
-
this.color = 'black';
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
get name() {
|
|
37
|
-
return this._name;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
set name(value) {
|
|
41
|
-
this._name = value;
|
|
42
|
-
this.$icon.className = '';
|
|
43
|
-
this.$icon.classList.add(`slc-${styleTypes[this._iconStyle]}${value}`);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
get iconStyle() {
|
|
47
|
-
return this._iconStyle;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
set iconStyle(value) {
|
|
51
|
-
if (value !== 'filled' && value !== 'outlined') value = 'filled';
|
|
52
|
-
this._iconStyle = value;
|
|
53
|
-
this.name = this._name;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
get size() {
|
|
57
|
-
return this._size;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
set size(value) {
|
|
61
|
-
switch (value) {
|
|
62
|
-
case 'small':
|
|
63
|
-
this._size = '16px';
|
|
64
|
-
break;
|
|
65
|
-
case 'medium':
|
|
66
|
-
this._size = '20px';
|
|
67
|
-
break;
|
|
68
|
-
case 'large':
|
|
69
|
-
this._size = '24px';
|
|
70
|
-
break;
|
|
71
|
-
default:
|
|
72
|
-
this._size = value;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
this.$icon.style.fontSize = value;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
get color() {
|
|
79
|
-
return this._color;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
set color(value) {
|
|
83
|
-
this._color = value;
|
|
84
|
-
this.$icon.style.color = value;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
const styleTypes = { outlined: 'out', filled: 'fil' };
|
|
89
|
-
customElements.define('slice-icon', Icon);
|
|
1
|
+
export default class Icon extends HTMLElement {
|
|
2
|
+
constructor(props) {
|
|
3
|
+
super();
|
|
4
|
+
|
|
5
|
+
slice.attachTemplate(this);
|
|
6
|
+
this.$icon = this.querySelector('i');
|
|
7
|
+
|
|
8
|
+
if (!this.iconStyle) {
|
|
9
|
+
this._iconStyle = 'filled';
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
slice.controller.setComponentProps(this, props);
|
|
13
|
+
this.debuggerProps = ['name', 'size', 'color', 'iconStyle'];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
get random() {
|
|
17
|
+
return this.$icon.classList;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
set random(value) {}
|
|
21
|
+
|
|
22
|
+
init() {
|
|
23
|
+
if (!this._name) {
|
|
24
|
+
this.name = 'youtube';
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (!this._size) {
|
|
28
|
+
this.size = 'small';
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (!this._color) {
|
|
32
|
+
this.color = 'black';
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
get name() {
|
|
37
|
+
return this._name;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
set name(value) {
|
|
41
|
+
this._name = value;
|
|
42
|
+
this.$icon.className = '';
|
|
43
|
+
this.$icon.classList.add(`slc-${styleTypes[this._iconStyle]}${value}`);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
get iconStyle() {
|
|
47
|
+
return this._iconStyle;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
set iconStyle(value) {
|
|
51
|
+
if (value !== 'filled' && value !== 'outlined') value = 'filled';
|
|
52
|
+
this._iconStyle = value;
|
|
53
|
+
this.name = this._name;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
get size() {
|
|
57
|
+
return this._size;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
set size(value) {
|
|
61
|
+
switch (value) {
|
|
62
|
+
case 'small':
|
|
63
|
+
this._size = '16px';
|
|
64
|
+
break;
|
|
65
|
+
case 'medium':
|
|
66
|
+
this._size = '20px';
|
|
67
|
+
break;
|
|
68
|
+
case 'large':
|
|
69
|
+
this._size = '24px';
|
|
70
|
+
break;
|
|
71
|
+
default:
|
|
72
|
+
this._size = value;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
this.$icon.style.fontSize = value;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
get color() {
|
|
79
|
+
return this._color;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
set color(value) {
|
|
83
|
+
this._color = value;
|
|
84
|
+
this.$icon.style.color = value;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const styleTypes = { outlined: 'out', filled: 'fil' };
|
|
89
|
+
customElements.define('slice-icon', Icon);
|