kempo-ui 0.0.10 → 0.0.12
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 +4 -2
- package/docs/components/card.html +4 -2
- package/docs/components/collapsible.html +4 -2
- package/docs/components/content-slider.html +4 -3
- package/docs/components/dialog.html +6 -237
- package/docs/components/focus-capture.html +4 -2
- package/docs/components/hybrid-component.html +4 -2
- package/docs/components/icon.html +8 -6
- package/docs/components/import.html +4 -2
- package/docs/components/light-component.html +4 -2
- package/docs/components/persistant-collapsible.html +38 -19
- package/docs/components/photo-viewer.html +85 -129
- package/docs/components/resize.html +4 -2
- package/docs/components/shadow-component.html +4 -2
- package/docs/components/show-more.html +5 -2
- package/docs/components/side-menu.html +4 -2
- package/docs/components/sortable.html +4 -3
- package/docs/components/split.html +4 -2
- package/docs/components/table.html +4 -2
- package/docs/components/tableControls.html +4 -2
- package/docs/components/tableCustomFields.html +4 -2
- package/docs/components/tableFetchRecords.html +4 -2
- package/docs/components/tableFieldSortHide.html +4 -2
- package/docs/components/tablePagination.html +4 -2
- package/docs/components/tableRecordEditing.html +4 -2
- package/docs/components/tableRecordFiltering.html +4 -2
- package/docs/components/tableRecordHiding.html +4 -2
- package/docs/components/tableRecordSearching.html +4 -2
- package/docs/components/tableRecordSelection.html +4 -2
- package/docs/components/tableRowControls.html +4 -2
- package/docs/components/tableSorting.html +4 -2
- package/docs/components/tabs.html +71 -89
- package/docs/components/tags.html +17 -45
- package/docs/components/theme-switcher.html +5 -3
- package/docs/components/timestamp.html +11 -40
- package/docs/components/toast.html +5 -311
- package/docs/components/toggle.html +6 -3
- package/docs/components/tree.html +65 -76
- package/docs/index.html +1 -0
- package/docs/utils/debounce.html +25 -5
- package/docs/utils/drag.html +14 -3
- package/docs/utils/formatTimestamp.html +26 -7
- package/docs/utils/init.js +1 -0
- package/docs/utils/propConverters.html +47 -7
- package/docs/utils/toTitleCase.html +3 -2
- package/docs/utils/watchWindowSize.html +99 -7
- package/package.json +1 -1
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>PersistantCollapsible - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -19,7 +20,8 @@
|
|
|
19
20
|
<div class="m mt0 pl">
|
|
20
21
|
<h6>Examples</h6>
|
|
21
22
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
22
|
-
<a href="#
|
|
23
|
+
<a href="#customLabel">Custom Label</a><br />
|
|
24
|
+
<a href="#customIcon">Custom Icon</a><br />
|
|
23
25
|
|
|
24
26
|
<h6 class="mt">JavaScript Reference</h6>
|
|
25
27
|
<a href="#constructor">Constructor</a><br />
|
|
@@ -32,25 +34,41 @@
|
|
|
32
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
33
35
|
<p>The <code>k-p-collapsible</code> component extends the regular <code>k-collapsible</code> with automatic state persistence using localStorage. The component remembers its opened/closed state and restores it when the page is reloaded or reopened.</p>
|
|
34
36
|
<p><strong>Important:</strong> The component requires an <code>id</code> attribute to function properly, as this is used as the localStorage key.</p>
|
|
37
|
+
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>Persistent Section<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>This content's visibility state will be remembered across page reloads.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-p-collapsible</span>></span></code></pre>
|
|
39
|
+
|
|
40
|
+
<k-p-collapsible id="example1" class="mb">
|
|
41
|
+
<span slot="label">Persistent Section</span>
|
|
42
|
+
<p class="p">This content's visibility state will be remembered across page reloads. Try expanding/collapsing it and then refreshing the page.</p>
|
|
43
|
+
</k-p-collapsible>
|
|
35
44
|
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
45
|
+
<h3 id="customLabel"><a href="#customLabel" class="no-link">Custom Label</a></h3>
|
|
46
|
+
<p>You can customize the label using the <code>label</code> slot, just like with regular collapsible components.</p>
|
|
47
|
+
|
|
48
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0"</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Enable notifications<br /> <span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Auto-save<br /> <span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-p-collapsible</span>></span></code></pre>
|
|
49
|
+
|
|
50
|
+
<k-p-collapsible id="example2" class="mb">
|
|
51
|
+
<h4 slot="label" class="m0">Settings</h4>
|
|
52
|
+
<div class="p">
|
|
53
|
+
<label>
|
|
54
|
+
<input type="checkbox"> Enable notifications
|
|
55
|
+
</label><br>
|
|
56
|
+
<label>
|
|
57
|
+
<input type="checkbox"> Auto-save
|
|
58
|
+
</label>
|
|
41
59
|
</div>
|
|
42
|
-
|
|
43
|
-
<k-card label="Output">
|
|
44
|
-
<k-p-collapsible id="example1" class="mb">
|
|
45
|
-
<span slot="label">Persistent Section</span>
|
|
46
|
-
<p class="p">This content's visibility state will be remembered across page reloads. Try expanding/collapsing it and then refreshing the page.</p>
|
|
47
|
-
</k-p-collapsible>
|
|
48
|
-
</k-card>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
60
|
+
</k-p-collapsible>
|
|
51
61
|
|
|
52
|
-
<h3 id="
|
|
53
|
-
<p>
|
|
62
|
+
<h3 id="customIcon"><a href="#customIcon" class="no-link">Custom Icon</a></h3>
|
|
63
|
+
<p>Override the default chevron icon using the <code>icon</code> slot.</p>
|
|
64
|
+
|
|
65
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>Advanced Options<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>Advanced configuration options with persistent state.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-p-collapsible</span>></span></code></pre>
|
|
66
|
+
|
|
67
|
+
<k-p-collapsible id="example3" class="mb">
|
|
68
|
+
<span slot="label">Advanced Options</span>
|
|
69
|
+
<k-icon name="settings" slot="icon"></k-icon>
|
|
70
|
+
<p class="p">Advanced configuration options with persistent state.</p>
|
|
71
|
+
</k-p-collapsible>
|
|
54
72
|
|
|
55
73
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
56
74
|
|
|
@@ -93,6 +111,7 @@
|
|
|
93
111
|
|
|
94
112
|
</main>
|
|
95
113
|
<div style="height:33vh"></div>
|
|
114
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
96
115
|
<script type="module" src="../src/components/PersistantCollapsible.js"></script>
|
|
97
116
|
</body>
|
|
98
117
|
</html>
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -36,152 +37,106 @@
|
|
|
36
37
|
|
|
37
38
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
38
39
|
<p>The <code>k-photo-viewer</code> component displays images with fullscreen viewing capabilities. Click on any image to open it in fullscreen mode.</p>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
alt="Honda Civic Type R"
|
|
50
|
-
>
|
|
51
|
-
<p>Honda Civic Type R - Track-focused hot hatch</p>
|
|
52
|
-
</k-photo-viewer>
|
|
53
|
-
</k-card>
|
|
54
|
-
</div>
|
|
40
|
+
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
42
|
+
|
|
43
|
+
<div class="mb" style="max-width: 400px;">
|
|
44
|
+
<k-photo-viewer
|
|
45
|
+
src="../media/civic.jpg"
|
|
46
|
+
alt="Honda Civic Type R"
|
|
47
|
+
>
|
|
48
|
+
<p>Honda Civic Type R - Track-focused hot hatch</p>
|
|
49
|
+
</k-photo-viewer>
|
|
55
50
|
</div>
|
|
56
51
|
|
|
57
52
|
<h3 id="gallery"><a href="#gallery" class="no-link">Gallery Navigation</a></h3>
|
|
58
53
|
<p>When multiple PhotoViewer components are siblings, you can navigate between them using the arrow buttons in fullscreen mode or keyboard arrow keys.</p>
|
|
59
54
|
|
|
60
|
-
<div class="
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
src="../media/evo.jpg"
|
|
82
|
-
alt="Mitsubishi Lancer Evolution"
|
|
83
|
-
>
|
|
84
|
-
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
85
|
-
</k-photo-viewer>
|
|
86
|
-
</div>
|
|
87
|
-
</k-card>
|
|
88
|
-
</div>
|
|
55
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda Civic Type R<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Chevrolet Corvette C8<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
56
|
+
|
|
57
|
+
<div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
|
|
58
|
+
<k-photo-viewer
|
|
59
|
+
src="../media/civic.jpg"
|
|
60
|
+
alt="Honda Civic Type R"
|
|
61
|
+
>
|
|
62
|
+
<h6 class="m0">Honda Civic Type R</h6>
|
|
63
|
+
</k-photo-viewer>
|
|
64
|
+
<k-photo-viewer
|
|
65
|
+
src="../media/corvette.jpg"
|
|
66
|
+
alt="Chevrolet Corvette C8"
|
|
67
|
+
>
|
|
68
|
+
<h6 class="m0">Chevrolet Corvette C8</h6>
|
|
69
|
+
</k-photo-viewer>
|
|
70
|
+
<k-photo-viewer
|
|
71
|
+
src="../media/evo.jpg"
|
|
72
|
+
alt="Mitsubishi Lancer Evolution"
|
|
73
|
+
>
|
|
74
|
+
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
75
|
+
</k-photo-viewer>
|
|
89
76
|
</div>
|
|
90
|
-
|
|
91
77
|
|
|
92
78
|
<h3 id="globalNavigation"><a href="#globalNavigation" class="no-link">Global Navigation</a></h3>
|
|
93
79
|
<p>With the <code>global</code> attribute, PhotoViewers can navigate between all instances on the page, not just siblings.</p>
|
|
94
|
-
<div class="row -mx mb">
|
|
95
|
-
<div class="col d-span-6 m-span-12 px">
|
|
96
|
-
<k-card label="HTML">
|
|
97
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br /> <span class="hljs-attr">global</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Nissan GT-R (Global Navigation)<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
98
|
-
</k-card>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="col d-span-6 m-span-12 px">
|
|
101
|
-
<k-card label="Output">
|
|
102
|
-
<k-photo-viewer
|
|
103
|
-
src="../media/gtr.jpg"
|
|
104
|
-
alt="Nissan GT-R"
|
|
105
|
-
global
|
|
106
|
-
>
|
|
107
|
-
<h6 class="m0">Nissan GT-R (Global Navigation)</h6>
|
|
108
|
-
<p class="m0 small">This viewer can navigate to all photos on the page</p>
|
|
109
|
-
</k-photo-viewer>
|
|
110
|
-
</k-card>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
|
|
115
80
|
|
|
81
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br /> <span class="hljs-attr">global</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Nissan GT-R (Global Navigation)<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
116
82
|
|
|
83
|
+
<div class="mb" style="max-width: 300px;">
|
|
84
|
+
<k-photo-viewer
|
|
85
|
+
src="../media/gtr.jpg"
|
|
86
|
+
alt="Nissan GT-R"
|
|
87
|
+
global
|
|
88
|
+
>
|
|
89
|
+
<h6 class="m0">Nissan GT-R (Global Navigation)</h6>
|
|
90
|
+
<p class="m0 small">This viewer can navigate to all photos on the page</p>
|
|
91
|
+
</k-photo-viewer>
|
|
92
|
+
</div>
|
|
117
93
|
|
|
118
94
|
<h3 id="customControls"><a href="#customControls" class="no-link">Custom Controls</a></h3>
|
|
119
95
|
<p>Customize the fullscreen controls using slots and disable keyboard controls if needed.</p>
|
|
120
|
-
<div class="row -mx mb">
|
|
121
|
-
<div class="col d-span-6 m-span-12 px">
|
|
122
|
-
<k-card label="HTML">
|
|
123
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda NSX<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
124
|
-
</k-card>
|
|
125
|
-
</div>
|
|
126
|
-
<div class="col d-span-6 m-span-12 px">
|
|
127
|
-
<k-card label="Output">
|
|
128
|
-
<div class="mb" style="max-width: 350px;">
|
|
129
|
-
<k-photo-viewer
|
|
130
|
-
src="../media/nsx.jpg"
|
|
131
|
-
alt="Honda NSX"
|
|
132
|
-
keyboard-controls="false"
|
|
133
|
-
>
|
|
134
|
-
<span slot="close">✕</span>
|
|
135
|
-
<span slot="prev">◀</span>
|
|
136
|
-
<span slot="next">▶</span>
|
|
137
|
-
<h6 class="m0">Honda NSX</h6>
|
|
138
|
-
<p class="m0">Custom controls, keyboard disabled</p>
|
|
139
|
-
</k-photo-viewer>
|
|
140
|
-
<k-photo-viewer
|
|
141
|
-
src="../media/evo.jpg"
|
|
142
|
-
alt="Mitsubishi Lancer Evolution"
|
|
143
|
-
keyboard-controls="false"
|
|
144
|
-
>
|
|
145
|
-
<span slot="close">✕</span>
|
|
146
|
-
<span slot="prev">◀</span>
|
|
147
|
-
<span slot="next">▶</span>
|
|
148
|
-
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
149
|
-
<p class="m0">Custom controls, keyboard disabled</p>
|
|
150
|
-
</k-photo-viewer>
|
|
151
|
-
</div>
|
|
152
|
-
</k-card>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
|
|
156
|
-
|
|
157
96
|
|
|
97
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda NSX<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
158
98
|
|
|
99
|
+
<div class="mb" style="max-width: 350px;">
|
|
100
|
+
<k-photo-viewer
|
|
101
|
+
src="../media/nsx.jpg"
|
|
102
|
+
alt="Honda NSX"
|
|
103
|
+
keyboard-controls="false"
|
|
104
|
+
>
|
|
105
|
+
<span slot="close">✕</span>
|
|
106
|
+
<span slot="prev">◀</span>
|
|
107
|
+
<span slot="next">▶</span>
|
|
108
|
+
<h6 class="m0">Honda NSX</h6>
|
|
109
|
+
<p class="m0">Custom controls, keyboard disabled</p>
|
|
110
|
+
</k-photo-viewer>
|
|
111
|
+
<k-photo-viewer
|
|
112
|
+
src="../media/evo.jpg"
|
|
113
|
+
alt="Mitsubishi Lancer Evolution"
|
|
114
|
+
keyboard-controls="false"
|
|
115
|
+
>
|
|
116
|
+
<span slot="close">✕</span>
|
|
117
|
+
<span slot="prev">◀</span>
|
|
118
|
+
<span slot="next">▶</span>
|
|
119
|
+
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
120
|
+
<p class="m0">Custom controls, keyboard disabled</p>
|
|
121
|
+
</k-photo-viewer>
|
|
122
|
+
</div>
|
|
159
123
|
|
|
160
124
|
<h3 id="captions"><a href="#captions" class="no-link">Captions</a></h3>
|
|
161
125
|
<p>Use different captions for thumbnail view and fullscreen view using slots.</p>
|
|
162
|
-
|
|
163
|
-
<div class="
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
<
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<h6 class="m0">Corvette C8</h6>
|
|
177
|
-
<div slot="fullscreen-caption">
|
|
178
|
-
<h4>2020 Chevrolet Corvette C8 Stingray</h4>
|
|
179
|
-
<p>The first mid-engine Corvette featuring a 6.2L V8 engine producing 495 horsepower</p>
|
|
180
|
-
</div>
|
|
181
|
-
</k-photo-viewer>
|
|
182
|
-
</div>
|
|
183
|
-
</k-card>
|
|
184
|
-
</div>
|
|
126
|
+
|
|
127
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />></span><br /> <span class="hljs-comment"><!-- Default caption (thumbnail view) --></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Corvette C8<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <br /> <span class="hljs-comment"><!-- Fullscreen caption --></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
128
|
+
|
|
129
|
+
<div class="mb" style="max-width: 400px;">
|
|
130
|
+
<k-photo-viewer
|
|
131
|
+
src="../media/corvette.jpg"
|
|
132
|
+
alt="Chevrolet Corvette C8"
|
|
133
|
+
>
|
|
134
|
+
<h6 class="m0">Corvette C8</h6>
|
|
135
|
+
<div slot="fullscreen-caption">
|
|
136
|
+
<h4>2020 Chevrolet Corvette C8 Stingray</h4>
|
|
137
|
+
<p>The first mid-engine Corvette featuring a 6.2L V8 engine producing 495 horsepower</p>
|
|
138
|
+
</div>
|
|
139
|
+
</k-photo-viewer>
|
|
185
140
|
</div>
|
|
186
141
|
|
|
187
142
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
@@ -259,6 +214,7 @@
|
|
|
259
214
|
|
|
260
215
|
</main>
|
|
261
216
|
<div style="height:33vh"></div>
|
|
217
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
262
218
|
<script type="module" src="../src/components/PhotoViewer.js"></script>
|
|
263
219
|
</body>
|
|
264
220
|
</html>
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Resize - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -166,6 +167,7 @@
|
|
|
166
167
|
|
|
167
168
|
</main>
|
|
168
169
|
<div style="height:33vh"></div>
|
|
170
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
169
171
|
<script type="module" src="../src/components/Resize.js"></script>
|
|
170
172
|
</body>
|
|
171
173
|
</html>
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -79,5 +80,6 @@
|
|
|
79
80
|
|
|
80
81
|
</main>
|
|
81
82
|
<div style="height:33vh"></div>
|
|
83
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
82
84
|
</body>
|
|
83
85
|
</html>
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Show More - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -116,6 +117,8 @@
|
|
|
116
117
|
|
|
117
118
|
</main>
|
|
118
119
|
<div style="height:33vh"></div>
|
|
120
|
+
|
|
121
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
119
122
|
<script type="module" src="../src/components/ShowMore.js"></script>
|
|
120
123
|
</body>
|
|
121
124
|
</html>
|
|
@@ -4,10 +4,11 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
11
12
|
<script type="module" src="./init.js"></script>
|
|
12
13
|
</head>
|
|
13
14
|
<body>
|
|
@@ -148,6 +149,7 @@
|
|
|
148
149
|
|
|
149
150
|
</main>
|
|
150
151
|
<div style="height:33vh"></div>
|
|
152
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
151
153
|
<script type="module" src="../src/components/SideMenu.js"></script>
|
|
152
154
|
</body>
|
|
153
155
|
</html>
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.
|
|
9
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
11
11
|
<script type="module" src="./init.js"></script>
|
|
12
12
|
</head>
|
|
13
13
|
<body>
|
|
@@ -123,6 +123,7 @@
|
|
|
123
123
|
|
|
124
124
|
</main>
|
|
125
125
|
<div style="height:33vh"></div>
|
|
126
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
126
127
|
<script type="module" src="../src/components/Sortable.js"></script>
|
|
127
128
|
</body>
|
|
128
129
|
</html>
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
12
13
|
<body>
|
|
@@ -136,6 +137,7 @@
|
|
|
136
137
|
|
|
137
138
|
</main>
|
|
138
139
|
<div style="height:33vh"></div>
|
|
140
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
139
141
|
<script type="module" src="../src/components/Card.js"></script>
|
|
140
142
|
<script type="module" src="../src/components/Split.js"></script>
|
|
141
143
|
</body>
|
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Table - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
13
14
|
<script>
|
|
14
15
|
|
|
@@ -303,5 +304,6 @@
|
|
|
303
304
|
|
|
304
305
|
</main>
|
|
305
306
|
<div style="height: 33.333vh"></div>
|
|
307
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
306
308
|
</body>
|
|
307
309
|
</html>
|
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Top and Bottom Controls - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
13
14
|
<script>
|
|
14
15
|
window.contacts = [];
|
|
@@ -68,5 +69,6 @@
|
|
|
68
69
|
</script>
|
|
69
70
|
</main>
|
|
70
71
|
<div style="height: 33.333vh"></div>
|
|
72
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
71
73
|
</body>
|
|
72
74
|
</html>
|
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Custom Fields - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
13
14
|
<script>
|
|
14
15
|
window.contacts = [];
|
|
@@ -104,5 +105,6 @@
|
|
|
104
105
|
</script>
|
|
105
106
|
</main>
|
|
106
107
|
<div style="height: 33.333vh"></div>
|
|
108
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
107
109
|
</body>
|
|
108
110
|
</html>
|