kempo-ui 0.3.5 → 0.3.7
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/AGENTS.md +2 -1
- package/dist/components/Aside.js +1 -1
- package/dist/components/Main.js +1 -1
- package/docs/components/accordion.html +240 -8
- package/docs/components/aside-items.html +13 -9
- package/docs/components/aside-menu.html +13 -9
- package/docs/components/aside-push.html +11 -6
- package/docs/components/aside.html +289 -115
- package/docs/components/card.html +238 -7
- package/docs/components/color-picker.html +245 -14
- package/docs/components/content-slider.html +240 -8
- package/docs/components/context.html +241 -7
- package/docs/components/dialog.html +238 -7
- package/docs/components/dropdown.html +238 -7
- package/docs/components/filter-list.html +239 -10
- package/docs/components/focus-capture.html +241 -10
- package/docs/components/html-editor.html +266 -35
- package/docs/components/hybrid-component.html +238 -6
- package/docs/components/icon.html +239 -9
- package/docs/components/import.html +239 -8
- package/docs/components/light-component.html +239 -7
- package/docs/components/nav.html +240 -8
- package/docs/components/photo-viewer.html +239 -9
- package/docs/components/resize.html +240 -9
- package/docs/components/shadow-component.html +239 -7
- package/docs/components/show-more.html +237 -8
- package/docs/components/sortable.html +239 -8
- package/docs/components/spinner.html +237 -6
- package/docs/components/split.html +241 -10
- package/docs/components/table.html +241 -11
- package/docs/components/tableControls.html +240 -7
- package/docs/components/tableCustomFields.html +241 -8
- package/docs/components/tableFetchRecords.html +239 -7
- package/docs/components/tableFieldSortHide.html +239 -7
- package/docs/components/tablePagination.html +246 -13
- package/docs/components/tablePlaceholder.html +241 -8
- package/docs/components/tableRecordEditing.html +241 -8
- package/docs/components/tableRecordFiltering.html +239 -7
- package/docs/components/tableRecordHiding.html +241 -9
- package/docs/components/tableRecordSearching.html +239 -7
- package/docs/components/tableRecordSelection.html +240 -7
- package/docs/components/tableRowControls.html +241 -8
- package/docs/components/tableServerSync.html +245 -11
- package/docs/components/tableSorting.html +239 -7
- package/docs/components/tabs.html +240 -7
- package/docs/components/tags.html +239 -7
- package/docs/components/theme-select.html +239 -7
- package/docs/components/theme-switcher.html +240 -8
- package/docs/components/timestamp.html +239 -8
- package/docs/components/toast.html +240 -8
- package/docs/components/toggle.html +240 -9
- package/docs/components/tree.html +239 -8
- package/docs/index.html +244 -6
- package/docs/prod.config.json +0 -4
- package/docs/src/components/Aside.js +1 -1
- package/docs/src/components/Main.js +1 -1
- package/docs/utils/context.html +237 -6
- package/docs/utils/cookie.html +251 -21
- package/docs/utils/debounce.html +236 -5
- package/docs/utils/drag.html +236 -5
- package/docs/utils/elevation.html +238 -6
- package/docs/utils/formatTimestamp.html +239 -9
- package/docs/utils/object.html +236 -5
- package/docs/utils/propConverters.html +233 -3
- package/docs/utils/string.html +236 -5
- package/docs/utils/theme.html +237 -6
- package/docs/utils/toTitleCase.html +239 -9
- package/docs/utils/type.html +236 -5
- package/docs/utils/wait.html +236 -5
- package/docs-src/.config.js +16 -0
- package/docs-src/bare.template.html +16 -0
- package/docs-src/components/accordion.page.html +201 -0
- package/docs-src/components/aside-items.page.html +36 -0
- package/docs-src/components/aside-menu.page.html +36 -0
- package/docs-src/components/aside-push.page.html +20 -0
- package/docs-src/components/aside.page.html +494 -0
- package/docs-src/components/card.page.html +78 -0
- package/docs-src/components/color-picker.page.html +559 -0
- package/docs-src/components/content-slider.page.html +266 -0
- package/docs-src/components/context.page.html +214 -0
- package/docs-src/components/dialog.page.html +365 -0
- package/docs-src/components/dropdown.page.html +300 -0
- package/docs-src/components/filter-list.page.html +117 -0
- package/docs-src/components/focus-capture.page.html +97 -0
- package/docs-src/components/html-editor.page.html +423 -0
- package/docs-src/components/hybrid-component.page.html +96 -0
- package/docs-src/components/icon.page.html +208 -0
- package/docs-src/components/import.page.html +76 -0
- package/docs-src/components/light-component.page.html +99 -0
- package/docs-src/components/nav.page.html +106 -0
- package/docs-src/components/photo-viewer.page.html +253 -0
- package/docs-src/components/resize.page.html +161 -0
- package/docs-src/components/shadow-component.page.html +84 -0
- package/docs-src/components/show-more.page.html +113 -0
- package/docs-src/components/sortable.page.html +117 -0
- package/docs-src/components/spinner.page.html +197 -0
- package/docs-src/components/split.page.html +195 -0
- package/docs-src/components/table.page.html +283 -0
- package/docs-src/components/tableControls.page.html +64 -0
- package/docs-src/components/tableCustomFields.page.html +124 -0
- package/docs-src/components/tableFetchRecords.page.html +95 -0
- package/docs-src/components/tableFieldSortHide.page.html +56 -0
- package/docs-src/components/tablePagination.page.html +85 -0
- package/docs-src/components/tablePlaceholder.page.html +73 -0
- package/docs-src/components/tableRecordEditing.page.html +161 -0
- package/docs-src/components/tableRecordFiltering.page.html +69 -0
- package/docs-src/components/tableRecordHiding.page.html +65 -0
- package/docs-src/components/tableRecordSearching.page.html +56 -0
- package/docs-src/components/tableRecordSelection.page.html +60 -0
- package/docs-src/components/tableRowControls.page.html +62 -0
- package/docs-src/components/tableServerSync.page.html +129 -0
- package/docs-src/components/tableSorting.page.html +54 -0
- package/docs-src/components/tabs.page.html +201 -0
- package/docs-src/components/tags.page.html +157 -0
- package/docs-src/components/theme-select.page.html +106 -0
- package/docs-src/components/theme-switcher.page.html +122 -0
- package/docs-src/components/timestamp.page.html +109 -0
- package/docs-src/components/toast.page.html +338 -0
- package/docs-src/components/toggle.page.html +177 -0
- package/docs-src/components/tree.page.html +356 -0
- package/docs-src/default.template.html +28 -0
- package/docs-src/index.page.html +312 -0
- package/docs-src/nav.fragment.html +228 -0
- package/docs-src/utils/context.page.html +143 -0
- package/docs-src/utils/cookie.page.html +128 -0
- package/docs-src/utils/debounce.page.html +42 -0
- package/docs-src/utils/drag.page.html +64 -0
- package/docs-src/utils/elevation.page.html +144 -0
- package/docs-src/utils/formatTimestamp.page.html +76 -0
- package/docs-src/utils/object.page.html +76 -0
- package/docs-src/utils/propConverters.page.html +73 -0
- package/docs-src/utils/string.page.html +66 -0
- package/docs-src/utils/theme.page.html +136 -0
- package/docs-src/utils/toTitleCase.page.html +52 -0
- package/docs-src/utils/type.page.html +31 -0
- package/docs-src/utils/wait.page.html +31 -0
- package/package.json +4 -4
- package/scripts/build.js +5 -0
- package/scripts/docs.js +5 -52
- package/src/components/Aside.js +12 -1
- package/src/components/Main.js +1 -1
- package/tests/components/Aside.browser-test.js +75 -0
- package/docs/dev.config.json +0 -20
- package/docs/nav-1.inc.html +0 -168
- package/docs/nav.inc.html +0 -168
- package/docs/nav.inc.js +0 -70
|
@@ -11,15 +11,246 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
</head>
|
|
16
16
|
<body>
|
|
17
|
-
|
|
18
|
-
<
|
|
17
|
+
|
|
18
|
+
<k-nav fixed class="bg-primary">
|
|
19
|
+
<button id="toggleNavSideMenu" class="link">
|
|
20
|
+
<k-icon name="menu"></k-icon>
|
|
21
|
+
</button>
|
|
22
|
+
<a href="../" class="d-if ph" style="align-items: center">
|
|
23
|
+
<img src="../media/icon32.png" alt="Kempo UI Icon" class="pr" />
|
|
24
|
+
Kempo UI
|
|
25
|
+
</a>
|
|
26
|
+
<div style="position:relative;margin:0 .25rem;align-self:center;" theme="light">
|
|
27
|
+
<input id="navSearchInput" type="search" placeholder="Search docs..." autocomplete="off" style="width:11rem;" />
|
|
28
|
+
<div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
|
|
29
|
+
<k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
|
|
30
|
+
<k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
|
|
31
|
+
<k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
|
|
32
|
+
<k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
33
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
|
|
34
|
+
<k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
|
|
35
|
+
<k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
|
|
36
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
37
|
+
<k-filter-item filter-keywords="dropdown select components"><a href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
38
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a href="../components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
|
|
39
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a href="../components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
40
|
+
<k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
|
|
41
|
+
<k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
42
|
+
<k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
43
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
44
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
45
|
+
<k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
46
|
+
<k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
|
|
47
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
|
|
48
|
+
<k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
49
|
+
<k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
50
|
+
<k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
51
|
+
<k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
52
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
53
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
54
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
55
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
56
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
57
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
58
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
59
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
60
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
61
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
62
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
63
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
64
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a href="../components/tablePlaceholder.html">Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
65
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
66
|
+
<k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
67
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
|
|
68
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
69
|
+
<k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
|
|
70
|
+
<k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
|
|
71
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
|
|
72
|
+
<k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
73
|
+
<k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
74
|
+
<k-filter-item filter-keywords="light component base"><a href="../components/light-component.html">Light Component<br><small>Base Component</small></a></k-filter-item>
|
|
75
|
+
<k-filter-item filter-keywords="hybrid component base"><a href="../components/hybrid-component.html">Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
76
|
+
<k-filter-item filter-keywords="cookie utils utility"><a href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
77
|
+
<k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
78
|
+
<k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
79
|
+
<k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
80
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
81
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
82
|
+
<k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
83
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
|
|
84
|
+
<k-filter-item filter-keywords="string utils utility"><a href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
85
|
+
<k-filter-item filter-keywords="theme utils utility"><a href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
86
|
+
<k-filter-item filter-keywords="type utils utility"><a href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
87
|
+
<k-filter-item filter-keywords="wait async utils utility"><a href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
88
|
+
</k-filter-list>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="flex"></div>
|
|
92
|
+
<a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
|
|
93
|
+
<a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icon></a>
|
|
94
|
+
<a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icon></a>
|
|
95
|
+
<k-theme-switcher></k-theme-switcher>
|
|
96
|
+
</k-nav>
|
|
97
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
98
|
+
<k-aside id="navSideMenu" main="overlay" state="offscreen">
|
|
99
|
+
<menu>
|
|
100
|
+
<a href="../" class="ta-center bb mb r0">
|
|
101
|
+
<h1 class="tc-primary">Kempo UI</h1>
|
|
102
|
+
<img src="../media/icon128.png" alt="Kempo UI Icon" />
|
|
103
|
+
</a>
|
|
104
|
+
|
|
105
|
+
<div class="pl mb">
|
|
106
|
+
<h3>Components</h3>
|
|
107
|
+
<a href="../components/accordion.html">Accordion</a>
|
|
108
|
+
<a href="../components/aside.html">Aside</a>
|
|
109
|
+
<a href="../components/card.html">Card</a>
|
|
110
|
+
<a href="../components/color-picker.html">ColorPicker</a>
|
|
111
|
+
<a href="../components/content-slider.html">Content Slider</a>
|
|
112
|
+
<a href="../components/context.html">Context</a>
|
|
113
|
+
<a href="../components/dialog.html">Dialog</a>
|
|
114
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
115
|
+
<a href="../components/filter-list.html">Filter List</a>
|
|
116
|
+
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
117
|
+
<a href="../components/html-editor.html">HTML Editor</a>
|
|
118
|
+
<a href="../components/icon.html">Icon</a>
|
|
119
|
+
<a href="../components/import.html">Import</a>
|
|
120
|
+
<a href="../components/nav.html">Nav</a>
|
|
121
|
+
<a href="../components/photo-viewer.html">Photo Viewer</a>
|
|
122
|
+
<a href="../components/resize.html">Resize</a>
|
|
123
|
+
<a href="../components/show-more.html">Show More</a>
|
|
124
|
+
<a href="../components/sortable.html">Sortable</a>
|
|
125
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
126
|
+
<a href="../components/split.html">Split</a>
|
|
127
|
+
<a href="../components/table.html">Table</a>
|
|
128
|
+
<a href="../components/tabs.html">Tabs</a>
|
|
129
|
+
<a href="../components/tags.html">Tags</a>
|
|
130
|
+
<a href="../components/theme-select.html">Theme Select</a>
|
|
131
|
+
<a href="../components/theme-switcher.html">Theme Switcher</a>
|
|
132
|
+
<a href="../components/timestamp.html">Timestamp</a>
|
|
133
|
+
<a href="../components/toast.html">Toast</a>
|
|
134
|
+
<a href="../components/toggle.html">Toggle</a>
|
|
135
|
+
<a href="../components/tree.html">Tree</a>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<h5 class="mb0">Base Components</h5>
|
|
139
|
+
<div class="pl mb">
|
|
140
|
+
<a href="../components/shadow-component.html">Shadow Component</a>
|
|
141
|
+
<a href="../components/light-component.html">Light Component</a>
|
|
142
|
+
<a href="../components/hybrid-component.html">Hybrid Component</a>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<h5 class="mb0">Utils</h5>
|
|
146
|
+
<div class="pl mb">
|
|
147
|
+
<a href="../utils/cookie.html">cookie</a>
|
|
148
|
+
<a href="../utils/context.html">context</a>
|
|
149
|
+
<a href="../utils/debounce.html">debounce</a>
|
|
150
|
+
<a href="../utils/drag.html">drag</a>
|
|
151
|
+
<a href="../utils/elevation.html">elevation</a>
|
|
152
|
+
<a href="../utils/formatTimestamp.html">formatTimestamp</a>
|
|
153
|
+
<a href="../utils/object.html">object</a>
|
|
154
|
+
<a href="../utils/propConverters.html">propConverters</a>
|
|
155
|
+
<a href="../utils/string.html">string</a>
|
|
156
|
+
<a href="../utils/theme.html">theme</a>
|
|
157
|
+
<a href="../utils/type.html">type</a>
|
|
158
|
+
<a href="../utils/wait.html">wait</a>
|
|
159
|
+
</div>
|
|
160
|
+
</menu>
|
|
161
|
+
</k-aside>
|
|
162
|
+
<style>
|
|
163
|
+
#navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
|
|
164
|
+
#navSearchList a:hover{background:rgba(128,128,128,.15);}
|
|
165
|
+
#navSearchList a small{display:block;color:var(--tc_muted);}
|
|
166
|
+
</style>
|
|
167
|
+
<script src="../src/components/Nav.js" type="module"></script>
|
|
168
|
+
<script src="../src/components/FilterList.js" type="module"></script>
|
|
169
|
+
<script src="../src/components/FilterItem.js" type="module"></script>
|
|
170
|
+
<script src="../src/components/Aside.js" type="module"></script>
|
|
171
|
+
<script src="../src/components/Icon.js" type="module"></script>
|
|
172
|
+
<script src="../src/components/ThemeSwitcher.js" type="module"></script>
|
|
173
|
+
<script type="module">
|
|
174
|
+
import debounce from '../src/utils/debounce.js';
|
|
175
|
+
|
|
176
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
177
|
+
await window.customElements.whenDefined('k-aside');
|
|
178
|
+
document.getElementById('navSideMenu').toggle();
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
document.addEventListener('click', function(e) {
|
|
182
|
+
if(e.target.matches('a[href^="#"]')) {
|
|
183
|
+
e.preventDefault();
|
|
184
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
185
|
+
const target = document.getElementById(targetId);
|
|
186
|
+
if(target) {
|
|
187
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
188
|
+
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
189
|
+
history.replaceState(null, '', url);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
/*
|
|
195
|
+
Nav Search
|
|
196
|
+
*/
|
|
197
|
+
const searchInput = document.getElementById('navSearchInput');
|
|
198
|
+
const searchDropdown = document.getElementById('navSearchDropdown');
|
|
199
|
+
let navSearchList = null;
|
|
200
|
+
|
|
201
|
+
const openSearch = async () => {
|
|
202
|
+
await customElements.whenDefined('k-filter-list');
|
|
203
|
+
if(!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
204
|
+
navSearchList.filter(searchInput.value);
|
|
205
|
+
searchDropdown.hidden = false;
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
const closeSearch = () => {
|
|
209
|
+
searchDropdown.hidden = true;
|
|
210
|
+
navSearchList?.clearFocus();
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
searchInput.addEventListener('focus', openSearch);
|
|
214
|
+
|
|
215
|
+
searchInput.addEventListener('input', debounce(e => {
|
|
216
|
+
navSearchList?.filter(e.target.value);
|
|
217
|
+
}, 150));
|
|
218
|
+
|
|
219
|
+
searchInput.addEventListener('keydown', e => {
|
|
220
|
+
if(e.key === 'Escape') {
|
|
221
|
+
searchInput.value = '';
|
|
222
|
+
searchInput.blur();
|
|
223
|
+
closeSearch();
|
|
224
|
+
} else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
225
|
+
navSearchList?.handleKeydown(e);
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
searchInput.addEventListener('blur', () => {
|
|
230
|
+
setTimeout(closeSearch, 150);
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
document.addEventListener('keydown', e => {
|
|
234
|
+
let active = document.activeElement;
|
|
235
|
+
while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
236
|
+
const tag = active?.tagName;
|
|
237
|
+
if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
238
|
+
if(e.metaKey || e.ctrlKey || e.altKey) return;
|
|
239
|
+
if(e.key.length === 1) {
|
|
240
|
+
searchInput.focus();
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
</script>
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
<h1 class="ta-center">Aside</h1>
|
|
247
|
+
|
|
19
248
|
<k-main>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
249
|
+
|
|
250
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
251
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
252
|
+
<k-accordion-panel name="toc-panel">
|
|
253
|
+
<div class="m">
|
|
23
254
|
<h6>Overlay Mode</h6>
|
|
24
255
|
<a href="#overlayBasic">Basic Usage</a><br />
|
|
25
256
|
<a href="#overlayClose">Closing Options</a><br />
|
|
@@ -34,6 +265,7 @@
|
|
|
34
265
|
<a href="#customWidth">Custom Width</a><br />
|
|
35
266
|
<a href="#customBg">Custom Background</a><br />
|
|
36
267
|
<a href="#customCollapsed">Custom Collapsed Width</a><br />
|
|
268
|
+
<a href="#persistentState">Persistent State</a><br />
|
|
37
269
|
|
|
38
270
|
<h6 class="mt">Sub-Components</h6>
|
|
39
271
|
<a href="#subItems">Items & Labels</a><br />
|
|
@@ -56,7 +288,8 @@
|
|
|
56
288
|
<a href="#asideSpacer">k-aside-spacer</a><br />
|
|
57
289
|
<a href="#asideToggle">k-aside-toggle</a><br />
|
|
58
290
|
</div>
|
|
59
|
-
|
|
291
|
+
</k-accordion-panel>
|
|
292
|
+
</k-accordion>
|
|
60
293
|
|
|
61
294
|
<h2>Overlay Mode</h2>
|
|
62
295
|
<p>The default mode. Use <code>state="offscreen"</code> as the starting state; call <code>expand()</code> to open. Clicking the backdrop or pressing ESC closes it by default.</p>
|
|
@@ -66,12 +299,7 @@
|
|
|
66
299
|
<div class="row -mx">
|
|
67
300
|
<div class="col m-span-12 px">
|
|
68
301
|
<k-card label="HTML">
|
|
69
|
-
<pre><code class="hljs
|
|
70
|
-
<p>Overlay Menu Content</p>
|
|
71
|
-
</k-aside>
|
|
72
|
-
<button onclick="this.previousElementSibling.expand()">
|
|
73
|
-
Open Menu
|
|
74
|
-
</button></code></pre>
|
|
302
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Overlay Menu Content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span> Open Menu <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
75
303
|
</k-card>
|
|
76
304
|
</div>
|
|
77
305
|
<div class="col m-span-12 px">
|
|
@@ -95,16 +323,7 @@
|
|
|
95
323
|
<div class="row -mx">
|
|
96
324
|
<div class="col m-span-12 px">
|
|
97
325
|
<k-card label="HTML">
|
|
98
|
-
<pre><code class="hljs
|
|
99
|
-
overlay-close="false">
|
|
100
|
-
<p>Overlay Menu</p>
|
|
101
|
-
<button onclick="this.closest('k-aside').hide()">
|
|
102
|
-
Close
|
|
103
|
-
</button>
|
|
104
|
-
</k-aside>
|
|
105
|
-
<button onclick="this.previousElementSibling.expand()">
|
|
106
|
-
Open Menu
|
|
107
|
-
</button></code></pre>
|
|
326
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span> <span class="hljs-attr">overlay-close</span>=<span class="hljs-string">'false'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Overlay Menu<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.closest("k-aside").hide()'</span>></span> Close <span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span> Open Menu <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
108
327
|
</k-card>
|
|
109
328
|
</div>
|
|
110
329
|
<div class="col m-span-12 px">
|
|
@@ -132,13 +351,7 @@
|
|
|
132
351
|
<div class="row -mx">
|
|
133
352
|
<div class="col m-span-12 px">
|
|
134
353
|
<k-card label="HTML">
|
|
135
|
-
<pre><code class="hljs
|
|
136
|
-
side="right">
|
|
137
|
-
<p>Right Side Menu</p>
|
|
138
|
-
</k-aside>
|
|
139
|
-
<button onclick="this.previousElementSibling.expand()">
|
|
140
|
-
Open Right Menu
|
|
141
|
-
</button></code></pre>
|
|
354
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span> <span class="hljs-attr">side</span>=<span class="hljs-string">'right'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Right Side Menu<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span> Open Right Menu <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
142
355
|
</k-card>
|
|
143
356
|
</div>
|
|
144
357
|
<div class="col m-span-12 px">
|
|
@@ -164,17 +377,7 @@
|
|
|
164
377
|
<div class="row -mx">
|
|
165
378
|
<div class="col m-span-12 px">
|
|
166
379
|
<k-card label="HTML">
|
|
167
|
-
<pre><code class="hljs
|
|
168
|
-
<nav>
|
|
169
|
-
<h3>Sidebar</h3>
|
|
170
|
-
<a href="#">Home</a>
|
|
171
|
-
<a href="#">About</a>
|
|
172
|
-
<a href="#">Contact</a>
|
|
173
|
-
</nav>
|
|
174
|
-
</k-aside>
|
|
175
|
-
<button onclick="this.previousElementSibling.toggle()">
|
|
176
|
-
Toggle Sidebar
|
|
177
|
-
</button></code></pre>
|
|
380
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>About<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Contact<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.toggle()'</span>></span> Toggle Sidebar <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
178
381
|
</k-card>
|
|
179
382
|
</div>
|
|
180
383
|
<div class="col m-span-12 px">
|
|
@@ -203,17 +406,7 @@
|
|
|
203
406
|
<div class="row -mx">
|
|
204
407
|
<div class="col m-span-12 px">
|
|
205
408
|
<k-card label="HTML">
|
|
206
|
-
<pre><code class="hljs
|
|
207
|
-
<nav>
|
|
208
|
-
<h3>Menu</h3>
|
|
209
|
-
<a href="#">Dashboard</a>
|
|
210
|
-
<a href="#">Settings</a>
|
|
211
|
-
</nav>
|
|
212
|
-
</k-aside>
|
|
213
|
-
|
|
214
|
-
<button onclick="aside.expand()">Expand</button>
|
|
215
|
-
<button onclick="aside.collapse()">Collapse</button>
|
|
216
|
-
<button onclick="aside.hide()">Hide</button></code></pre>
|
|
409
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Menu<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Dashboard<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.expand()'</span>></span>Expand<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.collapse()'</span>></span>Collapse<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.hide()'</span>></span>Hide<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
217
410
|
</k-card>
|
|
218
411
|
</div>
|
|
219
412
|
<div class="col m-span-12 px">
|
|
@@ -244,16 +437,7 @@
|
|
|
244
437
|
<div class="row -mx">
|
|
245
438
|
<div class="col m-span-12 px">
|
|
246
439
|
<k-card label="HTML">
|
|
247
|
-
<pre><code class="hljs
|
|
248
|
-
<nav>
|
|
249
|
-
<h3>Right Panel</h3>
|
|
250
|
-
<a href="#">Item 1</a>
|
|
251
|
-
<a href="#">Item 2</a>
|
|
252
|
-
</nav>
|
|
253
|
-
</k-aside>
|
|
254
|
-
<button onclick="this.previousElementSibling.toggle()">
|
|
255
|
-
Toggle Right Sidebar
|
|
256
|
-
</button></code></pre>
|
|
440
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">side</span>=<span class="hljs-string">'right'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Right Panel<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.toggle()'</span>></span> Toggle Right Sidebar <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
257
441
|
</k-card>
|
|
258
442
|
</div>
|
|
259
443
|
<div class="col m-span-12 px">
|
|
@@ -283,15 +467,7 @@
|
|
|
283
467
|
<div class="row -mx">
|
|
284
468
|
<div class="col m-span-12 px">
|
|
285
469
|
<k-card label="HTML">
|
|
286
|
-
<pre><code class="hljs
|
|
287
|
-
k-aside { --width: 30rem; }
|
|
288
|
-
</style>
|
|
289
|
-
<k-aside state="offscreen">
|
|
290
|
-
<p>This menu is 30rem wide.</p>
|
|
291
|
-
</k-aside>
|
|
292
|
-
<button onclick="this.previousElementSibling.expand()">
|
|
293
|
-
Open Wide Menu
|
|
294
|
-
</button></code></pre>
|
|
470
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"><br> k-<span class="hljs-selector-tag">aside</span> {<br> <span class="hljs-attr">--width</span>: <span class="hljs-number">30rem</span>;<br> }<br></span><span class="hljs-tag"></<span class="hljs-name">style</span>></span><br><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This menu is 30rem wide.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span> Open Wide Menu <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
295
471
|
</k-card>
|
|
296
472
|
</div>
|
|
297
473
|
<div class="col m-span-12 px">
|
|
@@ -315,19 +491,7 @@
|
|
|
315
491
|
<div class="row -mx">
|
|
316
492
|
<div class="col m-span-12 px">
|
|
317
493
|
<k-card label="HTML">
|
|
318
|
-
<pre><code class="hljs
|
|
319
|
-
k-aside { --bg: var(--c_primary); }
|
|
320
|
-
</style>
|
|
321
|
-
<k-aside state="offscreen">
|
|
322
|
-
<nav class="p tc-light">
|
|
323
|
-
<h3>Branded Menu</h3>
|
|
324
|
-
<a href="#" class="tc-light">Home</a>
|
|
325
|
-
<a href="#" class="tc-light">About</a>
|
|
326
|
-
</nav>
|
|
327
|
-
</k-aside>
|
|
328
|
-
<button onclick="this.previousElementSibling.expand()">
|
|
329
|
-
Open Branded Menu
|
|
330
|
-
</button></code></pre>
|
|
494
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"><br> k-<span class="hljs-selector-tag">aside</span> {<br> <span class="hljs-attr">--bg</span>: <span class="hljs-built_in">var</span>(--c_primary);<br> }<br></span><span class="hljs-tag"></<span class="hljs-name">style</span>></span><br><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'p tc-light'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Branded Menu<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'tc-light'</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'tc-light'</span>></span>About<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span> Open Branded Menu <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
331
495
|
</k-card>
|
|
332
496
|
</div>
|
|
333
497
|
<div class="col m-span-12 px">
|
|
@@ -355,21 +519,7 @@
|
|
|
355
519
|
<div class="row -mx">
|
|
356
520
|
<div class="col m-span-12 px">
|
|
357
521
|
<k-card label="HTML">
|
|
358
|
-
<pre><code class="hljs
|
|
359
|
-
k-aside { --collapsed-width: 5rem; }
|
|
360
|
-
</style>
|
|
361
|
-
<k-aside main="push" state="offscreen">
|
|
362
|
-
<nav>
|
|
363
|
-
<h3>Sidebar</h3>
|
|
364
|
-
<a href="#">Dashboard</a>
|
|
365
|
-
<a href="#">Reports</a>
|
|
366
|
-
<a href="#">Settings</a>
|
|
367
|
-
</nav>
|
|
368
|
-
</k-aside>
|
|
369
|
-
|
|
370
|
-
<button onclick="aside.expand()">Expand</button>
|
|
371
|
-
<button onclick="aside.collapse()">Collapse</button>
|
|
372
|
-
<button onclick="aside.hide()">Hide</button></code></pre>
|
|
522
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"><br> k-<span class="hljs-selector-tag">aside</span> {<br> <span class="hljs-attr">--collapsed-width</span>: <span class="hljs-number">5rem</span>;<br> }<br></span><span class="hljs-tag"></<span class="hljs-name">style</span>></span><br><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Dashboard<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Reports<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.expand()'</span>></span>Expand<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.collapse()'</span>></span>Collapse<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'aside.hide()'</span>></span>Hide<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
373
523
|
</k-card>
|
|
374
524
|
</div>
|
|
375
525
|
<div class="col m-span-12 px">
|
|
@@ -397,6 +547,36 @@
|
|
|
397
547
|
</div>
|
|
398
548
|
</div>
|
|
399
549
|
|
|
550
|
+
<h3 id="persistentState"><a href="#persistentState" class="no-link">Persistent State</a></h3>
|
|
551
|
+
<p>Use <code>persistent-id</code> to remember the aside's state across page loads. The state is saved to <code>localStorage</code> under the key <code>aside-persistent-id-{id}</code> and restored when the element is connected. Works with <code>"expanded"</code>, <code>"collapsed"</code>, and <code>"offscreen"</code> states.</p>
|
|
552
|
+
<div class="row -mx">
|
|
553
|
+
<div class="col m-span-12 px">
|
|
554
|
+
<k-card label="HTML">
|
|
555
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">'my-nav'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sidebar Content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.expand()'</span>></span>Expand<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.collapse()'</span>></span>Collapse<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'this.previousElementSibling.hide()'</span>></span>Hide<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
556
|
+
</k-card>
|
|
557
|
+
</div>
|
|
558
|
+
<div class="col m-span-12 px">
|
|
559
|
+
<k-card label="Output">
|
|
560
|
+
<k-aside id="aside-persist" main="push" state="offscreen" persistent-id="docs-aside-persist-demo">
|
|
561
|
+
<div class="navbar-spacer"></div>
|
|
562
|
+
<nav>
|
|
563
|
+
<p>Sidebar Content</p>
|
|
564
|
+
</nav>
|
|
565
|
+
</k-aside>
|
|
566
|
+
<button id="btn-persist-expand">Expand</button>
|
|
567
|
+
<button id="btn-persist-collapse">Collapse</button>
|
|
568
|
+
<button id="btn-persist-hide">Hide</button>
|
|
569
|
+
<p class="mt"><small>Toggle the state and reload the page — it will be restored.</small></p>
|
|
570
|
+
<script>
|
|
571
|
+
const aPersist = document.getElementById('aside-persist');
|
|
572
|
+
document.getElementById('btn-persist-expand').addEventListener('click',()=> aPersist.expand());
|
|
573
|
+
document.getElementById('btn-persist-collapse').addEventListener('click',()=> aPersist.collapse());
|
|
574
|
+
document.getElementById('btn-persist-hide').addEventListener('click',()=> aPersist.hide());
|
|
575
|
+
</script>
|
|
576
|
+
</k-card>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
|
|
400
580
|
<h2 id="subItems"><a href="#subItems" class="no-link">Items & Labels</a></h2>
|
|
401
581
|
<p>Use <code>k-aside-item</code>, <code>k-aside-label</code>, and <code>k-aside-spacer</code> inside a push-mode aside for a navigation panel with icons and text. Set <code>--aside_padding: 0;</code> on the aside so the sub-components control their own spacing.</p>
|
|
402
582
|
<p>Items and labels automatically react to the aside's collapsed/expanded state.</p>
|
|
@@ -433,17 +613,7 @@
|
|
|
433
613
|
<div class="row -mx">
|
|
434
614
|
<div class="col m-span-12 px">
|
|
435
615
|
<k-card label="HTML">
|
|
436
|
-
<pre><code class="hljs
|
|
437
|
-
<p>Open and close me to see events.</p>
|
|
438
|
-
</k-aside>
|
|
439
|
-
<button onclick="myAside.expand()">Open Menu</button>
|
|
440
|
-
<div id="log"></div>
|
|
441
|
-
|
|
442
|
-
<script>
|
|
443
|
-
myAside.addEventListener('aside_state_change', e => {
|
|
444
|
-
log.textContent = 'state: ' + e.detail.state;
|
|
445
|
-
});
|
|
446
|
-
</script></code></pre>
|
|
616
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'myAside'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'offscreen'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Open and close me to see events.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">'myAside.expand()'</span>></span>Open Menu<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'log'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> myAside.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'aside_state_change'</span>, <span class="hljs-function"><span class="hljs-params">e</span> =></span> {<br> log.<span class="hljs-property">textContent</span> = <span class="hljs-string">'state: '</span> + e.<span class="hljs-property">detail</span>.<span class="hljs-property">state</span>;<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
447
617
|
</k-card>
|
|
448
618
|
</div>
|
|
449
619
|
<div class="col m-span-12 px">
|
|
@@ -492,6 +662,8 @@
|
|
|
492
662
|
<p>Whether clicking the overlay backdrop closes the aside. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
|
|
493
663
|
<h5><code>escClose<i>: boolean</i></code></h5>
|
|
494
664
|
<p>Whether pressing the ESC key closes the aside. Defaults to <code>true</code>. Syncs to <code>esc-close</code> attribute.</p>
|
|
665
|
+
<h5><code>persistentId<i>: string | null</i></code></h5>
|
|
666
|
+
<p>When set, the aside's <code>state</code> is saved to <code>localStorage</code> under <code>aside-persistent-id-{id}</code> on every change, and restored when the element connects. Defaults to <code>null</code>. Syncs to <code>persistent-id</code> attribute.</p>
|
|
495
667
|
|
|
496
668
|
<h3 id="eventRef"><a href="#eventRef" class="no-link">Events</a></h3>
|
|
497
669
|
<h5><code>aside_state_change</code></h5>
|
|
@@ -560,12 +732,14 @@
|
|
|
560
732
|
<h3 id="asideToggle"><a href="#asideToggle" class="no-link">k-aside-toggle</a></h3>
|
|
561
733
|
<p>A header with a collapse/expand toggle button. Renders an arrow icon that flips direction based on state. Place content (e.g. a logo) in the default slot; it hides when collapsed.</p>
|
|
562
734
|
<p>No additional attributes. Automatically syncs with the parent aside's state.</p>
|
|
563
|
-
|
|
735
|
+
|
|
564
736
|
</k-main>
|
|
565
737
|
<div style="height:33vh"></div>
|
|
566
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
567
738
|
<script type="module" src="../src/components/Main.js"></script>
|
|
568
|
-
|
|
569
|
-
|
|
739
|
+
|
|
740
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
741
|
+
<script type="module" src="../src/components/Aside.js"></script>
|
|
742
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
743
|
+
|
|
570
744
|
</body>
|
|
571
|
-
</html>
|
|
745
|
+
</html>
|