@synopackageland/ui 0.18.0 → 0.18.1
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 +5 -0
- package/dist/components/composite/form/Form.vue.d.ts +1 -1
- package/dist/components/composite/form/context.d.ts +6 -0
- package/dist/index.js +3347 -3347
- package/dist/json-preview/preview.js +2773 -2773
- package/dist/reka-runtime.json +1 -1
- package/docs/layout-rules.md +2 -1
- package/package.json +1 -76
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.18.1 (2026-10-31)
|
|
4
|
+
|
|
5
|
+
- A `Form`, `FormItem` or `SettingsRow` with the default `direction="auto"` keeps its labels in a left column down to 400px of container width (was 520px), as DSM does in narrow dialogs and side panels. A form in a 420–480px `Sheet` now reads label | control, sized by `label-width`; below 400px (a phone) the labels still stack. Long labels wrap and stay level with their control. Set `direction="vertical"` to keep the stacked layout in a 400–519px container.
|
|
6
|
+
- New browser check `pnpm check:drawer-form`: a form in a 480px side sheet at desktop and phone width.
|
|
7
|
+
|
|
3
8
|
## 0.18.0 (2026-10-31)
|
|
4
9
|
|
|
5
10
|
New page pieces for list-and-detail Apps. Nothing existing changes.
|
|
@@ -4,7 +4,7 @@ import { FormDirection, FormRules, FormSpacing, FormValidatedResult, ValidateMes
|
|
|
4
4
|
type __VLS_Props = {
|
|
5
5
|
/** Rules keyed by `FormItem`'s `prop`; async-validator syntax. */
|
|
6
6
|
rules?: FormRules;
|
|
7
|
-
/** `'horizontal'` puts the label beside the control, `'vertical'` above it. */
|
|
7
|
+
/** `'horizontal'` puts the label beside the control, `'vertical'` above it; `'auto'` (default) stacks below 400px of width. */
|
|
8
8
|
direction?: FormDirection;
|
|
9
9
|
/** Gap between items, nested ones included; `'auto'` uses `--ui-field-gap` (horizontal) or 2px more (vertical). */
|
|
10
10
|
spacing?: FormSpacing;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { InjectionKey } from 'vue';
|
|
2
2
|
import { FieldWidth } from '../../../lib/fieldWidth';
|
|
3
3
|
import { FormRules, FormDirection, FormSpacing, ValidateMessageDisplayMode, ValidateStatus, ValidateTrigger } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* Below this container width (px) an `auto` FormItem or SettingsRow stacks its
|
|
6
|
+
* label over the control. DSM keeps labels beside their fields in narrow
|
|
7
|
+
* dialogs and side panels, so a 400px+ drawer stays two-column; a phone stacks.
|
|
8
|
+
*/
|
|
9
|
+
export declare const FORM_STACK_BELOW = 400;
|
|
4
10
|
export declare const FORM_CONTEXT_KEY: InjectionKey<FormContext>;
|
|
5
11
|
export declare const FORM_FIELD_KEY: InjectionKey<FormFieldContext | null>;
|
|
6
12
|
/** What Form exposes to its FormItems. Values are unwrapped (the provided object is reactive). */
|