enigmatic 0.9.18 → 0.10.0

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.
Files changed (51) hide show
  1. package/components.mjs +17 -0
  2. package/enigmatic.css +132 -197
  3. package/enigmatic.js +152 -115
  4. package/package.json +5 -12
  5. package/.vscode/launch.json +0 -15
  6. package/elements/alert-box/alert-box.js +0 -19
  7. package/elements/alert-box/index.html +0 -6
  8. package/elements/block-maker/block-maker.js +0 -15
  9. package/elements/block-maker/index.html +0 -7
  10. package/elements/chart-progress-bar/chart-progress-bar.js +0 -9
  11. package/elements/chart-progress-bar/index.html +0 -5
  12. package/elements/chart-radial-progress/chart-radial-progress.css +0 -39
  13. package/elements/chart-radial-progress/chart-radial-progress.js +0 -13
  14. package/elements/chart-radial-progress/index.html +0 -13
  15. package/elements/chart-statistic/chart-statistic.js +0 -34
  16. package/elements/chart-statistic/index.html +0 -13
  17. package/elements/data-grid/data-grid.js +0 -39
  18. package/elements/data-grid/index.html +0 -13
  19. package/elements/data-source/data-source.js +0 -36
  20. package/elements/data-source/index.html +0 -10
  21. package/elements/data-stream/data-stream.js +0 -28
  22. package/elements/data-stream/index.html +0 -7
  23. package/elements/font-awesome/font-awesome.js +0 -11
  24. package/elements/font-awesome/index.html +0 -7
  25. package/elements/for-list/for-list.js +0 -25
  26. package/elements/for-list/index.html +0 -11
  27. package/elements/hello-world/hello-world.js +0 -16
  28. package/elements/hello-world/index.html +0 -3
  29. package/elements/index.mjs +0 -20
  30. package/elements/map-embed/index.html +0 -4
  31. package/elements/map-embed/map-embed.js +0 -9
  32. package/elements/monaco-editor/index.html +0 -11
  33. package/elements/monaco-editor/monaco-editor.mjs +0 -33
  34. package/elements/online-indicator/index.html +0 -15
  35. package/elements/online-indicator/online-indicator.js +0 -20
  36. package/elements/side-menu/index.html +0 -10
  37. package/elements/side-menu/side-menu.js +0 -16
  38. package/elements/tailwind-css/index.html +0 -11
  39. package/elements/tailwind-css/tailwind-css.js +0 -11
  40. package/elements/test-runner/index.html +0 -176
  41. package/elements/test-runner/test-runner.js +0 -59
  42. package/elements/time-ago/index.html +0 -11
  43. package/elements/time-ago/time-ago.js +0 -22
  44. package/elements/toggle-switch/index.html +0 -8
  45. package/elements/toggle-switch/toggle-switch.js +0 -86
  46. package/elements/view-panel/index.html +0 -18
  47. package/elements/view-panel/view-panel.js +0 -22
  48. package/elements/you-tube/index.html +0 -7
  49. package/elements/you-tube/you-tube.js +0 -9
  50. package/index.html +0 -16
  51. package/readme.md +0 -99
package/elements/you-tube/you-tube.js DELETED
@@ -1,9 +0,0 @@
1
- class YouTube extends EnigmaticElement {
2
- connectedCallback() {
3
- this.uid = this.getAttribute('uid') || 'Fku7hi5kI-c'
4
- this.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${this.uid}"
5
- title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
6
- encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
7
- }
8
- }
9
- customElements.define('you-tube', YouTube)
package/index.html DELETED
@@ -1,16 +0,0 @@
1
- <script src='enigmatic.js'></script>
2
- <link rel='stylesheet' href='enigmatic.css'>
3
-
4
- <body style='--rows:1fr 5fr; --cols:1fr 1fr'>
5
- <div class='bg-red' data='mykey'></div>
6
- <div data='mykey2.k'></div>
7
- <div>three</div>
8
- </body>
9
-
10
- <script>
11
- window.main = () => {
12
- body.child().innerHTML = 'some text'
13
- data.mykey = 'somevalue'
14
- data.mykey2 = {k: 'v'}
15
- }
16
- </script>
package/readme.md DELETED
@@ -1,99 +0,0 @@
1
- <<<<<<< HEAD
2
- # enigmatic
3
- ![version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=0.8.5&x2=0)
4
- ![size](http://img.badgesize.io/digplan/enigmatic/master/main.js)
5
-
6
- Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
7
- It aspires to enable faster web app peformance, better reliabilty, and faster development process.
8
-
9
- Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
10
- - No special tooling, compilation or preprocessing, or new languages to learn
11
- - Minimal JS and CSS core, includes basic components and two way data binding
12
-
13
- ## Quick Start
14
- Just create an HTML page
15
- ````
16
- <script src='//unpkg.com/enigmatic'></script>
17
- <link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
18
- ````
19
-
20
- ## Enigmatic also includes some helpers
21
- ````
22
- window.$ -- $([body])[0] // Query Selector All
23
- window.load -- ('mycontrol.js') // Load JS or CSS
24
- Element.css -- e.css('color:red') // Add css to an element
25
- Element.child -- body.child('span') // Add a child element
26
-
27
- ````
28
-
29
- ## window.data
30
- window.data is a single data object, that holds all the data for the app. It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
31
-
32
- Controls interact with the data object to send and receive data, using a data attribute and .set() method.
33
- ````
34
- <!-- Just use the *data* attribute
35
- <hellodata data='mykey'></hellodata>
36
-
37
- window.data.set('mykey', 'Hello world!')
38
- ````
39
-
40
- One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
41
- In this example, the window.data object and control's data attribute take care of the binding.
42
- ````
43
- <button onclick='data.count++'>Click me</button>
44
- <counter data='count'></counter>
45
-
46
- data.count = 0
47
- const counter = e =>
48
- e.innerHTML = 'Ready'
49
- ````
50
- =======
51
- # enigmatic
52
- [![npm version](https://badge.fury.io/js/enigmatic.svg)](https://badge.fury.io/js/enigmatic)
53
-
54
-
55
- Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
56
- It aspires to enable faster web app peformance, better reliabilty, and faster development process.
57
-
58
- Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
59
- - No special tooling, compilation or preprocessing, or new languages to learn
60
- - Minimal JS and CSS core, includes basic components and two way data binding
61
-
62
- ## Quick Start
63
- Just create an HTML page
64
- ````
65
- <script src='//unpkg.com/enigmatic'></script>
66
- <link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
67
- ````
68
-
69
- ## Enigmatic also includes some helpers
70
- ````
71
- window.$ -- $([body])[0] // Query Selector All
72
- window.load -- ('mycontrol.js') // Load JS or CSS
73
- Element.css -- e.css('color:red') // Add css to an element
74
- Element.child -- body.child('span') // Add a child element
75
-
76
- ````
77
-
78
- ## window.data
79
- window.data is a single data object, that holds all the data for the app. It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
80
-
81
- Controls interact with the data object to send and receive data, using a data attribute and .set() method.
82
- ````
83
- <!-- Just use the *data* attribute
84
- <hellodata data='mykey'></hellodata>
85
-
86
- window.data.set('mykey', 'Hello world!')
87
- ````
88
-
89
- One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
90
- In this example, the window.data object and control's data attribute take care of the binding.
91
- ````
92
- <button onclick='data.count++'>Click me</button>
93
- <counter data='count'></counter>
94
-
95
- data.count = 0
96
- const counter = e =>
97
- e.innerHTML = 'Ready'
98
- ````
99
- >>>>>>> 4f836882c656008703aad8afc30997772829f574