@mono-lit/helper 0.0.9 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion-core-DaNyPWRr.js +277 -0
- package/dist/alert-core-DWtHbX_-.js +134 -0
- package/dist/breadcrumb-list-core-Dh68T8Cf.js +747 -0
- package/dist/{mono-button-CLkHg3WW.js → button-core-DerXg84Q.js} +3 -276
- package/dist/button-dropdown-core-DKYEOyjy.js +654 -0
- package/dist/button-utils-D5-66M02.js +63 -0
- package/dist/card-utils-l80qAmrN.js +312 -0
- package/dist/chart-core-DV7hD3ZY.js +801 -0
- package/dist/checkbox-utils-DKdrhAzF.js +337 -0
- package/dist/chip-utils-DpRrd7Zj.js +403 -0
- package/dist/{data-source-controller-C6C4ej_M.js → data-source-controller-DS_JLrmS.js} +1 -1
- package/dist/{data-source-options-fxT5QIX4.js → data-source-options-DJUNU26C.js} +6 -6
- package/dist/{data-source-read-BL266IW0.js → data-source-read-uKJpRAzx.js} +2 -2
- package/dist/date-core-CyuSyvvG.js +734 -0
- package/dist/drawer-core-DbFWvNln.js +759 -0
- package/dist/dropdown-core-BCH1pK14.js +511 -0
- package/dist/dropdown-table-core-SfHUJVFq.js +1342 -0
- package/dist/export.js +1 -1
- package/dist/{field-path-BabiMrrA.js → field-path-DK2VBWHl.js} +1 -1
- package/dist/field-tooltip.css_raw-DVblekCl.js +5 -0
- package/dist/{field-validation.css_raw-Cx6SGrfP.js → field-validation.css_raw-BU7C6173.js} +1 -170
- package/dist/file-upload-core-Cz_dBQMx.js +624 -0
- package/dist/filter-builder-core-DyWjbBP7.js +381 -0
- package/dist/{filter-builder-B6Y2mmbM.js → filter-builder-vbqIuPhX.js} +1 -1
- package/dist/{filter-eval-ChDSaAUH.js → filter-eval-CqeBnMYh.js} +1 -1
- package/dist/{filter-odata-Bi27XUpQ.js → filter-odata-GsczYKNC.js} +1 -1
- package/dist/{hydration-flush-BaE9gN3C.js → hydration-flush-Volt9X7Q.js} +2 -1071
- package/dist/index.js +11 -11
- package/dist/{index.node-DTqDBca7.js → index.node-Csy9zrr1.js} +4 -4
- package/dist/index.node.js +11 -11
- package/dist/input-utils-BglY-k0H.js +1145 -0
- package/dist/menu-core-DkAYuCZ2.js +831 -0
- package/dist/modal-core-CSBSPN_m.js +844 -0
- package/dist/mono-button-DVvZ03P-.js +280 -0
- package/dist/{mono-button.shadow-DqZMpcqY.js → mono-button.shadow-BANxMGln.js} +6 -594
- package/dist/{mono-data-chart-NKPdAgVq.js → mono-data-chart-ChF4J9RT.js} +6 -6
- package/dist/{mono-data-dropdown-B2iRpJuI.js → mono-data-dropdown-Bgj2PDfm.js} +1 -1
- package/dist/{mono-data-grid-llJCX9MC.js → mono-data-grid-DJkp96N-.js} +144 -46
- package/dist/{mono-event-BPku9HpS.js → mono-event-CAZf0F_k.js} +14 -9
- package/dist/{mono-form-controller-BrA10erm.js → mono-form-controller-DxZLvyg6.js} +2 -1
- package/dist/mono-table-checkbox-core-BKOMx8R5.js +5288 -0
- package/dist/nav-core-B5qU2dzn.js +225 -0
- package/dist/{normalize-error-D93O4q8g.js → normalize-error-BEcd1tmS.js} +2 -2
- package/dist/nuxt.js +1 -1
- package/dist/otp-core-DXg3vFLh.js +758 -0
- package/dist/radio-utils-Dk9Tl1jz.js +319 -0
- package/dist/rich-text-editor-core-Ddd_QaLn.js +1280 -0
- package/dist/select-utils-BgArYHk8.js +2140 -0
- package/dist/sidebar-core-CD6txDo3.js +583 -0
- package/dist/slider-core-vcWr321-.js +1014 -0
- package/dist/src/components/dropdown-table/dropdown-table-core.d.ts +2 -2
- package/dist/src/components/dropdown-table/dropdown-table-types.d.ts +1 -1
- package/dist/src/components/dropdown-table/index.d.ts +1 -1
- package/dist/src/components/dropdown-table/index.shadow.d.ts +1 -1
- package/dist/src/components/dropdown-table/mono-data-dropdown.d.ts +1 -1
- package/dist/src/components/form/form-types.d.ts +9 -3
- package/dist/src/components/input/input-core.d.ts +1 -1
- package/dist/src/components/input/input-types.d.ts +1 -1
- package/dist/src/components/otp/otp-core.d.ts +1 -1
- package/dist/src/components/select/select-core.d.ts +1 -1
- package/dist/src/components/select/select-types.d.ts +1 -1
- package/dist/src/components/slider/slider-core.d.ts +1 -1
- package/dist/src/components/slider/slider-types.d.ts +1 -1
- package/dist/src/components/table/filter-suggestion.d.ts +171 -0
- package/dist/src/components/table/index.d.ts +5 -4
- package/dist/src/components/table/index.shadow.d.ts +5 -4
- package/dist/src/components/table/mono-data-grid.d.ts +22 -3
- package/dist/src/components/table/mono-table-empty-core.d.ts +37 -0
- package/dist/src/components/table/mono-table-search-core.d.ts +22 -3
- package/dist/src/components/table/table-types.d.ts +74 -4
- package/dist/src/components/tag-input/tag-input-core.d.ts +1 -1
- package/dist/src/components/tag-input/tag-input-types.d.ts +1 -1
- package/dist/src/components/textarea/textarea-core.d.ts +1 -1
- package/dist/src/composables/mono-event.d.ts +7 -1
- package/dist/src/entries/index.d.ts +8 -6
- package/dist/src/entries/index.node.d.ts +8 -6
- package/dist/src/search/index.d.ts +1 -1
- package/dist/src/utils/group-count.d.ts +36 -0
- package/dist/switch-utils-CTZ4id2V.js +338 -0
- package/dist/tabs-core-r5-B8k_N.js +317 -0
- package/dist/tag-input-utils-D2JA90DQ.js +3060 -0
- package/dist/textarea-utils-VU1KeXm8.js +821 -0
- package/dist/ui/accordion.js +2 -274
- package/dist/ui/alert.js +2 -131
- package/dist/ui/breadcrumb.js +4 -745
- package/dist/ui/button-dropdown.js +4 -652
- package/dist/ui/button.js +2 -63
- package/dist/ui/card.js +2 -310
- package/dist/ui/chart.js +4 -800
- package/dist/ui/checkbox.js +4 -335
- package/dist/ui/chip.js +4 -402
- package/dist/ui/date.js +3 -732
- package/dist/ui/drawer.js +3 -757
- package/dist/ui/dropdown-table.js +5 -1341
- package/dist/ui/dropdown.js +4 -509
- package/dist/ui/file-upload.js +3 -622
- package/dist/ui/filter.js +5 -380
- package/dist/ui/form.js +1 -1
- package/dist/ui/index.css +118 -1
- package/dist/ui/input.js +3 -1141
- package/dist/ui/menu.js +4 -828
- package/dist/ui/modal.js +4 -843
- package/dist/ui/nav.js +4 -223
- package/dist/ui/otp.js +4 -756
- package/dist/ui/radio.js +4 -317
- package/dist/ui/rich-text-editor.js +4 -1278
- package/dist/ui/select.js +5 -2138
- package/dist/ui/shadow/accordion.js +4 -273
- package/dist/ui/shadow/alert.js +4 -130
- package/dist/ui/shadow/breadcrumb.js +5 -744
- package/dist/ui/shadow/button-dropdown.js +6 -652
- package/dist/ui/shadow/button.js +3 -63
- package/dist/ui/shadow/card.js +4 -309
- package/dist/ui/shadow/chart.js +6 -1576
- package/dist/ui/shadow/checkbox.js +4 -334
- package/dist/ui/shadow/chip.js +4 -396
- package/dist/ui/shadow/date.js +7 -731
- package/dist/ui/shadow/drawer.js +4 -756
- package/dist/ui/shadow/dropdown-table.js +8 -1762
- package/dist/ui/shadow/dropdown.js +4 -508
- package/dist/ui/shadow/file-upload.js +4 -620
- package/dist/ui/shadow/filter.js +7 -379
- package/dist/ui/shadow/input.js +6 -1140
- package/dist/ui/shadow/menu.js +5 -828
- package/dist/ui/shadow/modal.js +6 -1063
- package/dist/ui/shadow/nav.js +5 -223
- package/dist/ui/shadow/otp.js +6 -754
- package/dist/ui/shadow/radio.js +4 -316
- package/dist/ui/shadow/rich-text-editor.js +4 -1276
- package/dist/ui/shadow/select.js +6 -2136
- package/dist/ui/shadow/sidebar.js +5 -581
- package/dist/ui/shadow/slider.js +5 -1010
- package/dist/ui/shadow/switch.js +4 -335
- package/dist/ui/shadow/table.js +10 -4501
- package/dist/ui/shadow/tabs.js +6 -315
- package/dist/ui/shadow/tag-input.js +7 -3057
- package/dist/ui/shadow/textarea.js +6 -817
- package/dist/ui/sidebar.js +3 -581
- package/dist/ui/slider.js +4 -1012
- package/dist/ui/switch.js +4 -336
- package/dist/ui/table.js +9 -4502
- package/dist/ui/tabs.js +4 -315
- package/dist/ui/tag-input.js +5 -3058
- package/dist/ui/textarea.js +4 -819
- package/dist/{vite-CivRCJaf.js → vite-CfW7z2wn.js} +21 -14
- package/dist/vite.js +1 -1
- package/dist/vue.d.ts +3 -2
- package/package.json +10 -11
- package/dist/chip-strip-bNfLn52Z.js +0 -215
- package/dist/data-source-controller-Dx6IQ2CN.js +0 -243
- package/dist/data-source-options-BM4r4PRw.js +0 -558
- package/dist/data-source-read-HyBCRg1t.js +0 -242
- package/dist/excel-BXzr3uI1.js +0 -784
- package/dist/export-ixRdCS2y.js +0 -2388
- package/dist/field-tooltip-addon-CWCp19mJ.js +0 -702
- package/dist/field-tooltip.css_raw-U5UeTa2d.js +0 -269
- package/dist/filter-builder-C0T3pMx2.js +0 -208
- package/dist/form-control-core-BbiACMtL.js +0 -226
- package/dist/icon-ClxnYhBG.js +0 -19
- package/dist/import-Dc4eXC02.js +0 -612
- package/dist/light-slots-_no0r2Z-.js +0 -246
- package/dist/markdown-uGlE_OfJ.js +0 -20191
- package/dist/mono-data-grid-e9ZVBlNN.js +0 -4240
- package/dist/normalize-error-BmLbgANw.js +0 -1048
package/dist/ui/sidebar.js
CHANGED
|
@@ -1,588 +1,10 @@
|
|
|
1
1
|
import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
|
|
2
|
-
import { a as setExternalScrollLock } from "../popup-stack-C64WCuXq.js";
|
|
3
2
|
import { t as customElement } from "../mono-element-CKcT0rwv.js";
|
|
4
|
-
import {
|
|
5
|
-
import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
|
|
3
|
+
import { t as __decorate } from "../decorate-DbYFpi8R.js";
|
|
6
4
|
import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
|
|
7
|
-
import { n as
|
|
8
|
-
import {
|
|
9
|
-
import { n as releaseLayoutVar, t as claimLayoutVar } from "../layout-var-BSBKY49k.js";
|
|
10
|
-
import { LitElement, html, isServer, nothing } from "lit";
|
|
11
|
-
import { property, state } from "lit/decorators.js";
|
|
5
|
+
import { a as resolveMode, i as isAutoTemporary, n as SIDEBAR_AUTO_BREAKPOINT, o as validateSidebarProps, r as generateSidebarRootClasses, t as MonoSidebarCore } from "../sidebar-core-CD6txDo3.js";
|
|
6
|
+
import { LitElement, html } from "lit";
|
|
12
7
|
|
|
13
|
-
//#region src/components/sidebar/sidebar-utils.ts
|
|
14
|
-
const SIDEBAR_AUTO_BREAKPOINT = 768;
|
|
15
|
-
/**
|
|
16
|
-
* `typeof window === 'undefined'` alone is NOT a safe server guard: a DOM shim
|
|
17
|
-
* can define `window` without `matchMedia` (the @lit-labs/ssr v3 shim happens
|
|
18
|
-
* to leave `window` undefined, but that is an implementation detail). Check
|
|
19
|
-
* lit's `isServer` first, then feature-detect `matchMedia`.
|
|
20
|
-
*/
|
|
21
|
-
function isAutoTemporary() {
|
|
22
|
-
if (isServer || typeof window === "undefined") return false;
|
|
23
|
-
if (typeof window.matchMedia !== "function") return false;
|
|
24
|
-
return window.matchMedia(`(max-width: 767px)`).matches;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Resolves the effective mode for `auto`. Other modes pass through.
|
|
28
|
-
*/
|
|
29
|
-
function resolveMode(mode) {
|
|
30
|
-
if (mode !== "auto") return mode;
|
|
31
|
-
return isAutoTemporary() ? "temporary" : "permanent";
|
|
32
|
-
}
|
|
33
|
-
function generateSidebarRootClasses(props) {
|
|
34
|
-
return [
|
|
35
|
-
"mono-sidebar",
|
|
36
|
-
`mode-${props.mode}`,
|
|
37
|
-
`effective-${props.resolvedMode}`,
|
|
38
|
-
`location-${props.location}`,
|
|
39
|
-
props.density,
|
|
40
|
-
colorClassToken(props.color),
|
|
41
|
-
props.variant,
|
|
42
|
-
props.open ? "open" : "closed",
|
|
43
|
-
props.expandOnHover ? "expand-on-hover" : "",
|
|
44
|
-
props.contained ? "contained" : "",
|
|
45
|
-
props.persistent ? "persistent" : "",
|
|
46
|
-
props.showScrim ? "" : "no-scrim",
|
|
47
|
-
props.cssClassName ?? "",
|
|
48
|
-
props.rootExtra ?? ""
|
|
49
|
-
].filter(Boolean).join(" ");
|
|
50
|
-
}
|
|
51
|
-
function validateSidebarProps(props) {
|
|
52
|
-
const errors = [];
|
|
53
|
-
if (props.mode && ![
|
|
54
|
-
"permanent",
|
|
55
|
-
"temporary",
|
|
56
|
-
"rail",
|
|
57
|
-
"auto"
|
|
58
|
-
].includes(props.mode)) errors.push(`Invalid mode: ${String(props.mode)}`);
|
|
59
|
-
if (props.location && !["left", "right"].includes(props.location)) errors.push(`Invalid location: ${String(props.location)}`);
|
|
60
|
-
if (props.density && ![
|
|
61
|
-
"compact",
|
|
62
|
-
"comfortable",
|
|
63
|
-
"default"
|
|
64
|
-
].includes(props.density)) errors.push(`Invalid density: ${String(props.density)}`);
|
|
65
|
-
if (props.variant && ![
|
|
66
|
-
"flat",
|
|
67
|
-
"elevated",
|
|
68
|
-
"outlined"
|
|
69
|
-
].includes(props.variant)) errors.push(`Invalid variant: ${String(props.variant)}`);
|
|
70
|
-
const colorError = validateColorProp(props.color);
|
|
71
|
-
if (colorError) errors.push(colorError);
|
|
72
|
-
if (typeof props.width === "number" && props.width < 0) errors.push(`width must be non-negative`);
|
|
73
|
-
if (typeof props.railWidth === "number" && props.railWidth < 0) errors.push(`railWidth must be non-negative`);
|
|
74
|
-
return errors;
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* The Basecoat styling attributes for the sidebar ROOT, mirroring the props one
|
|
78
|
-
* for one. A prop at its DEFAULT emits nothing — `:not([mono-density])` is
|
|
79
|
-
* comfortable, `:not([mono-color])` is surface, `:not([mono-variant])` is
|
|
80
|
-
* elevated and `:not([mono-location])` is left — so the rendered DOM is also
|
|
81
|
-
* the shortest hand-written markup that paints the same (see sidebar.css).
|
|
82
|
-
*
|
|
83
|
-
* `mono-effective` is always written: it carries the mode AFTER `auto`
|
|
84
|
-
* resolves, and it is what every layout rule keys on. A literal `color`
|
|
85
|
-
* collapses to `custom`, with the colour itself arriving inline.
|
|
86
|
-
*/
|
|
87
|
-
function sidebarRootAttrs(props) {
|
|
88
|
-
return {
|
|
89
|
-
mode: props.mode === "auto" ? null : props.mode,
|
|
90
|
-
effective: props.resolvedMode,
|
|
91
|
-
location: props.location === "left" ? null : props.location,
|
|
92
|
-
density: props.density === "comfortable" ? null : props.density,
|
|
93
|
-
variant: props.variant === "elevated" ? null : props.variant,
|
|
94
|
-
color: !props.color || props.color === "surface" ? null : isThemeColorToken(props.color) ? props.color : CUSTOM_COLOR_CLASS
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
//#endregion
|
|
99
|
-
//#region src/components/sidebar/sidebar-core.ts
|
|
100
|
-
/**
|
|
101
|
-
* `MonoSidebarCore` — all render-mode-agnostic logic for `mono-sidebar`:
|
|
102
|
-
* reactive props, hybrid aliases, mode resolution (auto→permanent/temporary via
|
|
103
|
-
* the breakpoint), layout-var side effects, scroll-lock/escape side effects,
|
|
104
|
-
* open/close state + events, and the chrome `render()`.
|
|
105
|
-
*
|
|
106
|
-
* SSR-safe: every `document`/`window` path is guarded by `isServer` (lit) — NOT
|
|
107
|
-
* `typeof document/window`, which is unreliable under @lit-labs/ssr (it defines
|
|
108
|
-
* both on the server).
|
|
109
|
-
*
|
|
110
|
-
* Leaves to each build: `createRenderRoot()`, the slot strategy, `renderSlot()`
|
|
111
|
-
* (light: empty + capture into `[data-mono-slot]`; shadow: native `<slot>`), and
|
|
112
|
-
* `renderIcon()` (light: `.mono-icon` UnoCSS icon; shadow: inline SVG).
|
|
113
|
-
*/
|
|
114
|
-
const MonoSidebarCore = (superClass) => {
|
|
115
|
-
class MonoSidebarCoreClass extends superClass {
|
|
116
|
-
constructor(...args) {
|
|
117
|
-
super(...args);
|
|
118
|
-
this.modelValue = false;
|
|
119
|
-
this.mode = "auto";
|
|
120
|
-
this.location = "left";
|
|
121
|
-
this.density = "comfortable";
|
|
122
|
-
this.color = "surface";
|
|
123
|
-
this.variant = "elevated";
|
|
124
|
-
this.width = 264;
|
|
125
|
-
this.railWidth = 64;
|
|
126
|
-
this.expandOnHover = false;
|
|
127
|
-
this.rail = null;
|
|
128
|
-
this.contained = false;
|
|
129
|
-
this.persistent = false;
|
|
130
|
-
this.closeOnEscape = true;
|
|
131
|
-
this.closeOnScrim = true;
|
|
132
|
-
this.lockScroll = true;
|
|
133
|
-
this.showScrim = true;
|
|
134
|
-
this.cssClass = {};
|
|
135
|
-
this.cssClassName = "";
|
|
136
|
-
this._resolvedMode = "permanent";
|
|
137
|
-
this._escapeListener = null;
|
|
138
|
-
this._autoMql = null;
|
|
139
|
-
this._autoMqlListener = null;
|
|
140
|
-
this._railHovered = false;
|
|
141
|
-
this._railPointerEnter = null;
|
|
142
|
-
this._railPointerLeave = null;
|
|
143
|
-
this._writtenVar = null;
|
|
144
|
-
defineHybridPropAliases(this, [
|
|
145
|
-
"modelValue",
|
|
146
|
-
"railWidth",
|
|
147
|
-
"expandOnHover",
|
|
148
|
-
"closeOnEscape",
|
|
149
|
-
"closeOnScrim",
|
|
150
|
-
"lockScroll",
|
|
151
|
-
"showScrim"
|
|
152
|
-
]);
|
|
153
|
-
defineCssClassAliases(this, (value) => this._setCssClass(value));
|
|
154
|
-
}
|
|
155
|
-
static get observedAttributes() {
|
|
156
|
-
return [
|
|
157
|
-
...super.observedAttributes ?? [],
|
|
158
|
-
"modelvalue",
|
|
159
|
-
"css-class",
|
|
160
|
-
"cssclass"
|
|
161
|
-
];
|
|
162
|
-
}
|
|
163
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
164
|
-
super.attributeChangedCallback(name, oldValue, newValue);
|
|
165
|
-
if (oldValue === newValue) return;
|
|
166
|
-
if (name === "modelvalue") this.modelValue = booleanStringConverter.fromAttribute(newValue);
|
|
167
|
-
else if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
|
|
168
|
-
}
|
|
169
|
-
connectedCallback() {
|
|
170
|
-
super.connectedCallback();
|
|
171
|
-
this._recomputeResolvedMode();
|
|
172
|
-
this._recomputeRailCollapsedAttr();
|
|
173
|
-
if (isServer) return;
|
|
174
|
-
this._setupAutoModeListener();
|
|
175
|
-
this._setupRailHoverListeners();
|
|
176
|
-
this._writeLayoutVar();
|
|
177
|
-
if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
|
|
178
|
-
}
|
|
179
|
-
disconnectedCallback() {
|
|
180
|
-
if (!isServer) {
|
|
181
|
-
this._releaseSideEffects();
|
|
182
|
-
this._teardownAutoModeListener();
|
|
183
|
-
this._teardownRailHoverListeners();
|
|
184
|
-
this._clearLayoutVar();
|
|
185
|
-
}
|
|
186
|
-
super.disconnectedCallback();
|
|
187
|
-
}
|
|
188
|
-
willUpdate(changed) {
|
|
189
|
-
if (changed.has("rail") && this.rail !== null && this.modelValue !== this.rail) this.modelValue = this.rail;
|
|
190
|
-
if (changed.has("mode")) this._recomputeResolvedMode();
|
|
191
|
-
if (changed.has("mode") || changed.has("_resolvedMode") || changed.has("modelValue") || changed.has("rail") || changed.has("expandOnHover")) this._recomputeRailCollapsedAttr();
|
|
192
|
-
if (isServer) return;
|
|
193
|
-
if (changed.has("modelValue") || changed.has("mode")) {
|
|
194
|
-
if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
|
|
195
|
-
else this._releaseSideEffects();
|
|
196
|
-
}
|
|
197
|
-
if (changed.has("mode") || changed.has("width") || changed.has("railWidth") || changed.has("location") || changed.has("modelValue") || changed.has("contained")) this._writeLayoutVar();
|
|
198
|
-
}
|
|
199
|
-
/**
|
|
200
|
-
* `connectedCallback` computes `_resolvedMode` / `data-rail-collapsed` /
|
|
201
|
-
* the layout var against SERVER assumptions (no `matchMedia`, no
|
|
202
|
-
* `localStorage` → always "desktop, rail, collapsed"). Under SSR the host's
|
|
203
|
-
* viewport-derived props only settle after Vue mounts, and nothing else
|
|
204
|
-
* re-runs these if no prop happens to change afterwards. Re-run them once
|
|
205
|
-
* after the first real client render so the viewport wins.
|
|
206
|
-
*/
|
|
207
|
-
firstUpdated(changed) {
|
|
208
|
-
super.firstUpdated?.(changed);
|
|
209
|
-
if (isServer) return;
|
|
210
|
-
this._recomputeResolvedMode();
|
|
211
|
-
this._recomputeRailCollapsedAttr();
|
|
212
|
-
this._writeLayoutVar();
|
|
213
|
-
this._syncRootFromState();
|
|
214
|
-
}
|
|
215
|
-
updated(changed) {
|
|
216
|
-
super.updated?.(changed);
|
|
217
|
-
if (isServer) return;
|
|
218
|
-
this._syncRootFromState();
|
|
219
|
-
}
|
|
220
|
-
/**
|
|
221
|
-
* Re-assert the root element's class / style / aria-hidden from live state.
|
|
222
|
-
*
|
|
223
|
-
* `@lit-labs/ssr-client`'s hydration records the values it is handed as
|
|
224
|
-
* ALREADY COMMITTED without writing them to the DOM — it assumes the server
|
|
225
|
-
* markup already matches. Under nuxt-ssr-lit that assumption is routinely
|
|
226
|
-
* false: the server has no viewport (no `matchMedia`, no `localStorage`) so
|
|
227
|
-
* it always emits desktop assumptions, and Vue has since set the real
|
|
228
|
-
* mobile props. Lit then sees "no change" and never commits, freezing the
|
|
229
|
-
* rail visible on a phone while `mode` already reads `temporary`.
|
|
230
|
-
*
|
|
231
|
-
* These three attributes carry every viewport-derived decision, so writing
|
|
232
|
-
* them imperatively after each update keeps the DOM honest. Idempotent —
|
|
233
|
-
* a no-op whenever lit's own bindings are working.
|
|
234
|
-
*/
|
|
235
|
-
_syncRootFromState() {
|
|
236
|
-
const root = this.renderRoot?.querySelector?.("[mono-sidebar], .mono-sidebar");
|
|
237
|
-
if (!root) return;
|
|
238
|
-
const classes = this._rootClasses;
|
|
239
|
-
if (root.getAttribute("class") !== classes) root.setAttribute("class", classes);
|
|
240
|
-
const style = this._inlineRootStyle;
|
|
241
|
-
if (root.getAttribute("style") !== style) root.setAttribute("style", style);
|
|
242
|
-
const aria = this._rootAriaHidden;
|
|
243
|
-
if (root.getAttribute("aria-hidden") !== aria) root.setAttribute("aria-hidden", aria);
|
|
244
|
-
const attrs = sidebarRootAttrs({
|
|
245
|
-
mode: this.mode,
|
|
246
|
-
resolvedMode: this._resolvedMode,
|
|
247
|
-
location: this.location,
|
|
248
|
-
density: this.density,
|
|
249
|
-
color: this.color,
|
|
250
|
-
variant: this.variant
|
|
251
|
-
});
|
|
252
|
-
const wanted = {
|
|
253
|
-
"mono-effective": attrs.effective,
|
|
254
|
-
"mono-mode": attrs.mode ?? null,
|
|
255
|
-
"mono-location": attrs.location ?? null,
|
|
256
|
-
"mono-density": attrs.density ?? null,
|
|
257
|
-
"mono-color": attrs.color ?? null,
|
|
258
|
-
"mono-variant": attrs.variant ?? null,
|
|
259
|
-
"mono-open": this.modelValue ? "" : null,
|
|
260
|
-
"mono-expand-on-hover": this.expandOnHover ? "" : null,
|
|
261
|
-
"mono-contained": this.contained ? "" : null,
|
|
262
|
-
"mono-persistent": this.persistent ? "" : null,
|
|
263
|
-
"mono-no-scrim": this.showScrim ? null : ""
|
|
264
|
-
};
|
|
265
|
-
for (const [name, value] of Object.entries(wanted)) if (value === null) {
|
|
266
|
-
if (root.hasAttribute(name)) root.removeAttribute(name);
|
|
267
|
-
} else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
|
|
268
|
-
}
|
|
269
|
-
_setupAutoModeListener() {
|
|
270
|
-
if (typeof window === "undefined" || !window.matchMedia) return;
|
|
271
|
-
this._autoMql = window.matchMedia(`(max-width: ${768 - 1}px)`);
|
|
272
|
-
this._autoMqlListener = () => {
|
|
273
|
-
if (this.mode === "auto") {
|
|
274
|
-
this._recomputeResolvedMode();
|
|
275
|
-
this._writeLayoutVar();
|
|
276
|
-
this.requestUpdate();
|
|
277
|
-
}
|
|
278
|
-
};
|
|
279
|
-
this._autoMql.addEventListener("change", this._autoMqlListener);
|
|
280
|
-
}
|
|
281
|
-
_teardownAutoModeListener() {
|
|
282
|
-
if (this._autoMql && this._autoMqlListener) this._autoMql.removeEventListener("change", this._autoMqlListener);
|
|
283
|
-
this._autoMql = null;
|
|
284
|
-
this._autoMqlListener = null;
|
|
285
|
-
}
|
|
286
|
-
_recomputeResolvedMode() {
|
|
287
|
-
this._resolvedMode = resolveMode(this.mode);
|
|
288
|
-
}
|
|
289
|
-
/**
|
|
290
|
-
* Publish the rail-collapsed state as a host attribute (`data-rail-collapsed`).
|
|
291
|
-
* Cross-shadow CSS (descendant selectors + inherited custom properties on the
|
|
292
|
-
* shadow `.mono-sidebar-body`) cannot reach a slotted *light* `<mono-menu>`, so
|
|
293
|
-
* the menu mirrors this attribute and collapses itself. Collapsed = rail mode,
|
|
294
|
-
* not toggled-open, and not hover-expanded. Pure attribute toggle → SSR-safe.
|
|
295
|
-
*/
|
|
296
|
-
_recomputeRailCollapsedAttr() {
|
|
297
|
-
if (this._resolvedMode === "rail" && !this.modelValue && !(this.expandOnHover && this._railHovered)) this.setAttribute("data-rail-collapsed", "");
|
|
298
|
-
else this.removeAttribute("data-rail-collapsed");
|
|
299
|
-
}
|
|
300
|
-
_setupRailHoverListeners() {
|
|
301
|
-
if (this._railPointerEnter) return;
|
|
302
|
-
this._railPointerEnter = () => {
|
|
303
|
-
if (this.expandOnHover) this._railHovered = true;
|
|
304
|
-
this._recomputeRailCollapsedAttr();
|
|
305
|
-
};
|
|
306
|
-
this._railPointerLeave = () => {
|
|
307
|
-
this._railHovered = false;
|
|
308
|
-
this._recomputeRailCollapsedAttr();
|
|
309
|
-
};
|
|
310
|
-
this.addEventListener("pointerenter", this._railPointerEnter);
|
|
311
|
-
this.addEventListener("pointerleave", this._railPointerLeave);
|
|
312
|
-
}
|
|
313
|
-
_teardownRailHoverListeners() {
|
|
314
|
-
if (this._railPointerEnter) this.removeEventListener("pointerenter", this._railPointerEnter);
|
|
315
|
-
if (this._railPointerLeave) this.removeEventListener("pointerleave", this._railPointerLeave);
|
|
316
|
-
this._railPointerEnter = null;
|
|
317
|
-
this._railPointerLeave = null;
|
|
318
|
-
this._railHovered = false;
|
|
319
|
-
}
|
|
320
|
-
_writeLayoutVar() {
|
|
321
|
-
if (isServer) return;
|
|
322
|
-
if (this.contained) {
|
|
323
|
-
if (this._writtenVar) releaseLayoutVar(this._writtenVar, this);
|
|
324
|
-
this._writtenVar = null;
|
|
325
|
-
return;
|
|
326
|
-
}
|
|
327
|
-
const myVar = this.location === "right" ? "--mono-sidebar-right-width" : "--mono-sidebar-left-width";
|
|
328
|
-
if (this._writtenVar && this._writtenVar !== myVar) releaseLayoutVar(this._writtenVar, this);
|
|
329
|
-
let pushPx = 0;
|
|
330
|
-
if (this._resolvedMode === "permanent") pushPx = this.width;
|
|
331
|
-
else if (this._resolvedMode === "rail") pushPx = this.modelValue ? this.width : this.railWidth;
|
|
332
|
-
else pushPx = 0;
|
|
333
|
-
this._writtenVar = myVar;
|
|
334
|
-
claimLayoutVar(myVar, this, `${pushPx}px`);
|
|
335
|
-
}
|
|
336
|
-
_clearLayoutVar() {
|
|
337
|
-
if (isServer) return;
|
|
338
|
-
if (this._writtenVar) releaseLayoutVar(this._writtenVar, this);
|
|
339
|
-
this._writtenVar = null;
|
|
340
|
-
}
|
|
341
|
-
_setCssClass(value) {
|
|
342
|
-
applyCssClass(this, value);
|
|
343
|
-
}
|
|
344
|
-
_cls(base, key) {
|
|
345
|
-
return cssPart(this.cssClass, base, key);
|
|
346
|
-
}
|
|
347
|
-
get _rootClasses() {
|
|
348
|
-
return generateSidebarRootClasses({
|
|
349
|
-
mode: this.mode,
|
|
350
|
-
resolvedMode: this._resolvedMode,
|
|
351
|
-
location: this.location,
|
|
352
|
-
density: this.density,
|
|
353
|
-
color: this.color,
|
|
354
|
-
variant: this.variant,
|
|
355
|
-
open: this.modelValue,
|
|
356
|
-
expandOnHover: this.expandOnHover,
|
|
357
|
-
contained: this.contained,
|
|
358
|
-
persistent: this.persistent,
|
|
359
|
-
showScrim: this.showScrim,
|
|
360
|
-
cssClassName: this.cssClassName,
|
|
361
|
-
rootExtra: this.cssClass?.root
|
|
362
|
-
});
|
|
363
|
-
}
|
|
364
|
-
_applyOpenSideEffects() {
|
|
365
|
-
if (isServer || this.contained) return;
|
|
366
|
-
setExternalScrollLock(this, this.lockScroll);
|
|
367
|
-
if (this.closeOnEscape && !this._escapeListener) {
|
|
368
|
-
const listener = (event) => {
|
|
369
|
-
if (event.key === "Escape" && this.modelValue && !this.persistent && this._resolvedMode === "temporary") this.hide("escape", event);
|
|
370
|
-
};
|
|
371
|
-
this._escapeListener = listener;
|
|
372
|
-
document.addEventListener("keydown", listener);
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
_releaseSideEffects() {
|
|
376
|
-
if (isServer) return;
|
|
377
|
-
setExternalScrollLock(this, false);
|
|
378
|
-
if (this._escapeListener) {
|
|
379
|
-
document.removeEventListener("keydown", this._escapeListener);
|
|
380
|
-
this._escapeListener = null;
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
_emitChange(detail) {
|
|
384
|
-
dispatchMonoEvent(this, "change", detail);
|
|
385
|
-
if (detail.value && !detail.oldValue) dispatchMonoEvent(this, "open", detail);
|
|
386
|
-
else if (!detail.value && detail.oldValue) dispatchMonoEvent(this, "close", detail);
|
|
387
|
-
}
|
|
388
|
-
open(source = "manual", sourceEvent) {
|
|
389
|
-
if (this.modelValue) return;
|
|
390
|
-
const oldValue = this.modelValue;
|
|
391
|
-
this.modelValue = true;
|
|
392
|
-
this._emitChange({
|
|
393
|
-
modelValue: true,
|
|
394
|
-
currentValue: true,
|
|
395
|
-
oldValue,
|
|
396
|
-
value: true,
|
|
397
|
-
source,
|
|
398
|
-
sourceEvent
|
|
399
|
-
});
|
|
400
|
-
}
|
|
401
|
-
hide(source = "manual", sourceEvent) {
|
|
402
|
-
if (!this.modelValue) return;
|
|
403
|
-
const oldValue = this.modelValue;
|
|
404
|
-
this.modelValue = false;
|
|
405
|
-
this._emitChange({
|
|
406
|
-
modelValue: false,
|
|
407
|
-
currentValue: false,
|
|
408
|
-
oldValue,
|
|
409
|
-
value: false,
|
|
410
|
-
source,
|
|
411
|
-
sourceEvent
|
|
412
|
-
});
|
|
413
|
-
}
|
|
414
|
-
close(source = "manual", sourceEvent) {
|
|
415
|
-
this.hide(source, sourceEvent);
|
|
416
|
-
}
|
|
417
|
-
toggle(source = "manual", sourceEvent) {
|
|
418
|
-
if (this.modelValue) this.hide(source, sourceEvent);
|
|
419
|
-
else this.open(source, sourceEvent);
|
|
420
|
-
}
|
|
421
|
-
expandRail() {
|
|
422
|
-
if (this._resolvedMode !== "rail") return;
|
|
423
|
-
this.open("rail-toggle");
|
|
424
|
-
}
|
|
425
|
-
collapseRail() {
|
|
426
|
-
if (this._resolvedMode !== "rail") return;
|
|
427
|
-
this.hide("rail-toggle");
|
|
428
|
-
}
|
|
429
|
-
_handleScrimClick(event) {
|
|
430
|
-
if (!this.closeOnScrim || this.persistent) return;
|
|
431
|
-
if (this._resolvedMode !== "temporary") return;
|
|
432
|
-
this.hide("scrim", event);
|
|
433
|
-
}
|
|
434
|
-
_handleRailToggle(event) {
|
|
435
|
-
if (this._resolvedMode !== "rail") return;
|
|
436
|
-
this.toggle("rail-toggle", event);
|
|
437
|
-
}
|
|
438
|
-
/** Per-region slot content — overridden per build. */
|
|
439
|
-
renderSlot(_name) {
|
|
440
|
-
return html``;
|
|
441
|
-
}
|
|
442
|
-
/** Internal icon — light: UnoCSS `.mono-icon`; shadow: inline SVG. */
|
|
443
|
-
renderIcon(_name) {
|
|
444
|
-
return html``;
|
|
445
|
-
}
|
|
446
|
-
/**
|
|
447
|
-
* The root's inline style. This getter is the ONLY safe place to put an inline
|
|
448
|
-
* custom property on the root: `_syncRootFromState()` re-asserts the whole `style`
|
|
449
|
-
* attribute after every update, so anything written out-of-band is wiped.
|
|
450
|
-
*
|
|
451
|
-
* `customColorStyle` returns '' unless `color` is a literal rather than a palette
|
|
452
|
-
* slot; on the root it outranks the class-based `.mono-sidebar.<token>` presets,
|
|
453
|
-
* which is exactly the precedence we want (flavor < prop).
|
|
454
|
-
*/
|
|
455
|
-
get _inlineRootStyle() {
|
|
456
|
-
return `--mono-sidebar-width: ${this.width}px; --mono-sidebar-rail-width: ${this.railWidth}px;` + customColorStyle(isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color, "sidebar");
|
|
457
|
-
}
|
|
458
|
-
get _rootAriaHidden() {
|
|
459
|
-
return this._resolvedMode === "temporary" && !this.modelValue ? "true" : "false";
|
|
460
|
-
}
|
|
461
|
-
render() {
|
|
462
|
-
const inlineStyle = this._inlineRootStyle;
|
|
463
|
-
const showDefaultRailToggle = this._resolvedMode === "rail" && this.rail === null;
|
|
464
|
-
const attrs = sidebarRootAttrs({
|
|
465
|
-
mode: this.mode,
|
|
466
|
-
resolvedMode: this._resolvedMode,
|
|
467
|
-
location: this.location,
|
|
468
|
-
density: this.density,
|
|
469
|
-
color: this.color,
|
|
470
|
-
variant: this.variant
|
|
471
|
-
});
|
|
472
|
-
return html`
|
|
473
|
-
<div
|
|
474
|
-
class=${this._rootClasses}
|
|
475
|
-
style=${inlineStyle}
|
|
476
|
-
role="navigation"
|
|
477
|
-
aria-hidden=${this._resolvedMode === "temporary" && !this.modelValue ? "true" : "false"}
|
|
478
|
-
mono-sidebar
|
|
479
|
-
mono-effective=${attrs.effective}
|
|
480
|
-
mono-mode=${attrs.mode ?? nothing}
|
|
481
|
-
mono-location=${attrs.location ?? nothing}
|
|
482
|
-
mono-density=${attrs.density ?? nothing}
|
|
483
|
-
mono-color=${attrs.color ?? nothing}
|
|
484
|
-
mono-variant=${attrs.variant ?? nothing}
|
|
485
|
-
?mono-open=${this.modelValue}
|
|
486
|
-
?mono-expand-on-hover=${this.expandOnHover}
|
|
487
|
-
?mono-contained=${this.contained}
|
|
488
|
-
?mono-persistent=${this.persistent}
|
|
489
|
-
?mono-no-scrim=${!this.showScrim}
|
|
490
|
-
>
|
|
491
|
-
<div class=${this._cls("mono-sidebar-scrim", "scrim")} mono-scrim @click=${this._handleScrimClick}></div>
|
|
492
|
-
|
|
493
|
-
<aside class=${this._cls("mono-sidebar-panel", "panel")} mono-panel>
|
|
494
|
-
<div class="mono-sidebar-topbar" mono-topbar>
|
|
495
|
-
<div class=${this._cls("mono-sidebar-header", "header")} mono-header data-mono-slot="header">
|
|
496
|
-
${this.renderSlot("header")}
|
|
497
|
-
</div>
|
|
498
|
-
${showDefaultRailToggle ? html`
|
|
499
|
-
<div class=${this._cls("mono-sidebar-rail", "rail")} mono-rail>
|
|
500
|
-
<button
|
|
501
|
-
type="button"
|
|
502
|
-
class=${this._cls("mono-sidebar-rail-toggle", "railToggle")}
|
|
503
|
-
mono-rail-toggle
|
|
504
|
-
aria-label=${this.modelValue ? "Collapse sidebar" : "Expand sidebar"}
|
|
505
|
-
@click=${this._handleRailToggle}
|
|
506
|
-
>
|
|
507
|
-
${this.renderIcon("chevron")}
|
|
508
|
-
</button>
|
|
509
|
-
</div>
|
|
510
|
-
` : nothing}
|
|
511
|
-
</div>
|
|
512
|
-
<div class=${this._cls("mono-sidebar-body", "body")} mono-body data-mono-slot="body">
|
|
513
|
-
${this.renderSlot("body")}
|
|
514
|
-
</div>
|
|
515
|
-
<div class=${this._cls("mono-sidebar-footer", "footer")} mono-footer data-mono-slot="footer">
|
|
516
|
-
${this.renderSlot("footer")}
|
|
517
|
-
</div>
|
|
518
|
-
</aside>
|
|
519
|
-
</div>
|
|
520
|
-
`;
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
__decorate([property({
|
|
524
|
-
attribute: "model-value",
|
|
525
|
-
reflect: true,
|
|
526
|
-
converter: booleanStringConverter
|
|
527
|
-
})], MonoSidebarCoreClass.prototype, "modelValue", void 0);
|
|
528
|
-
__decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "mode", void 0);
|
|
529
|
-
__decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "location", void 0);
|
|
530
|
-
__decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "density", void 0);
|
|
531
|
-
__decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "color", void 0);
|
|
532
|
-
__decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "variant", void 0);
|
|
533
|
-
__decorate([property({ converter: numberStringConverter })], MonoSidebarCoreClass.prototype, "width", void 0);
|
|
534
|
-
__decorate([property({
|
|
535
|
-
attribute: "rail-width",
|
|
536
|
-
converter: numberStringConverter
|
|
537
|
-
})], MonoSidebarCoreClass.prototype, "railWidth", void 0);
|
|
538
|
-
__decorate([property({
|
|
539
|
-
attribute: "expand-on-hover",
|
|
540
|
-
converter: booleanStringConverter
|
|
541
|
-
})], MonoSidebarCoreClass.prototype, "expandOnHover", void 0);
|
|
542
|
-
__decorate([property({
|
|
543
|
-
attribute: "rail",
|
|
544
|
-
converter: {
|
|
545
|
-
fromAttribute(value) {
|
|
546
|
-
if (value === null) return null;
|
|
547
|
-
const normalized = value.toLowerCase().trim();
|
|
548
|
-
return normalized === "" || normalized === "true";
|
|
549
|
-
},
|
|
550
|
-
toAttribute() {
|
|
551
|
-
return null;
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
})], MonoSidebarCoreClass.prototype, "rail", void 0);
|
|
555
|
-
__decorate([property({
|
|
556
|
-
reflect: true,
|
|
557
|
-
converter: booleanStringConverter
|
|
558
|
-
})], MonoSidebarCoreClass.prototype, "contained", void 0);
|
|
559
|
-
__decorate([property({
|
|
560
|
-
reflect: true,
|
|
561
|
-
converter: booleanStringConverter
|
|
562
|
-
})], MonoSidebarCoreClass.prototype, "persistent", void 0);
|
|
563
|
-
__decorate([property({
|
|
564
|
-
attribute: "close-on-escape",
|
|
565
|
-
converter: booleanStringConverter
|
|
566
|
-
})], MonoSidebarCoreClass.prototype, "closeOnEscape", void 0);
|
|
567
|
-
__decorate([property({
|
|
568
|
-
attribute: "close-on-scrim",
|
|
569
|
-
converter: booleanStringConverter
|
|
570
|
-
})], MonoSidebarCoreClass.prototype, "closeOnScrim", void 0);
|
|
571
|
-
__decorate([property({
|
|
572
|
-
attribute: "lock-scroll",
|
|
573
|
-
converter: booleanStringConverter
|
|
574
|
-
})], MonoSidebarCoreClass.prototype, "lockScroll", void 0);
|
|
575
|
-
__decorate([property({
|
|
576
|
-
attribute: "show-scrim",
|
|
577
|
-
converter: booleanStringConverter
|
|
578
|
-
})], MonoSidebarCoreClass.prototype, "showScrim", void 0);
|
|
579
|
-
__decorate([property({ attribute: false })], MonoSidebarCoreClass.prototype, "cssClass", void 0);
|
|
580
|
-
__decorate([property({ attribute: false })], MonoSidebarCoreClass.prototype, "cssClassName", void 0);
|
|
581
|
-
__decorate([state()], MonoSidebarCoreClass.prototype, "_resolvedMode", void 0);
|
|
582
|
-
return MonoSidebarCoreClass;
|
|
583
|
-
};
|
|
584
|
-
|
|
585
|
-
//#endregion
|
|
586
8
|
//#region src/components/sidebar/mono-sidebar.ts
|
|
587
9
|
let MonoSidebar = class MonoSidebar extends MonoSidebarCore(LitElement) {
|
|
588
10
|
constructor(..._args) {
|