kempo-ui 0.0.9 → 0.0.10
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/src/components/Card.js +3 -3
- package/dist/src/components/Dialog.js +11 -11
- package/dist/src/components/Icon.js +1 -1
- package/dist/src/components/Toggle.js +15 -14
- package/dist/src/components/Tree.js +11 -3
- package/docs/components/accordion.html +2 -3
- package/docs/components/card.html +2 -3
- package/docs/components/collapsible.html +2 -3
- package/docs/components/content-slider.html +2 -3
- package/docs/components/dialog.html +2 -2
- package/docs/components/focus-capture.html +2 -3
- package/docs/components/hybrid-component.html +2 -3
- package/docs/components/icon.html +4 -5
- package/docs/components/import.html +2 -3
- package/docs/components/light-component.html +2 -3
- package/docs/components/persistant-collapsible.html +19 -37
- package/docs/components/photo-viewer.html +129 -84
- package/docs/components/resize.html +2 -3
- package/docs/components/shadow-component.html +2 -3
- package/docs/components/show-more.html +2 -4
- package/docs/components/side-menu.html +2 -3
- package/docs/components/sortable.html +3 -3
- package/docs/components/split.html +2 -3
- package/docs/components/table.html +2 -3
- package/docs/components/tableControls.html +2 -3
- package/docs/components/tableCustomFields.html +2 -3
- package/docs/components/tableFetchRecords.html +2 -3
- package/docs/components/tableFieldSortHide.html +2 -3
- package/docs/components/tablePagination.html +2 -3
- package/docs/components/tableRecordEditing.html +2 -3
- package/docs/components/tableRecordFiltering.html +2 -3
- package/docs/components/tableRecordHiding.html +2 -3
- package/docs/components/tableRecordSearching.html +2 -3
- package/docs/components/tableRecordSelection.html +2 -3
- package/docs/components/tableRowControls.html +2 -3
- package/docs/components/tableSorting.html +2 -3
- package/docs/components/tabs.html +89 -70
- package/docs/components/tags.html +45 -16
- package/docs/components/theme-switcher.html +3 -4
- package/docs/components/timestamp.html +40 -10
- package/docs/components/toast.html +3 -2
- package/docs/components/toggle.html +3 -5
- package/docs/components/tree.html +76 -64
- package/docs/src/components/Card.js +3 -3
- package/docs/src/components/Dialog.js +11 -11
- package/docs/src/components/Icon.js +1 -1
- package/docs/src/components/Toggle.js +15 -14
- package/docs/src/components/Tree.js +11 -3
- package/docs/utils/debounce.html +5 -24
- package/docs/utils/drag.html +3 -13
- package/docs/utils/formatTimestamp.html +7 -25
- package/docs/utils/propConverters.html +7 -46
- package/docs/utils/toTitleCase.html +2 -2
- package/docs/utils/watchWindowSize.html +7 -98
- package/package.json +1 -1
- package/src/components/Card.js +3 -0
- package/src/components/Toggle.js +69 -69
- package/src/components/Tree.js +10 -2
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Record Searching - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -66,6 +66,5 @@
|
|
|
66
66
|
</script>
|
|
67
67
|
</main>
|
|
68
68
|
<div style="height: 33.333vh"></div>
|
|
69
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
70
69
|
</body>
|
|
71
70
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -66,6 +66,5 @@
|
|
|
66
66
|
</script>
|
|
67
67
|
</main>
|
|
68
68
|
<div style="height: 33.333vh"></div>
|
|
69
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
70
69
|
</body>
|
|
71
70
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Row Controls - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -69,6 +69,5 @@
|
|
|
69
69
|
</script>
|
|
70
70
|
</main>
|
|
71
71
|
<div style="height: 33.333vh"></div>
|
|
72
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
73
72
|
</body>
|
|
74
73
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Sorting - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -64,6 +64,5 @@
|
|
|
64
64
|
</script>
|
|
65
65
|
</main>
|
|
66
66
|
<div style="height: 33.333vh"></div>
|
|
67
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
68
67
|
</body>
|
|
69
68
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -33,8 +33,16 @@
|
|
|
33
33
|
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
35
|
<p>Create tabs using the <code>k-tabs</code> component. Add tabs using the <code>k-tab</code> component and tab contents using the <code>k-tab-content</code> component. Use the <code>for</code> attribute on the <code>k-tab</code> component to link it to the corresponding <code>k-tab-content</code> component.</p>
|
|
36
|
-
|
|
37
|
-
<
|
|
36
|
+
|
|
37
|
+
<div class="row -mx mb">
|
|
38
|
+
<div class="col d-span-6 m-span-12 px">
|
|
39
|
+
<k-card label="HTML">
|
|
40
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
41
|
+
</k-card>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col d-span-6 m-span-12 px">
|
|
44
|
+
<k-card label="Output">
|
|
45
|
+
<k-tabs>
|
|
38
46
|
<k-tab for="html">HTML</k-tab>
|
|
39
47
|
<k-tab for="js">JavaScript</k-tab>
|
|
40
48
|
<k-tab-content name="html">
|
|
@@ -44,11 +52,21 @@
|
|
|
44
52
|
<p>JavaScript Content</p>
|
|
45
53
|
</k-tab-content>
|
|
46
54
|
</k-tabs>
|
|
55
|
+
</k-card>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
47
58
|
|
|
48
59
|
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
49
60
|
<p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
|
|
50
|
-
<
|
|
51
|
-
|
|
61
|
+
<div class="row -mx mb">
|
|
62
|
+
<div class="col d-span-6 m-span-12 px">
|
|
63
|
+
<k-card label="HTML">
|
|
64
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-spacer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
65
|
+
</k-card>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col d-span-6 m-span-12 px">
|
|
68
|
+
<k-card label="Output">
|
|
69
|
+
<k-tabs>
|
|
52
70
|
<k-tab for="html">HTML</k-tab>
|
|
53
71
|
<k-tab-spacer></k-tab-spacer>
|
|
54
72
|
<k-tab for="js">JavaScript</k-tab>
|
|
@@ -59,75 +77,77 @@
|
|
|
59
77
|
<p>JavaScript Content</p>
|
|
60
78
|
</k-tab-content>
|
|
61
79
|
</k-tabs>
|
|
80
|
+
</k-card>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
62
83
|
|
|
63
84
|
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
64
85
|
<p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
100
|
-
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
101
|
-
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
102
|
-
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
103
|
-
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
104
|
-
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
105
|
-
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
106
|
-
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
107
|
-
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
108
|
-
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
109
|
-
</k-tabs>
|
|
86
|
+
<div class="row -mx mb">
|
|
87
|
+
<div class="col d-span-6 m-span-12 px">
|
|
88
|
+
<k-card label="HTML">
|
|
89
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>></span>Long Tab Name 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>></span>Long Tab Name 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Long Tab Name 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>></span>Long Tab Name 4<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>></span>Long Tab Name 5<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>></span>Long Tab Name 6<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>></span>Long Tab Name 7<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>></span>Long Tab Name 8<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>></span>Long Tab Name 9<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>></span>Long Tab Name 10<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 5<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 6<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 7<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 8<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab9"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 9<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab10"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 10<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
90
|
+
</k-card>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="col d-span-6 m-span-12 px">
|
|
93
|
+
<k-card label="Output">
|
|
94
|
+
<k-tabs>
|
|
95
|
+
<k-tab for="tab1">Long Tab Name 1</k-tab>
|
|
96
|
+
<k-tab for="tab2">Long Tab Name 2</k-tab>
|
|
97
|
+
<k-tab for="tab3">Long Tab Name 3</k-tab>
|
|
98
|
+
<k-tab for="tab4">Long Tab Name 4</k-tab>
|
|
99
|
+
<k-tab for="tab5">Long Tab Name 5</k-tab>
|
|
100
|
+
<k-tab for="tab6">Long Tab Name 6</k-tab>
|
|
101
|
+
<k-tab for="tab7">Long Tab Name 7</k-tab>
|
|
102
|
+
<k-tab for="tab8">Long Tab Name 8</k-tab>
|
|
103
|
+
<k-tab for="tab9">Long Tab Name 9</k-tab>
|
|
104
|
+
<k-tab for="tab10">Long Tab Name 10</k-tab>
|
|
105
|
+
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
106
|
+
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
107
|
+
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
108
|
+
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
109
|
+
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
110
|
+
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
111
|
+
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
112
|
+
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
113
|
+
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
114
|
+
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
115
|
+
</k-tabs>
|
|
116
|
+
</k-card>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
110
120
|
|
|
111
121
|
<h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
|
|
112
122
|
<p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
<div class="row -mx mb">
|
|
124
|
+
<div class="col d-span-6 m-span-12 px">
|
|
125
|
+
<k-card label="HTML">
|
|
126
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span> <span class="hljs-attr">fixed-height</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This content will scroll if it's too long.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Another tab that is not tall enough.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
127
|
+
</k-card>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="col d-span-6 m-span-12 px">
|
|
130
|
+
<k-card label="Output">
|
|
131
|
+
<k-tabs fixed-height="true" style="height: 200px">
|
|
132
|
+
<k-tab for="fixed1">Tab 1</k-tab>
|
|
133
|
+
<k-tab for="fixed2">Tab 2</k-tab>
|
|
134
|
+
<k-tab-content name="fixed1">
|
|
135
|
+
<p>This content will scroll if it's too long.</p>
|
|
136
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
137
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
138
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
139
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
140
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
141
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
142
|
+
</k-tab-content>
|
|
143
|
+
<k-tab-content name="fixed2">
|
|
144
|
+
<p>Another tab that is not tall enough.</p>
|
|
145
|
+
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
|
|
146
|
+
</k-tab-content>
|
|
147
|
+
</k-tabs>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
131
151
|
|
|
132
152
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
133
153
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
@@ -169,6 +189,5 @@
|
|
|
169
189
|
</main>
|
|
170
190
|
<div style="height:33vh"></div>
|
|
171
191
|
<script type="module" src="../src/components/Tabs.js"></script>
|
|
172
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
173
192
|
</body>
|
|
174
193
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Tags - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -35,24 +35,54 @@
|
|
|
35
35
|
|
|
36
36
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
37
|
<p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.</p>
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
<div class="row -mx mb">
|
|
39
|
+
<div class="col d-span-6 m-span-12 px">
|
|
40
|
+
<k-card label="HTML">
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
42
|
+
</k-card>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col d-span-6 m-span-12 px">
|
|
45
|
+
<k-card label="Output">
|
|
46
|
+
<k-tags>
|
|
47
|
+
<label>Tags</label>
|
|
48
|
+
</k-tags>
|
|
49
|
+
</k-card>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
42
52
|
|
|
43
53
|
<h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
|
|
44
54
|
<p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
55
|
+
<div class="row -mx mb">
|
|
56
|
+
<div class="col d-span-6 m-span-12 px">
|
|
57
|
+
<k-card label="HTML">
|
|
58
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Allowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
59
|
+
</k-card>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="col d-span-6 m-span-12 px">
|
|
62
|
+
<k-card label="Output">
|
|
63
|
+
<k-tags allowed-tags="tag1,tag2,tag3">
|
|
64
|
+
<label>Allowed Tags</label>
|
|
65
|
+
</k-tags>
|
|
66
|
+
</k-card>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
49
69
|
|
|
50
70
|
<h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
|
|
51
71
|
<p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
72
|
+
<div class="row -mx mb">
|
|
73
|
+
<div class="col d-span-6 m-span-12 px">
|
|
74
|
+
<k-card label="HTML">
|
|
75
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Disallowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
76
|
+
</k-card>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="col d-span-6 m-span-12 px">
|
|
79
|
+
<k-card label="Output">
|
|
80
|
+
<k-tags disallowed-tags="tag1,tag2,tag3">
|
|
81
|
+
<label>Disallowed Tags</label>
|
|
82
|
+
</k-tags>
|
|
83
|
+
</k-card>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
56
86
|
|
|
57
87
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
58
88
|
|
|
@@ -96,9 +126,8 @@
|
|
|
96
126
|
<p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
|
|
97
127
|
<h5><code>disallowedtagschange</code></h5>
|
|
98
128
|
<p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
|
|
99
|
-
|
|
100
129
|
</main>
|
|
101
|
-
<
|
|
130
|
+
<div style="height:33vh"></div>
|
|
102
131
|
<script type="module" src="../src/components/Tags.js"></script>
|
|
103
132
|
</body>
|
|
104
133
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>ThemeSwitcher - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -112,9 +112,8 @@
|
|
|
112
112
|
<h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
|
|
113
113
|
<p>When the theme is set to <code>"auto"</code>, the component automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
|
|
114
114
|
<p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
|
|
115
|
-
|
|
116
115
|
</main>
|
|
117
|
-
<
|
|
116
|
+
<div style="height:33vh"></div>
|
|
118
117
|
<script type="module" src="../src/components/ThemeSwitcher.js"></script>
|
|
119
118
|
</body>
|
|
120
119
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Timestamp - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -33,18 +33,50 @@
|
|
|
33
33
|
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
35
|
<p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp using the default format or a custom format with tokens.</p>
|
|
36
|
-
<
|
|
37
|
-
|
|
36
|
+
<div class="row -mx mb">
|
|
37
|
+
<div class="col d-span-6 m-span-12 px">
|
|
38
|
+
<k-card label="HTML">
|
|
39
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
40
|
+
</k-card>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col d-span-6 m-span-12 px">
|
|
43
|
+
<k-card label="Output">
|
|
44
|
+
<k-timestamp timestamp="1633024800000"></k-timestamp>
|
|
45
|
+
</k-card>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
38
48
|
|
|
39
49
|
<h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
|
|
40
50
|
<p>Use the <code>format</code> attribute to specify a custom format using tokens like <code>YYYY</code> (4-digit year), <code>MM</code> (2-digit month), <code>DD</code> (2-digit day), <code>hh</code> (2-digit hour), <code>mm</code> (2-digit minute), and <code>ss</code> (2-digit second).</p>
|
|
41
|
-
<
|
|
42
|
-
|
|
51
|
+
<div class="row -mx mb">
|
|
52
|
+
<div class="col d-span-6 m-span-12 px">
|
|
53
|
+
<k-card label="HTML">
|
|
54
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
55
|
+
</k-card>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="col d-span-6 m-span-12 px">
|
|
58
|
+
<k-card label="Output">
|
|
59
|
+
<k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
|
|
60
|
+
</k-card>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
43
63
|
|
|
44
64
|
<h3 id="timeFormat"><a href="#timeFormat" class="no-link">Time Format</a></h3>
|
|
45
65
|
<p>Display time with custom formatting using hour, minute, and second tokens.</p>
|
|
46
|
-
<
|
|
47
|
-
|
|
66
|
+
<div class="row -mx mb">
|
|
67
|
+
<div class="col d-span-6 m-span-12 px">
|
|
68
|
+
<k-card label="HTML">
|
|
69
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
70
|
+
</k-card>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="col d-span-6 m-span-12 px">
|
|
73
|
+
<k-card label="Output">
|
|
74
|
+
<k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
|
|
75
|
+
</k-card>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
|
|
48
80
|
|
|
49
81
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
50
82
|
|
|
@@ -67,10 +99,8 @@
|
|
|
67
99
|
|
|
68
100
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
69
101
|
<p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent class.</p>
|
|
70
|
-
|
|
71
102
|
</main>
|
|
72
103
|
<div style="height:33vh"></div>
|
|
73
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
74
104
|
<script type="module" src="../src/components/Timestamp.js"></script>
|
|
75
105
|
</body>
|
|
76
106
|
</html>
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Toast - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<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" />
|
|
9
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|