kempo-ui 0.0.11 → 0.0.13
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/docs/components/accordion.html +122 -32
- package/docs/components/card.html +57 -41
- package/docs/components/collapsible.html +158 -36
- package/docs/components/content-slider.html +182 -35
- package/docs/components/dialog.html +79 -45
- package/docs/components/focus-capture.html +78 -40
- package/docs/components/hybrid-component.html +72 -34
- package/docs/components/icon.html +122 -41
- package/docs/components/import.html +39 -41
- package/docs/components/light-component.html +60 -35
- package/docs/components/persistant-collapsible.html +84 -38
- package/docs/components/photo-viewer.html +186 -37
- package/docs/components/resize.html +140 -38
- package/docs/components/shadow-component.html +53 -39
- package/docs/components/show-more.html +93 -40
- package/docs/components/side-menu.html +122 -38
- package/docs/components/sortable.html +94 -36
- package/docs/components/split.html +112 -39
- package/docs/components/table.html +269 -31
- package/docs/components/tableControls.html +54 -51
- package/docs/components/tableCustomFields.html +90 -51
- package/docs/components/tableFetchRecords.html +89 -49
- package/docs/components/tableFieldSortHide.html +52 -51
- package/docs/components/tablePagination.html +77 -51
- package/docs/components/tableRecordEditing.html +121 -51
- package/docs/components/tableRecordFiltering.html +63 -49
- package/docs/components/tableRecordHiding.html +56 -50
- package/docs/components/tableRecordSearching.html +52 -51
- package/docs/components/tableRecordSelection.html +53 -52
- package/docs/components/tableRowControls.html +56 -52
- package/docs/components/tableSorting.html +50 -51
- package/docs/components/tabs.html +147 -43
- package/docs/components/tags.html +72 -38
- package/docs/components/theme-switcher.html +86 -36
- package/docs/components/timestamp.html +44 -38
- package/docs/components/toast.html +25 -44
- package/docs/components/toggle.html +119 -39
- package/docs/components/tree.html +145 -39
- package/docs/dev.config.json +1 -1
- package/docs/index.html +209 -55
- package/docs/utils/debounce.html +31 -28
- package/docs/utils/drag.html +42 -28
- package/docs/utils/formatTimestamp.html +67 -28
- package/docs/utils/propConverters.html +80 -23
- package/docs/utils/toTitleCase.html +24 -28
- package/docs/utils/watchWindowSize.html +96 -5
- package/package.json +1 -1
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Tags - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,94 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Tags</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
22
|
+
<a href="#allowedTags">Allowed Tags</a><br />
|
|
23
|
+
<a href="#disallowedTags">Disallowed Tags</a><br />
|
|
24
|
+
|
|
25
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
26
|
+
<a href="#constructor">Constructor</a><br />
|
|
27
|
+
<a href="#requirements">Requirements</a><br />
|
|
28
|
+
<a href="#properties">Properties</a><br />
|
|
29
|
+
<a href="#methods">Methods</a><br />
|
|
30
|
+
<a href="#events">Events</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
31
34
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code>
|
|
35
|
+
<p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
|
|
33
36
|
|
|
34
37
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs
|
|
38
|
+
<p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.</p>
|
|
39
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
40
|
+
<k-tags>
|
|
41
|
+
<label>Tags</label>
|
|
42
|
+
</k-tags>
|
|
37
43
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</
|
|
44
|
+
<h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
|
|
45
|
+
<p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
|
|
46
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Allowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
47
|
+
<k-tags allowed-tags="tag1,tag2,tag3">
|
|
48
|
+
<label>Allowed Tags</label>
|
|
49
|
+
</k-tags>
|
|
50
|
+
|
|
51
|
+
<h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
|
|
52
|
+
<p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
|
|
53
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Disallowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
54
|
+
<k-tags disallowed-tags="tag1,tag2,tag3">
|
|
55
|
+
<label>Disallowed Tags</label>
|
|
56
|
+
</k-tags>
|
|
46
57
|
|
|
47
|
-
<
|
|
48
|
-
|
|
58
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
59
|
+
|
|
60
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
61
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
62
|
+
<h5>
|
|
63
|
+
<code>new Tags()</code>
|
|
64
|
+
</h5>
|
|
65
|
+
|
|
66
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
67
|
<ul>
|
|
50
|
-
<li><
|
|
68
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
51
69
|
</ul>
|
|
52
70
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
<
|
|
71
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
72
|
+
<h5><code>value<i>: string</i></code></h5>
|
|
73
|
+
<p>A comma-separated list of tags. Syncs with the <code>value</code> attribute.</p>
|
|
74
|
+
<h5><code>allowedTags<i>: string</i></code></h5>
|
|
75
|
+
<p>A comma-separated list of allowed tags. If specified, only these tags can be added. Syncs with the <code>allowed-tags</code> attribute.</p>
|
|
76
|
+
<h5><code>disallowedTags<i>: string</i></code></h5>
|
|
77
|
+
<p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the <code>disallowed-tags</code> attribute.</p>
|
|
60
78
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
79
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
80
|
+
<h5><code>addTag(tag)<i>: void</i></code></h5>
|
|
81
|
+
<p>Adds a tag to the list of tags.</p>
|
|
82
|
+
<h5><code>removeTag(tag)<i>: void</i></code></h5>
|
|
83
|
+
<p>Removes a tag from the list of tags.</p>
|
|
84
|
+
<h5><code>validateTags()<i>: string</i></code></h5>
|
|
85
|
+
<p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.</p>
|
|
86
|
+
<h5><code>renderTags()<i>: Promise<void></i></code></h5>
|
|
87
|
+
<p>Re-renders the tag elements in the component.</p>
|
|
63
88
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
89
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
90
|
+
<h5><code>change</code></h5>
|
|
91
|
+
<p>Fired when the value changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
|
|
92
|
+
<h5><code>addtag</code></h5>
|
|
93
|
+
<p>Fired when a tag is added. Detail contains <code>{ tag }</code>.</p>
|
|
94
|
+
<h5><code>removetag</code></h5>
|
|
95
|
+
<p>Fired when a tag is removed. Detail contains <code>{ tag }</code>.</p>
|
|
96
|
+
<h5><code>allowedtagschange</code></h5>
|
|
97
|
+
<p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
|
|
98
|
+
<h5><code>disallowedtagschange</code></h5>
|
|
99
|
+
<p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
|
|
67
100
|
|
|
68
101
|
</main>
|
|
69
|
-
<
|
|
102
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
103
|
+
<script type="module" src="../src/components/Tags.js"></script>
|
|
70
104
|
</body>
|
|
71
105
|
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>ThemeSwitcher - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,110 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">ThemeSwitcher</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
|
|
22
|
+
<a href="#customPadding">Custom Padding</a><br />
|
|
23
|
+
|
|
24
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
25
|
+
<a href="#constructor">Constructor</a><br />
|
|
26
|
+
<a href="#requirements">Requirements</a><br />
|
|
27
|
+
<a href="#properties">Properties</a><br />
|
|
28
|
+
<a href="#cssCustomProperties">CSS Custom Properties</a><br />
|
|
29
|
+
<a href="#methods">Methods</a><br />
|
|
30
|
+
<a href="#staticMethods">Static Methods</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
31
34
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code>
|
|
35
|
+
<p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
|
|
33
36
|
|
|
34
37
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
|
|
38
|
+
<p>Use the <code>ThemeSwitcher</code> component to allow users to cycle through themes. Clicking the button cycles through auto → light → dark → auto. The component automatically detects the user's system preference when in auto mode.</p>
|
|
39
|
+
|
|
40
|
+
<div class="row -mx mb">
|
|
41
|
+
<div class="col d-span-6 m-span-12 px">
|
|
42
|
+
<k-card label="HTML">
|
|
43
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
44
|
+
</k-card>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="col d-span-6 m-span-12 px">
|
|
47
|
+
<k-card label="Output">
|
|
48
|
+
<k-theme-switcher></k-theme-switcher>
|
|
49
|
+
</k-card>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
37
52
|
|
|
38
|
-
<h3 id="
|
|
53
|
+
<h3 id="customPadding"><a href="#customPadding" class="no-link">Custom Padding</a></h3>
|
|
54
|
+
<p>You can customize the button padding by setting the <code>--padding</code> CSS custom property. The default padding uses <code>var(--spacer, 1rem)</code>.</p>
|
|
39
55
|
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
56
|
+
<div class="row -mx mb">
|
|
57
|
+
<div class="col d-span-6 m-span-12 px">
|
|
58
|
+
<k-card label="HTML">
|
|
59
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--padding: 0.5rem;"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span><br/><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--padding: 2rem;"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
60
|
+
</k-card>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="col d-span-6 m-span-12 px">
|
|
63
|
+
<k-card label="Output">
|
|
64
|
+
<k-theme-switcher style="--padding: 0.5rem;"></k-theme-switcher>
|
|
65
|
+
<k-theme-switcher style="--padding: 2rem;"></k-theme-switcher>
|
|
66
|
+
</k-card>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
46
69
|
|
|
47
|
-
<
|
|
48
|
-
|
|
70
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
71
|
+
|
|
72
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
73
|
+
<h6>Extends <a href="./component.html">ShadowComponent</a></h6>
|
|
74
|
+
<h5>
|
|
75
|
+
<code>new ThemeSwitcher()</code>
|
|
76
|
+
</h5>
|
|
77
|
+
|
|
78
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
79
|
<ul>
|
|
50
|
-
<li><
|
|
80
|
+
<li><a href="./component.html">ShadowComponent</a></li>
|
|
81
|
+
<li><a href="./icon.html">Icon</a></li>
|
|
51
82
|
</ul>
|
|
52
83
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
84
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
85
|
+
<h5><code>currentTheme<i>: string</i></code></h5>
|
|
86
|
+
<p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed. Syncs to <code>current-theme</code> attribute.</p>
|
|
87
|
+
|
|
88
|
+
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
89
|
+
<h5><code>--padding<i>: length</i></code></h5>
|
|
90
|
+
<p>Controls the padding of the theme switcher button. Defaults to <code>var(--spacer, 1rem)</code>. You can override this to customize the button's spacing.</p>
|
|
91
|
+
<pre><code class="hljs css"><span class="hljs-selector-tag">k-theme-switcher</span> {
|
|
92
|
+
<span class="hljs-attribute">--padding</span>: <span class="hljs-number">0.5rem</span>;
|
|
93
|
+
}</code></pre>
|
|
57
94
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
95
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
96
|
+
<p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./component.html">ShadowComponent</a> class.</p>
|
|
97
|
+
|
|
98
|
+
<h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
|
|
99
|
+
<h5><code>static setTheme(theme)<i>: void</i></code></h5>
|
|
100
|
+
<p>Sets the specified theme and saves it to local storage. Also applies the theme to the document element and dispatches a storage event for cross-tab synchronization.</p>
|
|
101
|
+
<ul>
|
|
102
|
+
<li><strong>theme</strong> <code>string</code> - The theme to set. Must be one of: <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code></li>
|
|
103
|
+
</ul>
|
|
104
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Programmatically set theme to dark mode</span>
|
|
105
|
+
<span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">setTheme</span>(<span class="hljs-string">'dark'</span>);</code></pre>
|
|
60
106
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
107
|
+
<h5><code>static getCurrentTheme()<i>: string</i></code></h5>
|
|
108
|
+
<p>Gets the current theme from the document attribute or local storage. Returns <code>"auto"</code> if no theme is set.</p>
|
|
109
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Get the current theme</span>
|
|
110
|
+
<span class="hljs-keyword">const</span> currentTheme = <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">getCurrentTheme</span>();
|
|
111
|
+
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentTheme); <span class="hljs-comment">// "auto", "light", or "dark"</span></code></pre>
|
|
63
112
|
|
|
64
|
-
<
|
|
65
|
-
<p>
|
|
66
|
-
<
|
|
113
|
+
<h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
|
|
114
|
+
<p>When the theme is set to <code>"auto"</code>, the component automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
|
|
115
|
+
<p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
|
|
67
116
|
|
|
68
117
|
</main>
|
|
69
|
-
<
|
|
118
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
119
|
+
<script type="module" src="../src/components/ThemeSwitcher.js"></script>
|
|
70
120
|
</body>
|
|
71
121
|
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Timestamp - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,66 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Timestamp</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
|
|
22
|
+
<a href="#customFormat">Custom Format</a><br />
|
|
23
|
+
|
|
24
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
25
|
+
<a href="#constructor">Constructor</a><br />
|
|
26
|
+
<a href="#requirements">Requirements</a><br />
|
|
27
|
+
<a href="#properties">Properties</a><br />
|
|
28
|
+
<a href="#methods">Methods</a><br />
|
|
28
29
|
</div>
|
|
29
30
|
</details>
|
|
30
31
|
|
|
31
32
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code>
|
|
33
|
+
<p>The <code>Timestamp</code> component displays a formatted timestamp using custom format tokens. It extends the ShadowComponent class for encapsulated styling.</p>
|
|
33
34
|
|
|
34
35
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs
|
|
36
|
+
<p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp using the default format or a custom format with tokens.</p>
|
|
37
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
38
|
+
<k-timestamp timestamp="1633024800000"></k-timestamp>
|
|
37
39
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
<ul>
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
40
|
+
<h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
|
|
41
|
+
<p>Use the <code>format</code> attribute to specify a custom format using tokens like <code>YYYY</code> (4-digit year), <code>MM</code> (2-digit month), <code>DD</code> (2-digit day), <code>hh</code> (2-digit hour), <code>mm</code> (2-digit minute), and <code>ss</code> (2-digit second).</p>
|
|
42
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
43
|
+
<k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
|
|
46
44
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
</ul>
|
|
45
|
+
<h3 id="timeFormat"><a href="#timeFormat" class="no-link">Time Format</a></h3>
|
|
46
|
+
<p>Display time with custom formatting using hour, minute, and second tokens.</p>
|
|
47
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
48
|
+
<k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
|
|
52
49
|
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<h4>Responsive Component</h4>
|
|
56
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
50
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
57
51
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
52
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
53
|
+
<h6>Extends ShadowComponent</h6>
|
|
54
|
+
|
|
55
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
56
|
+
<ul>
|
|
57
|
+
<li>ShadowComponent</li>
|
|
58
|
+
<li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
|
|
59
|
+
</ul>
|
|
60
60
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
61
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
62
|
+
<h5><code>timestamp<i>: number</i></code></h5>
|
|
63
|
+
<p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
|
|
64
|
+
<h5><code>format<i>: string</i></code></h5>
|
|
65
|
+
<p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided, uses the default format. Syncs to <code>format</code> attribute.</p>
|
|
66
|
+
<h5><code>locale<i>: string</i></code></h5>
|
|
67
|
+
<p>The locale to be used for formatting the timestamp. Syncs to <code>locale</code> attribute.</p>
|
|
63
68
|
|
|
64
|
-
<
|
|
65
|
-
<p>The
|
|
66
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
69
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
70
|
+
<p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent class.</p>
|
|
67
71
|
|
|
68
72
|
</main>
|
|
69
73
|
<div style="height:33vh"></div>
|
|
74
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
75
|
+
<script type="module" src="../src/components/Timestamp.js"></script>
|
|
70
76
|
</body>
|
|
71
77
|
</html>
|