kempo-ui 0.0.17 → 0.0.19
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/SideMenu.js +2 -2
- package/docs/{kempo-ui/components → components}/accordion.html +11 -13
- package/docs/{kempo-ui/components → components}/card.html +9 -9
- package/docs/{kempo-ui/components → components}/content-slider.html +122 -81
- package/docs/{kempo-ui/components → components}/dialog.html +22 -22
- package/docs/{kempo-ui/components → components}/focus-capture.html +11 -11
- package/docs/{kempo-ui/components → components}/hybrid-component.html +12 -12
- package/docs/{kempo-ui/components → components}/icon.html +10 -10
- package/docs/{kempo-ui/components → components}/import.html +9 -9
- package/docs/{kempo-ui/components → components}/light-component.html +11 -11
- package/docs/{kempo-ui/components → components}/photo-viewer.html +10 -10
- package/docs/{kempo-ui/components → components}/resize.html +10 -10
- package/docs/{kempo-ui/components → components}/shadow-component.html +11 -11
- package/docs/{kempo-ui/components → components}/show-more.html +10 -10
- package/docs/{kempo-ui/components → components}/side-menu.html +8 -8
- package/docs/{kempo-ui/components → components}/sortable.html +10 -10
- package/docs/{kempo-ui/components → components}/split.html +11 -11
- package/docs/{kempo-ui/components → components}/table.html +23 -23
- package/docs/{kempo-ui/components → components}/tableControls.html +12 -12
- package/docs/{kempo-ui/components → components}/tableCustomFields.html +9 -9
- package/docs/{kempo-ui/components → components}/tableFetchRecords.html +16 -16
- package/docs/{kempo-ui/components → components}/tableFieldSortHide.html +11 -11
- package/docs/{kempo-ui/components → components}/tablePagination.html +15 -15
- package/docs/{kempo-ui/components → components}/tableRecordEditing.html +12 -12
- package/docs/{kempo-ui/components → components}/tableRecordFiltering.html +11 -11
- package/docs/{kempo-ui/components → components}/tableRecordHiding.html +12 -12
- package/docs/{kempo-ui/components → components}/tableRecordSearching.html +11 -11
- package/docs/{kempo-ui/components → components}/tableRecordSelection.html +9 -9
- package/docs/{kempo-ui/components → components}/tableRowControls.html +11 -11
- package/docs/{kempo-ui/components → components}/tableSorting.html +9 -9
- package/docs/{kempo-ui/components → components}/tabs.html +10 -10
- package/docs/{kempo-ui/components → components}/tags.html +10 -10
- package/docs/{kempo-ui/components → components}/theme-switcher.html +10 -10
- package/docs/{kempo-ui/components → components}/timestamp.html +10 -10
- package/docs/{kempo-ui/components → components}/toast.html +16 -16
- package/docs/{kempo-ui/components → components}/toggle.html +10 -10
- package/docs/{kempo-ui/components → components}/tree.html +17 -17
- package/docs/dev.config.json +3 -4
- package/docs/{kempo-ui/index.html → index.html} +0 -1
- package/docs/init-1.js +4 -0
- package/docs/nav-1.inc.html +66 -0
- package/docs/nav.inc.html +66 -0
- package/docs/{kempo-ui/src → src}/components/SideMenu.js +2 -2
- package/docs/{kempo-ui/utils → utils}/debounce.html +8 -8
- package/docs/{kempo-ui/utils → utils}/drag.html +8 -8
- package/docs/{kempo-ui/utils → utils}/formatTimestamp.html +7 -7
- package/docs/{kempo-ui/utils → utils}/propConverters.html +7 -7
- package/docs/{kempo-ui/utils → utils}/toTitleCase.html +7 -7
- package/package.json +2 -2
- package/scripts/build.js +8 -15
- package/scripts/docs.js +0 -3
- package/src/components/SideMenu.js +2 -1
- package/tests/components/HybridComponent.browser-test.js +1 -1
- package/tests/components/ShadowComponent.browser-test.js +3 -3
- package/docs/kempo-ui/kempo-hljs.css +0 -1
- package/docs/kempo-ui/nav.inc.html +0 -66
- package/docs/kempo-ui/src/kempo-hljs.css +0 -1
- package/src/kempo-hljs.css +0 -146
- /package/docs/{kempo-ui/icons → icons}/add.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-back.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-down-double.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-down.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-forward.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-up-double.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/arrow-up.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/cards.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/check.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/chevron-left.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/chevron-right.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/close.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/compare.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/delete.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/drag-handle.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/drawing2.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/edit.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/error.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/export-file.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/file-text.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/file.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/filter-off.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/filter.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/first.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/folder-clear.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/folder-create.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/folder-open.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/folder.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/hide.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/image.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/label-add.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/label.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/last.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/menu.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/mode-auto.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/mode-dark.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/mode-light.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/open-in-browser.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/pause.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/play.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/refresh.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/remove.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/save.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/search.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/settings.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/show.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/storage.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/table-visibility.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/tag.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/tools.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/trash-x.svg +0 -0
- /package/docs/{kempo-ui/icons → icons}/warning.svg +0 -0
- /package/{dist → docs}/kempo-hljs.css +0 -0
- /package/docs/{kempo-ui/kempo-vars.css → kempo-vars.css} +0 -0
- /package/docs/{kempo-ui/kempo.min.css → kempo.min.css} +0 -0
- /package/docs/{kempo-ui/media → media}/civic.jpg +0 -0
- /package/docs/{kempo-ui/media → media}/corvette.jpg +0 -0
- /package/docs/{kempo-ui/media → media}/evo.jpg +0 -0
- /package/docs/{kempo-ui/media → media}/gtr.jpg +0 -0
- /package/docs/{kempo-ui/media → media}/nsx.jpg +0 -0
- /package/docs/{kempo-ui/nav.inc.js → nav.inc.js} +0 -0
- /package/docs/{kempo-ui/src → src}/components/Accordion.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Card.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/ContentSlider.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Dialog.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/FocusCapture.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/HybridComponent.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Icon.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Import.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/LightComponent.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/PhotoViewer.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Resize.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/ShadowComponent.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/ShowMore.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Sortable.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Split.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Table.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Tabs.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Tags.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/ThemeSwitcher.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Timestamp.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Toast.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Toggle.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/Tree.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/DeleteRecord.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/Edit.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/ExportCSV.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/ExportJson.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/FieldSortHide.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/Filters.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/FirstPage.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/HiddenCount.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/Hide.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/LastPage.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/NextPage.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/PageSelect.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/PageSize.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/PrevPage.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/Search.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/ShowAll.js +0 -0
- /package/docs/{kempo-ui/src → src}/components/tableControls/TableControl.js +0 -0
- /package/docs/{kempo-ui/src → src}/kempo-vars.css +0 -0
- /package/docs/{kempo-ui/src → src}/lit-all.min.js +0 -0
- /package/docs/{kempo-ui/src → src}/utils/debounce.js +0 -0
- /package/docs/{kempo-ui/src → src}/utils/drag.js +0 -0
- /package/docs/{kempo-ui/src → src}/utils/formatTimestamp.js +0 -0
- /package/docs/{kempo-ui/src → src}/utils/propConverters.js +0 -0
- /package/docs/{kempo-ui/src → src}/utils/toTitleCase.js +0 -0
- /package/docs/{kempo-ui/styles.css → styles.css} +0 -0
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">HybridComponent</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</k-accordion>
|
|
35
35
|
|
|
36
36
|
<h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
|
|
37
|
-
<p>HybridComponent is a base class that extends <a href="
|
|
37
|
+
<p>HybridComponent is a base class that extends <a href="./components/shadow-component.html">ShadowComponent</a> and provides both shadow DOM rendering with Kempo CSS styles AND light DOM rendering. Use this when you want your component to:</p>
|
|
38
38
|
<ul>
|
|
39
39
|
<li>Have shadow DOM with Kempo CSS for internal UI elements</li>
|
|
40
40
|
<li>Also render content to the light DOM alongside natural children</li>
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
<li><strong>SideMenu:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
|
|
66
66
|
</ul>
|
|
67
67
|
|
|
68
|
-
<p>Use <a href="
|
|
69
|
-
<p>Use <a href="
|
|
68
|
+
<p>Use <a href="./components/shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
|
|
69
|
+
<p>Use <a href="./components/light-component.html">LightComponent</a> instead when you only need light DOM.</p>
|
|
70
70
|
|
|
71
71
|
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
72
72
|
|
|
@@ -106,8 +106,8 @@
|
|
|
106
106
|
|
|
107
107
|
</main>
|
|
108
108
|
<div style="height:33vh"></div>
|
|
109
|
-
<script type="module" src="
|
|
110
|
-
<script type="module" src="
|
|
111
|
-
<script type="module" src="
|
|
109
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
110
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
111
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
112
112
|
</body>
|
|
113
113
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Icon - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="
|
|
9
|
-
<link rel="stylesheet" href="
|
|
10
|
-
<link rel="stylesheet" href="
|
|
11
|
-
<link rel="stylesheet" href="
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Icon</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -152,10 +152,10 @@
|
|
|
152
152
|
|
|
153
153
|
</main>
|
|
154
154
|
<div style="height:33vh"></div>
|
|
155
|
-
<script type="module" src="
|
|
156
|
-
<script type="module" src="
|
|
157
|
-
<script type="module" src="
|
|
158
|
-
<script type="module" src="
|
|
155
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
156
|
+
<script type="module" src="../src/components/Icon.js"></script>
|
|
157
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
158
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
159
159
|
|
|
160
160
|
</body>
|
|
161
161
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Import - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Import</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
|
|
73
73
|
</main>
|
|
74
74
|
<div style="height:33vh"></div>
|
|
75
|
-
<script type="module" src="
|
|
76
|
-
<script type="module" src="
|
|
77
|
-
<script type="module" src="
|
|
75
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
76
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
77
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
78
78
|
|
|
79
79
|
</body>
|
|
80
80
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>LightComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">LightComponent</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
<li>Shadow DOM encapsulation would interfere with your component's purpose</li>
|
|
62
62
|
<li>You're working with third-party libraries that expect light DOM</li>
|
|
63
63
|
</ul>
|
|
64
|
-
<p>Use <a href="
|
|
64
|
+
<p>Use <a href="./components/shadow-component.html">ShadowComponent</a> instead when you need style encapsulation and scoped CSS.
|
|
65
65
|
</p>
|
|
66
|
-
<p>Use <a href="
|
|
66
|
+
<p>Use <a href="./components/hybrid-component.html">HybridComponent</a> when you need both shadow DOM styles and light DOM
|
|
67
67
|
rendering.</p>
|
|
68
68
|
|
|
69
69
|
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
|
|
110
110
|
</main>
|
|
111
111
|
<div style="height:33vh"></div>
|
|
112
|
-
<script type="module" src="
|
|
113
|
-
<script type="module" src="
|
|
114
|
-
<script type="module" src="
|
|
112
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
113
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
114
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
115
115
|
</body>
|
|
116
116
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<main>
|
|
17
17
|
<h1 class="ta-center">PhotoViewer</h1>
|
|
18
18
|
|
|
@@ -260,10 +260,10 @@
|
|
|
260
260
|
|
|
261
261
|
</main>
|
|
262
262
|
<div style="height:33vh"></div>
|
|
263
|
-
<script type="module" src="
|
|
264
|
-
<script type="module" src="
|
|
265
|
-
<script type="module" src="
|
|
266
|
-
<script type="module" src="
|
|
263
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
264
|
+
<script type="module" src="../src/components/PhotoViewer.js"></script>
|
|
265
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
266
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
267
267
|
|
|
268
268
|
</body>
|
|
269
269
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Resize - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Resize</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -170,10 +170,10 @@
|
|
|
170
170
|
|
|
171
171
|
</main>
|
|
172
172
|
<div style="height:33vh"></div>
|
|
173
|
-
<script type="module" src="
|
|
174
|
-
<script type="module" src="
|
|
175
|
-
<script type="module" src="
|
|
176
|
-
<script type="module" src="
|
|
173
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
174
|
+
<script type="module" src="../src/components/Resize.js"></script>
|
|
175
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
176
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
177
177
|
|
|
178
178
|
</body>
|
|
179
179
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">ShadowComponent</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
<li>Automatic access to Kempo CSS styles</li>
|
|
43
43
|
<li>Scoped component-specific styles</li>
|
|
44
44
|
</ul>
|
|
45
|
-
<p>Most Kempo UI components extend ShadowComponent, including <a href="
|
|
46
|
-
<a href="
|
|
45
|
+
<p>Most Kempo UI components extend ShadowComponent, including <a href="./components/dialog.html">Dialog</a>,
|
|
46
|
+
<a href="./kempo-/components/card.html">Card</a>, <a href="./components/accordion.html">Accordion</a>, and
|
|
47
47
|
many others.
|
|
48
48
|
</p>
|
|
49
49
|
|
|
@@ -94,8 +94,8 @@
|
|
|
94
94
|
|
|
95
95
|
</main>
|
|
96
96
|
<div style="height:33vh"></div>
|
|
97
|
-
<script type="module" src="
|
|
98
|
-
<script type="module" src="
|
|
99
|
-
<script type="module" src="
|
|
97
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
98
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
99
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
100
100
|
</body>
|
|
101
101
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Show More - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<main>
|
|
17
17
|
<h1 class="ta-center">Show More</h1>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
</main>
|
|
122
122
|
<div style="height:33vh"></div>
|
|
123
123
|
|
|
124
|
-
<script type="module" src="
|
|
125
|
-
<script type="module" src="
|
|
126
|
-
<script type="module" src="
|
|
127
|
-
<script type="module" src="
|
|
124
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
125
|
+
<script type="module" src="../src/components/ShowMore.js"></script>
|
|
126
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
127
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
128
128
|
|
|
129
129
|
</body>
|
|
130
130
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">SideMenu</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<details class="b r mb">
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
|
|
150
150
|
</main>
|
|
151
151
|
<div style="height:33vh"></div>
|
|
152
|
-
<script type="module" src="
|
|
153
|
-
<script type="module" src="
|
|
152
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
153
|
+
<script type="module" src="../src/components/SideMenu.js"></script>
|
|
154
154
|
</body>
|
|
155
155
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Sortable</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -126,10 +126,10 @@
|
|
|
126
126
|
|
|
127
127
|
</main>
|
|
128
128
|
<div style="height:33vh"></div>
|
|
129
|
-
<script type="module" src="
|
|
130
|
-
<script type="module" src="
|
|
131
|
-
<script type="module" src="
|
|
132
|
-
<script type="module" src="
|
|
129
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
130
|
+
<script type="module" src="../src/components/Sortable.js"></script>
|
|
131
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
132
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
133
133
|
|
|
134
134
|
</body>
|
|
135
135
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Split</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -162,11 +162,11 @@
|
|
|
162
162
|
|
|
163
163
|
</main>
|
|
164
164
|
<div style="height:33vh"></div>
|
|
165
|
-
<script type="module" src="
|
|
166
|
-
<script type="module" src="
|
|
167
|
-
<script type="module" src="
|
|
168
|
-
<script type="module" src="
|
|
169
|
-
<script type="module" src="
|
|
165
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
166
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
167
|
+
<script type="module" src="../src/components/Split.js"></script>
|
|
168
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
169
|
+
<script type="module" src="../src/components/Resize.js"></script>
|
|
170
170
|
|
|
171
171
|
</body>
|
|
172
172
|
</html>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<base href="/kempo-ui/">
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>Table - Components - Kempo Docs - A Web Components Solution</title>
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css" />
|
|
9
|
-
<link rel="stylesheet" href="kempo.min.css" />
|
|
10
|
-
<link rel="stylesheet" href="kempo-hljs.css" />
|
|
11
|
-
<link rel="stylesheet" href="styles.css" />
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
12
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
|
+
<script src="../init-1.js" type="module"></script>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
|
-
<k-import src="
|
|
15
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Table</h1>
|
|
17
17
|
<main>
|
|
18
18
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
@@ -88,18 +88,18 @@
|
|
|
88
88
|
|
|
89
89
|
<h3>Examples</h3>
|
|
90
90
|
<ul>
|
|
91
|
-
<li><a href="
|
|
92
|
-
<li><a href="
|
|
93
|
-
<li><a href="
|
|
94
|
-
<li><a href="
|
|
95
|
-
<li><a href="
|
|
96
|
-
<li><a href="
|
|
97
|
-
<li><a href="
|
|
98
|
-
<li><a href="
|
|
99
|
-
<li><a href="
|
|
100
|
-
<li><a href="
|
|
101
|
-
<li><a href="
|
|
102
|
-
<li><a href="
|
|
91
|
+
<li><a href="./components/tableCustomFields.html">Custom Fields Example</a></li>
|
|
92
|
+
<li><a href="./components/tableControls.html">Top and Bottom Controls</a></li>
|
|
93
|
+
<li><a href="./components/tableRowControls.html">Row Controls</a></li>
|
|
94
|
+
<li><a href="./components/tablePagination.html">Pagination</a></li>
|
|
95
|
+
<li><a href="./components/tableRecordSelection.html">Record Selection</a></li>
|
|
96
|
+
<li><a href="./components/tableRecordEditing.html">Record Editing</a></li>
|
|
97
|
+
<li><a href="./components/tableRecordHiding.html">Record Hiding</a></li>
|
|
98
|
+
<li><a href="./components/tableRecordFiltering.html">Record Filtering</a></li>
|
|
99
|
+
<li><a href="./components/tableRecordSearching.html">Record Searching</a></li>
|
|
100
|
+
<li><a href="./components/tableSorting.html">Sorting</a></li>
|
|
101
|
+
<li><a href="./components/tableFieldSortHide.html">Field Sorting and Hiding</a></li>
|
|
102
|
+
<li><a href="./components/tableFetchRecords.html">Fetching Records</a></li>
|
|
103
103
|
</ul>
|
|
104
104
|
|
|
105
105
|
<br />
|
|
@@ -270,11 +270,11 @@
|
|
|
270
270
|
|
|
271
271
|
</main>
|
|
272
272
|
<div style="height: 33.333vh"></div>
|
|
273
|
-
<script type="module" src="
|
|
274
|
-
<script type="module" src="
|
|
275
|
-
<script type="module" src="
|
|
276
|
-
<script type="module" src="
|
|
277
|
-
<script type="module" src="
|
|
273
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
274
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
275
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
276
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
277
|
+
<script type="module" src="../src/components/Resize.js"></script>
|
|
278
278
|
|
|
279
279
|
</body>
|
|
280
280
|
</html>
|