kempo-ui 0.0.7 → 0.0.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/src/components/Icon.js +1 -1
- package/dist/src/components/ShadowComponent.js +1 -1
- package/dist/src/components/Tree.js +37 -0
- package/docs/components/accordion.html +3 -9
- package/docs/components/card.html +3 -9
- package/docs/components/collapsible.html +3 -9
- package/docs/components/content-slider.html +4 -9
- package/docs/components/dialog.html +157 -72
- package/docs/components/focus-capture.html +3 -7
- package/docs/components/hybrid-component.html +3 -7
- package/docs/components/icon.html +3 -8
- package/docs/components/import.html +1 -6
- package/docs/components/init.js +7 -0
- package/docs/components/light-component.html +3 -7
- package/docs/components/persistant-collapsible.html +1 -8
- package/docs/components/photo-viewer.html +1 -8
- package/docs/components/resize.html +3 -9
- package/docs/components/shadow-component.html +3 -7
- package/docs/components/show-more.html +3 -9
- package/docs/components/side-menu.html +1 -6
- package/docs/components/sortable.html +3 -7
- package/docs/components/split.html +3 -7
- package/docs/components/table.html +3 -7
- package/docs/components/tableControls.html +3 -7
- package/docs/components/tableCustomFields.html +3 -7
- package/docs/components/tableFetchRecords.html +3 -7
- package/docs/components/tableFieldSortHide.html +3 -7
- package/docs/components/tablePagination.html +3 -7
- package/docs/components/tableRecordEditing.html +3 -7
- package/docs/components/tableRecordFiltering.html +3 -7
- package/docs/components/tableRecordHiding.html +3 -7
- package/docs/components/tableRecordSearching.html +3 -7
- package/docs/components/tableRecordSelection.html +3 -7
- package/docs/components/tableRowControls.html +3 -7
- package/docs/components/tableSorting.html +3 -7
- package/docs/components/tabs.html +3 -9
- package/docs/components/tags.html +3 -9
- package/docs/components/theme-switcher.html +3 -9
- package/docs/components/timestamp.html +3 -9
- package/docs/components/toast.html +80 -42
- package/docs/components/toggle.html +3 -9
- package/docs/components/tree.html +108 -21
- package/docs/index.html +10 -6
- package/docs/init.js +7 -0
- package/docs/src/components/Icon.js +1 -1
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/Tree.js +37 -0
- package/docs/utils/debounce.html +1 -6
- package/docs/utils/drag.html +1 -6
- package/docs/utils/formatTimestamp.html +1 -6
- package/docs/utils/init.js +7 -0
- package/docs/utils/propConverters.html +1 -6
- package/docs/utils/toTitleCase.html +1 -6
- package/docs/utils/watchWindowSize.html +1 -6
- package/package.json +1 -1
- package/scripts/build.js +12 -2
- package/src/components/Card.js +2 -5
- package/src/components/Dialog.js +48 -34
- package/src/components/Icon.js +25 -18
- package/src/components/Tree.js +64 -72
|
@@ -5,15 +5,9 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Toast - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../src/kempo-hljs.css"
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
import Icon from '../src/components/Icon.js';
|
|
12
|
-
import ShadowComponent from '../src/components/ShadowComponent.js';
|
|
13
|
-
Import.replacements.root = '../';
|
|
14
|
-
Icon.pathToIcons = ['../icons'];
|
|
15
|
-
ShadowComponent.stylesheetPath = '../kempo.min.css';
|
|
16
|
-
</script>
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script type="module" src="./init.js"></script>
|
|
17
11
|
</head>
|
|
18
12
|
<body>
|
|
19
13
|
<k-import src="../nav.inc.html"></k-import>
|
|
@@ -29,11 +23,13 @@
|
|
|
29
23
|
<a href="#positions">Different Positions</a><br />
|
|
30
24
|
<a href="#timeouts">Timeouts</a><br />
|
|
31
25
|
<a href="#actionAndClose">Action and Close Buttons</a><br />
|
|
26
|
+
<a href="#successWarningError">Success, Warning and Error</a><br />
|
|
32
27
|
|
|
33
28
|
<h6 class="mt">JavaScript Reference</h6>
|
|
34
29
|
<a href="#constructor">Constructor</a><br />
|
|
35
30
|
<a href="#staticMethods">Static Methods</a><br />
|
|
36
31
|
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#attributes">Attributes</a><br />
|
|
37
33
|
<a href="#properties">Properties</a><br />
|
|
38
34
|
<a href="#methods">Methods</a><br />
|
|
39
35
|
<a href="#events">Events</a><br />
|
|
@@ -47,12 +43,12 @@
|
|
|
47
43
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
48
44
|
<div class="row -mx">
|
|
49
45
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
50
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>Open Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'
|
|
46
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>Open Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>);<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
51
47
|
</div>
|
|
52
48
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
53
49
|
<button id="example1" class="mb">Open Toast</button>
|
|
54
50
|
<script type="module">
|
|
55
|
-
import Toast from '
|
|
51
|
+
import Toast from '../src/components/Toast.js';
|
|
56
52
|
document.getElementById('example1').addEventListener('click', () => {
|
|
57
53
|
Toast.create("Hello World");
|
|
58
54
|
});
|
|
@@ -65,7 +61,7 @@
|
|
|
65
61
|
<p>Toasts can be positioned in different corners of the screen using the <code>position</code> property.</p>
|
|
66
62
|
<div class="row -mx">
|
|
67
63
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
68
|
-
|
|
64
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topleft"</span>></span>Top Left<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topcenter"</span>></span>Top Center<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-topright"</span>></span>Top Right<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomleft"</span>></span>Bottom Left<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomcenter"</span>></span>Bottom Center<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2-bottomright"</span>></span>Bottom Right<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topleft'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from top left!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'top left'</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topcenter'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from top center!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'top center'</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-topright'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from top right!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'top right'</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomleft'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from bottom left!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom left'</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomcenter'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from bottom center!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom center'</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example2-bottomright'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello from bottom right!"</span>, {<br /> <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom right'</span><br /> });<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
69
65
|
</div>
|
|
70
66
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
71
67
|
<button id="example2-topleft" class="mb">Top Left</button>
|
|
@@ -75,35 +71,35 @@
|
|
|
75
71
|
<button id="example2-bottomcenter" class="mb">Bottom Center</button>
|
|
76
72
|
<button id="example2-bottomright" class="mb">Bottom Right</button>
|
|
77
73
|
<script type="module">
|
|
78
|
-
import Toast from '
|
|
74
|
+
import Toast from '../src/components/Toast.js';
|
|
79
75
|
document.getElementById('example2-topleft').addEventListener('click', () => {
|
|
80
|
-
Toast.create("Hello
|
|
81
|
-
position:
|
|
76
|
+
Toast.create("Hello from top left!", {
|
|
77
|
+
position: 'top left'
|
|
82
78
|
});
|
|
83
79
|
});
|
|
84
80
|
document.getElementById('example2-topcenter').addEventListener('click', () => {
|
|
85
|
-
Toast.create("Hello
|
|
86
|
-
position:
|
|
81
|
+
Toast.create("Hello from top center!", {
|
|
82
|
+
position: 'top center'
|
|
87
83
|
});
|
|
88
84
|
});
|
|
89
85
|
document.getElementById('example2-topright').addEventListener('click', () => {
|
|
90
|
-
Toast.create("Hello
|
|
91
|
-
position:
|
|
86
|
+
Toast.create("Hello from top right!", {
|
|
87
|
+
position: 'top right'
|
|
92
88
|
});
|
|
93
89
|
});
|
|
94
90
|
document.getElementById('example2-bottomleft').addEventListener('click', () => {
|
|
95
|
-
Toast.create("Hello
|
|
96
|
-
position:
|
|
91
|
+
Toast.create("Hello from bottom left!", {
|
|
92
|
+
position: 'bottom left'
|
|
97
93
|
});
|
|
98
94
|
});
|
|
99
95
|
document.getElementById('example2-bottomcenter').addEventListener('click', () => {
|
|
100
|
-
Toast.create("Hello
|
|
101
|
-
position:
|
|
96
|
+
Toast.create("Hello from bottom center!", {
|
|
97
|
+
position: 'bottom center'
|
|
102
98
|
});
|
|
103
99
|
});
|
|
104
100
|
document.getElementById('example2-bottomright').addEventListener('click', () => {
|
|
105
|
-
Toast.create("Hello
|
|
106
|
-
position:
|
|
101
|
+
Toast.create("Hello from bottom right!", {
|
|
102
|
+
position: 'bottom right'
|
|
107
103
|
});
|
|
108
104
|
});
|
|
109
105
|
</script>
|
|
@@ -114,14 +110,14 @@
|
|
|
114
110
|
<p>Toasts can automatically close after a specified timeout (in milliseconds). The default timeout when using <code>Toast.create</code> is <code>5000</code> (ms), or 5 seconds.</p>
|
|
115
111
|
<div class="row -mx">
|
|
116
112
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
117
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>></span>Open 1 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-3"</span>></span>Open 3 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-10"</span>></span>Open 10 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'
|
|
113
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>></span>Open 1 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-3"</span>></span>Open 3 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-10"</span>></span>Open 10 Second Timeout Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"I will timeout in 1 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-3'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"I will timeout in 3 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-10'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"I will timeout in 10 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span><br /> });<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
118
114
|
</div>
|
|
119
115
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
120
116
|
<button id="example3-1" class="mb">Open 1 Second Timeout Toast</button>
|
|
121
117
|
<button id="example3-3" class="mb">Open 3 Second Timeout Toast</button>
|
|
122
118
|
<button id="example3-10" class="mb">Open 10 Second Timeout Toast</button>
|
|
123
119
|
<script type="module">
|
|
124
|
-
import Toast from '
|
|
120
|
+
import Toast from '../src/components/Toast.js';
|
|
125
121
|
document.getElementById('example3-1').addEventListener('click', () => {
|
|
126
122
|
Toast.create("I will timeout in 1 second", {
|
|
127
123
|
timeout: 1000
|
|
@@ -146,14 +142,14 @@
|
|
|
146
142
|
<p>Toasts can have action and close buttons that trigger callbacks when clicked.</p>
|
|
147
143
|
<div class="row -mx">
|
|
148
144
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
149
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>></span>Open Toast with Action<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-close"</span>></span>Open Toast with Close Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action-close"</span>></span>Open Toast with Action and Close Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'
|
|
145
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>></span>Open Toast with Action<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-close"</span>></span>Open Toast with Close Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action-close"</span>></span>Open Toast with Action and Close Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'<k-icon name="close"></div>'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// return false to prevent closing</span><br /> },<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'<k-icon name="close"></div>'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
150
146
|
</div>
|
|
151
147
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
152
148
|
<button id="example4-action" class="mb">Open Toast with Action</button>
|
|
153
149
|
<button id="example4-close" class="mb">Open Toast with Close Button</button>
|
|
154
150
|
<button id="example4-action-close" class="mb">Open Toast with Action and Close Button</button>
|
|
155
151
|
<script type="module">
|
|
156
|
-
import Toast from '
|
|
152
|
+
import Toast from '../src/components/Toast.js';
|
|
157
153
|
document.getElementById('example4-action').addEventListener('click', () => {
|
|
158
154
|
Toast.create("Hello World", {
|
|
159
155
|
timeout: 0,
|
|
@@ -194,14 +190,14 @@
|
|
|
194
190
|
<p>Toasts can be created as a success, warning or error message.</p>
|
|
195
191
|
<div class="row -mx">
|
|
196
192
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
197
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>></span>Success Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-warning"</span>></span>Warning Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-error"</span>></span>Error Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'
|
|
193
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>></span>Success Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-warning"</span>></span>Warning Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-error"</span>></span>Error Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-success'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.success(<span class="hljs-string">"It Worked!"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-warning'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.warning(<span class="hljs-string">"Be Careful"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-error'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.error(<span class="hljs-string">"That's a very bad idea"</span>);<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
198
194
|
</div>
|
|
199
195
|
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
200
196
|
<button id="example5-success" class="mb">Success Toast</button>
|
|
201
197
|
<button id="example5-warning" class="mb">Warning Toast</button>
|
|
202
198
|
<button id="example5-error" class="mb">Error Toast</button>
|
|
203
199
|
<script type="module">
|
|
204
|
-
import Toast from '
|
|
200
|
+
import Toast from '../src/components/Toast.js';
|
|
205
201
|
document.getElementById('example5-success').addEventListener('click', () => {
|
|
206
202
|
Toast.success("It Worked!");
|
|
207
203
|
});
|
|
@@ -219,7 +215,7 @@
|
|
|
219
215
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
220
216
|
|
|
221
217
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
222
|
-
<h6>Extends <a href="./component.html">
|
|
218
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
223
219
|
<h5>
|
|
224
220
|
<code>new Toast()</code><br />
|
|
225
221
|
<code>new Toast(<i>object</i> options)</code>
|
|
@@ -262,29 +258,72 @@
|
|
|
262
258
|
|
|
263
259
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
264
260
|
<ul>
|
|
265
|
-
<li
|
|
266
|
-
<li><a href="./icon.html">Icon</a
|
|
261
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
262
|
+
<li><a href="./icon.html">Icon</a> (for success, warning, and error toasts)</li>
|
|
267
263
|
</ul>
|
|
268
264
|
|
|
269
|
-
<h3 id="
|
|
270
|
-
<h5><code>
|
|
271
|
-
<p>HTML content for the action button
|
|
265
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
266
|
+
<h5><code>action-html<i>: string</i></code></h5>
|
|
267
|
+
<p>HTML content for the action button.</p>
|
|
272
268
|
|
|
273
|
-
<h5><code>
|
|
274
|
-
<p>HTML content for the close button
|
|
269
|
+
<h5><code>close-html<i>: string</i></code></h5>
|
|
270
|
+
<p>HTML content for the close button.</p>
|
|
275
271
|
|
|
276
272
|
<h5><code>timeout<i>: number</i></code></h5>
|
|
277
|
-
<p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close)
|
|
273
|
+
<p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</p>
|
|
278
274
|
|
|
279
275
|
<h5><code>opened<i>: boolean</i></code></h5>
|
|
280
|
-
<p>Whether the toast is currently open. Default is false
|
|
276
|
+
<p>Whether the toast is currently open. Default is false.</p>
|
|
277
|
+
|
|
278
|
+
<h5><code>has-action<i>: boolean</i></code></h5>
|
|
279
|
+
<p>Whether the toast has an action button. Automatically set based on slotted content.</p>
|
|
280
|
+
|
|
281
|
+
<h5><code>has-close<i>: boolean</i></code></h5>
|
|
282
|
+
<p>Whether the toast has a close button. Automatically set based on slotted content.</p>
|
|
283
|
+
|
|
284
|
+
<h5><code>has-icon<i>: boolean</i></code></h5>
|
|
285
|
+
<p>Whether the toast has an icon. Automatically set based on slotted content.</p>
|
|
281
286
|
|
|
287
|
+
<h5><code>position<i>: string</i></code></h5>
|
|
288
|
+
<p>Position of the toast on the screen.</p>
|
|
289
|
+
|
|
290
|
+
<h5><code>animating<i>: string</i></code></h5>
|
|
291
|
+
<p>Current animation state ('in', 'out', or empty string).</p>
|
|
292
|
+
|
|
293
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
282
294
|
<h5><code>actionCallback<i>: function</i></code></h5>
|
|
283
295
|
<p>Function to call when the action button is clicked.</p>
|
|
284
296
|
|
|
285
297
|
<h5><code>closeCallback<i>: function</i></code></h5>
|
|
286
298
|
<p>Function to call when the toast is closed.</p>
|
|
287
299
|
|
|
300
|
+
<h5><code>actionHtml<i>: string</i></code></h5>
|
|
301
|
+
<p>HTML content for the action button.</p>
|
|
302
|
+
|
|
303
|
+
<h5><code>closeHtml<i>: string</i></code></h5>
|
|
304
|
+
<p>HTML content for the close button.</p>
|
|
305
|
+
|
|
306
|
+
<h5><code>timeout<i>: number</i></code></h5>
|
|
307
|
+
<p>Time in milliseconds before the toast automatically closes.</p>
|
|
308
|
+
|
|
309
|
+
<h5><code>opened<i>: boolean</i></code></h5>
|
|
310
|
+
<p>Whether the toast is currently open.</p>
|
|
311
|
+
|
|
312
|
+
<h5><code>hasAction<i>: boolean</i></code></h5>
|
|
313
|
+
<p>Whether the toast has an action button.</p>
|
|
314
|
+
|
|
315
|
+
<h5><code>hasClose<i>: boolean</i></code></h5>
|
|
316
|
+
<p>Whether the toast has a close button.</p>
|
|
317
|
+
|
|
318
|
+
<h5><code>hasIcon<i>: boolean</i></code></h5>
|
|
319
|
+
<p>Whether the toast has an icon.</p>
|
|
320
|
+
|
|
321
|
+
<h5><code>position<i>: string</i></code></h5>
|
|
322
|
+
<p>Position of the toast on the screen.</p>
|
|
323
|
+
|
|
324
|
+
<h5><code>animating<i>: string</i></code></h5>
|
|
325
|
+
<p>Current animation state.</p>
|
|
326
|
+
|
|
288
327
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
289
328
|
<h5><code>open()<i>: void</i></code></h5>
|
|
290
329
|
<p>Opens the toast. If a timeout is specified, this starts the timer for automatic closing.</p>
|
|
@@ -313,7 +352,6 @@
|
|
|
313
352
|
|
|
314
353
|
</main>
|
|
315
354
|
<div style="height:33vh"></div>
|
|
316
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
317
355
|
<script type="module" src="../src/components/Toast.js"></script>
|
|
318
356
|
</body>
|
|
319
357
|
</html>
|
|
@@ -5,15 +5,9 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../src/kempo-hljs.css"
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
import Icon from '../src/components/Icon.js';
|
|
12
|
-
import ShadowComponent from '../src/components/ShadowComponent.js';
|
|
13
|
-
Import.replacements.root = '../';
|
|
14
|
-
Icon.pathToIcons = ['../icons'];
|
|
15
|
-
ShadowComponent.stylesheetPath = '../kempo.min.css';
|
|
16
|
-
</script>
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script type="module" src="./init.js"></script>
|
|
17
11
|
</head>
|
|
18
12
|
<body>
|
|
19
13
|
<k-import src="../nav.inc.html"></k-import>
|
|
@@ -7,12 +7,7 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
|
|
8
8
|
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
-
<script type="module">
|
|
11
|
-
import Import from '../src/components/Import.js';
|
|
12
|
-
import Icon from '../src/components/Icon.js';
|
|
13
|
-
Import.replacements.root = '../';
|
|
14
|
-
Icon.pathToIcons = ['../icons'];
|
|
15
|
-
</script>
|
|
10
|
+
<script type="module" src="./init.js"></script>
|
|
16
11
|
</head>
|
|
17
12
|
<body>
|
|
18
13
|
<k-import src="../nav.inc.html"></k-import>
|
|
@@ -23,6 +18,8 @@
|
|
|
23
18
|
<div class="m mt0 pl">
|
|
24
19
|
<h6>Examples</h6>
|
|
25
20
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
21
|
+
<a href="#depthControl">Controlling Initial Depth</a><br />
|
|
22
|
+
<a href="#customLeafs">Custom Leaf Types</a><br />
|
|
26
23
|
|
|
27
24
|
<h6 class="mt">JavaScript Reference</h6>
|
|
28
25
|
<a href="#constructor">Constructor</a><br />
|
|
@@ -33,18 +30,17 @@
|
|
|
33
30
|
</details>
|
|
34
31
|
|
|
35
32
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
36
|
-
<p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code>
|
|
33
|
+
<p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> property.</p>
|
|
37
34
|
<div class="row -mx mb">
|
|
38
35
|
<div class="col d-span-6 m-span-12 px">
|
|
39
|
-
|
|
36
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,<br /> <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,<br /> <span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],<br /> <span class="hljs-attr">address</span>: {<br /> <span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,<br /> <span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span><br /> }<br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
40
37
|
</div>
|
|
41
38
|
<div class="col d-span-6 m-span-12 px">
|
|
42
39
|
<k-tree id="myTree"></k-tree>
|
|
43
40
|
<script type="module">
|
|
44
41
|
import Tree from '../src/components/Tree.js';
|
|
45
|
-
|
|
46
42
|
const tree = document.getElementById('myTree');
|
|
47
|
-
|
|
43
|
+
tree.data = {
|
|
48
44
|
name: 'John Doe',
|
|
49
45
|
age: 30,
|
|
50
46
|
active: true,
|
|
@@ -54,10 +50,74 @@
|
|
|
54
50
|
city: 'New York'
|
|
55
51
|
}
|
|
56
52
|
};
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
</script>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<h3 id="depthControl"><a href="#depthControl" class="no-link">Controlling Initial Depth</a></h3>
|
|
58
|
+
<p>Use the <code>depth</code> attribute to control how many levels of branches are open by default. This example shows depth set to <code>2</code>:</p>
|
|
59
|
+
<div class="row -mx mb">
|
|
60
|
+
<div class="col d-span-6 m-span-12 px">
|
|
61
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'depthTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,<br /> <span class="hljs-attr">departments</span>: {<br /> <span class="hljs-attr">engineering</span>: {<br /> <span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],<br /> <span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]<br /> },<br /> <span class="hljs-attr">sales</span>: {<br /> <span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]<br /> }<br /> }<br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="col d-span-6 m-span-12 px">
|
|
64
|
+
<k-tree id="depthTree" depth="2"></k-tree>
|
|
65
|
+
<script type="module">
|
|
66
|
+
import Tree from '../src/components/Tree.js';
|
|
67
|
+
const tree = document.getElementById('depthTree');
|
|
68
|
+
tree.data = {
|
|
69
|
+
company: 'Tech Corp',
|
|
70
|
+
departments: {
|
|
71
|
+
engineering: {
|
|
72
|
+
frontend: ['Alice', 'Bob'],
|
|
73
|
+
backend: ['Charlie', 'Diana']
|
|
74
|
+
},
|
|
75
|
+
sales: {
|
|
76
|
+
team: ['Eve', 'Frank']
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
</script>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<h3 id="customLeafs"><a href="#customLeafs" class="no-link">Custom Leaf Types</a></h3>
|
|
85
|
+
<p>You can define custom leaf types to handle specific data types. Create a class that extends <code>TreeLeaf</code>, implement a <code>detect</code> static method that checks for specific properties, and a <code>render</code> method, then register it with <code>Tree.addLeaf()</code>.</p>
|
|
86
|
+
<div class="row -mx mb">
|
|
87
|
+
<div class="col d-span-6 m-span-12 px">
|
|
88
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree, { TreeLeaf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/lit-all.min.js'</span>;<br /><br /> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DateLeaf</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">TreeLeaf</span> </span>{<br /> render(){<br /> <span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-keyword">this</span>.value;<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>📅 </span><span class="hljs-subst">${month}</span><span class="xml">/</span><span class="hljs-subst">${day}</span><span class="xml">/</span><span class="hljs-subst">${year}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span>`</span>;<br /> }<br /><br /> <span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =></span> {<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span> <br /> && value !== <span class="hljs-literal">null</span><br /> && <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value <br /> && <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value <br /> && <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;<br /> };<br /> }<br /><br /> Tree.addLeaf(DateLeaf);<br /><br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,<br /> <span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,<br /> <span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span><br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="col d-span-6 m-span-12 px">
|
|
91
|
+
<k-tree id="customTree"></k-tree>
|
|
92
|
+
<script type="module">
|
|
93
|
+
import Tree, { TreeLeaf } from '../src/components/Tree.js';
|
|
94
|
+
import { html } from '../src/lit-all.min.js';
|
|
95
|
+
|
|
96
|
+
class DateLeaf extends TreeLeaf {
|
|
97
|
+
render(){
|
|
98
|
+
const { month, day, year } = this.value;
|
|
99
|
+
return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
static detect = value => {
|
|
103
|
+
return typeof value === 'object'
|
|
104
|
+
&& value !== null
|
|
105
|
+
&& 'month' in value
|
|
106
|
+
&& 'day' in value
|
|
107
|
+
&& 'year' in value;
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
Tree.addLeaf(DateLeaf);
|
|
112
|
+
|
|
113
|
+
const tree = document.getElementById('customTree');
|
|
114
|
+
tree.data = {
|
|
115
|
+
event: 'Tech Conference 2025',
|
|
116
|
+
startDate: { month: 10, day: 15, year: 2025 },
|
|
117
|
+
endDate: { month: 10, day: 17, year: 2025 },
|
|
118
|
+
location: 'San Francisco',
|
|
119
|
+
attendees: 250
|
|
120
|
+
};
|
|
61
121
|
</script>
|
|
62
122
|
</div>
|
|
63
123
|
</div>
|
|
@@ -65,20 +125,47 @@
|
|
|
65
125
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
66
126
|
|
|
67
127
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
68
|
-
<h6>Extends <a href="./component.html">
|
|
69
|
-
<h5>
|
|
70
|
-
|
|
71
|
-
<code>new Tree(<i>string</i> name)</code>
|
|
72
|
-
</h5>
|
|
73
|
-
|
|
74
|
-
<h4>Parameters</h4>
|
|
128
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
129
|
+
<h5><code>new Tree()</code></h5>
|
|
130
|
+
<p>Creates a new Tree component instance.</p>
|
|
75
131
|
|
|
76
132
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
77
133
|
<ul>
|
|
78
134
|
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
135
|
+
<li>lit-all.min.js</li>
|
|
79
136
|
</ul>
|
|
80
137
|
|
|
81
138
|
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
139
|
+
<h4><code>data</code> <span class="tc-muted small">Object | Array</span></h4>
|
|
140
|
+
<p>The data to display in the tree. Can be any JavaScript object or array. Nested objects and arrays will be rendered as collapsible branches.</p>
|
|
141
|
+
|
|
142
|
+
<h4><code>depth</code> <span class="tc-muted small">Number</span> <span class="tc-muted small">default: 0</span></h4>
|
|
143
|
+
<p>The number of branch levels that should be open by default. A value of <code>0</code> means all branches are closed, <code>1</code> means the first level is open, <code>2</code> means the first two levels are open, etc. This property is reflected as an attribute.</p>
|
|
144
|
+
|
|
145
|
+
<h4><code>editable</code> <span class="tc-muted small">Boolean</span></h4>
|
|
146
|
+
<p>Whether the tree should be editable. <em>Note: This feature is not yet implemented.</em></p>
|
|
147
|
+
|
|
148
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
149
|
+
|
|
150
|
+
<h4><code>Tree.addLeaf(...leafClasses)</code> <span class="tc-muted small">Static</span></h4>
|
|
151
|
+
<p>Register one or more custom leaf classes. Leaf classes should extend <code>TreeLeaf</code> and implement:</p>
|
|
152
|
+
<ul>
|
|
153
|
+
<li><code>constructor(value)</code> - Optional, TreeLeaf base constructor accepts the value</li>
|
|
154
|
+
<li><code>static detect(value)</code> - Returns <code>true</code> if this leaf type should handle the given value</li>
|
|
155
|
+
<li><code>render()</code> - Returns a Lit template or DOM node that renders the value (without the key)</li>
|
|
156
|
+
</ul>
|
|
157
|
+
<p>Leafs are checked in order of registration (most recently added first).</p>
|
|
158
|
+
|
|
159
|
+
<h3>Default Leaf Types</h3>
|
|
160
|
+
<p>The Tree component comes with built-in leaf types for JavaScript primitives:</p>
|
|
161
|
+
<ul>
|
|
162
|
+
<li><strong>StringLeaf</strong> - Renders strings in green with quotes</li>
|
|
163
|
+
<li><strong>NumberLeaf</strong> - Renders numbers in blue</li>
|
|
164
|
+
<li><strong>BooleanLeaf</strong> - Renders <code>true</code> in green, <code>false</code> in red</li>
|
|
165
|
+
<li><strong>NullLeaf</strong> - Renders <code>null</code> in muted gray</li>
|
|
166
|
+
<li><strong>UndefinedLeaf</strong> - Renders <code>undefined</code> in muted gray</li>
|
|
167
|
+
</ul>
|
|
168
|
+
<p>Objects and arrays that don't match any registered leaf type are rendered as collapsible branches.</p>
|
|
82
169
|
|
|
83
170
|
|
|
84
171
|
</main>
|
package/docs/index.html
CHANGED
|
@@ -4,13 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Kempo UI Documentation</title>
|
|
7
|
-
<link rel="stylesheet" href="
|
|
8
|
-
<link rel="stylesheet" href="
|
|
7
|
+
<link rel="stylesheet" href="./kempo.min.css">
|
|
8
|
+
<link rel="stylesheet" href="./kempo-vars.css">
|
|
9
9
|
<link rel="stylesheet" href="./styles.css">
|
|
10
|
-
<script type="module">
|
|
11
|
-
import Import from './src/components/Import.js';
|
|
12
|
-
Import.replacements.root = './';
|
|
13
|
-
</script>
|
|
10
|
+
<script type="module" src="./init.js"></script>
|
|
14
11
|
</head>
|
|
15
12
|
<body>
|
|
16
13
|
<k-import src="./nav.inc.html"></k-import>
|
|
@@ -152,6 +149,12 @@
|
|
|
152
149
|
<p class="tc-muted">Switch component for boolean values with custom styling.</p>
|
|
153
150
|
</a>
|
|
154
151
|
</div>
|
|
152
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
153
|
+
<a href="./components/tree.html" class="card mb no-link d-b">
|
|
154
|
+
<h3 class="tc-primary">Tree</h3>
|
|
155
|
+
<p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
|
|
156
|
+
</a>
|
|
157
|
+
</div>
|
|
155
158
|
</div>
|
|
156
159
|
|
|
157
160
|
<h2>Base Components</h2>
|
|
@@ -215,6 +218,7 @@
|
|
|
215
218
|
</a>
|
|
216
219
|
</div>
|
|
217
220
|
</div>
|
|
221
|
+
<div style="height:33vh"></div>
|
|
218
222
|
</main>
|
|
219
223
|
</body>
|
|
220
224
|
</html>
|
package/docs/init.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Import from './src/components/Import.js';
|
|
2
|
+
import Icon from './src/components/Icon.js';
|
|
3
|
+
import ShadowComponent from './src/components/ShadowComponent.js';
|
|
4
|
+
|
|
5
|
+
Import.replacements.root = './';
|
|
6
|
+
Icon.pathToIcons = ['./icons'];
|
|
7
|
+
ShadowComponent.stylesheetPath = './kempo.min.css';
|
|
@@ -7,4 +7,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
|
|
|
7
7
|
height: 1.35em;
|
|
8
8
|
vertical-align: middle;
|
|
9
9
|
}
|
|
10
|
-
`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["
|
|
10
|
+
`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["./icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="
|
|
1
|
+
import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="./kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}
|