kempo-ui 0.0.3 → 0.0.5
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/.github/workflows/publish-major.yml +39 -0
- package/.github/workflows/publish-minor.yml +39 -0
- package/.github/workflows/{publish-npm.yml → publish-patch.yml} +1 -1
- package/.vscode/settings.json +2 -0
- package/dist/kempo-hljs.css +1 -0
- package/dist/src/components/Accordion.js +36 -0
- package/dist/src/components/Card.js +37 -0
- package/dist/src/components/Collapsible.js +41 -0
- package/dist/src/components/ContentSlider.js +44 -0
- package/dist/src/components/Dialog.js +120 -0
- package/dist/src/components/Icon.js +2 -2
- package/dist/src/components/PersistantCollapsible.js +1 -0
- package/dist/src/components/PhotoViewer.js +135 -0
- package/dist/src/components/Resize.js +96 -0
- package/dist/src/components/ShadowComponent.js +1 -1
- package/dist/src/components/ShowMore.js +42 -0
- package/dist/src/components/SideMenu.js +1 -1
- package/dist/src/components/Sortable.js +45 -0
- package/dist/src/components/Split.js +84 -0
- package/dist/src/components/Table.js +151 -0
- package/dist/src/components/Tabs.js +155 -0
- package/dist/src/components/Tags.js +69 -0
- package/dist/src/components/ThemeSwitcher.js +23 -0
- package/dist/src/components/Timestamp.js +1 -0
- package/dist/src/components/Toast.js +141 -0
- package/dist/src/components/Toggle.js +74 -0
- package/dist/src/components/tableControls/DeleteRecord.js +7 -0
- package/dist/src/components/tableControls/Edit.js +18 -0
- package/dist/src/components/tableControls/ExportCSV.js +8 -0
- package/dist/src/components/tableControls/ExportJson.js +8 -0
- package/dist/src/components/tableControls/FieldSortHide.js +26 -0
- package/dist/src/components/tableControls/Filters.js +47 -0
- package/dist/src/components/tableControls/FirstPage.js +9 -0
- package/dist/src/components/tableControls/HiddenCount.js +3 -0
- package/dist/src/components/tableControls/Hide.js +5 -0
- package/dist/src/components/tableControls/LastPage.js +9 -0
- package/dist/src/components/tableControls/NextPage.js +9 -0
- package/dist/src/components/tableControls/PageSelect.js +22 -0
- package/dist/src/components/tableControls/PageSize.js +5 -0
- package/dist/src/components/tableControls/PrevPage.js +9 -0
- package/dist/src/components/tableControls/Search.js +9 -0
- package/dist/src/components/tableControls/ShowAll.js +5 -0
- package/dist/src/components/tableControls/TableControl.js +16 -0
- package/dist/src/utils/debounce.js +1 -0
- package/dist/src/utils/drag.js +1 -0
- package/dist/src/utils/formatTimestamp.js +1 -0
- package/dist/src/utils/propConverters.js +1 -0
- package/dist/src/utils/toTitleCase.js +1 -0
- package/dist/src/utils/watchWindowSize.js +1 -0
- package/docs/components/accordion.html +69 -25
- package/docs/components/card.html +6 -5
- package/docs/components/collapsible.html +198 -0
- package/docs/components/content-slider.html +56 -26
- package/docs/components/dialog.html +54 -48
- package/docs/components/focus-capture.html +59 -15
- package/docs/components/hybrid-component.html +112 -0
- package/docs/components/icon.html +5 -10
- package/docs/components/import.html +1 -6
- package/docs/components/light-component.html +99 -0
- package/docs/components/persistant-collapsible.html +123 -0
- package/docs/components/photo-viewer.html +226 -0
- package/docs/components/resize.html +44 -18
- package/docs/components/shadow-component.html +88 -0
- package/docs/components/show-more.html +12 -6
- package/docs/components/side-menu.html +3 -12
- package/docs/components/sortable.html +91 -55
- package/docs/components/split.html +26 -5
- package/docs/components/tablePagination.html +4 -4
- package/docs/components/tableRecordFiltering.html +16 -3
- package/docs/components/tableRecordSelection.html +2 -2
- package/docs/components/tabs.html +24 -7
- package/docs/components/tags.html +24 -8
- package/docs/components/theme-switcher.html +3 -6
- package/docs/components/timestamp.html +20 -24
- package/docs/components/toast.html +23 -32
- package/docs/components/toggle.html +4 -3
- package/docs/icons/error.svg +1 -1
- package/docs/icons/warning.svg +1 -1
- package/docs/index.html +197 -5
- package/docs/kempo-hljs.css +1 -0
- package/docs/kempo.min.css +1 -1
- package/docs/media/civic.jpg +0 -0
- package/docs/media/corvette.jpg +0 -0
- package/docs/media/evo.jpg +0 -0
- package/docs/media/gtr.jpg +0 -0
- package/docs/media/nsx.jpg +0 -0
- package/docs/nav.inc.html +19 -24
- package/docs/src/components/Accordion.js +36 -0
- package/docs/src/components/Card.js +37 -0
- package/docs/src/components/Collapsible.js +41 -0
- package/docs/src/components/ContentSlider.js +44 -0
- package/docs/src/components/Dialog.js +120 -0
- package/docs/src/components/Icon.js +2 -2
- package/docs/src/components/PersistantCollapsible.js +1 -0
- package/docs/src/components/PhotoViewer.js +135 -0
- package/docs/src/components/Resize.js +96 -0
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/ShowMore.js +42 -0
- package/docs/src/components/SideMenu.js +1 -1
- package/docs/src/components/Sortable.js +45 -0
- package/docs/src/components/Split.js +84 -0
- package/docs/src/components/Table.js +151 -0
- package/docs/src/components/Tabs.js +155 -0
- package/docs/src/components/Tags.js +69 -0
- package/docs/src/components/ThemeSwitcher.js +23 -0
- package/docs/src/components/Timestamp.js +1 -0
- package/docs/src/components/Toast.js +141 -0
- package/docs/src/components/Toggle.js +74 -0
- package/docs/src/components/tableControls/DeleteRecord.js +7 -0
- package/docs/src/components/tableControls/Edit.js +18 -0
- package/docs/src/components/tableControls/ExportCSV.js +8 -0
- package/docs/src/components/tableControls/ExportJson.js +8 -0
- package/docs/src/components/tableControls/FieldSortHide.js +26 -0
- package/docs/src/components/tableControls/Filters.js +47 -0
- package/docs/src/components/tableControls/FirstPage.js +9 -0
- package/docs/src/components/tableControls/HiddenCount.js +3 -0
- package/docs/src/components/tableControls/Hide.js +5 -0
- package/docs/src/components/tableControls/LastPage.js +9 -0
- package/docs/src/components/tableControls/NextPage.js +9 -0
- package/docs/src/components/tableControls/PageSelect.js +22 -0
- package/docs/src/components/tableControls/PageSize.js +5 -0
- package/docs/src/components/tableControls/PrevPage.js +9 -0
- package/docs/src/components/tableControls/Search.js +9 -0
- package/docs/src/components/tableControls/ShowAll.js +5 -0
- package/docs/src/components/tableControls/TableControl.js +16 -0
- package/docs/src/utils/debounce.js +1 -0
- package/docs/src/utils/drag.js +1 -0
- package/docs/src/utils/formatTimestamp.js +1 -0
- package/docs/src/utils/propConverters.js +1 -0
- package/docs/src/utils/toTitleCase.js +1 -0
- package/docs/src/utils/watchWindowSize.js +1 -0
- package/docs/utils/debounce.html +78 -0
- package/docs/utils/drag.html +89 -0
- package/docs/utils/formatTimestamp.html +114 -0
- package/docs/utils/propConverters.html +132 -0
- package/docs/utils/toTitleCase.html +71 -0
- package/docs/utils/watchWindowSize.html +166 -0
- package/icons/error.svg +1 -1
- package/icons/warning.svg +1 -1
- package/package.json +1 -1
- package/scripts/build.js +4 -1
- package/scripts/docs.js +4 -2
- package/src/components/Accordion.js +229 -0
- package/src/components/Collapsible.js +109 -0
- package/src/components/ContentSlider.js +205 -0
- package/src/components/Dialog.js +376 -0
- package/src/components/PersistantCollapsible.js +69 -0
- package/src/components/PhotoViewer.js +368 -0
- package/src/components/Resize.js +210 -0
- package/src/components/ShadowComponent.js +3 -1
- package/src/components/ShowMore.js +109 -0
- package/src/components/Sortable.js +193 -0
- package/src/components/Split.js +192 -0
- package/src/components/Table.js +1202 -0
- package/src/components/Tabs.js +428 -0
- package/src/components/Tags.js +253 -0
- package/src/components/Timestamp.js +31 -0
- package/src/components/Toast.js +454 -0
- package/src/components/Toggle.js +173 -0
- package/src/components/tableControls/DeleteRecord.js +29 -0
- package/src/components/tableControls/Edit.js +88 -0
- package/src/components/tableControls/ExportCSV.js +71 -0
- package/src/components/tableControls/ExportJson.js +55 -0
- package/src/components/tableControls/FieldSortHide.js +76 -0
- package/src/components/tableControls/Filters.js +114 -0
- package/src/components/tableControls/FirstPage.js +65 -0
- package/src/components/tableControls/HiddenCount.js +45 -0
- package/src/components/tableControls/Hide.js +34 -0
- package/src/components/tableControls/LastPage.js +65 -0
- package/src/components/tableControls/NextPage.js +65 -0
- package/src/components/tableControls/PageSelect.js +109 -0
- package/src/components/tableControls/PageSize.js +68 -0
- package/src/components/tableControls/PrevPage.js +65 -0
- package/src/components/tableControls/Search.js +58 -0
- package/src/components/tableControls/ShowAll.js +34 -0
- package/src/components/tableControls/TableControl.js +105 -0
- package/src/utils/debounce.js +9 -0
- package/src/utils/drag.js +80 -0
- package/src/utils/formatTimestamp.js +27 -0
- package/src/utils/toTitleCase.js +9 -0
- package/src/utils/watchWindowSize.js +16 -0
- package/dist/src/utils/cli.js +0 -1
- package/dist/src/utils/fs-utils.js +0 -1
- package/docs/components/component.html +0 -90
- package/docs/components/directory-viewer.html +0 -90
- package/docs/components/lazy-component.html +0 -84
- package/docs/components/reactive-component.html +0 -69
- package/docs/components/reactive-lazy-component.html +0 -69
- package/docs/components/search.html +0 -102
- package/docs/src/utils/cli.js +0 -1
- package/docs/src/utils/fs-utils.js +0 -1
- package/src/utils/cli.js +0 -43
- package/src/utils/fs-utils.js +0 -41
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
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" />`n <link rel="stylesheet" href="../styles.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Import from '../src/components/Import.js';
|
|
11
|
+
import Icon from '../src/components/Icon.js';
|
|
12
|
+
Import.replacements.root = '../';
|
|
13
|
+
Icon.pathToIcons = ['../icons'];
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">ShadowComponent</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Guide</h6>
|
|
24
|
+
<a href="#overview">Overview</a><br />
|
|
25
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
27
|
+
<a href="#stylesheetPath">Changing Stylesheet Path</a><br />
|
|
28
|
+
|
|
29
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
30
|
+
<a href="#constructor">Constructor</a><br />
|
|
31
|
+
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#staticProperties">Static Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
</div>
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
<h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
|
|
38
|
+
<p>ShadowComponent is a base class that extends LitElement and provides automatic shadow DOM encapsulation with Kempo CSS stylesheet injection. Use this when you want your component to have:</p>
|
|
39
|
+
<ul>
|
|
40
|
+
<li>Shadow DOM for style encapsulation</li>
|
|
41
|
+
<li>Automatic access to Kempo CSS styles</li>
|
|
42
|
+
<li>Scoped component-specific styles</li>
|
|
43
|
+
</ul>
|
|
44
|
+
<p>Most Kempo UI components extend ShadowComponent, including <a href="dialog.html">Dialog</a>, <a href="card.html">Card</a>, <a href="accordion.html">Accordion</a>, and many others.</p>
|
|
45
|
+
|
|
46
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
47
|
+
<p>Create a custom component by extending ShadowComponent:</p>
|
|
48
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="p b r"><br /> <h3>My Component</h3><br /> <p>This has shadow DOM with Kempo CSS styles.</p><br /> </div><br /> `</span>;<br /> }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
|
|
49
|
+
|
|
50
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
51
|
+
<p>Add component-specific styles using the static <code>styles</code> property:</p>
|
|
52
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyStyledComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br /> :host {<br /> display: block;<br /> padding: var(--spacer);<br /> }<br /> .custom-element {<br /> background-color: var(--c_primary);<br /> color: var(--tc_on_primary);<br /> border-radius: var(--radius);<br /> }<br /> `</span>;<br /><br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="custom-element p"><br /> Custom styled content<br /> </div><br /> `</span>;<br /> }<br />}</code></pre>
|
|
53
|
+
|
|
54
|
+
<h3 id="stylesheetPath"><a href="#stylesheetPath" class="no-link">Changing Stylesheet Path</a></h3>
|
|
55
|
+
<p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally or per-component:</p>
|
|
56
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Change globally for all ShadowComponent instances</span><br /><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br />ShadowComponent.stylesheetPath = <span class="hljs-string">'/custom-path/kempo.min.css'</span>;<br /><br /><span class="hljs-comment">// Or override for a specific component</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> stylesheetPath = <span class="hljs-string">'/custom.css'</span>;<br /> <span class="hljs-comment">// ...</span><br />}</code></pre>
|
|
57
|
+
|
|
58
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
59
|
+
|
|
60
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
61
|
+
<h6>Extends LitElement</h6>
|
|
62
|
+
<h5><code>new ShadowComponent()</code></h5>
|
|
63
|
+
<p>Creates a new ShadowComponent instance with shadow DOM and automatic Kempo CSS stylesheet injection.</p>
|
|
64
|
+
|
|
65
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
66
|
+
<ul>
|
|
67
|
+
<li>Lit (LitElement)</li>
|
|
68
|
+
</ul>
|
|
69
|
+
|
|
70
|
+
<h3 id="staticProperties"><a href="#staticProperties" class="no-link">Static Properties</a></h3>
|
|
71
|
+
<h5><code>stylesheetPath<i>: string</i></code></h5>
|
|
72
|
+
<p>The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is <code>'/kempo.min.css'</code>. This can be set globally on the ShadowComponent class or overridden in subclasses.</p>
|
|
73
|
+
|
|
74
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
75
|
+
<h5><code>createRenderRoot()<i>: Element</i></code></h5>
|
|
76
|
+
<p>Creates the shadow root and injects the Kempo CSS stylesheet. This method:</p>
|
|
77
|
+
<ul>
|
|
78
|
+
<li>Attaches a shadow DOM with <code>mode: 'open'</code></li>
|
|
79
|
+
<li>Injects a <code><link></code> element pointing to the Kempo CSS stylesheet</li>
|
|
80
|
+
<li>Injects component-specific styles from the static <code>styles</code> property if defined</li>
|
|
81
|
+
<li>Creates a render container with <code>display: contents</code> for layout transparency</li>
|
|
82
|
+
</ul>
|
|
83
|
+
|
|
84
|
+
</main>
|
|
85
|
+
<div style="height:33vh"></div>
|
|
86
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
87
|
+
</body>
|
|
88
|
+
</html>
|
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
8
|
<link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
|
|
9
9
|
<script type="module">
|
|
10
|
+
import ShadowComponent from '../src/components/ShadowComponent.js';
|
|
10
11
|
import Import from '../src/components/Import.js';
|
|
11
12
|
import Icon from '../src/components/Icon.js';
|
|
13
|
+
ShadowComponent.stylesheetPath = '../kempo.min.css';
|
|
12
14
|
Import.replacements.root = '../';
|
|
13
15
|
Icon.pathToIcons = ['../icons'];
|
|
14
16
|
</script>
|
|
@@ -28,8 +30,8 @@
|
|
|
28
30
|
<h6 class="mt">JavaScript Reference</h6>
|
|
29
31
|
<a href="#constructor">Constructor</a><br />
|
|
30
32
|
<a href="#requirements">Requirements</a><br />
|
|
31
|
-
<a href="#attributes">Attributes</a><br />
|
|
32
33
|
<a href="#properties">Properties</a><br />
|
|
34
|
+
<a href="#cssCustomProperties">CSS Custom Properties</a><br />
|
|
33
35
|
<a href="#methods">Methods</a><br />
|
|
34
36
|
</div>
|
|
35
37
|
</details>
|
|
@@ -91,20 +93,24 @@
|
|
|
91
93
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
92
94
|
|
|
93
95
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
94
|
-
<h6>Extends <a href="./component.html">
|
|
96
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
95
97
|
<h5>
|
|
96
98
|
<code>new ShowMore()</code>
|
|
97
99
|
</h5>
|
|
98
100
|
|
|
99
101
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
100
102
|
<ul>
|
|
101
|
-
<li><a href="./component.html">
|
|
102
|
-
<li><a href="./
|
|
103
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
104
|
+
<li><a href="./icon.html">Icon</a></li>
|
|
103
105
|
</ul>
|
|
104
106
|
|
|
105
|
-
<h3 id="
|
|
107
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
106
108
|
<h5><code>opened<i>: boolean</i></code></h5>
|
|
107
|
-
<p>Whether the content is expanded.</p>
|
|
109
|
+
<p>Whether the content is expanded. Syncs to <code>opened</code> attribute.</p>
|
|
110
|
+
|
|
111
|
+
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
112
|
+
<h5><code>--closed_height</code></h5>
|
|
113
|
+
<p>The height of the content when in the collapsed state. Default is <code>7rem</code>.</p>
|
|
108
114
|
|
|
109
115
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
110
116
|
<h5><code>more()<i>: void</i></code></h5>
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
<h6 class="mt">JavaScript Reference</h6>
|
|
31
31
|
<a href="#constructor">Constructor</a><br />
|
|
32
32
|
<a href="#requirements">Requirements</a><br />
|
|
33
|
-
<a href="#attributes">Attributes</a><br />
|
|
34
33
|
<a href="#properties">Properties</a><br />
|
|
35
34
|
<a href="#events">Events</a><br />
|
|
36
35
|
<a href="#methods">Methods</a><br />
|
|
@@ -126,21 +125,13 @@
|
|
|
126
125
|
<li><a href="./focuscapture.html">FocusCapture</a></li>
|
|
127
126
|
</ul>
|
|
128
127
|
|
|
129
|
-
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
130
|
-
<h5><code>opened<i>: boolean</i></code></h5>
|
|
131
|
-
<p>Whether the side menu is opened.</p>
|
|
132
|
-
<h5><code>overlay-close<i>: string</i></code></h5>
|
|
133
|
-
<p>Whether clicking the overlay closes the side menu. Accepts "true" or "false" as string values. Defaults to "true".</p>
|
|
134
|
-
<h5><code>side<i>: string</i></code></h5>
|
|
135
|
-
<p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to "left".</p>
|
|
136
|
-
|
|
137
128
|
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
138
129
|
<h5><code>opened<i>: boolean</i></code></h5>
|
|
139
|
-
<p>Whether the side menu is opened. Defaults to <code>false</code
|
|
130
|
+
<p>Whether the side menu is opened. Defaults to <code>false</code>. Syncs to <code>opened</code> attribute.</p>
|
|
140
131
|
<h5><code>overlayClose<i>: boolean</i></code></h5>
|
|
141
|
-
<p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code
|
|
132
|
+
<p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
|
|
142
133
|
<h5><code>side<i>: string</i></code></h5>
|
|
143
|
-
<p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code
|
|
134
|
+
<p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
|
|
144
135
|
|
|
145
136
|
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
146
137
|
<h5><code>open</code></h5>
|
|
@@ -17,80 +17,116 @@
|
|
|
17
17
|
<k-import src="../nav.inc.html"></k-import>
|
|
18
18
|
<h1 class="ta-center">Sortable</h1>
|
|
19
19
|
<main>
|
|
20
|
-
<details
|
|
21
|
-
class="b r mb"
|
|
22
|
-
>
|
|
20
|
+
<details class="b r mb">
|
|
23
21
|
<summary class="p">Table of Contents</summary>
|
|
24
22
|
<div class="m mt0 pl">
|
|
25
23
|
<h6>Examples</h6>
|
|
26
24
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</
|
|
31
|
-
<a href="#
|
|
32
|
-
<a href="#
|
|
33
|
-
<a href="#
|
|
34
|
-
|
|
35
|
-
<h6 class="mt">
|
|
36
|
-
<a href="#sortableItem">SortableItem JavaScript Reference</a>
|
|
37
|
-
</h6>
|
|
38
|
-
<a href="#sortableItemConstructor">Constructor</a><br />
|
|
39
|
-
<a href="#sortableItemAttributes">Attributes</a>
|
|
25
|
+
<a href="#sortEvent">Sort Event</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#properties">Properties</a><br />
|
|
31
|
+
<a href="#methods">Methods</a><br />
|
|
32
|
+
<a href="#events">Events</a><br />
|
|
40
33
|
</div>
|
|
41
34
|
</details>
|
|
42
35
|
|
|
43
|
-
<h3>Description</h3>
|
|
44
|
-
<p>A component that allows the user to sort items in a list.</p>
|
|
45
|
-
|
|
46
36
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
|
+
<p>The <code>k-sortable</code> component allows users to reorder items by dragging them. Wrap your items in a <code>k-sortable</code> container and use <code>k-sortable-item</code> for each item. Each item automatically gets a drag handle.</p>
|
|
38
|
+
<div class="row -mx">
|
|
39
|
+
<div class="col m-span-12 px">
|
|
40
|
+
<k-card label="HTML">
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span></code></pre>
|
|
42
|
+
</k-card>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col m-span-12 px">
|
|
45
|
+
<k-card label="Output">
|
|
46
|
+
<p class="mb"><em>Drag items by their handle to reorder them.</em></p>
|
|
47
|
+
<k-sortable>
|
|
48
|
+
<k-sortable-item>Item 1</k-sortable-item>
|
|
49
|
+
<k-sortable-item>Item 2</k-sortable-item>
|
|
50
|
+
<k-sortable-item>Item 3</k-sortable-item>
|
|
51
|
+
<k-sortable-item>Item 4</k-sortable-item>
|
|
52
|
+
</k-sortable>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
47
56
|
|
|
48
|
-
<
|
|
49
|
-
<k-sortable>
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
57
|
+
<h3 id="sortEvent"><a href="#sortEvent" class="no-link">Sort Event</a></h3>
|
|
58
|
+
<p>Listen to the <code>sort</code> event on the <code>k-sortable</code> container to be notified when items are reordered.</p>
|
|
59
|
+
<div class="row -mx">
|
|
60
|
+
<div class="col m-span-12 px">
|
|
61
|
+
<k-card label="HTML">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortableExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Apple<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Banana<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Cherry<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Date<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortOutput"</span>></span>Reorder items to see the event fire<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).addEventListener(<span class="hljs-string">'sort'</span>, () => {<br /> <span class="hljs-keyword">const</span> items = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).children)<br /> .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.textContent);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortOutput'</span>).textContent = <span class="hljs-string">`Order: <span class="hljs-subst">${items.join(<span class="hljs-string">', '</span>)}</span>`</span>;<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
|
+
</k-card>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col m-span-12 px">
|
|
66
|
+
<k-card label="Output">
|
|
67
|
+
<k-sortable id="sortableExample">
|
|
68
|
+
<k-sortable-item>Apple</k-sortable-item>
|
|
69
|
+
<k-sortable-item>Banana</k-sortable-item>
|
|
70
|
+
<k-sortable-item>Cherry</k-sortable-item>
|
|
71
|
+
<k-sortable-item>Date</k-sortable-item>
|
|
72
|
+
</k-sortable>
|
|
73
|
+
<p id="sortOutput" class="mt">Reorder items to see the event fire</p>
|
|
74
|
+
<script>
|
|
75
|
+
document.getElementById('sortableExample').addEventListener('sort', () => {
|
|
76
|
+
const items = Array.from(document.getElementById('sortableExample').children)
|
|
77
|
+
.map(item => item.textContent);
|
|
78
|
+
document.getElementById('sortOutput').textContent = `Order: ${items.join(', ')}`;
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</k-card>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
56
84
|
|
|
57
|
-
<
|
|
58
|
-
<hr />
|
|
85
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
59
86
|
|
|
60
|
-
<
|
|
87
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
88
|
+
|
|
89
|
+
<h5><code>new Sortable()</code></h5>
|
|
90
|
+
<h6>Extends LitElement</h6>
|
|
91
|
+
<p>The container component that manages sortable items.</p>
|
|
61
92
|
|
|
62
|
-
<
|
|
63
|
-
<h6>Extends
|
|
64
|
-
<
|
|
65
|
-
<code>new Sortable()</code>
|
|
66
|
-
</h5>
|
|
93
|
+
<h5><code>new SortableItem()</code></h5>
|
|
94
|
+
<h6>Extends LitElement</h6>
|
|
95
|
+
<p>An individual sortable item with a drag handle.</p>
|
|
67
96
|
|
|
68
|
-
<h3 id="
|
|
97
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
69
98
|
<ul>
|
|
70
|
-
<li>
|
|
99
|
+
<li>Lit</li>
|
|
100
|
+
<li><a href="../utils/drag.html">drag</a> utility</li>
|
|
101
|
+
<li><a href="icon.html">Icon</a> component</li>
|
|
71
102
|
</ul>
|
|
72
103
|
|
|
73
|
-
<h3 id="
|
|
74
|
-
|
|
75
|
-
<
|
|
104
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
105
|
+
|
|
106
|
+
<h4>Sortable</h4>
|
|
107
|
+
<p>The Sortable container has no public properties.</p>
|
|
108
|
+
|
|
109
|
+
<h4>SortableItem</h4>
|
|
110
|
+
<h5><code>sorting<i>: boolean</i></code></h5>
|
|
111
|
+
<p>A boolean indicating if the item is currently being dragged. This property is reflected as an attribute and automatically set by the drag handlers. When <code>true</code>, the item has reduced opacity.</p>
|
|
76
112
|
|
|
113
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
114
|
+
|
|
115
|
+
<h4>Sortable</h4>
|
|
116
|
+
<h5><code>getCursorElement()<i>: [Element, string] | null</i></code></h5>
|
|
117
|
+
<p>Returns the element and position ('before' or 'after') where the dragged item should be inserted based on the current cursor position. Returns <code>null</code> if no valid target is found.</p>
|
|
77
118
|
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
<
|
|
119
|
+
<h4>SortableItem</h4>
|
|
120
|
+
<h5><code>sortable<i>: Sortable</i></code></h5>
|
|
121
|
+
<p>A getter that returns the parent <code>k-sortable</code> element using <code>closest('k-sortable')</code>.</p>
|
|
81
122
|
|
|
82
|
-
<h3 id="
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
<code>new SortableItem()</code>
|
|
86
|
-
</h5>
|
|
123
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
124
|
+
<h5><code>sort</code></h5>
|
|
125
|
+
<p>Dispatched by the <code>k-sortable</code> container when an item is dropped in a new position. The event bubbles. Use this event to save the new order or update your application state.</p>
|
|
87
126
|
|
|
88
|
-
<h3 id="sortableItemAttributes"><a href="#sortableItemAttributes" class="no-link">Attributes</a></h3>
|
|
89
|
-
<h5><code>sorting: boolean</code></h5>
|
|
90
|
-
<p>Indicates whether the item is currently being sorted.</p>
|
|
91
|
-
|
|
92
127
|
</main>
|
|
93
|
-
<
|
|
94
|
-
<script type="module" src="../src/components/
|
|
128
|
+
<div style="height:33vh"></div>
|
|
129
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
130
|
+
<script type="module" src="../src/components/Sortable.js"></script>
|
|
95
131
|
</body>
|
|
96
|
-
</html>
|
|
132
|
+
</html>
|
|
@@ -27,9 +27,10 @@
|
|
|
27
27
|
<h6 class="mt">JavaScript Reference</h6>
|
|
28
28
|
<a href="#constructor">Constructor</a><br />
|
|
29
29
|
<a href="#requirements">Requirements</a><br />
|
|
30
|
-
<a href="#attributes">Attributes</a><br />
|
|
31
30
|
<a href="#properties">Properties</a><br />
|
|
31
|
+
<a href="#cssCustomProperties">CSS Custom Properties</a><br />
|
|
32
32
|
<a href="#methods">Methods</a><br />
|
|
33
|
+
<a href="#events">Events</a><br />
|
|
33
34
|
</div>
|
|
34
35
|
</details>
|
|
35
36
|
|
|
@@ -99,24 +100,44 @@
|
|
|
99
100
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
100
101
|
|
|
101
102
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
102
|
-
<h6>Extends <a href="./component.html">
|
|
103
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
103
104
|
<h5>
|
|
104
105
|
<code>new Split()</code>
|
|
105
106
|
</h5>
|
|
106
107
|
|
|
107
108
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
108
109
|
<ul>
|
|
109
|
-
<li><a href="./component.html">
|
|
110
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
110
111
|
</ul>
|
|
111
112
|
|
|
112
|
-
<h3 id="
|
|
113
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
113
114
|
<h5><code>resizing<i>: boolean</i></code></h5>
|
|
114
|
-
<p>
|
|
115
|
+
<p>Whether the split view is currently being resized. Syncs to <code>resizing</code> attribute.</p>
|
|
116
|
+
<h5><code>stacked<i>: boolean</i></code></h5>
|
|
117
|
+
<p>Whether the split view is in stacked mode. Syncs to <code>stacked</code> attribute.</p>
|
|
118
|
+
<h5><code>stackWidth<i>: number</i></code></h5>
|
|
119
|
+
<p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
|
|
120
|
+
|
|
121
|
+
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
122
|
+
<h5><code>--left_width</code></h5>
|
|
123
|
+
<p>The width of the left pane. Default is <code>calc((100% - var(--handle_width)) / 2)</code>.</p>
|
|
124
|
+
<h5><code>--handle_width</code></h5>
|
|
125
|
+
<p>The width of the draggable divider handle. Default is <code>0.5rem</code>.</p>
|
|
126
|
+
<h5><code>--min_pane_width</code></h5>
|
|
127
|
+
<p>The minimum width each pane can be resized to. Default is <code>6rem</code>.</p>
|
|
115
128
|
|
|
116
129
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
117
130
|
<h5><code>setSize(size)<i>: void</i></code></h5>
|
|
118
131
|
<p>Sets the width of the left pane.</p>
|
|
119
132
|
|
|
133
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
134
|
+
<h5><code>resizestart</code></h5>
|
|
135
|
+
<p>Fired when the user starts dragging the divider handle. Detail contains <code>{ startSize }</code>.</p>
|
|
136
|
+
<h5><code>resize</code></h5>
|
|
137
|
+
<p>Fired during dragging of the divider handle. Detail contains <code>{ size }</code>.</p>
|
|
138
|
+
<h5><code>resizeend</code></h5>
|
|
139
|
+
<p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
|
|
140
|
+
|
|
120
141
|
</main>
|
|
121
142
|
<div style="height:33vh"></div>
|
|
122
143
|
<script type="module" src="../src/components/Import.js"></script>
|
|
@@ -57,16 +57,16 @@
|
|
|
57
57
|
<h1 class="ta-center">Table - Pagination</h1>
|
|
58
58
|
<main>
|
|
59
59
|
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
60
|
-
|
|
60
|
+
<p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
|
|
61
61
|
<p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</p>
|
|
62
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br /> <span class="hljs-attr">enable-pages</span
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br /> <span class="hljs-attr">enable-pages</span><br /> <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br /> <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-first-page</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-first-page</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-prev-page</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-prev-page</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-next-page</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-next-page</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-last-page</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-last-page</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-page-select</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-page-select</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-page-size</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-page-size</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-table</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/FirstPage.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PrevPage.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/NextPage.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/LastPage.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PageSelect.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PageSize.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
63
|
<k-table
|
|
64
64
|
id="paginationExample"
|
|
65
|
-
enable-pages
|
|
65
|
+
enable-pages
|
|
66
66
|
page-size="10"
|
|
67
67
|
page-size-options="[5,10,25,50]"
|
|
68
68
|
>
|
|
69
|
-
<div class="d-f full">
|
|
69
|
+
<div class="d-f full" style="align-items: center;">
|
|
70
70
|
<div>
|
|
71
71
|
<k-tc-first-page></k-tc-first-page>
|
|
72
72
|
<k-tc-prev-page></k-tc-prev-page>
|
|
@@ -60,13 +60,26 @@
|
|
|
60
60
|
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
61
61
|
|
|
62
62
|
<p>Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.</p>
|
|
63
|
-
|
|
64
|
-
<
|
|
63
|
+
|
|
64
|
+
<h3>Basic Filtering (Case-Insensitive)</h3>
|
|
65
|
+
<p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</p>
|
|
66
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-filters</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-table</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 class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Filters.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
67
|
+
<k-table id="recordFilteringExample">
|
|
65
68
|
<k-tc-filters slot="top"></k-tc-filters>
|
|
66
69
|
</k-table>
|
|
67
70
|
<script type="module" src="../src/components/tableControls/Filters.js"></script>
|
|
68
71
|
<script type="module">
|
|
69
|
-
document.getElementById('
|
|
72
|
+
document.getElementById('recordFilteringExample').setRecords(contacts);
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<h3>Case-Sensitive Filtering</h3>
|
|
76
|
+
<p>You can enable case-sensitive filtering by adding the <code>case-sensitive-filters</code> attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".</p>
|
|
77
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-filters</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-table</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-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
78
|
+
<k-table id="caseSensitiveExample" case-sensitive-filters>
|
|
79
|
+
<k-tc-filters slot="top"></k-tc-filters>
|
|
80
|
+
</k-table>
|
|
81
|
+
<script type="module">
|
|
82
|
+
document.getElementById('caseSensitiveExample').setRecords(contacts);
|
|
70
83
|
</script>
|
|
71
84
|
</main>
|
|
72
85
|
<div style="height: 33.333vh"></div>
|
|
@@ -59,10 +59,10 @@
|
|
|
59
59
|
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
60
60
|
|
|
61
61
|
<p>The table component supports record selection. You can enable selection by setting the <code>enable-selection</code> attribute to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
|
|
62
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br /> <span class="hljs-attr">enable-selection</span
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br /> <span class="hljs-attr">enable-selection</span><br />></span><span class="hljs-tag"></<span class="hljs-name">k-table</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
63
|
<k-table
|
|
64
64
|
id="recordSelectionExample"
|
|
65
|
-
enable-selection
|
|
65
|
+
enable-selection
|
|
66
66
|
></k-table>
|
|
67
67
|
<script type="module">
|
|
68
68
|
import Table from '../src/components/Table.js';
|