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,7 +3,7 @@
|
|
|
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>SideMenu - Components - 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" />
|
|
@@ -13,59 +13,143 @@
|
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
15
|
<k-import src="../nav.inc.html"></k-import>
|
|
16
|
+
<h1 class="ta-center">SideMenu</h1>
|
|
16
17
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
18
|
+
<details class="b r mb">
|
|
22
19
|
<summary class="p">Table of Contents</summary>
|
|
23
20
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
21
|
+
<h6>Examples</h6>
|
|
25
22
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
23
|
+
<a href="#closing">Closing</a><br />
|
|
24
|
+
<a href="#rightSideMenu">Right Side Menu</a><br />
|
|
25
|
+
|
|
26
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<a href="#constructor">Constructor</a><br />
|
|
28
|
+
<a href="#requirements">Requirements</a><br />
|
|
29
|
+
<a href="#properties">Properties</a><br />
|
|
30
|
+
<a href="#events">Events</a><br />
|
|
31
|
+
<a href="#methods">Methods</a><br />
|
|
28
32
|
</div>
|
|
29
33
|
</details>
|
|
30
34
|
|
|
31
|
-
<h3>Description</h3>
|
|
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
35
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
36
|
+
<p>Side Menus are closed by default, to open them call the <code>open()</code> method.</p>
|
|
37
|
+
<div class="row -mx">
|
|
38
|
+
<div class="col m-span-12 px">
|
|
39
|
+
<k-card label="HTML">
|
|
40
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Side Menu 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-side-menu</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm1"</span>></span>Open Side Menu 1<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm1'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=>{<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm1'</span>).open();<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
41
|
+
</k-card>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col m-span-12 px">
|
|
44
|
+
<k-card label="Output">
|
|
45
|
+
<k-side-menu id="sm1">
|
|
46
|
+
<p>Side Menu 1</p>
|
|
47
|
+
</k-side-menu>
|
|
48
|
+
<button id="open-sm1">Open Side Menu 1</button>
|
|
49
|
+
<script>
|
|
50
|
+
document.getElementById('open-sm1').addEventListener('click',()=>{
|
|
51
|
+
document.getElementById('sm1').open();
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
</k-card>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
37
57
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
58
|
+
<h3 id="closing"><a href="#closing" class="no-link">Closing</a></h3>
|
|
59
|
+
<p>By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the <code>overlay-close="false"</code> attribute/value to disable this.</p>
|
|
60
|
+
<p>Use the <code>close()</code> method to close the Side Menu, alternately you can use the <code>toggle()</code> method which can be used to open or close the Side Menu.</p>
|
|
61
|
+
<div class="row -mx">
|
|
62
|
+
<div class="col m-span-12 px">
|
|
63
|
+
<k-card label="HTML">
|
|
64
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm2"</span> <span class="hljs-attr">overlay-close</span>=<span class="hljs-string">"false"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Side Menu 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"close-sm2"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-side-menu</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm2"</span>></span>Open Side Menu 2<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-keyword">const</span> $sm2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm2'</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=>{<br /> $sm2.open();<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'close-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=>{<br /> $sm2.close();<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
65
|
+
</k-card>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col m-span-12 px">
|
|
68
|
+
<k-card label="Output">
|
|
69
|
+
<k-side-menu id="sm2" overlay-close="false">
|
|
70
|
+
<p>Side Menu 2</p>
|
|
71
|
+
<button id="close-sm2">Close</button>
|
|
72
|
+
</k-side-menu>
|
|
73
|
+
<button id="open-sm2">Open Side Menu 2</button>
|
|
74
|
+
<script>
|
|
75
|
+
const $sm2 = document.getElementById('sm2');
|
|
76
|
+
document.getElementById('open-sm2').addEventListener('click',()=>{
|
|
77
|
+
$sm2.open();
|
|
78
|
+
});
|
|
79
|
+
document.getElementById('close-sm2').addEventListener('click',()=>{
|
|
80
|
+
$sm2.close();
|
|
81
|
+
});
|
|
82
|
+
</script>
|
|
83
|
+
</k-card>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
46
86
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
87
|
+
<h3 id="rightSideMenu"><a href="#rightSideMenu" class="no-link">Right Side Menu</a></h3>
|
|
88
|
+
<p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
|
|
89
|
+
<div class="row -mx">
|
|
90
|
+
<div class="col m-span-12 px">
|
|
91
|
+
<k-card label="HTML">
|
|
92
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm3"</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Side Menu 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-side-menu</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm3"</span>></span>Open Side Menu 3<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm3'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=>{<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm3'</span>).open();<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
93
|
+
</k-card>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="col m-span-12 px">
|
|
96
|
+
<k-card label="Output">
|
|
97
|
+
<k-side-menu id="sm3" side="right">
|
|
98
|
+
<p>Side Menu 3</p>
|
|
99
|
+
</k-side-menu>
|
|
100
|
+
<button id="open-sm3">Open Side Menu 3</button>
|
|
101
|
+
<script>
|
|
102
|
+
document.getElementById('open-sm3').addEventListener('click',()=>{
|
|
103
|
+
document.getElementById('sm3').open();
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
106
|
+
</k-card>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
111
|
+
|
|
112
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
113
|
+
<h6>Extends <a href="./shadowcomponent.html">ShadowComponent</a></h6>
|
|
114
|
+
<h5>
|
|
115
|
+
<code>new SideMenu()</code>
|
|
116
|
+
</h5>
|
|
117
|
+
|
|
118
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
119
|
<ul>
|
|
50
|
-
<li><
|
|
120
|
+
<li><a href="./shadowcomponent.html">ShadowComponent</a></li>
|
|
121
|
+
<li><a href="./focuscapture.html">FocusCapture</a></li>
|
|
51
122
|
</ul>
|
|
52
123
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
<
|
|
124
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
125
|
+
<h5><code>opened<i>: boolean</i></code></h5>
|
|
126
|
+
<p>Whether the side menu is opened. Defaults to <code>false</code>. Syncs to <code>opened</code> attribute.</p>
|
|
127
|
+
<h5><code>overlayClose<i>: boolean</i></code></h5>
|
|
128
|
+
<p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
|
|
129
|
+
<h5><code>side<i>: string</i></code></h5>
|
|
130
|
+
<p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
|
|
60
131
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
132
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
133
|
+
<h5><code>open</code></h5>
|
|
134
|
+
<p>Dispatched when the side menu is opened.</p>
|
|
135
|
+
<h5><code>close</code></h5>
|
|
136
|
+
<p>Dispatched when the side menu is closed.</p>
|
|
137
|
+
<h5><code>change</code></h5>
|
|
138
|
+
<p>Dispatched when the side menu state changes. Event detail contains "open" or "close".</p>
|
|
139
|
+
<h5><code>toggle</code></h5>
|
|
140
|
+
<p>Dispatched when the toggle method is called.</p>
|
|
63
141
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
142
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
143
|
+
<h5><code>open()<i>: void</i></code></h5>
|
|
144
|
+
<p>Opens the side menu.</p>
|
|
145
|
+
<h5><code>close()<i>: void</i></code></h5>
|
|
146
|
+
<p>Closes the side menu.</p>
|
|
147
|
+
<h5><code>toggle()<i>: void</i></code></h5>
|
|
148
|
+
<p>Toggles the side menu open or closed and dispatches a toggle event.</p>
|
|
67
149
|
|
|
68
150
|
</main>
|
|
69
151
|
<div style="height:33vh"></div>
|
|
152
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
153
|
+
<script type="module" src="../src/components/SideMenu.js"></script>
|
|
70
154
|
</body>
|
|
71
|
-
</html>
|
|
155
|
+
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,118 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Sortable</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
|
|
22
|
+
<a href="#sortEvent">Sort Event</a><br />
|
|
23
|
+
|
|
24
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
25
|
+
<a href="#constructor">Constructor</a><br />
|
|
26
|
+
<a href="#requirements">Requirements</a><br />
|
|
27
|
+
<a href="#properties">Properties</a><br />
|
|
28
|
+
<a href="#methods">Methods</a><br />
|
|
29
|
+
<a href="#events">Events</a><br />
|
|
28
30
|
</div>
|
|
29
31
|
</details>
|
|
30
32
|
|
|
31
|
-
<h3>Description</h3>
|
|
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
33
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
34
|
+
<p>The <code>k-sortable</code> component allows users to reorder items by dragging them. Wrap your items in a <code>k-sortable</code> container and use <code>k-sortable-item</code> for each item. Each item automatically gets a drag handle.</p>
|
|
35
|
+
<div class="row -mx">
|
|
36
|
+
<div class="col m-span-12 px">
|
|
37
|
+
<k-card label="HTML">
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span></code></pre>
|
|
39
|
+
</k-card>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="col m-span-12 px">
|
|
42
|
+
<k-card label="Output">
|
|
43
|
+
<p class="mb"><em>Drag items by their handle to reorder them.</em></p>
|
|
44
|
+
<k-sortable>
|
|
45
|
+
<k-sortable-item>Item 1</k-sortable-item>
|
|
46
|
+
<k-sortable-item>Item 2</k-sortable-item>
|
|
47
|
+
<k-sortable-item>Item 3</k-sortable-item>
|
|
48
|
+
<k-sortable-item>Item 4</k-sortable-item>
|
|
49
|
+
</k-sortable>
|
|
50
|
+
</k-card>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<h3 id="sortEvent"><a href="#sortEvent" class="no-link">Sort Event</a></h3>
|
|
55
|
+
<p>Listen to the <code>sort</code> event on the <code>k-sortable</code> container to be notified when items are reordered.</p>
|
|
56
|
+
<div class="row -mx">
|
|
57
|
+
<div class="col m-span-12 px">
|
|
58
|
+
<k-card label="HTML">
|
|
59
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortableExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Apple<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Banana<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Cherry<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Date<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortOutput"</span>></span>Reorder items to see the event fire<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).addEventListener(<span class="hljs-string">'sort'</span>, () => {<br /> <span class="hljs-keyword">const</span> items = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).children)<br /> .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.textContent);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortOutput'</span>).textContent = <span class="hljs-string">`Order: <span class="hljs-subst">${items.join(<span class="hljs-string">', '</span>)}</span>`</span>;<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
60
|
+
</k-card>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="col m-span-12 px">
|
|
63
|
+
<k-card label="Output">
|
|
64
|
+
<k-sortable id="sortableExample">
|
|
65
|
+
<k-sortable-item>Apple</k-sortable-item>
|
|
66
|
+
<k-sortable-item>Banana</k-sortable-item>
|
|
67
|
+
<k-sortable-item>Cherry</k-sortable-item>
|
|
68
|
+
<k-sortable-item>Date</k-sortable-item>
|
|
69
|
+
</k-sortable>
|
|
70
|
+
<p id="sortOutput" class="mt">Reorder items to see the event fire</p>
|
|
71
|
+
<script>
|
|
72
|
+
document.getElementById('sortableExample').addEventListener('sort', () => {
|
|
73
|
+
const items = Array.from(document.getElementById('sortableExample').children)
|
|
74
|
+
.map(item => item.textContent);
|
|
75
|
+
document.getElementById('sortOutput').textContent = `Order: ${items.join(', ')}`;
|
|
76
|
+
});
|
|
77
|
+
</script>
|
|
78
|
+
</k-card>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
37
81
|
|
|
38
|
-
<
|
|
82
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
83
|
+
|
|
84
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
39
85
|
|
|
40
|
-
<h5><code>
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
86
|
+
<h5><code>new Sortable()</code></h5>
|
|
87
|
+
<h6>Extends LitElement</h6>
|
|
88
|
+
<p>The container component that manages sortable items.</p>
|
|
46
89
|
|
|
47
|
-
<h5><code>
|
|
48
|
-
<
|
|
90
|
+
<h5><code>new SortableItem()</code></h5>
|
|
91
|
+
<h6>Extends LitElement</h6>
|
|
92
|
+
<p>An individual sortable item with a drag handle.</p>
|
|
93
|
+
|
|
94
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
95
|
<ul>
|
|
50
|
-
<li
|
|
96
|
+
<li>Lit</li>
|
|
97
|
+
<li><a href="../utils/drag.html">drag</a> utility</li>
|
|
98
|
+
<li><a href="icon.html">Icon</a> component</li>
|
|
51
99
|
</ul>
|
|
52
100
|
|
|
53
|
-
<h3 id="
|
|
101
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
54
102
|
|
|
55
|
-
<h4>
|
|
56
|
-
<
|
|
103
|
+
<h4>Sortable</h4>
|
|
104
|
+
<p>The Sortable container has no public properties.</p>
|
|
105
|
+
|
|
106
|
+
<h4>SortableItem</h4>
|
|
107
|
+
<h5><code>sorting<i>: boolean</i></code></h5>
|
|
108
|
+
<p>A boolean indicating if the item is currently being dragged. This property is reflected as an attribute and automatically set by the drag handlers. When <code>true</code>, the item has reduced opacity.</p>
|
|
57
109
|
|
|
58
|
-
<
|
|
59
|
-
|
|
110
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
111
|
+
|
|
112
|
+
<h4>Sortable</h4>
|
|
113
|
+
<h5><code>getCursorElement()<i>: [Element, string] | null</i></code></h5>
|
|
114
|
+
<p>Returns the element and position ('before' or 'after') where the dragged item should be inserted based on the current cursor position. Returns <code>null</code> if no valid target is found.</p>
|
|
60
115
|
|
|
61
|
-
<h4>
|
|
62
|
-
<
|
|
116
|
+
<h4>SortableItem</h4>
|
|
117
|
+
<h5><code>sortable<i>: Sortable</i></code></h5>
|
|
118
|
+
<p>A getter that returns the parent <code>k-sortable</code> element using <code>closest('k-sortable')</code>.</p>
|
|
63
119
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
120
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
121
|
+
<h5><code>sort</code></h5>
|
|
122
|
+
<p>Dispatched by the <code>k-sortable</code> container when an item is dropped in a new position. The event bubbles. Use this event to save the new order or update your application state.</p>
|
|
67
123
|
|
|
68
124
|
</main>
|
|
69
125
|
<div style="height:33vh"></div>
|
|
126
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
127
|
+
<script type="module" src="../src/components/Sortable.js"></script>
|
|
70
128
|
</body>
|
|
71
129
|
</html>
|