kempo 2.9.2 → 2.10.0
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/dist/components/Accordion.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/DirectoryViewer.js +1 -1
- package/dist/components/FocusCapture.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Search.js +1 -1
- package/dist/components/Table.js +1 -1
- package/dist/components/Timestamp.js +1 -1
- package/dist/components/Toggle.js +1 -1
- package/dist/components/tableControls/DeleteSelected.js +1 -1
- package/dist/components/tableControls/Edit.js +1 -0
- package/dist/components/tableControls/Filters.js +1 -0
- package/dist/components/tableControls/HiddenCount.js +1 -0
- package/dist/components/tableControls/Hide.js +1 -0
- package/dist/components/tableControls/PageSelect.js +1 -1
- package/dist/components/tableControls/PageSize.js +1 -1
- package/dist/components/tableControls/ShowAll.js +1 -0
- package/dist/index.js +1 -1
- package/dist/kempo-styles.css +1 -1
- package/dist/kempo-vars.css +1 -1
- package/dist/utils/formatTimestamp.js +1 -1
- package/docs/components/_template.html +9 -0
- package/docs/components/accordion.html +52 -12
- package/docs/components/card.html +68 -8
- package/docs/components/component.html +6 -0
- package/docs/components/content-slider.html +8 -0
- package/docs/components/dialog.html +145 -5
- package/docs/components/directory-viewer.html +51 -40
- package/docs/components/focus-capture.html +68 -0
- package/docs/components/icon.html +76 -5
- package/docs/components/import.html +47 -0
- package/docs/components/lazy-component.html +45 -15
- package/docs/components/reactive-component.html +69 -0
- package/docs/components/reactive-lazy-component.html +69 -0
- package/docs/components/resize.html +52 -3
- package/docs/components/search.html +102 -0
- package/docs/components/show-more.html +54 -5
- package/docs/components/{sidemenu.html → side-menu.html} +56 -3
- package/docs/components/split.html +57 -16
- package/docs/components/table.html +90 -189
- package/docs/components/tableControls.html +91 -0
- package/docs/components/tableCustomFields.html +112 -0
- package/docs/components/tablePagination.html +92 -0
- package/docs/components/tableRecordEditing.html +144 -0
- package/docs/components/tableRecordFiltering.html +82 -0
- package/docs/components/tableRecordHiding.html +84 -0
- package/docs/components/tableRecordSelection.html +86 -0
- package/docs/components/tableRowControls.html +103 -0
- package/docs/components/tabs.html +72 -4
- package/docs/components/tags.html +94 -0
- package/docs/components/theme-switcher.html +74 -0
- package/docs/components/timestamp.html +86 -0
- package/docs/components/toggle.html +37 -34
- package/docs/icons/check.svg +1 -0
- package/docs/icons/hide.svg +1 -0
- package/docs/icons/show.svg +1 -0
- package/docs/index.html +5 -0
- package/docs/kempo/components/Accordion.js +1 -1
- package/docs/kempo/components/Dialog.js +1 -1
- package/docs/kempo/components/DirectoryViewer.js +1 -1
- package/docs/kempo/components/FocusCapture.js +1 -1
- package/docs/kempo/components/Icon.js +1 -1
- package/docs/kempo/components/Search.js +1 -1
- package/docs/kempo/components/Table.js +1 -1
- package/docs/kempo/components/Timestamp.js +1 -1
- package/docs/kempo/components/Toggle.js +1 -1
- package/docs/kempo/components/tableControls/DeleteSelected.js +1 -1
- package/docs/kempo/components/tableControls/Edit.js +1 -0
- package/docs/kempo/components/tableControls/Filters.js +1 -0
- package/docs/kempo/components/tableControls/HiddenCount.js +1 -0
- package/docs/kempo/components/tableControls/Hide.js +1 -0
- package/docs/kempo/components/tableControls/PageSelect.js +1 -1
- package/docs/kempo/components/tableControls/PageSize.js +1 -1
- package/docs/kempo/components/tableControls/ShowAll.js +1 -0
- package/docs/kempo/index.js +1 -1
- package/docs/kempo/kempo-styles.css +1 -1
- package/docs/kempo/kempo-vars.css +1 -1
- package/docs/kempo/utils/formatTimestamp.js +1 -1
- package/docs/nav-1.inc.html +16 -2
- package/docs/nav.inc.html +10 -2
- package/docs/search.json +281 -23
- package/docs/styles/_template.html +6 -0
- package/docs/styles/borders-spacing.html +6 -0
- package/docs/styles/buttons.html +6 -0
- package/docs/styles/colors.html +6 -0
- package/docs/styles/displays-layouts.html +6 -0
- package/docs/styles/embed-1.html +6 -0
- package/docs/styles/inputs.html +6 -0
- package/docs/styles/tables.html +6 -0
- package/docs/styles/typography.html +6 -0
- package/docs/{components/stacks.html → utils/_template.html} +11 -30
- package/docs/utils/cli.html +84 -0
- package/docs/utils/cookie.html +87 -0
- package/docs/utils/debounce.html +61 -0
- package/docs/utils/drag.html +85 -0
- package/docs/utils/element.html +124 -0
- package/docs/utils/format-timestamp.html +64 -0
- package/docs/utils/fuzzy-match.html +60 -0
- package/icons/check.svg +1 -0
- package/icons/hide.svg +1 -0
- package/icons/show.svg +1 -0
- package/package.json +1 -1
- package/src/components/Accordion.js +0 -1
- package/src/components/Dialog.js +15 -6
- package/src/components/DirectoryViewer.js +21 -92
- package/src/components/FocusCapture.js +2 -1
- package/src/components/Icon.js +3 -1
- package/src/components/Search.js +4 -1
- package/src/components/Table.js +469 -139
- package/src/components/Timestamp.js +7 -4
- package/src/components/Toggle.js +3 -0
- package/src/components/tableControls/DeleteSelected.js +36 -22
- package/src/components/tableControls/Edit.js +88 -0
- package/src/components/tableControls/Filters.js +128 -0
- package/src/components/tableControls/HiddenCount.js +42 -0
- package/src/components/tableControls/Hide.js +43 -0
- package/src/components/tableControls/PageSelect.js +54 -30
- package/src/components/tableControls/PageSize.js +33 -16
- package/src/components/tableControls/ShowAll.js +40 -0
- package/src/kempo-styles.css +7 -0
- package/src/kempo-vars.css +2 -0
- package/src/utils/formatTimestamp.js +26 -10
- package/docs/table.html +0 -0
- package/src/components/Stacks.js +0 -79
- package/src/utils/files.js +0 -15
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Search - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module">
|
|
11
|
+
import Icon from '../kempo/components/Icon.js';
|
|
12
|
+
import Search from '../kempo/components/Search.js';
|
|
13
|
+
Icon.pathToIcons = ['../icons'];
|
|
14
|
+
Search.searchDataUrl = '../search.json';
|
|
15
|
+
</script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
19
|
+
<h1 class="ta-center">Search</h1>
|
|
20
|
+
<main>
|
|
21
|
+
<details class="b r mb">
|
|
22
|
+
<summary class="p">Table of Contents</summary>
|
|
23
|
+
<div class="m mt0 pl">
|
|
24
|
+
<h6>Examples</h6>
|
|
25
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
+
<a href="#updateSearchDataUrl">Update searchDataUrl</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#requirements">Requirements</a><br />
|
|
31
|
+
<a href="#attributes">Attributes</a><br />
|
|
32
|
+
<a href="#properties">Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
<a href="#staticMembers">Static Members</a><br />
|
|
35
|
+
</div>
|
|
36
|
+
</details>
|
|
37
|
+
|
|
38
|
+
<h3>Description</h3>
|
|
39
|
+
<p>The <code>Search</code> component provides a search input field with debounced input handling and search result display.</p>
|
|
40
|
+
|
|
41
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
42
|
+
<pre><code class="html"><k-search></k-search></code></pre>
|
|
43
|
+
<k-search class="mb"></k-search>
|
|
44
|
+
|
|
45
|
+
<br>
|
|
46
|
+
<h3 id="updateSearchDataUrl"><a href="#updateSearchDataUrl" class="no-link">Update searchDataUrl</a></h3>
|
|
47
|
+
<p>You can update the URL from which the search data is fetched by setting the <code>searchDataUrl</code> static member. This should be done in the head of your document before any search components are instatiated.</p>
|
|
48
|
+
<pre><code class="javascript">import Search from '../kempo/components/Search.js';<br/>Search.searchDataUrl = '/custom-search.json';</code></pre>
|
|
49
|
+
|
|
50
|
+
<br>
|
|
51
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
52
|
+
|
|
53
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
54
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
55
|
+
<h5>
|
|
56
|
+
<code>new Search()</code>
|
|
57
|
+
</h5>
|
|
58
|
+
|
|
59
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
60
|
+
<ul>
|
|
61
|
+
<li><a href="../utils/debounce.html">debounce</a></li>
|
|
62
|
+
</ul>
|
|
63
|
+
|
|
64
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
65
|
+
<h5><code>opened: boolean</code></h5>
|
|
66
|
+
<p>Indicates whether the search results are visible.</p>
|
|
67
|
+
|
|
68
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
69
|
+
<h5><code>pages: object</code></h5>
|
|
70
|
+
<p>Contains the search data loaded from <code>/search.json</code>.</p>
|
|
71
|
+
|
|
72
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
73
|
+
<h5><code>render(force: boolean): Promise<boolean></code></h5>
|
|
74
|
+
<p>Renders the component and attaches event listeners to the input field.</p>
|
|
75
|
+
|
|
76
|
+
<h5><code>search(term: string): void</code></h5>
|
|
77
|
+
<p>Performs the search operation and updates the search results.</p>
|
|
78
|
+
|
|
79
|
+
<h3 id="staticMembers"><a href="#staticMembers" class="no-link">Static Members</a></h3>
|
|
80
|
+
<h5><code>Search.searchDataUrl: string</code></h5>
|
|
81
|
+
<p>The URL from which the search data is fetched. Default is <code>/search.json</code>.</p>
|
|
82
|
+
|
|
83
|
+
<h3 id="searchDataFormat"><a href="#searchDataFormat" class="no-link">Search Data Format</a></h3>
|
|
84
|
+
<p>The search data file should be a JSON object where each key is a URL path and the value is an object with the following properties:</p>
|
|
85
|
+
<ul>
|
|
86
|
+
<li><code>name</code>: The name of the page.</li>
|
|
87
|
+
<li><code>terms</code>: An array of terms associated with the page.</li>
|
|
88
|
+
</ul>
|
|
89
|
+
<pre><code class="json">{
|
|
90
|
+
"/components/accordion.html": {
|
|
91
|
+
"name": "Components > Accordion",
|
|
92
|
+
"terms": ["accordion", "collapsible", "toggle", "content", "panel", "header"]
|
|
93
|
+
},
|
|
94
|
+
"/components/component.html": {
|
|
95
|
+
"name": "Components > Component",
|
|
96
|
+
"terms": ["component", "base", "root", "framework", "parent"]
|
|
97
|
+
}
|
|
98
|
+
}</code></pre>
|
|
99
|
+
</main>
|
|
100
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
@@ -3,15 +3,38 @@
|
|
|
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>Show More - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
18
|
<main>
|
|
13
19
|
<h1 class="ta-center">Show More</h1>
|
|
14
|
-
<
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#moreLessButtonText">"More" / "Less" Button Text</a><br />
|
|
26
|
+
<a href="#closedHeight">Closed Height</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#requirements">Requirements</a><br />
|
|
31
|
+
<a href="#attributes">Attributes</a><br />
|
|
32
|
+
<a href="#properties">Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
</div>
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
15
38
|
<div class="row -mx">
|
|
16
39
|
<div class="col m-span-12 px">
|
|
17
40
|
<k-card label="HTML">
|
|
@@ -27,7 +50,7 @@
|
|
|
27
50
|
</div>
|
|
28
51
|
</div>
|
|
29
52
|
|
|
30
|
-
<h3>"More" / "Less" Button Text</h3>
|
|
53
|
+
<h3 id="moreLessButtonText"><a href="#moreLessButtonText" class="no-link">"More" / "Less" Button Text</a></h3>
|
|
31
54
|
<p>Change the text of the show "more" or "less" buttons by creating an element that has a <code>slot</code> attribute of <code>"more"</code> or <code>"less"</code>.</p>
|
|
32
55
|
<div class="row -mx">
|
|
33
56
|
<div class="col m-span-12 px">
|
|
@@ -46,7 +69,7 @@
|
|
|
46
69
|
</div>
|
|
47
70
|
</div>
|
|
48
71
|
|
|
49
|
-
<h3>Closed Height</h3>
|
|
72
|
+
<h3 id="closedHeight"><a href="#closedHeight" class="no-link">Closed Height</a></h3>
|
|
50
73
|
<p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
|
|
51
74
|
<div class="row -mx">
|
|
52
75
|
<div class="col m-span-12 px">
|
|
@@ -64,7 +87,33 @@
|
|
|
64
87
|
</k-card>
|
|
65
88
|
</div>
|
|
66
89
|
</div>
|
|
67
|
-
|
|
90
|
+
|
|
91
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
92
|
+
|
|
93
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
94
|
+
<h6>Extends <a href="./component.html">LazyComponent</a></h6>
|
|
95
|
+
<h5>
|
|
96
|
+
<code>new ShowMore()</code>
|
|
97
|
+
</h5>
|
|
98
|
+
|
|
99
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
100
|
+
<ul>
|
|
101
|
+
<li><a href="./component.html">Component</a></li>
|
|
102
|
+
<li><a href="./lazy-component.html">LazyComponent</a></li>
|
|
103
|
+
</ul>
|
|
104
|
+
|
|
105
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
106
|
+
<h5><code>opened<i>: boolean</i></code></h5>
|
|
107
|
+
<p>Whether the content is expanded.</p>
|
|
108
|
+
|
|
109
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
110
|
+
<h5><code>more()<i>: void</i></code></h5>
|
|
111
|
+
<p>Expands the content.</p>
|
|
112
|
+
<h5><code>less()<i>: void</i></code></h5>
|
|
113
|
+
<p>Collapses the content.</p>
|
|
114
|
+
<h5><code>toggle()<i>: void</i></code></h5>
|
|
115
|
+
<p>Toggles the content between expanded and collapsed states.</p>
|
|
116
|
+
|
|
68
117
|
</main>
|
|
69
118
|
<div style="height:33vh"></div>
|
|
70
119
|
|
|
@@ -6,12 +6,35 @@
|
|
|
6
6
|
<title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
18
|
<h1 class="ta-center">SideMenu</h1>
|
|
13
19
|
<main>
|
|
14
|
-
<
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#closing">Closing</a><br />
|
|
26
|
+
<a href="#rightSideMenu">Right Side Menu</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#requirements">Requirements</a><br />
|
|
31
|
+
<a href="#attributes">Attributes</a><br />
|
|
32
|
+
<a href="#properties">Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
</div>
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
15
38
|
<p>Side Menus are closed by default, to open them call the <code>open()</code> method.</p>
|
|
16
39
|
<div class="row -mx">
|
|
17
40
|
<div class="col m-span-12 px">
|
|
@@ -34,7 +57,7 @@
|
|
|
34
57
|
</div>
|
|
35
58
|
</div>
|
|
36
59
|
|
|
37
|
-
<h3>Closing</h3>
|
|
60
|
+
<h3 id="closing"><a href="#closing" class="no-link">Closing</a></h3>
|
|
38
61
|
<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>
|
|
39
62
|
<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>
|
|
40
63
|
<div class="row -mx">
|
|
@@ -63,7 +86,7 @@
|
|
|
63
86
|
</div>
|
|
64
87
|
</div>
|
|
65
88
|
|
|
66
|
-
<h3>Right Side Menu</h3>
|
|
89
|
+
<h3 id="rightSideMenu"><a href="#rightSideMenu" class="no-link">Right Side Menu</a></h3>
|
|
67
90
|
<p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
|
|
68
91
|
<div class="row -mx">
|
|
69
92
|
<div class="col m-span-12 px">
|
|
@@ -85,6 +108,36 @@
|
|
|
85
108
|
</k-card>
|
|
86
109
|
</div>
|
|
87
110
|
</div>
|
|
111
|
+
|
|
112
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
113
|
+
|
|
114
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
115
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
116
|
+
<h5>
|
|
117
|
+
<code>new SideMenu()</code>
|
|
118
|
+
</h5>
|
|
119
|
+
|
|
120
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
121
|
+
<ul>
|
|
122
|
+
<li><a href="./component.html">Component</a></li>
|
|
123
|
+
</ul>
|
|
124
|
+
|
|
125
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
126
|
+
<h5><code>opened<i>: boolean</i></code></h5>
|
|
127
|
+
<p>Whether the side menu is opened.</p>
|
|
128
|
+
<h5><code>overlayClose<i>: boolean</i></code></h5>
|
|
129
|
+
<p>Whether clicking the overlay closes the side menu.</p>
|
|
130
|
+
<h5><code>side<i>: string</i></code></h5>
|
|
131
|
+
<p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>.</p>
|
|
132
|
+
|
|
133
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
134
|
+
<h5><code>open()<i>: void</i></code></h5>
|
|
135
|
+
<p>Opens the side menu.</p>
|
|
136
|
+
<h5><code>close()<i>: void</i></code></h5>
|
|
137
|
+
<p>Closes the side menu.</p>
|
|
138
|
+
<h5><code>toggle()<i>: void</i></code></h5>
|
|
139
|
+
<p>Toggles the side menu open or closed.</p>
|
|
140
|
+
|
|
88
141
|
</main>
|
|
89
142
|
<div style="height:33vh"></div>
|
|
90
143
|
<script type="module" src="../kempo/components/Import.js"></script>
|
|
@@ -6,28 +6,48 @@
|
|
|
6
6
|
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
18
|
<h1 class="ta-center">Split</h1>
|
|
13
19
|
<main>
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#resizing">Resizing</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#attributes">Attributes</a><br />
|
|
31
|
+
<a href="#properties">Properties</a><br />
|
|
32
|
+
<a href="#methods">Methods</a><br />
|
|
21
33
|
</div>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</div>
|
|
30
|
-
</
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
|
+
<p>Create a split view using the <code>k-split</code> component. Add content to the left pane by placing it inside the component, and add content to the right pane by using the <code>slot="right"</code> attribute.</p>
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>></span>Right Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
39
|
+
<k-split style="height: 10rem" class="b">
|
|
40
|
+
<div>Left Pane Content</div>
|
|
41
|
+
<div slot="right">Right Pane Content</div>
|
|
42
|
+
</k-split>
|
|
43
|
+
|
|
44
|
+
<h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
|
|
45
|
+
<p>The split view can be resized by dragging the divider handle. The initial width of the left pane can be set using the <code>--left_width</code> CSS custom property.</p>
|
|
46
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--left_width: 30%; height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>></span>Right Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
47
|
+
<k-split style="--left_width: 30%; height: 10rem" class="b">
|
|
48
|
+
<div>Left Pane Content</div>
|
|
49
|
+
<div slot="right">Right Pane Content</div>
|
|
50
|
+
</k-split>
|
|
31
51
|
|
|
32
52
|
<h3>Sizes</h3>
|
|
33
53
|
<p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
|
|
@@ -57,6 +77,27 @@
|
|
|
57
77
|
</div>
|
|
58
78
|
</div>
|
|
59
79
|
|
|
80
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
81
|
+
|
|
82
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
83
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
84
|
+
<h5>
|
|
85
|
+
<code>new Split()</code>
|
|
86
|
+
</h5>
|
|
87
|
+
|
|
88
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
89
|
+
<ul>
|
|
90
|
+
<li><a href="./component.html">Component</a></li>
|
|
91
|
+
</ul>
|
|
92
|
+
|
|
93
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
94
|
+
<h5><code>resizing<i>: boolean</i></code></h5>
|
|
95
|
+
<p>Indicates whether the split view is currently being resized.</p>
|
|
96
|
+
|
|
97
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
98
|
+
<h5><code>setSize(size)<i>: void</i></code></h5>
|
|
99
|
+
<p>Sets the width of the left pane.</p>
|
|
100
|
+
|
|
60
101
|
</main>
|
|
61
102
|
<div style="height:33vh"></div>
|
|
62
103
|
<script type="module" src="../kempo/components/Import.js"></script>
|