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,70 @@
|
|
|
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>Field Sort and Hide - 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 - Field Sort and Hide</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>This example shows how to use the <code><k-tc-field-sort-hide></code> component to allow users to show or hide fields in the table, and sort fields.</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">"fieldVisibilityExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-field-sort-hide</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/FieldSortHide.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">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
61
|
+
<k-table id="fieldVisibilityExample">
|
|
62
|
+
<k-tc-field-sort-hide slot="top"></k-tc-field-sort-hide>
|
|
63
|
+
</k-table>
|
|
64
|
+
<script type="module" src="../src/components/tableControls/FieldSortHide.js"></script>
|
|
65
|
+
<script type="module">
|
|
66
|
+
document.getElementById('fieldVisibilityExample').setRecords(contacts);
|
|
67
|
+
</script>
|
|
68
68
|
</main>
|
|
69
|
-
<div style="height:
|
|
69
|
+
<div style="height: 33.333vh"></div>
|
|
70
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
71
|
</body>
|
|
71
72
|
</html>
|
|
@@ -3,69 +3,95 @@
|
|
|
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>Pagination - Table - Kempo Docs - A Web Components Solution</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 < 100; 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 - Pagination</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
class="
|
|
56
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
57
|
+
<p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
|
|
58
|
+
<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>
|
|
59
|
+
<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>
|
|
60
|
+
<k-table
|
|
61
|
+
id="paginationExample"
|
|
62
|
+
enable-pages
|
|
63
|
+
page-size="10"
|
|
64
|
+
page-size-options="[5,10,25,50]"
|
|
21
65
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
66
|
+
<div class="d-f full" style="align-items: center;">
|
|
67
|
+
<div>
|
|
68
|
+
<k-tc-first-page></k-tc-first-page>
|
|
69
|
+
<k-tc-prev-page></k-tc-prev-page>
|
|
70
|
+
<k-tc-next-page></k-tc-next-page>
|
|
71
|
+
<k-tc-last-page></k-tc-last-page>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="flex"></div>
|
|
74
|
+
<div>
|
|
75
|
+
<k-tc-page-select></k-tc-page-select>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="flex"></div>
|
|
78
|
+
<div>
|
|
79
|
+
<k-tc-page-size></k-tc-page-size>
|
|
80
|
+
</div>
|
|
28
81
|
</div>
|
|
29
|
-
</
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
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>
|
|
67
|
-
|
|
82
|
+
</k-table>
|
|
83
|
+
<script type="module" src="../src/components/tableControls/FirstPage.js"></script>
|
|
84
|
+
<script type="module" src="../src/components/tableControls/PrevPage.js"></script>
|
|
85
|
+
<script type="module" src="../src/components/tableControls/NextPage.js"></script>
|
|
86
|
+
<script type="module" src="../src/components/tableControls/LastPage.js"></script>
|
|
87
|
+
<script type="module" src="../src/components/tableControls/PageSelect.js"></script>
|
|
88
|
+
<script type="module" src="../src/components/tableControls/PageSize.js"></script>
|
|
89
|
+
<script type="module">
|
|
90
|
+
import Table from '../src/components/Table.js';
|
|
91
|
+
document.getElementById('paginationExample').setRecords(contacts);
|
|
92
|
+
</script>
|
|
68
93
|
</main>
|
|
69
|
-
<div style="height:
|
|
94
|
+
<div style="height: 33.333vh"></div>
|
|
95
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
96
|
</body>
|
|
71
97
|
</html>
|
|
@@ -3,69 +3,139 @@
|
|
|
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>Record Editing - Table - Kempo Docs - A Web Components Solution</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 - Record Editing</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<
|
|
56
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
18
57
|
|
|
19
|
-
<
|
|
20
|
-
|
|
58
|
+
<p>The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.</p>
|
|
59
|
+
<p>You can also define a custom editor by adding a generator function to the <code>Table.editors</code> object that will generate an input (or select). This will be global to all tables on the page.</p>
|
|
60
|
+
<p>You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.</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">"recordEditingExample"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-edit</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/Edit.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 /> Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> {<br /> <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br /> $input.value = v;<br /> $input.addEventListener(<span class="hljs-string">'change'</span>, () => {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br /> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br /> } <span class="hljs-keyword">else</span> {<br /> $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br /> }<br /> });<br /> <span class="hljs-keyword">return</span> $input;<br /> };<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</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">"email"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</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 /> <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</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 /> <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</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-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>,<br /> <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> {<br /> <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br /> $select.innerHTML = <span class="hljs-string">`<br /> <option value="m">Male</option><br /> <option value="f">Female</option><br /> `</span>;<br /> $select.value = v;<br /> <span class="hljs-keyword">return</span> $select;<br /> }<br /> }<br /> ]<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
62
|
+
<k-table
|
|
63
|
+
id="recordEditingExample"
|
|
21
64
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
<k-tc-edit slot="after"></k-tc-edit>
|
|
66
|
+
</k-table>
|
|
67
|
+
<script type="module" src="../src/components/tableControls/Edit.js"></script>
|
|
68
|
+
<script type="module">
|
|
69
|
+
import Table from '../src/components/Table.js';
|
|
70
|
+
Table.editors.tel = (v) => {
|
|
71
|
+
const $input = document.createElement("input");
|
|
72
|
+
$input.value = v;
|
|
73
|
+
$input.addEventListener('change', () => {
|
|
74
|
+
$input.value = $input.value.replace(/\D/g, ''); // Remove all non-digit characters
|
|
75
|
+
if ($input.value.length === 7) {
|
|
76
|
+
$input.value = $input.value.replace(/(\d{3})(\d{4})/, '$1-$2');
|
|
77
|
+
} else if ($input.value.length === 10) {
|
|
78
|
+
$input.value = $input.value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
79
|
+
} else {
|
|
80
|
+
$input.value = v; // Reset to default value if not 7 or 10 digits
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
return $input;
|
|
84
|
+
};
|
|
85
|
+
document.getElementById('recordEditingExample').setData({
|
|
86
|
+
records: contacts,
|
|
87
|
+
fields: [
|
|
88
|
+
{
|
|
89
|
+
name: "name",
|
|
90
|
+
label: "Name"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
name: "email",
|
|
94
|
+
label: "Email"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: "birthday",
|
|
98
|
+
label: "Birthday",
|
|
99
|
+
type: "date",
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: "phoneNumber",
|
|
103
|
+
label: "Phone Number",
|
|
104
|
+
type: "tel"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: "age",
|
|
108
|
+
label: "Age",
|
|
109
|
+
calculator: (record) => {
|
|
110
|
+
const today = new Date();
|
|
111
|
+
const birthDate = new Date(record.birthday);
|
|
112
|
+
let age = today.getFullYear() - birthDate.getFullYear();
|
|
113
|
+
const monthDifference = today.getMonth() - birthDate.getMonth();
|
|
114
|
+
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
|
|
115
|
+
age--;
|
|
116
|
+
}
|
|
117
|
+
return age;
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
name: "gender",
|
|
122
|
+
label: "Gender",
|
|
123
|
+
formatter: (v) => v === "m" ? "Male" : "Female",
|
|
124
|
+
editor: (v) => {
|
|
125
|
+
const $select = document.createElement("select");
|
|
126
|
+
$select.innerHTML = `
|
|
127
|
+
<option value="m">Male</option>
|
|
128
|
+
<option value="f">Female</option>
|
|
129
|
+
`;
|
|
130
|
+
$select.value = v;
|
|
131
|
+
return $select;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
});
|
|
136
|
+
</script>
|
|
68
137
|
</main>
|
|
69
|
-
<div style="height:
|
|
138
|
+
<div style="height: 33.333vh"></div>
|
|
139
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
140
|
</body>
|
|
71
141
|
</html>
|