@synopackageland/ui 0.25.8 → 0.25.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/CHANGELOG.md +23 -0
- package/dist/components/app/app-layout/AppLayout.vue.d.ts +8 -0
- package/dist/components/primitives/dialog/dialogCover.d.ts +10 -0
- package/dist/composables/floatingHost.d.ts +8 -1
- package/dist/grid.js +1 -1
- package/dist/index.js +10057 -10006
- package/dist/json-preview/preview.js +8849 -8798
- package/dist/reka-runtime.json +1 -1
- package/docs/adaptive-layout.md +2 -1
- package/docs/app-local-modal.md +9 -1
- package/package.json +1 -97
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## Unreleased
|
|
4
|
+
|
|
5
|
+
## 0.25.10 (2026-11-12)
|
|
6
|
+
|
|
7
|
+
### Aside
|
|
8
|
+
|
|
9
|
+
- **New `aside-dock="wide"` on AppLayout docks the aside in a wide DSM window.** Until now an open aside floated over the page in every DSM window (`wide-layout="window"`), however wide, and had no resize handle, so an assistant in a maximized window covered the page it talks about. With `aside-dock="wide"`, a DSM window at least 960px wide docks the open panel beside the page as the web presentation does: the page takes the rest, the handle on its start edge resizes it (Arrow keys, Home and End; written on release to `v-model:aside-width`), and collapsing gives the page the whole width but the 48px rail. A window under 960px, or one where the page would be left under 480px beside the theme's sidebar (`--ui-sidebar-width`), still floats it. The default (`'web'`) keeps today's behavior. Found in Syngle, whose IT Assistant moves into the aside in a DSM window
|
|
10
|
+
- **An aside slot given after the first render now appears.** AppLayout decided once, at setup, whether it had an `aside` slot, so an App that adds it later (Syngle shows its IT Assistant only once a read says AI is on) got neither the region nor the rail, and one taken away left an empty rail. The layout now checks the slot again before each update
|
|
11
|
+
|
|
12
|
+
## 0.25.9 (2026-11-12)
|
|
13
|
+
|
|
14
|
+
### Dialog
|
|
15
|
+
|
|
16
|
+
- **A dialog opened from a floating dialog masks only the app window.** With `<AppRoot dialog-bounds="viewport">` (an app in a DSM window), a Dialog opened from a floating panel, such as WizardDialog's "Discard changes?" confirm, put its mask in the viewport-wide floating host, so it tinted the whole DSM desktop: icons, taskbar, widgets and notifications. The mask now goes in the app root's own portal host, inside the window, as the outer dialog's does. The floating parent sits above the window, so it draws the same mask over itself (`data-ui-dialog-cover`) while the child is open, as DSM masks a modal window under the message box it opens. Apps need no change. On a phone, where panels are not floating, and without `dialog-bounds="viewport"`, nothing changes. A Sheet opened from a floating Dialog still masks the viewport (docs/app-local-modal.md)
|
|
17
|
+
|
|
18
|
+
### Grid
|
|
19
|
+
|
|
20
|
+
- **An empty GridHost only header-tall no longer draws "No data" over its header.** The empty layer under the header is clipped (`overflow: hidden`), so with no room it shows nothing. Found in Studio Office, whose empty tables are header-tall with their own empty state under the grid
|
|
21
|
+
|
|
22
|
+
### Development
|
|
23
|
+
|
|
24
|
+
- `node scripts/check-wizard-confirm.mjs` (`tests/dsm-host/wizard-desktop.html`) opens a WizardDialog's confirm in an app window on a DSM-like desktop at 1280x800 and on a 390x844 touch phone: the desktop stays unmasked, the mask stays in the window, the wizard is masked and takes no presses, and Keep editing and Discard work. Before this change it had 4 failures
|
|
25
|
+
|
|
3
26
|
## 0.25.8 (2026-11-11)
|
|
4
27
|
|
|
5
28
|
On a phone (640px or narrower) a list is no longer a short inner scroller under the page's other content. Found in an App whose Explore page put a map above a DataGrid in a vertical SplitPane: at 360px the grid scrolled in a 385px box with a drag handle, and a pager count was cut to "38 ite…". The fix is in the SDK; Apps need no change and there is no new prop.
|
|
@@ -66,6 +66,13 @@ type __VLS_Props = {
|
|
|
66
66
|
* keeps them; a page opts out alone with PageContent `hide-on-scroll="false"`.
|
|
67
67
|
*/
|
|
68
68
|
hideOnScroll?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Where an open `aside` may sit beside the page instead of floating over
|
|
71
|
+
* it. `'web'` (default): only in the web presentation. `'wide'`: also in a
|
|
72
|
+
* DSM window at least 960px wide, with the same resize handle; a narrower
|
|
73
|
+
* window and a page that would be left under 480px still float it.
|
|
74
|
+
*/
|
|
75
|
+
asideDock?: 'web' | 'wide';
|
|
69
76
|
};
|
|
70
77
|
type __VLS_Slots = {
|
|
71
78
|
sidebar?: () => unknown;
|
|
@@ -136,6 +143,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
|
|
|
136
143
|
phoneBarTitle: "auto" | "none";
|
|
137
144
|
headerActions: DropdownMenuEntry[];
|
|
138
145
|
hideOnScroll: boolean;
|
|
146
|
+
asideDock: "web" | "wide";
|
|
139
147
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
140
148
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
141
149
|
declare const _default: typeof __VLS_export;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type DialogScrim = 'dim' | 'light' | 'none';
|
|
2
|
+
/**
|
|
3
|
+
* A dialog floating over the DSM desktop sits above its app window, so a
|
|
4
|
+
* dialog it opens masks the app window but not it. As DSM masks the window
|
|
5
|
+
* that owns a modal, the parent panel then draws the child's mask over
|
|
6
|
+
* itself: this returns the scrim to draw, or null.
|
|
7
|
+
*/
|
|
8
|
+
export declare function provideDialogCover(): import('vue').ComputedRef<DialogScrim | null>;
|
|
9
|
+
/** Asks the enclosing dialog for a mask while `active` holds. */
|
|
10
|
+
export declare function useParentDialogCover(active: () => boolean, scrim: () => DialogScrim): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Ref, ShallowRef } from 'vue';
|
|
1
|
+
import { InjectionKey, Ref, ShallowRef } from 'vue';
|
|
2
2
|
import { Box } from '../lib/floatingDialog';
|
|
3
3
|
export declare const FLOATING_HOST_KEY = "@synopkgland/floating-host";
|
|
4
4
|
export declare const FLOATING_HOST_ATTRIBUTE = "data-ui-floating";
|
|
@@ -13,6 +13,13 @@ export type FloatingHost = {
|
|
|
13
13
|
/** False on a narrow viewport or with a coarse pointer: panels become viewport sheets. */
|
|
14
14
|
draggable: Ref<boolean>;
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* The app root's own portal host (inside the app window). A Dialog opened from
|
|
18
|
+
* a floating panel puts its mask there, so the mask covers the app window and
|
|
19
|
+
* not the viewport-wide floating host.
|
|
20
|
+
*/
|
|
21
|
+
export declare const APP_PORTAL_KEY: InjectionKey<Readonly<Ref<HTMLElement | null>>>;
|
|
22
|
+
export declare function injectAppPortal(): Readonly<Ref<HTMLElement | null, HTMLElement | null>> | null;
|
|
16
23
|
export declare function injectFloatingHost(): FloatingHost | null;
|
|
17
24
|
/**
|
|
18
25
|
* A viewport-sized layer for dialogs that may leave the app window, as DSM's
|
package/dist/grid.js
CHANGED
|
@@ -3407,7 +3407,7 @@ const Ps = () => {
|
|
|
3407
3407
|
N.value ? (pe(), Ce("div", {
|
|
3408
3408
|
key: 0,
|
|
3409
3409
|
"data-ui-grid-empty": "",
|
|
3410
|
-
style: Be([{ top: `${P.value}px` }, { position: "absolute", left: "0", right: "0", bottom: "0", display: "flex", "align-items": "center", "justify-content": "center", color: "var(--ui-text-muted)", "font-size": "var(--ui-font-size)", "pointer-events": "none", "z-index": "1" }])
|
|
3410
|
+
style: Be([{ top: `${P.value}px` }, { position: "absolute", left: "0", right: "0", bottom: "0", display: "flex", "align-items": "center", "justify-content": "center", overflow: "hidden", color: "var(--ui-text-muted)", "font-size": "var(--ui-font-size)", "pointer-events": "none", "z-index": "1" }])
|
|
3411
3411
|
}, [
|
|
3412
3412
|
hn(d.$slots, "empty", {}, () => [
|
|
3413
3413
|
ti(we(J(a)("No data")), 1)
|