@nxgt/material-vue 0.37.1 → 0.39.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/CHANGELOG.md +101 -0
- package/README.md +1 -0
- package/dist/{Button-CurFF4Zt.js → Button-DVeAQorb.js} +1 -1
- package/dist/{DropdownMenuTrigger-BsuyNVzV.js → DropdownMenuTrigger-C7uYPf_9.js} +36 -36
- package/dist/{HoverCardTrigger-jCXl6TrX.js → HoverCardTrigger-VvXPswRz.js} +122 -120
- package/dist/{camera-CYwiFuGE.js → camera-CG6WfZNc.js} +4 -4
- package/dist/components/base-content.css +64 -4
- package/dist/components/base.css +3 -1
- package/dist/{components--v_k8diD.js → components-B2kSyBK0.js} +13277 -12751
- package/dist/components.js +8 -8
- package/dist/composables.js +2 -2
- package/dist/dnd.js +1 -1
- package/dist/{form-scope-B2oJ5fHr.js → form-scope-XhlaF5na.js} +1 -1
- package/dist/{i18n-provider-B2q6vp6H.js → i18n-provider-BBnUUGqM.js} +1 -1
- package/dist/i18n.js +4 -4
- package/dist/{icon-button-CIUc1bEp.js → icon-button-CSPfP615.js} +1 -1
- package/dist/in-dialog-Blhwwbyb.js +31 -0
- package/dist/lib/components/ui/collections/data-table/data-table-density.d.ts +15 -0
- package/dist/lib/components/ui/collections/data-table/data-table.stories.columns.d.ts +47 -0
- package/dist/lib/components/ui/collections/data-table/data-table.stories.template.d.ts +1 -0
- package/dist/lib/components/ui/collections/data-table/index.d.ts +1 -1
- package/dist/lib/components/ui/collections/data-table/types.d.ts +7 -0
- package/dist/lib/components/ui/feedback/banner/banner.vue.d.ts +1 -1
- package/dist/lib/components/ui/fields/contacts/consts.d.ts +1 -1
- package/dist/lib/components/ui/fields/index.d.ts +1 -0
- package/dist/lib/components/ui/fields/repeatable-group/index.d.ts +4 -0
- package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-footer.vue.d.ts +14 -0
- package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-row.vue.d.ts +33 -0
- package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-classes.d.ts +33 -0
- package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-form-field.vue.d.ts +44 -0
- package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-names.d.ts +16 -0
- package/dist/lib/components/ui/fields/repeatable-group/repeatable-group.vue.d.ts +69 -0
- package/dist/lib/components/ui/fields/repeatable-group/use-repeatable-group.d.ts +39 -0
- package/dist/lib/components/ui/fields/search-field/search-field.vue.d.ts +10 -1
- package/dist/lib/components/ui/media/stx-player/stx-player-extras.vue.d.ts +1 -1
- package/dist/lib/components/ui/overlays/command/CommandItem.vue.d.ts +10 -3
- package/dist/lib/components/ui/overlays/command/CommandList.vue.d.ts +4 -2
- package/dist/lib/components/ui/overlays/dialog/in-dialog.d.ts +12 -0
- package/dist/lib/components/ui/primitives/typography/typography.variants.d.ts +1 -0
- package/dist/lib/components/ui/primitives/typography/typography.vue.d.ts +2 -0
- package/dist/lib/components/ui/selection/checkbox-group/checkbox-group.vue.d.ts +2 -0
- package/dist/lib/components/ui/selection/option-count/option-count.vue.d.ts +25 -0
- package/dist/lib/components/ui/selection/option-count/use-option-count-text.d.ts +10 -0
- package/dist/lib/components/ui/selection/radio-group/radio-group-field.vue.d.ts +2 -0
- package/dist/lib/components/ui/selection/select-chip-field/select-chip-field.vue.d.ts +11 -0
- package/dist/lib/components/ui/selection/sortable-list/sortable-list.vue.d.ts +1 -1
- package/dist/lib/components/ui/selection/transfer-list/transfer-list.vue.d.ts +1 -1
- package/dist/lib/i18n/resources/en/en.d.ts +15 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +15 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +15 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +15 -0
- package/dist/lib/i18n/resources/resources.d.ts +30 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib/nuxt/component-names.d.ts +1 -1
- package/dist/lib.js +1 -1
- package/dist/main.js +17 -17
- package/dist/map.js +4 -4
- package/dist/material-vue.css +1 -1
- package/dist/{pdf-outline-sidebar-DJJ-ARco.js → pdf-outline-sidebar-aQ5Lhbss.js} +2 -2
- package/dist/{pdf-page-CRt6KXdJ.js → pdf-page-NCmScgMW.js} +1 -1
- package/dist/{pdf-page-list-BgCp5Asx.js → pdf-page-list-BnvE130d.js} +2 -2
- package/dist/{pdf-reader-BGxqEx8O.js → pdf-reader-CMt9dKZ-.js} +8 -8
- package/dist/{pdf-sidebar-Cvtuomgp.js → pdf-sidebar-BWzX3e0f.js} +3 -3
- package/dist/{pdf-thumbnail-sidebar-CeWPs7o7.js → pdf-thumbnail-sidebar-8nbYsI3d.js} +3 -3
- package/dist/{pdf-toolbar-BtXcyEpd.js → pdf-toolbar-DpQMG5rv.js} +5 -5
- package/dist/pdf.js +2 -2
- package/dist/{print-format.utils-keJqahvw.js → print-format.utils-oj5kle2P.js} +2 -2
- package/dist/{sortable-provider-DMu8DL2z.js → sortable-provider-2czx1jSW.js} +2 -2
- package/dist/{stored-language-dtksFoGO.js → stored-language-CKZMMJcz.js} +26 -0
- package/dist/{stx-player-nDsDyvc-.js → stx-player-CS1FYHVS.js} +5 -5
- package/dist/{translator-DqiGrSH_.js → translator-uh5FWiMq.js} +1 -1
- package/dist/{use-heading-spy-BZ7ctGZ5.js → use-heading-spy-CcJfoBA1.js} +1 -1
- package/dist/{use-material-translation-DRB6oPdF.js → use-material-translation-C6xccbic.js} +3 -3
- package/docs/components/README.md +1 -1
- package/docs/components/data-table-filter-and-lists.md +3 -1
- package/docs/components/form-fields.md +146 -0
- package/docs/components/overlays-and-menus.md +2 -0
- package/docs/components/primitives.md +3 -1
- package/docs/components/selection-and-choice.md +28 -4
- package/docs/guides/forms.md +89 -4
- package/docs/guides/i18n.md +2 -1
- package/docs/previews/form-fields-repeatablegroup.webp +0 -0
- package/docs/roadmap.md +7 -0
- package/docs/troubleshooting.md +70 -0
- package/lib/components/base-content.css +64 -4
- package/lib/components/base.css +3 -1
- package/lib/nuxt/component-names.ts +2 -0
- package/package.json +2 -2
- package/dist/use-inert-others-CtGqZKR8.js +0 -22
package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-footer.vue.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
addLabel: string;
|
|
3
|
+
/** At the maximum: the button is `aria-disabled` and described by it. */
|
|
4
|
+
full: boolean;
|
|
5
|
+
maxReached: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
9
|
+
add: () => any;
|
|
10
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
11
|
+
onAdd?: (() => any) | undefined;
|
|
12
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: typeof __VLS_export;
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { RowMoveDirection } from '@nxgt/material-core/repeatable-group';
|
|
2
|
+
export type RepeatableGroupRowNames = {
|
|
3
|
+
remove: (position: number) => string;
|
|
4
|
+
moveUp: (position: number) => string;
|
|
5
|
+
moveDown: (position: number) => string;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_Props = {
|
|
8
|
+
/** 0-based. */
|
|
9
|
+
index: number;
|
|
10
|
+
count: number;
|
|
11
|
+
names: RepeatableGroupRowNames;
|
|
12
|
+
reorderable?: boolean;
|
|
13
|
+
removable: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
};
|
|
16
|
+
type __VLS_Slots = {
|
|
17
|
+
default?: () => unknown;
|
|
18
|
+
};
|
|
19
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
20
|
+
remove: () => any;
|
|
21
|
+
move: (direction: RowMoveDirection) => any;
|
|
22
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
23
|
+
onRemove?: (() => any) | undefined;
|
|
24
|
+
onMove?: ((direction: RowMoveDirection) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The group: a whole row of the form's grid (`.form-grid-layout`
|
|
3
|
+
* `[data-slot="form-fields"]`), and a container of its own, so its rows lay
|
|
4
|
+
* their fields out by the group's width, inside a form or standalone.
|
|
5
|
+
*/
|
|
6
|
+
export declare const repeatableGroupRootClass = "@container col-span-full flex w-full min-w-0 flex-col gap-3";
|
|
7
|
+
/** The group's label, above its rows. */
|
|
8
|
+
export declare const repeatableGroupLabelClass = "min-w-0 break-words font-medium text-sm";
|
|
9
|
+
/** The rows, one under the other. */
|
|
10
|
+
export declare const repeatableGroupListClass = "flex min-w-0 flex-col gap-3";
|
|
11
|
+
/**
|
|
12
|
+
* A row: its fields, then its buttons. One column on a phone (the buttons
|
|
13
|
+
* under the fields); from `@xl` the buttons sit at the end of the row.
|
|
14
|
+
*/
|
|
15
|
+
export declare const repeatableGroupRowClass = "grid min-w-0 grid-cols-1 gap-2 rounded-md border p-3 @xl:grid-cols-[minmax(0,1fr)_auto] @xl:items-start";
|
|
16
|
+
/**
|
|
17
|
+
* A row's fields: one column on a phone, then as many columns of at least
|
|
18
|
+
* 11rem as the row has room for.
|
|
19
|
+
*/
|
|
20
|
+
export declare const repeatableGroupFieldsClass = "grid min-w-0 grid-cols-1 items-start gap-2 @xl:grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]";
|
|
21
|
+
/** A row's move and remove buttons, level with its fields' inputs from `@xl`. */
|
|
22
|
+
export declare const repeatableGroupActionsClass = "flex flex-wrap items-center justify-end gap-1 @xl:pt-6";
|
|
23
|
+
/** Under the rows: the Add button and why it is disabled at the maximum. */
|
|
24
|
+
export declare const repeatableGroupFooterClass = "flex flex-wrap items-center gap-2";
|
|
25
|
+
/**
|
|
26
|
+
* The Add button at the maximum: `aria-disabled`, not `disabled`, so it
|
|
27
|
+
* keeps the focus and its reason (`aria-describedby`) can still be read.
|
|
28
|
+
*/
|
|
29
|
+
export declare const repeatableGroupAddClass = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
30
|
+
/** Why the Add button is disabled, beside it. */
|
|
31
|
+
export declare const repeatableGroupHintClass = "text-muted-foreground text-sm";
|
|
32
|
+
/** The empty state, compact enough for a form. */
|
|
33
|
+
export declare const repeatableGroupEmptyClass = "min-h-0 gap-3 rounded-md border border-dashed p-6";
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { FieldEntry } from 'vee-validate';
|
|
2
|
+
import { RepeatableGroupProps } from './repeatable-group.vue';
|
|
3
|
+
export type RepeatableGroupFormFieldProps<TRow> = Omit<RepeatableGroupProps<FieldEntry<TRow>>, 'items' | 'getKey' | 'error' | 'onMove'> & {
|
|
4
|
+
/** The array's path in the form (`periods`). */
|
|
5
|
+
name: string;
|
|
6
|
+
/** The value of a row the Add button appends. */
|
|
7
|
+
newRow: () => TRow;
|
|
8
|
+
};
|
|
9
|
+
/** What the `row` slot is given. */
|
|
10
|
+
export type RepeatableGroupFormFieldRow<TRow> = {
|
|
11
|
+
field: FieldEntry<TRow>;
|
|
12
|
+
/** 0-based. */
|
|
13
|
+
index: number;
|
|
14
|
+
/** 1-based, as a user reads it. */
|
|
15
|
+
position: number;
|
|
16
|
+
/**
|
|
17
|
+
* The row's own path, `${name}[${index}]` (`path`, not `name`: a slot's
|
|
18
|
+
* `name` attribute is the slot's own).
|
|
19
|
+
*/
|
|
20
|
+
path: string;
|
|
21
|
+
};
|
|
22
|
+
declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
23
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<RepeatableGroupFormFieldProps<TRow>> & (typeof globalThis extends {
|
|
24
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
25
|
+
} ? P : {});
|
|
26
|
+
expose: (exposed: {}) => void;
|
|
27
|
+
attrs: any;
|
|
28
|
+
slots: {
|
|
29
|
+
/** One row's fields, the form's own wrappers named `${path}.<key>`. */
|
|
30
|
+
row?: (row: RepeatableGroupFormFieldRow<TRow>) => unknown;
|
|
31
|
+
label?: () => unknown;
|
|
32
|
+
empty?: () => unknown;
|
|
33
|
+
};
|
|
34
|
+
emit: {};
|
|
35
|
+
}>) => import('vue').VNode & {
|
|
36
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
37
|
+
};
|
|
38
|
+
declare const _default: typeof __VLS_export;
|
|
39
|
+
export default _default;
|
|
40
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
41
|
+
[K in keyof T]: T[K];
|
|
42
|
+
} : {
|
|
43
|
+
[K in keyof T as K]: T[K];
|
|
44
|
+
}) & {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RowAnnouncement } from '@nxgt/material-core/repeatable-group';
|
|
2
|
+
import { useMaterialTranslation } from '../../../../i18n/use-material-translation';
|
|
3
|
+
type Translate = ReturnType<typeof useMaterialTranslation>['t'];
|
|
4
|
+
/** Why Add is disabled at `max`. */
|
|
5
|
+
export declare const maxReached: (t: Translate, max?: number) => string;
|
|
6
|
+
/** The group's button names, after the row's `label` and 1-based position. */
|
|
7
|
+
export declare function rowNames(t: Translate, label: string, max?: number): {
|
|
8
|
+
add: string;
|
|
9
|
+
remove: (position: number) => string;
|
|
10
|
+
moveUp: (position: number) => string;
|
|
11
|
+
moveDown: (position: number) => string;
|
|
12
|
+
maxReached: string;
|
|
13
|
+
};
|
|
14
|
+
/** What the live region says about a change. */
|
|
15
|
+
export declare function announcement(t: Translate, label: string, said: RowAnnouncement): string;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'vue';
|
|
2
|
+
export type RepeatableGroupProps<TItem> = {
|
|
3
|
+
/** The rows' values, one row each. */
|
|
4
|
+
items: readonly TItem[];
|
|
5
|
+
/**
|
|
6
|
+
* A stable key per row; by default the item's `key` (what vee-validate's
|
|
7
|
+
* `useFieldArray` gives each entry), else its `id`, else its index.
|
|
8
|
+
*/
|
|
9
|
+
getKey?: (item: TItem, index: number) => PropertyKey;
|
|
10
|
+
/** The group's label, above the rows; it names the group and the list. */
|
|
11
|
+
label?: string;
|
|
12
|
+
/**
|
|
13
|
+
* What one row is, lower case: it names the row's buttons ("Remove
|
|
14
|
+
* period 2") and the announcements. Default "row", translated.
|
|
15
|
+
*/
|
|
16
|
+
rowLabel?: string;
|
|
17
|
+
/** The Add button's text. Default "Add {rowLabel}", translated. */
|
|
18
|
+
addLabel?: string;
|
|
19
|
+
/** Move up and move down buttons on each row. */
|
|
20
|
+
reorderable?: boolean;
|
|
21
|
+
/** No Remove at this many rows. */
|
|
22
|
+
min?: number;
|
|
23
|
+
/** The Add button is disabled at this many rows, and says why. */
|
|
24
|
+
max?: number;
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/** An error about the whole group, under the rows. */
|
|
27
|
+
error?: string;
|
|
28
|
+
/** With no row: an EmptyState with this title (and description). */
|
|
29
|
+
emptyTitle?: string;
|
|
30
|
+
emptyDescription?: string;
|
|
31
|
+
class?: HTMLAttributes['class'];
|
|
32
|
+
/**
|
|
33
|
+
* Called by the move buttons (`@move`), which `reorderable` shows only
|
|
34
|
+
* with a listener: a prop rather than an emit, so the group can tell.
|
|
35
|
+
*/
|
|
36
|
+
onMove?: (from: number, to: number) => void;
|
|
37
|
+
};
|
|
38
|
+
/** What the `row` slot is given. `index` is 0-based, `position` 1-based. */
|
|
39
|
+
export type RepeatableGroupRowContext<TItem> = {
|
|
40
|
+
item: TItem;
|
|
41
|
+
index: number;
|
|
42
|
+
position: number;
|
|
43
|
+
};
|
|
44
|
+
declare const __VLS_export: <TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
45
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<RepeatableGroupProps<TItem> & {
|
|
46
|
+
onRemove?: ((index: number) => any) | undefined;
|
|
47
|
+
onAdd?: (() => any) | undefined;
|
|
48
|
+
}> & (typeof globalThis extends {
|
|
49
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
50
|
+
} ? P : {});
|
|
51
|
+
expose: (exposed: {}) => void;
|
|
52
|
+
attrs: any;
|
|
53
|
+
slots: {
|
|
54
|
+
/** One row's fields. */
|
|
55
|
+
row?: (row: RepeatableGroupRowContext<TItem>) => unknown;
|
|
56
|
+
label?: () => unknown;
|
|
57
|
+
empty?: () => unknown;
|
|
58
|
+
};
|
|
59
|
+
emit: ((evt: "remove", index: number) => void) & ((evt: "add") => void);
|
|
60
|
+
}>) => import('vue').VNode & {
|
|
61
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
62
|
+
};
|
|
63
|
+
declare const _default: typeof __VLS_export;
|
|
64
|
+
export default _default;
|
|
65
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
66
|
+
[K in keyof T]: T[K];
|
|
67
|
+
} : {
|
|
68
|
+
[K in keyof T as K]: T[K];
|
|
69
|
+
}) & {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { RowMoveDirection } from '@nxgt/material-core/repeatable-group';
|
|
2
|
+
import { Ref } from 'vue';
|
|
3
|
+
type Options = {
|
|
4
|
+
root: Readonly<Ref<HTMLElement | null>>;
|
|
5
|
+
items: () => readonly unknown[];
|
|
6
|
+
rowLabel: () => string | undefined;
|
|
7
|
+
max: () => number | undefined;
|
|
8
|
+
onAdd: () => void;
|
|
9
|
+
onRemove: (index: number) => void;
|
|
10
|
+
onMove: () => ((from: number, to: number) => void) | undefined;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* A RepeatableGroup's behaviour: the buttons' names, the focus after a row
|
|
14
|
+
* is added, removed or moved (the rules are `@nxgt/material-core`'s, shared
|
|
15
|
+
* with the React group), and what the polite live region says.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useRepeatableGroup(options: Options): {
|
|
18
|
+
message: Ref<{
|
|
19
|
+
text: string;
|
|
20
|
+
id: number;
|
|
21
|
+
}, {
|
|
22
|
+
text: string;
|
|
23
|
+
id: number;
|
|
24
|
+
} | {
|
|
25
|
+
text: string;
|
|
26
|
+
id: number;
|
|
27
|
+
}>;
|
|
28
|
+
names: import('vue').ComputedRef<{
|
|
29
|
+
add: string;
|
|
30
|
+
remove: (position: number) => string;
|
|
31
|
+
moveUp: (position: number) => string;
|
|
32
|
+
moveDown: (position: number) => string;
|
|
33
|
+
maxReached: string;
|
|
34
|
+
}>;
|
|
35
|
+
add: () => void;
|
|
36
|
+
remove: (index: number) => void;
|
|
37
|
+
move: (index: number, direction: RowMoveDirection) => void;
|
|
38
|
+
};
|
|
39
|
+
export {};
|
|
@@ -12,8 +12,17 @@ export type SearchFieldProps = {
|
|
|
12
12
|
id?: string;
|
|
13
13
|
placeholder?: string;
|
|
14
14
|
modelValue?: string;
|
|
15
|
+
/**
|
|
16
|
+
* A hint for the key that focuses the field, for example `"/"`: shown as a
|
|
17
|
+
* `Kbd` while the field is empty and set as `aria-keyshortcuts`. It binds no
|
|
18
|
+
* key; the page owns the listener.
|
|
19
|
+
*/
|
|
20
|
+
shortcut?: string;
|
|
15
21
|
};
|
|
16
|
-
declare
|
|
22
|
+
declare function focus(): void;
|
|
23
|
+
declare const __VLS_export: import('vue').DefineComponent<SearchFieldProps, {
|
|
24
|
+
focus: typeof focus;
|
|
25
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
17
26
|
"update:modelValue": (value: string) => any;
|
|
18
27
|
valueChange: (value: string) => any;
|
|
19
28
|
}, string, import('vue').PublicProps, Readonly<SearchFieldProps> & Readonly<{
|
|
@@ -5,8 +5,8 @@ export type StxPlayerExtrasProps = {
|
|
|
5
5
|
dense?: boolean;
|
|
6
6
|
};
|
|
7
7
|
declare const __VLS_export: import('vue').DefineComponent<StxPlayerExtrasProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StxPlayerExtrasProps> & Readonly<{}>, {
|
|
8
|
-
dense: boolean;
|
|
9
8
|
tone: "overlay" | "surface";
|
|
9
|
+
dense: boolean;
|
|
10
10
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
11
11
|
declare const _default: typeof __VLS_export;
|
|
12
12
|
export default _default;
|
|
@@ -2,16 +2,23 @@ import { ListboxItemProps } from 'reka-ui';
|
|
|
2
2
|
import { HTMLAttributes } from 'vue';
|
|
3
3
|
type __VLS_Props = ListboxItemProps & {
|
|
4
4
|
class?: HTMLAttributes['class'];
|
|
5
|
+
/**
|
|
6
|
+
* Sets `aria-checked` and shows a checkbox indicator. reka's
|
|
7
|
+
* `aria-selected` stays the selected value, so `multiple` is not used.
|
|
8
|
+
*/
|
|
9
|
+
checked?: boolean;
|
|
5
10
|
};
|
|
6
|
-
declare var
|
|
11
|
+
declare var __VLS_16: {};
|
|
7
12
|
type __VLS_Slots = {} & {
|
|
8
|
-
default?: (props: typeof
|
|
13
|
+
default?: (props: typeof __VLS_16) => any;
|
|
9
14
|
};
|
|
10
15
|
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
11
16
|
select: (event: import('reka-ui').ListboxItemSelectEvent<import('reka-ui').AcceptableValue>) => any;
|
|
12
17
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
13
18
|
onSelect?: ((event: import('reka-ui').ListboxItemSelectEvent<import('reka-ui').AcceptableValue>) => any) | undefined;
|
|
14
|
-
}>, {
|
|
19
|
+
}>, {
|
|
20
|
+
checked: boolean;
|
|
21
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
15
22
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
16
23
|
declare const _default: typeof __VLS_export;
|
|
17
24
|
export default _default;
|
|
@@ -2,10 +2,12 @@ import { ListboxContentProps } from 'reka-ui';
|
|
|
2
2
|
import { HTMLAttributes } from 'vue';
|
|
3
3
|
type __VLS_Props = ListboxContentProps & {
|
|
4
4
|
class?: HTMLAttributes['class'];
|
|
5
|
+
/** Sets `aria-multiselectable`: the items carry a `checked` state. */
|
|
6
|
+
multiselectable?: boolean;
|
|
5
7
|
};
|
|
6
|
-
declare var
|
|
8
|
+
declare var __VLS_9: {};
|
|
7
9
|
type __VLS_Slots = {} & {
|
|
8
|
-
default?: (props: typeof
|
|
10
|
+
default?: (props: typeof __VLS_9) => any;
|
|
9
11
|
};
|
|
10
12
|
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
11
13
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `true` from `DialogContent`, `DialogScrollContent`, `AlertDialogContent`
|
|
3
|
+
* and `SheetContent`: a field inside opens its list in the layer's flow,
|
|
4
|
+
* pushing what follows (the footer) down instead of floating over the
|
|
5
|
+
* title or the Save button. `false` from `PopoverContent`,
|
|
6
|
+
* `HoverCardContent` and the menus' contents: a floating layer opened from
|
|
7
|
+
* a dialog keeps a floating list. Not exported: the layers provide it, the
|
|
8
|
+
* fields inject it. `InDialogContext` in `@nxgt/material`.
|
|
9
|
+
*/
|
|
10
|
+
export declare function provideInDialog(inDialog: boolean): void;
|
|
11
|
+
/** Whether this component renders inside a dialog's content. */
|
|
12
|
+
export declare function useInDialog(): boolean;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const typographyVariants: (props?: ({
|
|
3
3
|
variant?: "caption" | "normal" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
|
|
4
|
+
tone?: "default" | "error" | "primary" | "muted" | null | undefined;
|
|
4
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
6
|
export type TypographyVariants = VariantProps<typeof typographyVariants>;
|
|
@@ -3,6 +3,8 @@ import { HTMLAttributes } from 'vue';
|
|
|
3
3
|
import { TypographyVariants } from './typography.variants';
|
|
4
4
|
export type TypographyProps = PrimitiveProps & {
|
|
5
5
|
variant?: TypographyVariants['variant'];
|
|
6
|
+
/** The text colour: `default` inherits it, `muted` is `text-muted-foreground`. */
|
|
7
|
+
tone?: TypographyVariants['tone'];
|
|
6
8
|
class?: HTMLAttributes['class'];
|
|
7
9
|
};
|
|
8
10
|
declare var __VLS_8: {};
|
|
@@ -2,6 +2,8 @@ import { HTMLAttributes } from 'vue';
|
|
|
2
2
|
export type CheckboxGroupOption = {
|
|
3
3
|
value: string;
|
|
4
4
|
label: string;
|
|
5
|
+
/** Shown after the label and added to its accessible name. */
|
|
6
|
+
count?: number;
|
|
5
7
|
};
|
|
6
8
|
export type CheckboxGroupProps = {
|
|
7
9
|
options: CheckboxGroupOption[];
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* An option's trailing count, as plain text inside the option's label or
|
|
3
|
+
* chip: " 24" in muted `tabular-nums`, then a `sr-only` " results" (the
|
|
4
|
+
* `material.option-count.label` ICU plural, the unit word only). The name
|
|
5
|
+
* reads "CE1 24 results": it starts with the visible label (WCAG 2.5.3), and
|
|
6
|
+
* no zero-size or clipped trick is involved, so it names the same in
|
|
7
|
+
* Chromium, WebKit and Firefox. A checkbox or radio also gets that name
|
|
8
|
+
* as an explicit `aria-label` (`useOptionCountName`): Reka would derive one
|
|
9
|
+
* from `innerText`, which breaks the line before the `sr-only` unit.
|
|
10
|
+
*
|
|
11
|
+
* Limits: put it right after the label text, in the same inline wrapper
|
|
12
|
+
* (a `<span>`) for a checkbox or radio, so a flex `Label` sees one item. The
|
|
13
|
+
* leading space is a text node; a flex chip drops it and its `gap` spaces
|
|
14
|
+
* the items instead. On a filled chip (`inChip`) the count keeps the chip's
|
|
15
|
+
* colour: the muted one would not reach 4.5:1.
|
|
16
|
+
*/
|
|
17
|
+
type __VLS_Props = {
|
|
18
|
+
count: number;
|
|
19
|
+
inChip?: boolean;
|
|
20
|
+
};
|
|
21
|
+
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
22
|
+
inChip: boolean;
|
|
23
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** The unit word of a count in the page's language: "result" / "results". */
|
|
2
|
+
export declare function useOptionCountUnit(): (count: number) => string;
|
|
3
|
+
/**
|
|
4
|
+
* The accessible name of a checkbox or radio with a count: "CE1 24 results",
|
|
5
|
+
* the string `OptionCount`'s text also forms. Reka sets the `aria-label` of
|
|
6
|
+
* these two from their label's `innerText`, where the `sr-only` (absolute)
|
|
7
|
+
* unit lands on its own line ("CE1 24\nresults"), so the control gets it
|
|
8
|
+
* explicitly. `undefined` without a count: the control keeps its own name.
|
|
9
|
+
*/
|
|
10
|
+
export declare function useOptionCountName(): (label: string, count?: number) => string | undefined;
|
|
@@ -4,6 +4,8 @@ export type RadioGroupOption = {
|
|
|
4
4
|
label: string;
|
|
5
5
|
/** Rendered and announced as disabled, skipped by the arrow keys. */
|
|
6
6
|
disabled?: boolean;
|
|
7
|
+
/** Shown after the label and added to its accessible name. */
|
|
8
|
+
count?: number;
|
|
7
9
|
};
|
|
8
10
|
export type RadioGroupFieldProps = {
|
|
9
11
|
options: RadioGroupOption[];
|
|
@@ -1,11 +1,21 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
1
2
|
export type SelectChipOption = {
|
|
2
3
|
value: string;
|
|
3
4
|
label: string;
|
|
5
|
+
/** An icon component, shown before the label. */
|
|
6
|
+
icon?: Component;
|
|
7
|
+
/** Shown after the label and added to its accessible name. */
|
|
8
|
+
count?: number;
|
|
4
9
|
};
|
|
5
10
|
export type SelectChipFieldProps = {
|
|
6
11
|
mode?: 'single' | 'multiple';
|
|
7
12
|
modelValue?: string[];
|
|
8
13
|
options: SelectChipOption[];
|
|
14
|
+
/**
|
|
15
|
+
* Single mode: pressing the chosen chip again clears it (`true`, the
|
|
16
|
+
* default). `false` keeps it chosen, as a radio group does.
|
|
17
|
+
*/
|
|
18
|
+
deselectable?: boolean;
|
|
9
19
|
label?: string;
|
|
10
20
|
helperText?: string;
|
|
11
21
|
error?: boolean;
|
|
@@ -24,6 +34,7 @@ declare const __VLS_export: import('vue').DefineComponent<SelectChipFieldProps,
|
|
|
24
34
|
}>, {
|
|
25
35
|
mode: "single" | "multiple";
|
|
26
36
|
modelValue: string[];
|
|
37
|
+
deselectable: boolean;
|
|
27
38
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
28
39
|
declare const _default: typeof __VLS_export;
|
|
29
40
|
export default _default;
|
|
@@ -31,8 +31,8 @@ declare const __VLS_base: import('vue').DefineComponent<SortableListProps, {}, {
|
|
|
31
31
|
height: number | string;
|
|
32
32
|
disabled: boolean;
|
|
33
33
|
draggable: boolean;
|
|
34
|
-
searchable: boolean;
|
|
35
34
|
reorderable: boolean;
|
|
35
|
+
searchable: boolean;
|
|
36
36
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
37
37
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
38
38
|
declare const _default: typeof __VLS_export;
|
|
@@ -36,8 +36,8 @@ declare const __VLS_base: import('vue').DefineComponent<TransferListProps, {}, {
|
|
|
36
36
|
height: number | string;
|
|
37
37
|
disabled: boolean;
|
|
38
38
|
draggable: boolean;
|
|
39
|
-
searchable: boolean;
|
|
40
39
|
reorderable: boolean;
|
|
40
|
+
searchable: boolean;
|
|
41
41
|
showTransferAll: boolean;
|
|
42
42
|
showSelectAll: boolean;
|
|
43
43
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
@@ -356,6 +356,7 @@ export declare const en: {
|
|
|
356
356
|
"select-all": string;
|
|
357
357
|
"select-row": string;
|
|
358
358
|
"toggle-row": string;
|
|
359
|
+
expand: string;
|
|
359
360
|
"scroll-region": string;
|
|
360
361
|
};
|
|
361
362
|
pagination: {
|
|
@@ -795,6 +796,9 @@ export declare const en: {
|
|
|
795
796
|
placeholder: string;
|
|
796
797
|
empty: string;
|
|
797
798
|
};
|
|
799
|
+
"option-count": {
|
|
800
|
+
label: string;
|
|
801
|
+
};
|
|
798
802
|
autocomplete: {
|
|
799
803
|
empty: string;
|
|
800
804
|
add: string;
|
|
@@ -1285,5 +1289,16 @@ export declare const en: {
|
|
|
1285
1289
|
"saved-required": string;
|
|
1286
1290
|
done: string;
|
|
1287
1291
|
};
|
|
1292
|
+
"repeatable-group": {
|
|
1293
|
+
row: string;
|
|
1294
|
+
add: string;
|
|
1295
|
+
remove: string;
|
|
1296
|
+
"move-up": string;
|
|
1297
|
+
"move-down": string;
|
|
1298
|
+
added: string;
|
|
1299
|
+
removed: string;
|
|
1300
|
+
moved: string;
|
|
1301
|
+
"max-reached": string;
|
|
1302
|
+
};
|
|
1288
1303
|
};
|
|
1289
1304
|
};
|
|
@@ -346,6 +346,7 @@ declare const _default: {
|
|
|
346
346
|
"select-all": "Select all",
|
|
347
347
|
"select-row": "Select row",
|
|
348
348
|
"toggle-row": "Toggle row details",
|
|
349
|
+
"expand": "Expand",
|
|
349
350
|
"scroll-region": "Scrollable table"
|
|
350
351
|
},
|
|
351
352
|
"pagination": {
|
|
@@ -785,6 +786,9 @@ declare const _default: {
|
|
|
785
786
|
"placeholder": "Search…",
|
|
786
787
|
"empty": "No results"
|
|
787
788
|
},
|
|
789
|
+
"option-count": {
|
|
790
|
+
"label": "{count, plural, one {result} other {results}}"
|
|
791
|
+
},
|
|
788
792
|
"autocomplete": {
|
|
789
793
|
"empty": "No option found.",
|
|
790
794
|
"add": "Add \"{query}\"",
|
|
@@ -1274,6 +1278,17 @@ declare const _default: {
|
|
|
1274
1278
|
"saved": "I have saved these codes",
|
|
1275
1279
|
"saved-required": "Tick the box once your codes are safe",
|
|
1276
1280
|
"done": "Done"
|
|
1281
|
+
},
|
|
1282
|
+
"repeatable-group": {
|
|
1283
|
+
"row": "row",
|
|
1284
|
+
"add": "Add {label}",
|
|
1285
|
+
"remove": "Remove {label} {index}",
|
|
1286
|
+
"move-up": "Move {label} {index} up",
|
|
1287
|
+
"move-down": "Move {label} {index} down",
|
|
1288
|
+
"added": "Added {label} {index}",
|
|
1289
|
+
"removed": "Removed {label} {index}",
|
|
1290
|
+
"moved": "Moved {label} {from} to position {to}",
|
|
1291
|
+
"max-reached": "Maximum reached ({max})"
|
|
1277
1292
|
}
|
|
1278
1293
|
}
|
|
1279
1294
|
;
|
|
@@ -356,6 +356,7 @@ export declare const fr: {
|
|
|
356
356
|
"select-all": string;
|
|
357
357
|
"select-row": string;
|
|
358
358
|
"toggle-row": string;
|
|
359
|
+
expand: string;
|
|
359
360
|
"scroll-region": string;
|
|
360
361
|
};
|
|
361
362
|
pagination: {
|
|
@@ -795,6 +796,9 @@ export declare const fr: {
|
|
|
795
796
|
placeholder: string;
|
|
796
797
|
empty: string;
|
|
797
798
|
};
|
|
799
|
+
"option-count": {
|
|
800
|
+
label: string;
|
|
801
|
+
};
|
|
798
802
|
autocomplete: {
|
|
799
803
|
empty: string;
|
|
800
804
|
add: string;
|
|
@@ -1285,5 +1289,16 @@ export declare const fr: {
|
|
|
1285
1289
|
"saved-required": string;
|
|
1286
1290
|
done: string;
|
|
1287
1291
|
};
|
|
1292
|
+
"repeatable-group": {
|
|
1293
|
+
row: string;
|
|
1294
|
+
add: string;
|
|
1295
|
+
remove: string;
|
|
1296
|
+
"move-up": string;
|
|
1297
|
+
"move-down": string;
|
|
1298
|
+
added: string;
|
|
1299
|
+
removed: string;
|
|
1300
|
+
moved: string;
|
|
1301
|
+
"max-reached": string;
|
|
1302
|
+
};
|
|
1288
1303
|
};
|
|
1289
1304
|
};
|
|
@@ -346,6 +346,7 @@ declare const _default: {
|
|
|
346
346
|
"select-all": "Tout sélectionner",
|
|
347
347
|
"select-row": "Sélectionner la ligne",
|
|
348
348
|
"toggle-row": "Afficher ou masquer les détails de la ligne",
|
|
349
|
+
"expand": "Déplier",
|
|
349
350
|
"scroll-region": "Tableau défilant"
|
|
350
351
|
},
|
|
351
352
|
"pagination": {
|
|
@@ -785,6 +786,9 @@ declare const _default: {
|
|
|
785
786
|
"placeholder": "Rechercher…",
|
|
786
787
|
"empty": "Aucun résultat"
|
|
787
788
|
},
|
|
789
|
+
"option-count": {
|
|
790
|
+
"label": "{count, plural, one {résultat} other {résultats}}"
|
|
791
|
+
},
|
|
788
792
|
"autocomplete": {
|
|
789
793
|
"empty": "Aucune option.",
|
|
790
794
|
"add": "Ajouter « {query} »",
|
|
@@ -1274,6 +1278,17 @@ declare const _default: {
|
|
|
1274
1278
|
"saved": "J'ai enregistré ces codes",
|
|
1275
1279
|
"saved-required": "Cochez la case une fois vos codes en lieu sûr",
|
|
1276
1280
|
"done": "Terminé"
|
|
1281
|
+
},
|
|
1282
|
+
"repeatable-group": {
|
|
1283
|
+
"row": "ligne",
|
|
1284
|
+
"add": "Ajouter une {label}",
|
|
1285
|
+
"remove": "Retirer la {label} {index}",
|
|
1286
|
+
"move-up": "Monter la {label} {index}",
|
|
1287
|
+
"move-down": "Descendre la {label} {index}",
|
|
1288
|
+
"added": "Ajout : {label} {index}",
|
|
1289
|
+
"removed": "Suppression : {label} {index}",
|
|
1290
|
+
"moved": "Déplacement : {label} {from} en position {to}",
|
|
1291
|
+
"max-reached": "Maximum atteint ({max})"
|
|
1277
1292
|
}
|
|
1278
1293
|
}
|
|
1279
1294
|
;
|