iobroker.mywebui 1.37.17 → 1.37.19
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/io-package.json +1 -1
- package/package.json +2 -1
- package/www/node_modules/@gokturk413/splitview.webcomponent/package.json +2 -2
- package/www/node_modules/@gokturk413/web-component-designer/package.json +2 -2
- package/www/node_modules/@gokturk413/web-component-designer-codeview-monaco/package.json +2 -2
- package/www/node_modules/@gokturk413/web-component-designer-visualization-addons/package.json +4 -4
- package/www/node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/package.json +2 -2
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/LICENSE +0 -29
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/README.md +0 -236
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.d.ts +0 -87
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js +0 -735
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/Debounce.d.ts +0 -1
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/Debounce.js +0 -19
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/DomHelper.d.ts +0 -10
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/DomHelper.js +0 -96
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/HotModuleReplacement.d.ts +0 -11
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/HotModuleReplacement.js +0 -125
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/LazyLoader.d.ts +0 -5
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/LazyLoader.js +0 -52
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TouchContextMenu.d.ts +0 -2
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TouchContextMenu.js +0 -20
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TypedEvent.d.ts +0 -22
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/TypedEvent.js +0 -48
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/index.d.ts +0 -6
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/dist/index.js +0 -7
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/ideas.md +0 -8
- package/www/node_modules/@gokturk413/splitview.webcomponent/node_modules/@node-projects/base-custom-webcomponent/package.json +0 -23
package/io-package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iobroker.mywebui",
|
|
3
|
-
"version": "1.37.
|
|
3
|
+
"version": "1.37.19",
|
|
4
4
|
"description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/backend/main.js",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"sync": "node sync-package.js",
|
|
8
9
|
"esbuild": "node esbuild.js",
|
|
9
10
|
"tsc": "tsc",
|
|
10
11
|
"start": "web-dev-server --open",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gokturk413/splitview.webcomponent",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "a splitview webcomponent.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/SplitView.js",
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
"typescript": "^5.3.3"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@gokturk413/base-custom-webcomponent": "
|
|
31
|
+
"@gokturk413/base-custom-webcomponent": ">=0.23.0"
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "A WYSIWYG designer webcomponent for html components",
|
|
3
3
|
"name": "@gokturk413/web-component-designer",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.7",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"bundle": "node _esbuild.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@
|
|
19
|
+
"@gokturk413/base-custom-webcomponent": ">=0.27.8"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@types/node": "^22.8.6",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "web-component-designer addon: Code Editor using Monaco",
|
|
3
3
|
"name": "@gokturk413/web-component-designer-codeview-monaco",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.34",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/widgets/codeView/code-view-monaco.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"monaco-editor": ">=0.50.0",
|
|
17
|
-
"@
|
|
17
|
+
"@gokturk413/base-custom-webcomponent": ">=0.19.0",
|
|
18
18
|
"@gokturk413/web-component-designer": ">=0.1.224"
|
|
19
19
|
},
|
|
20
20
|
"repository": {
|
package/www/node_modules/@gokturk413/web-component-designer-visualization-addons/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "web-component-designer addon for visualizations",
|
|
3
3
|
"name": "@gokturk413/web-component-designer-visualization-addons",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.140",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@blockly/zoom-to-fit": ">=6.0.9",
|
|
18
|
-
"@
|
|
18
|
+
"@gokturk413/base-custom-webcomponent": ">=0.27.8",
|
|
19
19
|
"@node-projects/css-parser": "^5.2.0",
|
|
20
|
-
"@
|
|
21
|
-
"@
|
|
20
|
+
"@gokturk413/propertygrid.webcomponent": ">=1.2.3",
|
|
21
|
+
"@gokturk413/splitview.webcomponent": ">=1.0.2",
|
|
22
22
|
"@gokturk413/web-component-designer": ">=0.1.224",
|
|
23
23
|
"@gokturk413/web-component-designer-codeview-monaco": ">=0.1.32",
|
|
24
24
|
"@gokturk413/web-component-designer-widgets-wunderbaum": ">=0.1.29",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "web-component-designer addon: Widgets using wunderbaum",
|
|
3
3
|
"name": "@gokturk413/web-component-designer-widgets-wunderbaum",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"bundle": "esbuild ./dist/index.js --format=esm --minify --external:wunderbaum --external:@gokturk413/* --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@
|
|
17
|
+
"@gokturk413/base-custom-webcomponent": ">=0.27.8",
|
|
18
18
|
"@gokturk413/web-component-designer": ">=0.2.0",
|
|
19
19
|
"wunderbaum": ">=0.13.0"
|
|
20
20
|
},
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
BSD 3-Clause License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2020, node projects
|
|
4
|
-
All rights reserved.
|
|
5
|
-
|
|
6
|
-
Redistribution and use in source and binary forms, with or without
|
|
7
|
-
modification, are permitted provided that the following conditions are met:
|
|
8
|
-
|
|
9
|
-
1. Redistributions of source code must retain the above copyright notice, this
|
|
10
|
-
list of conditions and the following disclaimer.
|
|
11
|
-
|
|
12
|
-
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
13
|
-
this list of conditions and the following disclaimer in the documentation
|
|
14
|
-
and/or other materials provided with the distribution.
|
|
15
|
-
|
|
16
|
-
3. Neither the name of the copyright holder nor the names of its
|
|
17
|
-
contributors may be used to endorse or promote products derived from
|
|
18
|
-
this software without specific prior written permission.
|
|
19
|
-
|
|
20
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
21
|
-
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
22
|
-
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
23
|
-
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
24
|
-
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
25
|
-
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
26
|
-
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
27
|
-
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
28
|
-
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
29
|
-
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
@@ -1,236 +0,0 @@
|
|
|
1
|
-
# base-custom-webcomponent
|
|
2
|
-
|
|
3
|
-
## Description
|
|
4
|
-
|
|
5
|
-
The base-custom-webcomponent is a simple base class for the use of webcomponents in typescript. It wraps the needed basic functionality and also allows you to optionally use some advanced technics like
|
|
6
|
-
- set attribute into property
|
|
7
|
-
- two-way binding
|
|
8
|
-
|
|
9
|
-
## Basic Feature
|
|
10
|
-
The base class does:
|
|
11
|
-
- registers the html tag
|
|
12
|
-
- creates the shadow dom
|
|
13
|
-
- imports the css and html into the shadow dom
|
|
14
|
-
- gives access to the dom elements with helping functions
|
|
15
|
-
- informs about startup
|
|
16
|
-
- oneTimeSetup()
|
|
17
|
-
- ready()
|
|
18
|
-
|
|
19
|
-
## Planed features
|
|
20
|
-
|
|
21
|
-
Automatic Change Notification class fields via decorators are planed, but lack browser support at the moment: https://github.com/lit/lit/issues/2284
|
|
22
|
-
For now we removed the this._createObservableProperties(); cause it would not work if you compile to newer javascript.
|
|
23
|
-
|
|
24
|
-
Refresh Bindings - only for the changed value.
|
|
25
|
-
At the moment the call refreshes all bindings, but this could (and should) be optimized.
|
|
26
|
-
|
|
27
|
-
## Advanced Features
|
|
28
|
-
|
|
29
|
-
All the features are not enabled by default for performance reasons but you can call these methods to enable them.
|
|
30
|
-
- this._restoreCachedInititalValues(); ==> Needs to be called after super() of the constructor, to restore properties set, before element is upgraded. And also it needs to be called after the default values are set in constructor.
|
|
31
|
-
- this._parseAttributesToProperties(); ==> parses all attributes to the defined properties
|
|
32
|
-
- this._assignEvents(); ==> parses @event bindings to callbacks in class
|
|
33
|
-
- this._bindingsParse(); ==> parses and enables bindings
|
|
34
|
-
|
|
35
|
-
## Hot Reload
|
|
36
|
-
|
|
37
|
-
The Library supports Hotreload of Components created with it. This works mostly for the Templates and the Styles, for Javascript, it depends. Best is, if you try it yourself.
|
|
38
|
-
|
|
39
|
-
To use it, try following snippet:
|
|
40
|
-
|
|
41
|
-
```
|
|
42
|
-
HotModuleReplacement.initHMR(async () => {
|
|
43
|
-
...
|
|
44
|
-
replace this with a function wich returns a list of your changed files,
|
|
45
|
-
or null if no files have changed since the last call, this function will be called every 100ms
|
|
46
|
-
so this function for example could ask the dev server wich files have changed, and return them.
|
|
47
|
-
The hotmodulereplacment will then try to reload them (If possible)
|
|
48
|
-
...
|
|
49
|
-
});
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Bindings
|
|
53
|
-
|
|
54
|
-
The Bindings are heavily inspired by polymer
|
|
55
|
-
|
|
56
|
-
use [[expression]] for one way bindings
|
|
57
|
-
|
|
58
|
-
use {{this.property::change;paste}} for two way bindings which listens to events 'change 'and 'paste'
|
|
59
|
-
|
|
60
|
-
css:cssPropertyName="[[expression]]" to bind to a css property
|
|
61
|
-
|
|
62
|
-
class:className="[[boolExpression]]" to set/remove a css class
|
|
63
|
-
|
|
64
|
-
$attribute="[[expression]]" to bind to Attributes instead of properties.
|
|
65
|
-
|
|
66
|
-
.property="[[expression]]" to bind to Proertys without using the attribute name (to disable side effects).
|
|
67
|
-
|
|
68
|
-
sub <template></template> elements are not bound, so elements like <iron-list> of polymer also work
|
|
69
|
-
|
|
70
|
-
use repeat:nameOfItem=[[enumerableExpression]] on a Template Element to repeat it for every instance of the enumerable.
|
|
71
|
-
You could also use 'index' variable in the repeat binding for the current number. The attribute "repeat-index" could be used to change the name of the index variable.
|
|
72
|
-
on a repeat you could use the repeat-changed-item-callback="[[this.itemCreated(item, nodes)]]
|
|
73
|
-
!!caution!! => the repeat binding is only a preview at the moment, it leaks memory and redraws all items on array change
|
|
74
|
-
|
|
75
|
-
### Binding extensions
|
|
76
|
-
|
|
77
|
-
- Null/Undefined Extension {{? }} - If you start a binding with a questionmark (like this: {{?), the value of the binding is assigned as an empty string when null or undefined.
|
|
78
|
-
- Invert extension {{! }} - If you use "!" on the start of a Binding, the bool value is inverted, and also asigned inverted (not yet developed, will do if needed)
|
|
79
|
-
|
|
80
|
-
## Developing
|
|
81
|
-
|
|
82
|
-
* Install dependencies
|
|
83
|
-
```
|
|
84
|
-
$ npm install
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
* Compile Typescript after doing changes
|
|
88
|
-
```
|
|
89
|
-
$ npm run build
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Dependencies
|
|
93
|
-
|
|
94
|
-
none on chrome.
|
|
95
|
-
|
|
96
|
-
construct-style-sheets-polyfill on safari and firefox
|
|
97
|
-
|
|
98
|
-
## Using
|
|
99
|
-
|
|
100
|
-
Simple Example Class in Typescript
|
|
101
|
-
|
|
102
|
-
```
|
|
103
|
-
import { BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
|
|
104
|
-
|
|
105
|
-
@customElement('test-element')
|
|
106
|
-
export class TestElement extends BaseCustomWebComponentConstructorAppend {
|
|
107
|
-
|
|
108
|
-
static readonly style = css`
|
|
109
|
-
`;
|
|
110
|
-
|
|
111
|
-
static readonly template = html`
|
|
112
|
-
<div id='root'>
|
|
113
|
-
<div css:background="[[this.bprp ? 'red' : 'green']]">[[this.info]]</div>
|
|
114
|
-
<template repeat:item="[[this.list]]">
|
|
115
|
-
<div>[[item]]</div><br>
|
|
116
|
-
</template>
|
|
117
|
-
</div>
|
|
118
|
-
<button @click="buttonClick">click me</button>
|
|
119
|
-
`;
|
|
120
|
-
|
|
121
|
-
@property()
|
|
122
|
-
list = ['aa', 'bb'];
|
|
123
|
-
@property()
|
|
124
|
-
info = 'hallo';
|
|
125
|
-
@property()
|
|
126
|
-
bprp = false;
|
|
127
|
-
|
|
128
|
-
constructor() {
|
|
129
|
-
super();
|
|
130
|
-
this._restoreCachedInititalValues();
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
async ready() {
|
|
134
|
-
this._root = this._getDomElement<HTMLDivElement>('root');
|
|
135
|
-
this._parseAttributesToProperties();
|
|
136
|
-
this._bindingsParse();
|
|
137
|
-
this._assignEvents();
|
|
138
|
-
|
|
139
|
-
setTimeout(() => {
|
|
140
|
-
this.info = 'wie gehts?';
|
|
141
|
-
brpp = true;
|
|
142
|
-
}, 5000)
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
buttonClick() {
|
|
146
|
-
alert('hallo');
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
## Online Sample
|
|
153
|
-
|
|
154
|
-
https://codesandbox.io/p/sandbox/wkopk
|
|
155
|
-
|
|
156
|
-
or here a repo
|
|
157
|
-
|
|
158
|
-
https://github.com/node-projects/base-custom-webcomponent-sample
|
|
159
|
-
|
|
160
|
-
## ready method
|
|
161
|
-
The ready method will be called, when the component is connected the first time. Be aware, that there is no information about the child components. They could be still not ready. When you need to interact with child componets, then use the method _waitForChildrenReady.
|
|
162
|
-
|
|
163
|
-
```
|
|
164
|
-
public async ready(): Promise<void> {
|
|
165
|
-
await this._waitForChildrenReady();
|
|
166
|
-
// now all children are ready!
|
|
167
|
-
|
|
168
|
-
const myChild = this._getDomElement<CustomAutoCompleteBoxComponent>('XYZ');
|
|
169
|
-
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
## VS Code Snippet
|
|
173
|
-
|
|
174
|
-

|
|
175
|
-
|
|
176
|
-
### How to use?
|
|
177
|
-
|
|
178
|
-
* Open VS Code
|
|
179
|
-
* Press "STRG" + "Shift" + "P"
|
|
180
|
-
* Type "Snippets"
|
|
181
|
-
|
|
182
|
-

|
|
183
|
-
|
|
184
|
-
* Select Configure User Snippets
|
|
185
|
-
* Select New Global Snippet File ...
|
|
186
|
-
* Type in name: basecustomwebcomponent
|
|
187
|
-
* Insert follwing code:
|
|
188
|
-
|
|
189
|
-
```
|
|
190
|
-
{
|
|
191
|
-
"basecustomwebcomponent": {
|
|
192
|
-
"prefix": "bcwc",
|
|
193
|
-
"body": [
|
|
194
|
-
"import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';\n",
|
|
195
|
-
"export class ${1:${TM_FILENAME_BASE}} extends BaseCustomWebComponentConstructorAppend {\n",
|
|
196
|
-
"\tstatic readonly template = html`",
|
|
197
|
-
"\t\t",
|
|
198
|
-
"\t`;\n",
|
|
199
|
-
"\tstatic readonly style = css`",
|
|
200
|
-
"\t\t:host {",
|
|
201
|
-
"\t\t\tdisplay: block;",
|
|
202
|
-
"\t\t\tbox-sizing: border-box;",
|
|
203
|
-
"\t\t}",
|
|
204
|
-
"\t\t:host([hidden]) {",
|
|
205
|
-
"\t\t\tdisplay: none;",
|
|
206
|
-
"\t\t}",
|
|
207
|
-
"\t`;\n",
|
|
208
|
-
"\tstatic readonly is = '${1/(^[A-Z])|(?<=[a-z0-9A-Z])([A-Z])/${1:/downcase}${2:+-}${2:/downcase}/g}';\n",
|
|
209
|
-
"\tstatic readonly properties = {",
|
|
210
|
-
"\t\t\t",
|
|
211
|
-
"\t}\n",
|
|
212
|
-
"\tconstructor() {",
|
|
213
|
-
"\t\tsuper();",
|
|
214
|
-
"\t\tsuper._restoreCachedInititalValues();",
|
|
215
|
-
"\t}\n",
|
|
216
|
-
"\tready() {",
|
|
217
|
-
"\t\tthis._parseAttributesToProperties();",
|
|
218
|
-
"\t\tthis._assignEvents();",
|
|
219
|
-
"\t}",
|
|
220
|
-
"}",
|
|
221
|
-
"customElements.define(${1}.is, ${1})",
|
|
222
|
-
],
|
|
223
|
-
"description": "Sample template for the BaseCustomWebComponent"
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
```
|
|
227
|
-
* Save and type "bcwc" and press tap inside an empty file
|
|
228
|
-
* Press tap after you entered the classname
|
|
229
|
-
|
|
230
|
-
## Articles
|
|
231
|
-
|
|
232
|
-
https://medium.com/@jochenkhner/a-idea-for-a-base-class-for-web-components-in-2020-b68e0fdf7bca
|
|
233
|
-
|
|
234
|
-
## Size
|
|
235
|
-
|
|
236
|
-
The Size of the Base Component is around 25k as ts/js code, 10k minimized and 2.2k brotly compressed.
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
export declare const html: (strings: TemplateStringsArray, ...values: any[]) => HTMLTemplateElement;
|
|
2
|
-
export declare const htmlFromString: (value: string) => HTMLTemplateElement;
|
|
3
|
-
export declare const css: (strings: TemplateStringsArray, ...values: any[]) => CSSStyleSheet;
|
|
4
|
-
export declare const cssFromString: (value: string | CSSStyleSheet | any) => CSSStyleSheet;
|
|
5
|
-
type propertySimpleDefinition = Object | BooleanConstructor | DateConstructor | NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor;
|
|
6
|
-
type propertyComplexDefinition = {
|
|
7
|
-
type: propertySimpleDefinition;
|
|
8
|
-
};
|
|
9
|
-
type propertyDefinition = propertyComplexDefinition | propertySimpleDefinition;
|
|
10
|
-
export declare function property(par?: propertyDefinition): (target: Object, propertyKey: PropertyKey) => void;
|
|
11
|
-
export declare function customElement(tagname: string): (class_: new (...par: any[]) => BaseCustomWebComponentNoAttachedTemplate) => void;
|
|
12
|
-
type repeatBindingItem = {
|
|
13
|
-
name: string;
|
|
14
|
-
item: any;
|
|
15
|
-
};
|
|
16
|
-
export declare class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
|
|
17
|
-
static readonly style: CSSStyleSheet | Promise<CSSStyleSheet> | CSSStyleSheet[];
|
|
18
|
-
static readonly template: HTMLTemplateElement;
|
|
19
|
-
protected _bindings: [binding: ((firstRun?: boolean, onlyWhenChanged?: boolean) => void), name: string][];
|
|
20
|
-
protected _repeatBindings: WeakMap<Node, [binding: ((firstRun?: boolean) => void), name: string][]>;
|
|
21
|
-
protected _rootDocumentFragment: DocumentFragment;
|
|
22
|
-
protected _initialPropertyCache: Map<string, any>;
|
|
23
|
-
protected _noWarningOnBindingErrors: any;
|
|
24
|
-
protected _getDomElement<T extends Element>(id: string): T;
|
|
25
|
-
protected _getDomElements<T extends Element>(selector: string): T[];
|
|
26
|
-
protected _assignEvents(node?: Node): void;
|
|
27
|
-
/**
|
|
28
|
-
* Parses Polymer like Bindings
|
|
29
|
-
*
|
|
30
|
-
* use [[expression]] for one way bindings
|
|
31
|
-
*
|
|
32
|
-
* use {{this.property::change;paste}} for two way wich binds to events 'change 'and 'paste'
|
|
33
|
-
*
|
|
34
|
-
* use @eventname="eventHandler" to bind a handler to a event
|
|
35
|
-
* or @eventname="[[this.eventHandler(par1, par2, ..)]]" for complexer event logic
|
|
36
|
-
* use @touch:contextmenu... for a context menu that also works with long press on touch
|
|
37
|
-
*
|
|
38
|
-
* use css:cssPropertyName=[[expression]] to bind to a css property
|
|
39
|
-
*
|
|
40
|
-
* use class:className=[[boolExpression]] to set/remove a css class
|
|
41
|
-
*
|
|
42
|
-
* sub <template></template> elements are not bound, so elemnts like <iron-list> of polymer also work
|
|
43
|
-
*
|
|
44
|
-
* use repeat:nameOfItem=[[enumerableExpression]] on a Template Element to repeate it for every instance of the enumarable
|
|
45
|
-
* ==> this could also be nested
|
|
46
|
-
*
|
|
47
|
-
*/
|
|
48
|
-
protected _bindingsParse(node?: Node, removeAttributes?: boolean, host?: any, context?: any): void;
|
|
49
|
-
private _bindingsInternalParse;
|
|
50
|
-
private _textFragmentBinding;
|
|
51
|
-
private _bindingRunEval;
|
|
52
|
-
private _bindingRunEvalInt;
|
|
53
|
-
private _bindingRepeat;
|
|
54
|
-
private _bindingSetNodeValue;
|
|
55
|
-
private _bindingSetElementCssValue;
|
|
56
|
-
private _bindingSetElementClass;
|
|
57
|
-
protected _bindingsRefresh(property?: string, onlyWhenChanged?: boolean): void;
|
|
58
|
-
protected _bindingsSetValue(obj: any, path: string, value: any, context: any, repeatBindingItems?: repeatBindingItem[]): void;
|
|
59
|
-
private static _propertiesDictionary;
|
|
60
|
-
protected _parseAttributesToProperties(noBindings?: boolean): void;
|
|
61
|
-
protected _waitForChildrenReady(): Promise<void>;
|
|
62
|
-
protected _restoreCachedInititalValues(): void;
|
|
63
|
-
protected _restoreCachedInititalValue(name: string): void;
|
|
64
|
-
static instanceCreatedCallback: (i: BaseCustomWebComponentNoAttachedTemplate) => void;
|
|
65
|
-
_hmrCallback(newClass: BaseCustomWebComponentNoAttachedTemplate): void;
|
|
66
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
67
|
-
}
|
|
68
|
-
export declare class BaseCustomWebComponentLazyAppend extends BaseCustomWebComponentNoAttachedTemplate {
|
|
69
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
70
|
-
}
|
|
71
|
-
export declare class BaseCustomWebComponentConstructorAppend extends BaseCustomWebComponentNoAttachedTemplate {
|
|
72
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
73
|
-
}
|
|
74
|
-
export declare class BaseCustomWebComponentLazyAppendConnectedReady extends BaseCustomWebComponentNoAttachedTemplate {
|
|
75
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
76
|
-
protected _isReady: boolean;
|
|
77
|
-
connectedCallback(): void;
|
|
78
|
-
}
|
|
79
|
-
export declare class BaseCustomWebComponentConnectedReady extends BaseCustomWebComponentNoAttachedTemplate {
|
|
80
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
81
|
-
protected _isReady: boolean;
|
|
82
|
-
connectedCallback(): void;
|
|
83
|
-
}
|
|
84
|
-
export declare class BaseCustomWebComponentConstructorAppendLazyReady extends BaseCustomWebComponentNoAttachedTemplate {
|
|
85
|
-
constructor(template?: HTMLTemplateElement, style?: CSSStyleSheet);
|
|
86
|
-
}
|
|
87
|
-
export {};
|