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,69 +3,72 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Top and Bottom Controls - Table - Kempo Docs</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
11
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.contacts = [];
|
|
16
|
+
function generateContact(){
|
|
17
|
+
const maleNames = [
|
|
18
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
19
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
20
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
21
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
22
|
+
"Wyatt", "Matthew"
|
|
23
|
+
];
|
|
24
|
+
const femaleNames = [
|
|
25
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
26
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
27
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
28
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
29
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
30
|
+
];
|
|
31
|
+
const lastNames = [
|
|
32
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
33
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
34
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
35
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
36
|
+
"Ramirez", "Lewis", "Robinson"
|
|
37
|
+
];
|
|
38
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
39
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
40
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
41
|
+
const name = `${firstName} ${lastName}`;
|
|
42
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
43
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
44
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
45
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
46
|
+
}
|
|
47
|
+
for (let i = 0; i < 10; i++) {
|
|
48
|
+
contacts.push(generateContact());
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
13
51
|
</head>
|
|
14
52
|
<body>
|
|
15
53
|
<k-import src="../nav.inc.html"></k-import>
|
|
54
|
+
<h1 class="ta-center">Table - Top and Bottom Controls</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
22
|
-
<summary class="p">Table of Contents</summary>
|
|
23
|
-
<div class="m mt0 pl">
|
|
24
|
-
<h6>Usage</h6>
|
|
25
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#functions">Functions</a><br />
|
|
27
|
-
<a href="#examples">Examples</a><br />
|
|
28
|
-
</div>
|
|
29
|
-
</details>
|
|
30
56
|
|
|
31
|
-
<
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
|
-
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the window size watching functions:</p>
|
|
36
|
-
<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-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
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>
|
|
46
|
-
|
|
47
|
-
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
49
|
-
<ul>
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
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>
|
|
57
|
-
|
|
58
|
-
<h4>Multiple Handlers</h4>
|
|
59
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
-
|
|
61
|
-
<h4>Breakpoint Detection</h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
63
|
-
|
|
64
|
-
<h4>Performance Benefits</h4>
|
|
65
|
-
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
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>
|
|
57
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
67
58
|
|
|
59
|
+
<p>The table component supports controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent <code>k-table</code> by accessing its methods and listening for its events.</p>
|
|
60
|
+
<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">"topBottomControlsExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-export-json</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-export-csv</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-export-csv</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/ExportJson.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/ExportCsv.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">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
61
|
+
<k-table id="topBottomControlsExample">
|
|
62
|
+
<k-tc-export-json slot="top"></k-tc-export-json>
|
|
63
|
+
<k-tc-export-csv></k-tc-export-csv>
|
|
64
|
+
</k-table>
|
|
65
|
+
<script type="module" src="../src/components/tableControls/ExportJson.js"></script>
|
|
66
|
+
<script type="module" src="../src/components/tableControls/ExportCsv.js"></script>
|
|
67
|
+
<script type="module">
|
|
68
|
+
document.getElementById('topBottomControlsExample').setRecords(contacts);
|
|
69
|
+
</script>
|
|
68
70
|
</main>
|
|
69
|
-
<div style="height:
|
|
71
|
+
<div style="height: 33.333vh"></div>
|
|
72
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
73
|
</body>
|
|
71
74
|
</html>
|
|
@@ -3,69 +3,108 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Custom Fields - Table - Kempo Docs</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
11
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.contacts = [];
|
|
16
|
+
function generateContact(){
|
|
17
|
+
const maleNames = [
|
|
18
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
19
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
20
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
21
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
22
|
+
"Wyatt", "Matthew"
|
|
23
|
+
];
|
|
24
|
+
const femaleNames = [
|
|
25
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
26
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
27
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
28
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
29
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
30
|
+
];
|
|
31
|
+
const lastNames = [
|
|
32
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
33
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
34
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
35
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
36
|
+
"Ramirez", "Lewis", "Robinson"
|
|
37
|
+
];
|
|
38
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
39
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
40
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
41
|
+
const name = `${firstName} ${lastName}`;
|
|
42
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
43
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
44
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
45
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
46
|
+
}
|
|
47
|
+
for (let i = 0; i < 10; i++) {
|
|
48
|
+
contacts.push(generateContact());
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
13
51
|
</head>
|
|
14
52
|
<body>
|
|
15
53
|
<k-import src="../nav.inc.html"></k-import>
|
|
54
|
+
<h1 class="ta-center">Table - Custom Fields</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
22
|
-
<summary class="p">Table of Contents</summary>
|
|
23
|
-
<div class="m mt0 pl">
|
|
24
|
-
<h6>Usage</h6>
|
|
25
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#functions">Functions</a><br />
|
|
27
|
-
<a href="#examples">Examples</a><br />
|
|
28
|
-
</div>
|
|
29
|
-
</details>
|
|
30
56
|
|
|
31
|
-
<
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
|
-
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the window size watching functions:</p>
|
|
36
|
-
<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-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
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>
|
|
46
|
-
|
|
47
|
-
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
49
|
-
<ul>
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
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>
|
|
57
|
-
|
|
58
|
-
<h4>Multiple Handlers</h4>
|
|
59
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
-
|
|
61
|
-
<h4>Breakpoint Detection</h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
63
|
-
|
|
64
|
-
<h4>Performance Benefits</h4>
|
|
65
|
-
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
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>
|
|
57
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
67
58
|
|
|
59
|
+
<p>Use the <code>fields</code> property of the options object in <code>setData</code> to define custom fields. This is useful for hiding fields, reordering fields, changing the labels, formatting the output, or creating a calculated field.</p>
|
|
60
|
+
<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">"customFieldsExample"</span>></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-built_in">document</span>.getElementById(<span class="hljs-string">'customFieldsExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">fields</span>: [<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'phoneNumber'</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">'Phone Number'</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'email'</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">'Email Address'</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'birthday'</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">'Birthday'</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'age'</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">'Age'</span>,<br /> <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =></span> {<br /> <span class="hljs-comment">// record.birthday is a string in the format "YYYY-MM-DD"</span><br /> <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br /> <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br /> <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br /> <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br /> <span class="hljs-keyword">if</span> (monthDifference < <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> && today.getDate() < birthDate.getDate())) {<br /> age--;<br /> }<br /> <span class="hljs-keyword">return</span> age;<br /> }<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'gender'</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">'Gender'</span>,<br /> <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> v===<span class="hljs-string">'m'</span>?<span class="hljs-string">'Male'</span>:<span class="hljs-string">'Female'</span> <span class="hljs-comment">// original value is "m" or "f"</span><br /> }<br /> ]<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
61
|
+
<k-table id="customFieldsExample"></k-table>
|
|
62
|
+
<script type="module">
|
|
63
|
+
document.getElementById('customFieldsExample').setData({
|
|
64
|
+
records: contacts,
|
|
65
|
+
fields: [
|
|
66
|
+
{
|
|
67
|
+
name: "name",
|
|
68
|
+
label: "Name",
|
|
69
|
+
size: 300
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: 'phoneNumber',
|
|
73
|
+
label: 'Phone Number'
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: 'email',
|
|
77
|
+
label: 'Email Address'
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
name: 'birthday',
|
|
81
|
+
label: 'Birthday'
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
name: 'age',
|
|
85
|
+
label: 'Age',
|
|
86
|
+
calculator: (record) => {
|
|
87
|
+
// record.birthday is a string in the format "YYYY-MM-DD"
|
|
88
|
+
const today = new Date();
|
|
89
|
+
const birthDate = new Date(record.birthday);
|
|
90
|
+
let age = today.getFullYear() - birthDate.getFullYear();
|
|
91
|
+
const monthDifference = today.getMonth() - birthDate.getMonth();
|
|
92
|
+
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
|
|
93
|
+
age--;
|
|
94
|
+
}
|
|
95
|
+
return age;
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'gender',
|
|
100
|
+
label: 'Gender',
|
|
101
|
+
formatter: (v) => v==='m'?'Male':'Female' // original value is "m" or "f"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
68
106
|
</main>
|
|
69
|
-
<div style="height:
|
|
107
|
+
<div style="height: 33.333vh"></div>
|
|
108
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
109
|
</body>
|
|
71
110
|
</html>
|
|
@@ -3,69 +3,109 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Table - Fetch Records - Kempo Docs</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
11
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.contacts = [];
|
|
16
|
+
function generateContact(){
|
|
17
|
+
const maleNames = [
|
|
18
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
19
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
20
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
21
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
22
|
+
"Wyatt", "Matthew"
|
|
23
|
+
];
|
|
24
|
+
const femaleNames = [
|
|
25
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
26
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
27
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
28
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
29
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
30
|
+
];
|
|
31
|
+
const lastNames = [
|
|
32
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
33
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
34
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
35
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
36
|
+
"Ramirez", "Lewis", "Robinson"
|
|
37
|
+
];
|
|
38
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
39
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
40
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
41
|
+
const name = `${firstName} ${lastName}`;
|
|
42
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
43
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
44
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
45
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
46
|
+
}
|
|
47
|
+
for (let i = 0; i < 10; i++) {
|
|
48
|
+
contacts.push(generateContact());
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
13
51
|
</head>
|
|
14
52
|
<body>
|
|
15
53
|
<k-import src="../nav.inc.html"></k-import>
|
|
54
|
+
<h1 class="ta-center">Table - Fetch Records</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
56
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
57
|
+
|
|
58
|
+
<p>The <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
|
|
59
|
+
<p>In this example, the <code>simulateFetchRecords</code> function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.
|
|
60
|
+
</p>
|
|
61
|
+
<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">"fetchRecordsExample"</span><br /> <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br /> <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</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><span class="javascript"><br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/FirstPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PrevPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/NextPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/LastPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSelect.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSize.js'</span>;<br /><br /> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {<br /> <span class="hljs-keyword">const</span> newRecords = [];<br /> <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i<count; i++){<br /> newRecords.push(generateContact());<br /> }<br /> setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=></span>res(newRecords), <span class="hljs-number">1000</span>);<br /> });<br /> }<br /><br /> <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br /> <br /> $table.setRecords(contacts);<br /> $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
62
|
+
<k-table
|
|
63
|
+
id="fetchRecordsExample"
|
|
64
|
+
enable-pages="true"
|
|
65
|
+
page-size="10"
|
|
21
66
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
67
|
+
<div class="d-f full">
|
|
68
|
+
<div>
|
|
69
|
+
<k-tc-first-page></k-tc-first-page>
|
|
70
|
+
<k-tc-prev-page></k-tc-prev-page>
|
|
71
|
+
<k-tc-next-page></k-tc-next-page>
|
|
72
|
+
<k-tc-last-page></k-tc-last-page>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="flex"></div>
|
|
75
|
+
<div>
|
|
76
|
+
<k-tc-page-select></k-tc-page-select>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="flex"></div>
|
|
79
|
+
<div>
|
|
80
|
+
<k-tc-page-size></k-tc-page-size>
|
|
81
|
+
</div>
|
|
28
82
|
</div>
|
|
29
|
-
</
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
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>
|
|
46
|
-
|
|
47
|
-
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
49
|
-
<ul>
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
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>
|
|
57
|
-
|
|
58
|
-
<h4>Multiple Handlers</h4>
|
|
59
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
-
|
|
61
|
-
<h4>Breakpoint Detection</h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
83
|
+
</k-table>
|
|
84
|
+
<script type="module">
|
|
85
|
+
import '../src/components/tableControls/FirstPage.js';
|
|
86
|
+
import '../src/components/tableControls/PrevPage.js';
|
|
87
|
+
import '../src/components/tableControls/NextPage.js';
|
|
88
|
+
import '../src/components/tableControls/LastPage.js';
|
|
89
|
+
import '../src/components/tableControls/PageSelect.js';
|
|
90
|
+
import '../src/components/tableControls/PageSize.js';
|
|
63
91
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
92
|
+
function simulateFetchRecords(start, count){
|
|
93
|
+
return new Promise(res => {
|
|
94
|
+
const newRecords = [];
|
|
95
|
+
for(let i=0; i<count; i++){
|
|
96
|
+
newRecords.push(generateContact());
|
|
97
|
+
}
|
|
98
|
+
setTimeout(()=>res(newRecords), 1000);
|
|
99
|
+
});
|
|
100
|
+
}
|
|
67
101
|
|
|
102
|
+
const $table = document.getElementById('fetchRecordsExample');
|
|
103
|
+
|
|
104
|
+
$table.setRecords(contacts);
|
|
105
|
+
$table.setupFetchRecords(100, simulateFetchRecords);
|
|
106
|
+
</script>
|
|
68
107
|
</main>
|
|
69
|
-
<div style="height:
|
|
108
|
+
<div style="height: 33.333vh"></div>
|
|
109
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
110
|
</body>
|
|
71
111
|
</html>
|