iryx-ui 0.5.0 → 0.7.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/README.md +355 -5
- package/dist/component-names.d.ts +1 -1
- package/dist/components/Alert.vue.d.ts +19 -4
- package/dist/components/Badge.vue.d.ts +4 -3
- package/dist/components/Banner.vue.d.ts +81 -0
- package/dist/components/Combobox.vue.d.ts +3 -3
- package/dist/components/DatePicker.vue.d.ts +52 -0
- package/dist/components/DateRangePicker.vue.d.ts +60 -0
- package/dist/components/DropdownMenu.vue.d.ts +1 -1
- package/dist/components/Input.vue.d.ts +39 -1
- package/dist/components/Pagination.vue.d.ts +3 -1
- package/dist/components/PasswordInput.vue.d.ts +54 -0
- package/dist/components/Select.vue.d.ts +2 -2
- package/dist/components/Table.vue.d.ts +131 -0
- package/dist/components/Textarea.vue.d.ts +16 -1
- package/dist/components/index.d.ts +5 -0
- package/dist/composables/data-table.d.ts +93 -0
- package/dist/composables/date.d.ts +21 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +72 -60
- package/dist/node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js +104 -7
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js +122 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/DateFormatter.js +84 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/calendars/GregorianCalendar.js +91 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/conversion.js +107 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/manipulation.js +159 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js +29 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js +37 -0
- package/dist/node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/utils.js +6 -0
- package/dist/packages/iryx-ui/src/component-names.js +1 -1
- package/dist/packages/iryx-ui/src/components/Alert.vue_vue_type_script_setup_true_lang.js +51 -35
- package/dist/packages/iryx-ui/src/components/Badge.vue_vue_type_script_setup_true_lang.js +1 -2
- package/dist/packages/iryx-ui/src/components/Banner.js +5 -0
- package/dist/packages/iryx-ui/src/components/Banner.vue_vue_type_script_setup_true_lang.js +93 -0
- package/dist/packages/iryx-ui/src/components/DatePicker.js +5 -0
- package/dist/packages/iryx-ui/src/components/DatePicker.vue_vue_type_script_setup_true_lang.js +186 -0
- package/dist/packages/iryx-ui/src/components/DateRangePicker.js +5 -0
- package/dist/packages/iryx-ui/src/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js +210 -0
- package/dist/packages/iryx-ui/src/components/Input.vue_vue_type_script_setup_true_lang.js +94 -25
- package/dist/packages/iryx-ui/src/components/Pagination.vue_vue_type_script_setup_true_lang.js +5 -1
- package/dist/packages/iryx-ui/src/components/PasswordInput.js +5 -0
- package/dist/packages/iryx-ui/src/components/PasswordInput.vue_vue_type_script_setup_true_lang.js +113 -0
- package/dist/packages/iryx-ui/src/components/Table.js +5 -0
- package/dist/packages/iryx-ui/src/components/Table.vue_vue_type_script_setup_true_lang.js +217 -0
- package/dist/packages/iryx-ui/src/components/Textarea.vue_vue_type_script_setup_true_lang.js +47 -21
- package/dist/packages/iryx-ui/src/components/index.js +68 -58
- package/dist/packages/iryx-ui/src/composables/data-table.js +106 -0
- package/dist/packages/iryx-ui/src/composables/date.js +25 -0
- package/dist/packages/iryx-ui/src/theme/alert.js +10 -21
- package/dist/packages/iryx-ui/src/theme/badge.js +37 -37
- package/dist/packages/iryx-ui/src/theme/banner.js +62 -0
- package/dist/packages/iryx-ui/src/theme/date-picker.js +45 -0
- package/dist/packages/iryx-ui/src/theme/input.js +22 -6
- package/dist/packages/iryx-ui/src/theme/pagination.js +23 -13
- package/dist/packages/iryx-ui/src/theme/password-input.js +22 -0
- package/dist/packages/iryx-ui/src/theme/stat.js +4 -4
- package/dist/packages/iryx-ui/src/theme/table.js +62 -0
- package/dist/packages/iryx-ui/src/theme/toast.js +11 -26
- package/dist/theme/alert.d.ts +6 -12
- package/dist/theme/badge.d.ts +15 -12
- package/dist/theme/banner.d.ts +185 -0
- package/dist/theme/date-picker.d.ts +254 -0
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/input.d.ts +94 -15
- package/dist/theme/pagination.d.ts +33 -0
- package/dist/theme/password-input.d.ts +79 -0
- package/dist/theme/stat.d.ts +0 -3
- package/dist/theme/table.d.ts +230 -0
- package/dist/theme/toast.d.ts +0 -15
- package/package.json +2 -1
- package/theme.css +10 -0
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/** Both ends are ISO `YYYY-MM-DD` strings, and either may be absent. */
|
|
2
|
+
export interface DateRange {
|
|
3
|
+
start: string | null;
|
|
4
|
+
end: string | null;
|
|
5
|
+
}
|
|
6
|
+
export interface DateRangePickerProps {
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Mark the field as invalid — styles the border and ring red. */
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
id?: string;
|
|
13
|
+
/** Earliest selectable date, as an ISO `YYYY-MM-DD` string. */
|
|
14
|
+
min?: string;
|
|
15
|
+
/** Latest selectable date, as an ISO `YYYY-MM-DD` string. */
|
|
16
|
+
max?: string;
|
|
17
|
+
/** Locale for the month names, weekday initials and the trigger's text. */
|
|
18
|
+
locale?: string;
|
|
19
|
+
/** How each end of the range reads on the trigger. */
|
|
20
|
+
format?: Intl.DateTimeFormatOptions;
|
|
21
|
+
/** 0 is Sunday. Defaults to the locale's own convention. */
|
|
22
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
23
|
+
/** Months shown side by side. Two makes picking a span across a boundary sane. */
|
|
24
|
+
months?: number;
|
|
25
|
+
/** Offer a "clear" action in the footer. */
|
|
26
|
+
clearable?: boolean;
|
|
27
|
+
/** Separator between the two dates on the trigger. */
|
|
28
|
+
separator?: string;
|
|
29
|
+
/** Footer and navigation labels — override for non-English apps. */
|
|
30
|
+
clearLabel?: string;
|
|
31
|
+
previousLabel?: string;
|
|
32
|
+
nextLabel?: string;
|
|
33
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
34
|
+
unstyled?: boolean;
|
|
35
|
+
/** Applied to the trigger, which is the element carrying the field chrome. */
|
|
36
|
+
class?: string;
|
|
37
|
+
/** Override classes per slot, e.g. `{ content: 'p-4' }`. */
|
|
38
|
+
ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
|
|
39
|
+
}
|
|
40
|
+
type __VLS_Props = DateRangePickerProps;
|
|
41
|
+
type __VLS_ModelProps = {
|
|
42
|
+
modelValue?: DateRange;
|
|
43
|
+
};
|
|
44
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
45
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
46
|
+
"update:modelValue": (value: DateRange) => any;
|
|
47
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
48
|
+
"onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
|
|
49
|
+
}>, {
|
|
50
|
+
unstyled: boolean;
|
|
51
|
+
separator: string;
|
|
52
|
+
placeholder: string;
|
|
53
|
+
invalid: boolean;
|
|
54
|
+
months: number;
|
|
55
|
+
clearLabel: string;
|
|
56
|
+
previousLabel: string;
|
|
57
|
+
nextLabel: string;
|
|
58
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
59
|
+
declare const _default: typeof __VLS_export;
|
|
60
|
+
export default _default;
|
|
@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
36
36
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
37
37
|
}>, {
|
|
38
38
|
unstyled: boolean;
|
|
39
|
-
sideOffset: number;
|
|
40
39
|
align: "start" | "center" | "end";
|
|
40
|
+
sideOffset: number;
|
|
41
41
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
42
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
43
|
declare const _default: typeof __VLS_export;
|
|
@@ -7,16 +7,46 @@ export interface InputProps {
|
|
|
7
7
|
/** Mark the field as invalid — styles the border and ring red. */
|
|
8
8
|
invalid?: boolean;
|
|
9
9
|
id?: string;
|
|
10
|
+
/** Show a clear button in the trailing area while the field has a value. */
|
|
11
|
+
clearable?: boolean;
|
|
12
|
+
/** Show a spinner in the trailing area. Does not disable the field. */
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Milliseconds to wait after the last keystroke before the model updates.
|
|
16
|
+
* `0` (the default) updates on every keystroke. Blur and Enter flush a
|
|
17
|
+
* pending update immediately, so a submit never reads a stale value.
|
|
18
|
+
*/
|
|
19
|
+
debounce?: number;
|
|
20
|
+
/** Accessible name for the clear button — override for non-English apps. */
|
|
21
|
+
clearLabel?: string;
|
|
10
22
|
/** Skip built-in classes; you take over styling entirely. */
|
|
11
23
|
unstyled?: boolean;
|
|
24
|
+
/** Applied to the outer field, which is the element carrying the chrome. */
|
|
12
25
|
class?: string;
|
|
26
|
+
/** Override classes per slot, e.g. `{ input: 'text-right' }`. */
|
|
27
|
+
ui?: {
|
|
28
|
+
root?: string;
|
|
29
|
+
input?: string;
|
|
30
|
+
leading?: string;
|
|
31
|
+
trailing?: string;
|
|
32
|
+
clear?: string;
|
|
33
|
+
};
|
|
13
34
|
}
|
|
14
35
|
type __VLS_Props = InputProps;
|
|
15
36
|
type __VLS_ModelProps = {
|
|
16
37
|
modelValue?: string | number | null;
|
|
17
38
|
};
|
|
18
39
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
19
|
-
declare
|
|
40
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
41
|
+
type __VLS_Slots = {} & {
|
|
42
|
+
leading?: (props: typeof __VLS_1) => any;
|
|
43
|
+
} & {
|
|
44
|
+
trailing?: (props: typeof __VLS_3) => any;
|
|
45
|
+
};
|
|
46
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
47
|
+
/** The underlying element, for focus management by the caller. */
|
|
48
|
+
input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
|
|
49
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
50
|
"update:modelValue": (value: string | number | null | undefined) => any;
|
|
21
51
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
52
|
"onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
|
|
@@ -24,6 +54,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
24
54
|
unstyled: boolean;
|
|
25
55
|
type: string;
|
|
26
56
|
invalid: boolean;
|
|
57
|
+
clearLabel: string;
|
|
58
|
+
debounce: number;
|
|
27
59
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
60
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
28
61
|
declare const _default: typeof __VLS_export;
|
|
29
62
|
export default _default;
|
|
63
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
64
|
+
new (): {
|
|
65
|
+
$slots: S;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
@@ -7,6 +7,8 @@ export interface PaginationProps {
|
|
|
7
7
|
/** Keep the first and last page visible however far away they are. */
|
|
8
8
|
showEdges?: boolean;
|
|
9
9
|
size?: 'sm' | 'md' | 'lg';
|
|
10
|
+
/** Where the control sits in its container. Centred by default. */
|
|
11
|
+
align?: 'start' | 'center' | 'end';
|
|
10
12
|
/** Accessible names — override for non-English apps. */
|
|
11
13
|
prevLabel?: string;
|
|
12
14
|
nextLabel?: string;
|
|
@@ -40,12 +42,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
40
42
|
}>, {
|
|
41
43
|
unstyled: boolean;
|
|
42
44
|
label: string;
|
|
45
|
+
nextLabel: string;
|
|
43
46
|
total: number;
|
|
44
47
|
itemsPerPage: number;
|
|
45
48
|
siblingCount: number;
|
|
46
49
|
showEdges: boolean;
|
|
47
50
|
prevLabel: string;
|
|
48
|
-
nextLabel: string;
|
|
49
51
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
50
52
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
51
53
|
declare const _default: typeof __VLS_export;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
export interface PasswordInputProps {
|
|
2
|
+
size?: 'sm' | 'md' | 'lg';
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
/** Mark the field as invalid — styles the border and ring red. */
|
|
7
|
+
invalid?: boolean;
|
|
8
|
+
id?: string;
|
|
9
|
+
/** Show the reveal toggle in the trailing area. */
|
|
10
|
+
toggle?: boolean;
|
|
11
|
+
/** Render a four-segment strength meter under the field. */
|
|
12
|
+
strength?: boolean;
|
|
13
|
+
/** Accessible names for the reveal toggle — override for non-English apps. */
|
|
14
|
+
showLabel?: string;
|
|
15
|
+
hideLabel?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Words for scores 1–4, weakest first. Score 0 shows nothing, so this takes
|
|
18
|
+
* exactly four entries. Override for non-English apps.
|
|
19
|
+
*/
|
|
20
|
+
strengthLabels?: [string, string, string, string];
|
|
21
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
22
|
+
unstyled?: boolean;
|
|
23
|
+
/** Applied to the outer wrapper, which stacks the field above the meter. */
|
|
24
|
+
class?: string;
|
|
25
|
+
/** Override classes per slot, e.g. `{ meter: 'mt-1' }`. */
|
|
26
|
+
ui?: {
|
|
27
|
+
root?: string;
|
|
28
|
+
input?: string;
|
|
29
|
+
toggle?: string;
|
|
30
|
+
meter?: string;
|
|
31
|
+
track?: string;
|
|
32
|
+
segment?: string;
|
|
33
|
+
label?: string;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
type __VLS_Props = PasswordInputProps;
|
|
37
|
+
type __VLS_ModelProps = {
|
|
38
|
+
modelValue?: string;
|
|
39
|
+
};
|
|
40
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
41
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
42
|
+
"update:modelValue": (value: string) => any;
|
|
43
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
44
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
45
|
+
}>, {
|
|
46
|
+
unstyled: boolean;
|
|
47
|
+
invalid: boolean;
|
|
48
|
+
toggle: boolean;
|
|
49
|
+
showLabel: string;
|
|
50
|
+
hideLabel: string;
|
|
51
|
+
strengthLabels: [string, string, string, string];
|
|
52
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
53
|
+
declare const _default: typeof __VLS_export;
|
|
54
|
+
export default _default;
|
|
@@ -35,11 +35,11 @@ type __VLS_Slots = {} & {
|
|
|
35
35
|
default?: (props: typeof __VLS_48) => any;
|
|
36
36
|
};
|
|
37
37
|
declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
38
|
-
"update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
|
|
39
38
|
"update:open": (value: boolean) => any;
|
|
39
|
+
"update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
|
|
40
40
|
}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
|
|
41
|
-
"onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
42
41
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
42
|
+
"onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
43
43
|
}>, {
|
|
44
44
|
unstyled: boolean;
|
|
45
45
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import type { TableColumn, TableSort } from '../composables/data-table';
|
|
2
|
+
export interface TableProps<Row = any> {
|
|
3
|
+
/** The rows to render. In server mode this is already the page the server returned. */
|
|
4
|
+
rows?: Row[];
|
|
5
|
+
columns?: TableColumn<Row>[];
|
|
6
|
+
/**
|
|
7
|
+
* Total rows on the server. Providing it switches to server mode: the table
|
|
8
|
+
* stops sorting and slicing locally and only emits state, because the rows
|
|
9
|
+
* it was given are already the requested page.
|
|
10
|
+
*/
|
|
11
|
+
total?: number;
|
|
12
|
+
/** Field identifying a row, used for selection and expansion. */
|
|
13
|
+
rowKey?: string;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/** Rows of skeletons while `loading` and there is nothing to show yet. */
|
|
16
|
+
loadingRows?: number;
|
|
17
|
+
selectable?: boolean;
|
|
18
|
+
/** Veto selection per row — the checkbox is hidden and the header skips it. */
|
|
19
|
+
isRowSelectable?: (row: Row) => boolean;
|
|
20
|
+
expandable?: boolean;
|
|
21
|
+
/** Veto expansion per row; the chevron is hidden. */
|
|
22
|
+
canExpandRow?: (row: Row) => boolean;
|
|
23
|
+
/** Emit `rowClick` and show a pointer cursor. */
|
|
24
|
+
clickableRows?: boolean;
|
|
25
|
+
striped?: boolean;
|
|
26
|
+
hoverable?: boolean;
|
|
27
|
+
stickyHeader?: boolean;
|
|
28
|
+
size?: 'sm' | 'md' | 'lg';
|
|
29
|
+
/** Text when there are no rows. Overridden by the `empty` slot. */
|
|
30
|
+
emptyText?: string;
|
|
31
|
+
/** Accessible name for the table, since a visible caption is optional. */
|
|
32
|
+
label?: string;
|
|
33
|
+
caption?: string;
|
|
34
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
35
|
+
unstyled?: boolean;
|
|
36
|
+
class?: string;
|
|
37
|
+
/** Override classes per slot, e.g. `{ td: 'py-1' }`. */
|
|
38
|
+
ui?: {
|
|
39
|
+
root?: string;
|
|
40
|
+
table?: string;
|
|
41
|
+
thead?: string;
|
|
42
|
+
tbody?: string;
|
|
43
|
+
tr?: string;
|
|
44
|
+
th?: string;
|
|
45
|
+
td?: string;
|
|
46
|
+
empty?: string;
|
|
47
|
+
caption?: string;
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
declare const __VLS_export: <T = any>(__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<{
|
|
51
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<(TableProps<T> & {
|
|
52
|
+
sort?: TableSort | null;
|
|
53
|
+
page?: number;
|
|
54
|
+
perPage?: number;
|
|
55
|
+
selection?: (string | number)[];
|
|
56
|
+
expanded?: (string | number)[];
|
|
57
|
+
}) & {
|
|
58
|
+
"onUpdate:page"?: ((value: number) => any) | undefined;
|
|
59
|
+
onRowClick?: ((row: T) => any) | undefined;
|
|
60
|
+
"onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
|
|
61
|
+
"onUpdate:perPage"?: ((value: number) => any) | undefined;
|
|
62
|
+
"onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
|
|
63
|
+
"onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
|
|
64
|
+
}> & (typeof globalThis extends {
|
|
65
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
66
|
+
} ? P : {});
|
|
67
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<{
|
|
68
|
+
table: {
|
|
69
|
+
sort: {
|
|
70
|
+
value: TableSort | null;
|
|
71
|
+
};
|
|
72
|
+
page: {
|
|
73
|
+
value: number;
|
|
74
|
+
};
|
|
75
|
+
perPage: {
|
|
76
|
+
value: number;
|
|
77
|
+
};
|
|
78
|
+
selection: {
|
|
79
|
+
value: (string | number)[];
|
|
80
|
+
};
|
|
81
|
+
expanded: {
|
|
82
|
+
value: (string | number)[];
|
|
83
|
+
};
|
|
84
|
+
isServerMode: import("vue").ComputedRef<boolean>;
|
|
85
|
+
visibleColumns: import("vue").ComputedRef<TableColumn<T>[]>;
|
|
86
|
+
pageRows: import("vue").ComputedRef<T[]>;
|
|
87
|
+
total: import("vue").ComputedRef<number>;
|
|
88
|
+
pageCount: import("vue").ComputedRef<number>;
|
|
89
|
+
keyOf: (row: T) => string | number;
|
|
90
|
+
toggleSort: (column: TableColumn<T>) => void;
|
|
91
|
+
sortOrderFor: (column: TableColumn<T>) => import("..").SortOrder | null;
|
|
92
|
+
headerSelection: import("vue").ComputedRef<boolean | "indeterminate">;
|
|
93
|
+
isSelected: (row: T) => boolean;
|
|
94
|
+
toggleRow: (row: T) => void;
|
|
95
|
+
toggleAll: (value: boolean | "indeterminate") => void;
|
|
96
|
+
isExpanded: (row: T) => boolean;
|
|
97
|
+
toggleExpanded: (row: T) => void;
|
|
98
|
+
getRowValue: typeof import("..").getRowValue;
|
|
99
|
+
};
|
|
100
|
+
}>) => void;
|
|
101
|
+
attrs: any;
|
|
102
|
+
slots: {
|
|
103
|
+
[x: `header-${string}`]: ((props: {
|
|
104
|
+
column: TableColumn<T>;
|
|
105
|
+
}) => any) | undefined;
|
|
106
|
+
} & {
|
|
107
|
+
[x: `cell-${string}`]: ((props: {
|
|
108
|
+
row: T;
|
|
109
|
+
column: TableColumn<T>;
|
|
110
|
+
value: unknown;
|
|
111
|
+
}) => any) | undefined;
|
|
112
|
+
} & {
|
|
113
|
+
caption?: (props: {}) => any;
|
|
114
|
+
} & {
|
|
115
|
+
empty?: (props: {}) => any;
|
|
116
|
+
} & {
|
|
117
|
+
expanded?: (props: {
|
|
118
|
+
row: T;
|
|
119
|
+
}) => any;
|
|
120
|
+
};
|
|
121
|
+
emit: ((evt: "rowClick", row: T) => void) & (((event: "update:page", value: number) => void) & ((event: "update:sort", value: TableSort | null) => void) & ((event: "update:perPage", value: number) => void) & ((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:expanded", value: (string | number)[]) => void));
|
|
122
|
+
}>) => import("vue").VNode & {
|
|
123
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
124
|
+
};
|
|
125
|
+
declare const _default: typeof __VLS_export;
|
|
126
|
+
export default _default;
|
|
127
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
128
|
+
[K in keyof T]: T[K];
|
|
129
|
+
} : {
|
|
130
|
+
[K in keyof T as K]: T[K];
|
|
131
|
+
}) & {};
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
export interface TextareaProps {
|
|
2
2
|
size?: 'sm' | 'md' | 'lg';
|
|
3
|
+
/**
|
|
4
|
+
* Fixed height in rows. Ignored when `autosize` is set — pass the bounds
|
|
5
|
+
* through `autosize` instead.
|
|
6
|
+
*/
|
|
3
7
|
rows?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Grow with the content. `true` grows without limit; `{ min, max }` bounds
|
|
10
|
+
* it in rows, and the field scrolls once it hits `max`.
|
|
11
|
+
*/
|
|
12
|
+
autosize?: boolean | {
|
|
13
|
+
min?: number;
|
|
14
|
+
max?: number;
|
|
15
|
+
};
|
|
4
16
|
placeholder?: string;
|
|
5
17
|
disabled?: boolean;
|
|
6
18
|
required?: boolean;
|
|
@@ -16,7 +28,10 @@ type __VLS_ModelProps = {
|
|
|
16
28
|
modelValue?: string | null;
|
|
17
29
|
};
|
|
18
30
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
19
|
-
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
31
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
32
|
+
/** The underlying element, for focus management by the caller. */
|
|
33
|
+
textarea: import("vue").Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
|
|
34
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
35
|
"update:modelValue": (value: string | null | undefined) => any;
|
|
21
36
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
37
|
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { default as Alert } from './Alert.vue';
|
|
2
2
|
export { default as App } from './App.vue';
|
|
3
3
|
export { default as Badge } from './Badge.vue';
|
|
4
|
+
export { default as Banner } from './Banner.vue';
|
|
4
5
|
export { default as Breadcrumb } from './Breadcrumb.vue';
|
|
5
6
|
export { default as Button } from './Button.vue';
|
|
6
7
|
export { default as ButtonGroup } from './ButtonGroup.vue';
|
|
@@ -8,6 +9,8 @@ export { default as Card } from './Card.vue';
|
|
|
8
9
|
export { default as Checkbox } from './Checkbox.vue';
|
|
9
10
|
export { default as Combobox } from './Combobox.vue';
|
|
10
11
|
export { default as ConfirmDialog } from './ConfirmDialog.vue';
|
|
12
|
+
export { default as DatePicker } from './DatePicker.vue';
|
|
13
|
+
export { default as DateRangePicker } from './DateRangePicker.vue';
|
|
11
14
|
export { default as Dialog } from './Dialog.vue';
|
|
12
15
|
export { default as DropdownMenu } from './DropdownMenu.vue';
|
|
13
16
|
export { default as EmptyState } from './EmptyState.vue';
|
|
@@ -17,6 +20,7 @@ export { default as Input } from './Input.vue';
|
|
|
17
20
|
export { default as Label } from './Label.vue';
|
|
18
21
|
export { default as NumberInput } from './NumberInput.vue';
|
|
19
22
|
export { default as Pagination } from './Pagination.vue';
|
|
23
|
+
export { default as PasswordInput } from './PasswordInput.vue';
|
|
20
24
|
export { default as Progress } from './Progress.vue';
|
|
21
25
|
export { default as RadioGroup } from './RadioGroup.vue';
|
|
22
26
|
export { default as Select } from './Select.vue';
|
|
@@ -25,6 +29,7 @@ export { default as Skeleton } from './Skeleton.vue';
|
|
|
25
29
|
export { default as Stat } from './Stat.vue';
|
|
26
30
|
export { default as Stepper } from './Stepper.vue';
|
|
27
31
|
export { default as Switch } from './Switch.vue';
|
|
32
|
+
export { default as Table } from './Table.vue';
|
|
28
33
|
export { default as Tabs } from './Tabs.vue';
|
|
29
34
|
export { default as Textarea } from './Textarea.vue';
|
|
30
35
|
export { default as Toaster } from './Toaster.vue';
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import type { ModelRef } from 'vue';
|
|
2
|
+
/** Which way a column is sorted. */
|
|
3
|
+
export type SortOrder = 'asc' | 'desc';
|
|
4
|
+
/** The active sort, or `null` when nothing is sorted. */
|
|
5
|
+
export interface TableSort {
|
|
6
|
+
/** A column's `sortKey`, falling back to its `key`. */
|
|
7
|
+
key: string;
|
|
8
|
+
order: SortOrder;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A column definition. Plain data, no render functions — anything beyond the
|
|
12
|
+
* raw accessor value is a `#cell-<key>` slot on the component.
|
|
13
|
+
*/
|
|
14
|
+
export interface TableColumn<T = any> {
|
|
15
|
+
/** Accessor path into the row, dot-notation for nested values. Also the slot suffix. */
|
|
16
|
+
key: string;
|
|
17
|
+
/** Header text. */
|
|
18
|
+
label?: string;
|
|
19
|
+
sortable?: boolean;
|
|
20
|
+
/** Sort by a different field than the one displayed, e.g. `'customer.name'` → `'customer_name'`. */
|
|
21
|
+
sortKey?: string;
|
|
22
|
+
align?: 'start' | 'center' | 'end';
|
|
23
|
+
/**
|
|
24
|
+
* Render the column's cells with tabular figures, so digits line up down the
|
|
25
|
+
* column instead of wandering with the width of each glyph. Implies end
|
|
26
|
+
* alignment unless `align` says otherwise.
|
|
27
|
+
*/
|
|
28
|
+
numeric?: boolean;
|
|
29
|
+
/** Inline width, e.g. `'12rem'` or `'1px'` to shrink to content. */
|
|
30
|
+
width?: string;
|
|
31
|
+
/** Extra classes on every cell in the column; a function receives the row. */
|
|
32
|
+
class?: string | ((row: T) => string);
|
|
33
|
+
/** Hide the column outright, or per row (the cell renders empty). */
|
|
34
|
+
hidden?: boolean | ((row: T) => boolean);
|
|
35
|
+
}
|
|
36
|
+
export interface UseDataTableOptions<T = any> {
|
|
37
|
+
rows: () => T[];
|
|
38
|
+
columns: () => TableColumn<T>[];
|
|
39
|
+
/**
|
|
40
|
+
* Total row count on the server. Providing it switches the table to server
|
|
41
|
+
* mode: sorting and pagination are emitted rather than applied locally,
|
|
42
|
+
* because the rows you passed are already the page the server returned.
|
|
43
|
+
*/
|
|
44
|
+
total?: () => number | undefined;
|
|
45
|
+
/** Field identifying a row, used for selection and expansion. */
|
|
46
|
+
rowKey?: () => string;
|
|
47
|
+
/** Controlled models. Any left undefined falls back to internal state. */
|
|
48
|
+
sort?: ModelRef<TableSort | null | undefined>;
|
|
49
|
+
page?: ModelRef<number | undefined>;
|
|
50
|
+
perPage?: ModelRef<number | undefined>;
|
|
51
|
+
selection?: ModelRef<(string | number)[] | undefined>;
|
|
52
|
+
expanded?: ModelRef<(string | number)[] | undefined>;
|
|
53
|
+
/** Rows that cannot be selected are skipped by the header checkbox. */
|
|
54
|
+
isRowSelectable?: (row: T) => boolean;
|
|
55
|
+
}
|
|
56
|
+
/** Read a dot-notation path off a row. */
|
|
57
|
+
export declare function getRowValue(row: any, path: string): unknown;
|
|
58
|
+
/**
|
|
59
|
+
* Headless state and derivations behind `ITable` — usable on its own if you
|
|
60
|
+
* want the logic without the markup.
|
|
61
|
+
*/
|
|
62
|
+
export declare function useDataTable<T = any>(options: UseDataTableOptions<T>): {
|
|
63
|
+
sort: {
|
|
64
|
+
value: TableSort | null;
|
|
65
|
+
};
|
|
66
|
+
page: {
|
|
67
|
+
value: number;
|
|
68
|
+
};
|
|
69
|
+
perPage: {
|
|
70
|
+
value: number;
|
|
71
|
+
};
|
|
72
|
+
selection: {
|
|
73
|
+
value: (string | number)[];
|
|
74
|
+
};
|
|
75
|
+
expanded: {
|
|
76
|
+
value: (string | number)[];
|
|
77
|
+
};
|
|
78
|
+
isServerMode: import("vue").ComputedRef<boolean>;
|
|
79
|
+
visibleColumns: import("vue").ComputedRef<TableColumn<T>[]>;
|
|
80
|
+
pageRows: import("vue").ComputedRef<T[]>;
|
|
81
|
+
total: import("vue").ComputedRef<number>;
|
|
82
|
+
pageCount: import("vue").ComputedRef<number>;
|
|
83
|
+
keyOf: (row: T) => string | number;
|
|
84
|
+
toggleSort: (column: TableColumn<T>) => void;
|
|
85
|
+
sortOrderFor: (column: TableColumn<T>) => SortOrder | null;
|
|
86
|
+
headerSelection: import("vue").ComputedRef<boolean | "indeterminate">;
|
|
87
|
+
isSelected: (row: T) => boolean;
|
|
88
|
+
toggleRow: (row: T) => void;
|
|
89
|
+
toggleAll: (value: boolean | "indeterminate") => void;
|
|
90
|
+
isExpanded: (row: T) => boolean;
|
|
91
|
+
toggleExpanded: (row: T) => void;
|
|
92
|
+
getRowValue: typeof getRowValue;
|
|
93
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { DateValue } from '@internationalized/date';
|
|
2
|
+
import { CalendarDate } from '@internationalized/date';
|
|
3
|
+
/**
|
|
4
|
+
* Parse an ISO date, or `undefined` if it is absent or malformed.
|
|
5
|
+
*
|
|
6
|
+
* Malformed input resolves to "no selection" rather than throwing: the value
|
|
7
|
+
* often comes from a URL or a stale draft, and a blank calendar is a better
|
|
8
|
+
* outcome for the user than a crashed render.
|
|
9
|
+
*/
|
|
10
|
+
export declare function toCalendarDate(iso: string | null | undefined): CalendarDate | undefined;
|
|
11
|
+
/** Back to the canonical `YYYY-MM-DD`. */
|
|
12
|
+
export declare function toIsoDate(date: DateValue | null | undefined): string | null;
|
|
13
|
+
/** Today in the viewer's own zone, as an ISO date string. */
|
|
14
|
+
export declare function isoToday(): string;
|
|
15
|
+
/**
|
|
16
|
+
* Render an ISO date for display. Returns `''` for absent or malformed input
|
|
17
|
+
* so a caller can fall back to a placeholder.
|
|
18
|
+
*/
|
|
19
|
+
export declare function formatIsoDate(iso: string | null | undefined, locale?: string, options?: Intl.DateTimeFormatOptions): string;
|
|
20
|
+
export { CalendarDate };
|
|
21
|
+
export type { DateValue };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components';
|
|
|
4
4
|
export type { AlertProps } from './components/Alert.vue';
|
|
5
5
|
export type { AppProps } from './components/App.vue';
|
|
6
6
|
export type { BadgeProps } from './components/Badge.vue';
|
|
7
|
+
export type { BannerProps } from './components/Banner.vue';
|
|
7
8
|
export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb.vue';
|
|
8
9
|
export type { ButtonProps } from './components/Button.vue';
|
|
9
10
|
export type { ButtonGroupProps } from './components/ButtonGroup.vue';
|
|
@@ -11,6 +12,8 @@ export type { CardProps } from './components/Card.vue';
|
|
|
11
12
|
export type { CheckboxProps } from './components/Checkbox.vue';
|
|
12
13
|
export type { ComboboxItemGroup, ComboboxItemOption, ComboboxItems, ComboboxProps } from './components/Combobox.vue';
|
|
13
14
|
export type { ConfirmDialogProps } from './components/ConfirmDialog.vue';
|
|
15
|
+
export type { DatePickerProps } from './components/DatePicker.vue';
|
|
16
|
+
export type { DateRange, DateRangePickerProps } from './components/DateRangePicker.vue';
|
|
14
17
|
export type { DialogProps } from './components/Dialog.vue';
|
|
15
18
|
export type { DropdownMenuProps } from './components/DropdownMenu.vue';
|
|
16
19
|
export type { EmptyStateProps } from './components/EmptyState.vue';
|
|
@@ -20,6 +23,7 @@ export type { InputProps } from './components/Input.vue';
|
|
|
20
23
|
export type { LabelProps } from './components/Label.vue';
|
|
21
24
|
export type { NumberInputProps } from './components/NumberInput.vue';
|
|
22
25
|
export type { PaginationProps } from './components/Pagination.vue';
|
|
26
|
+
export type { PasswordInputProps } from './components/PasswordInput.vue';
|
|
23
27
|
export type { ProgressProps } from './components/Progress.vue';
|
|
24
28
|
export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
|
|
25
29
|
export type { SelectItemGroup, SelectItemOption, SelectItems, SelectProps } from './components/Select.vue';
|
|
@@ -28,6 +32,7 @@ export type { SkeletonProps } from './components/Skeleton.vue';
|
|
|
28
32
|
export type { StatProps } from './components/Stat.vue';
|
|
29
33
|
export type { StepperItemOption, StepperProps } from './components/Stepper.vue';
|
|
30
34
|
export type { SwitchProps } from './components/Switch.vue';
|
|
35
|
+
export type { TableProps } from './components/Table.vue';
|
|
31
36
|
export type { TabsItem, TabsProps } from './components/Tabs.vue';
|
|
32
37
|
export type { TextareaProps } from './components/Textarea.vue';
|
|
33
38
|
export type { ToasterProps } from './components/Toaster.vue';
|
|
@@ -35,6 +40,8 @@ export type { TooltipProps } from './components/Tooltip.vue';
|
|
|
35
40
|
export * from './composables/appearance';
|
|
36
41
|
export * from './composables/button-group';
|
|
37
42
|
export * from './composables/confirm';
|
|
43
|
+
export * from './composables/data-table';
|
|
44
|
+
export * from './composables/date';
|
|
38
45
|
export * from './composables/decimal';
|
|
39
46
|
export * from './composables/dropdown-menu';
|
|
40
47
|
export * from './composables/form';
|