iryx-ui 0.4.0 → 0.6.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 +293 -10
- package/dist/component-names.d.ts +1 -1
- package/dist/components/Alert.vue.d.ts +19 -4
- package/dist/components/App.vue.d.ts +1 -1
- 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 +112 -0
- package/dist/components/Pagination.vue.d.ts +2 -0
- package/dist/components/Select.vue.d.ts +15 -4
- package/dist/components/Table.vue.d.ts +131 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/composables/data-table.d.ts +93 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +65 -58
- package/dist/node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js +15 -1
- package/dist/nuxt.d.ts +1 -1
- 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/Combobox.js +5 -0
- package/dist/packages/iryx-ui/src/components/Combobox.vue_vue_type_script_setup_true_lang.js +284 -0
- 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/Select.vue_vue_type_script_setup_true_lang.js +72 -27
- 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/index.js +62 -56
- package/dist/packages/iryx-ui/src/composables/data-table.js +106 -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/button.js +2 -2
- package/dist/packages/iryx-ui/src/theme/card.js +1 -1
- package/dist/packages/iryx-ui/src/theme/checkbox.js +1 -1
- package/dist/packages/iryx-ui/src/theme/combobox.js +29 -0
- package/dist/packages/iryx-ui/src/theme/dialog.js +2 -2
- package/dist/packages/iryx-ui/src/theme/dropdown-menu.js +4 -4
- package/dist/packages/iryx-ui/src/theme/input.js +1 -1
- package/dist/packages/iryx-ui/src/theme/number-input.js +1 -1
- package/dist/packages/iryx-ui/src/theme/pagination.js +24 -14
- package/dist/packages/iryx-ui/src/theme/presets.js +0 -42
- package/dist/packages/iryx-ui/src/theme/radio-group.js +1 -1
- package/dist/packages/iryx-ui/src/theme/select.js +5 -3
- package/dist/packages/iryx-ui/src/theme/skeleton.js +1 -1
- package/dist/packages/iryx-ui/src/theme/stat.js +4 -4
- package/dist/packages/iryx-ui/src/theme/stepper.js +1 -1
- package/dist/packages/iryx-ui/src/theme/switch.js +1 -1
- package/dist/packages/iryx-ui/src/theme/table.js +62 -0
- package/dist/packages/iryx-ui/src/theme/tabs.js +3 -3
- package/dist/packages/iryx-ui/src/theme/toast.js +11 -26
- package/dist/packages/iryx-ui/src/theme/tooltip.js +1 -1
- package/dist/plugin.d.ts +1 -1
- 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/button.d.ts +2 -2
- package/dist/theme/combobox.d.ts +101 -0
- package/dist/theme/index.d.ts +3 -0
- package/dist/theme/input.d.ts +5 -5
- package/dist/theme/pagination.d.ts +33 -0
- package/dist/theme/presets.d.ts +0 -42
- package/dist/theme/select.d.ts +6 -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 +1 -1
- package/theme.css +24 -0
|
@@ -4,9 +4,18 @@ export interface SelectItemOption {
|
|
|
4
4
|
value: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
}
|
|
7
|
+
/** A labelled run of options, rendered under a heading. */
|
|
8
|
+
export interface SelectItemGroup {
|
|
9
|
+
label: string;
|
|
10
|
+
items: (SelectItemOption | string)[];
|
|
11
|
+
}
|
|
12
|
+
export type SelectItems = (SelectItemOption | SelectItemGroup | string)[];
|
|
7
13
|
export interface SelectProps extends SelectRootProps {
|
|
8
|
-
/**
|
|
9
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Options to render. Strings are expanded to `{ label, value }`, and an
|
|
16
|
+
* entry with its own `items` becomes a labelled group.
|
|
17
|
+
*/
|
|
18
|
+
items?: SelectItems;
|
|
10
19
|
placeholder?: string;
|
|
11
20
|
size?: 'sm' | 'md' | 'lg';
|
|
12
21
|
/** Skip built-in classes; you take over styling entirely. */
|
|
@@ -17,6 +26,8 @@ export interface SelectProps extends SelectRootProps {
|
|
|
17
26
|
content?: string;
|
|
18
27
|
viewport?: string;
|
|
19
28
|
item?: string;
|
|
29
|
+
group?: string;
|
|
30
|
+
groupLabel?: string;
|
|
20
31
|
};
|
|
21
32
|
}
|
|
22
33
|
declare var __VLS_48: {};
|
|
@@ -24,11 +35,11 @@ type __VLS_Slots = {} & {
|
|
|
24
35
|
default?: (props: typeof __VLS_48) => any;
|
|
25
36
|
};
|
|
26
37
|
declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
27
|
-
"update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
|
|
28
38
|
"update:open": (value: boolean) => any;
|
|
39
|
+
"update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
|
|
29
40
|
}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
|
|
30
|
-
"onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
31
41
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
42
|
+
"onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
32
43
|
}>, {
|
|
33
44
|
unstyled: boolean;
|
|
34
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,11 +1,13 @@
|
|
|
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';
|
|
7
8
|
export { default as Card } from './Card.vue';
|
|
8
9
|
export { default as Checkbox } from './Checkbox.vue';
|
|
10
|
+
export { default as Combobox } from './Combobox.vue';
|
|
9
11
|
export { default as ConfirmDialog } from './ConfirmDialog.vue';
|
|
10
12
|
export { default as Dialog } from './Dialog.vue';
|
|
11
13
|
export { default as DropdownMenu } from './DropdownMenu.vue';
|
|
@@ -24,6 +26,7 @@ export { default as Skeleton } from './Skeleton.vue';
|
|
|
24
26
|
export { default as Stat } from './Stat.vue';
|
|
25
27
|
export { default as Stepper } from './Stepper.vue';
|
|
26
28
|
export { default as Switch } from './Switch.vue';
|
|
29
|
+
export { default as Table } from './Table.vue';
|
|
27
30
|
export { default as Tabs } from './Tabs.vue';
|
|
28
31
|
export { default as Textarea } from './Textarea.vue';
|
|
29
32
|
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
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -4,11 +4,13 @@ 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';
|
|
10
11
|
export type { CardProps } from './components/Card.vue';
|
|
11
12
|
export type { CheckboxProps } from './components/Checkbox.vue';
|
|
13
|
+
export type { ComboboxItemGroup, ComboboxItemOption, ComboboxItems, ComboboxProps } from './components/Combobox.vue';
|
|
12
14
|
export type { ConfirmDialogProps } from './components/ConfirmDialog.vue';
|
|
13
15
|
export type { DialogProps } from './components/Dialog.vue';
|
|
14
16
|
export type { DropdownMenuProps } from './components/DropdownMenu.vue';
|
|
@@ -21,12 +23,13 @@ export type { NumberInputProps } from './components/NumberInput.vue';
|
|
|
21
23
|
export type { PaginationProps } from './components/Pagination.vue';
|
|
22
24
|
export type { ProgressProps } from './components/Progress.vue';
|
|
23
25
|
export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
|
|
24
|
-
export type { SelectItemOption, SelectProps } from './components/Select.vue';
|
|
26
|
+
export type { SelectItemGroup, SelectItemOption, SelectItems, SelectProps } from './components/Select.vue';
|
|
25
27
|
export type { SeparatorProps } from './components/Separator.vue';
|
|
26
28
|
export type { SkeletonProps } from './components/Skeleton.vue';
|
|
27
29
|
export type { StatProps } from './components/Stat.vue';
|
|
28
30
|
export type { StepperItemOption, StepperProps } from './components/Stepper.vue';
|
|
29
31
|
export type { SwitchProps } from './components/Switch.vue';
|
|
32
|
+
export type { TableProps } from './components/Table.vue';
|
|
30
33
|
export type { TabsItem, TabsProps } from './components/Tabs.vue';
|
|
31
34
|
export type { TextareaProps } from './components/Textarea.vue';
|
|
32
35
|
export type { ToasterProps } from './components/Toaster.vue';
|
|
@@ -34,6 +37,7 @@ export type { TooltipProps } from './components/Tooltip.vue';
|
|
|
34
37
|
export * from './composables/appearance';
|
|
35
38
|
export * from './composables/button-group';
|
|
36
39
|
export * from './composables/confirm';
|
|
40
|
+
export * from './composables/data-table';
|
|
37
41
|
export * from './composables/decimal';
|
|
38
42
|
export * from './composables/dropdown-menu';
|
|
39
43
|
export * from './composables/form';
|
package/dist/index.js
CHANGED
|
@@ -7,61 +7,68 @@ import { applyTheme as c, clearTheme as l, themes as u } from "./packages/iryx-u
|
|
|
7
7
|
import d from "./packages/iryx-ui/src/components/App.js";
|
|
8
8
|
import { badgeTheme as f } from "./packages/iryx-ui/src/theme/badge.js";
|
|
9
9
|
import p from "./packages/iryx-ui/src/components/Badge.js";
|
|
10
|
-
import {
|
|
11
|
-
import h from "./packages/iryx-ui/src/components/
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import y from "./packages/iryx-ui/src/
|
|
15
|
-
import {
|
|
16
|
-
import x from "./packages/iryx-ui/src/components/
|
|
17
|
-
import {
|
|
18
|
-
import C from "./packages/iryx-ui/src/components/
|
|
19
|
-
import {
|
|
20
|
-
import T from "./packages/iryx-ui/src/components/
|
|
21
|
-
import {
|
|
22
|
-
import
|
|
23
|
-
import A from "./packages/iryx-ui/src/
|
|
24
|
-
import
|
|
25
|
-
import {
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import {
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import {
|
|
33
|
-
import
|
|
34
|
-
import
|
|
35
|
-
import
|
|
36
|
-
import Q from "./packages/iryx-ui/src/components/
|
|
37
|
-
import {
|
|
38
|
-
import
|
|
39
|
-
import
|
|
40
|
-
import
|
|
41
|
-
import pe from "./packages/iryx-ui/src/
|
|
42
|
-
import {
|
|
43
|
-
import he from "./packages/iryx-ui/src/components/
|
|
44
|
-
import {
|
|
45
|
-
import _e from "./packages/iryx-ui/src/components/
|
|
46
|
-
import {
|
|
47
|
-
import ye from "./packages/iryx-ui/src/components/
|
|
48
|
-
import {
|
|
49
|
-
import xe from "./packages/iryx-ui/src/components/
|
|
50
|
-
import {
|
|
51
|
-
import Ce from "./packages/iryx-ui/src/components/
|
|
52
|
-
import {
|
|
53
|
-
import Te from "./packages/iryx-ui/src/components/
|
|
54
|
-
import {
|
|
55
|
-
import De from "./packages/iryx-ui/src/components/
|
|
56
|
-
import {
|
|
57
|
-
import ke from "./packages/iryx-ui/src/components/
|
|
58
|
-
import {
|
|
59
|
-
import je from "./packages/iryx-ui/src/components/
|
|
60
|
-
import Me from "./packages/iryx-ui/src/
|
|
61
|
-
import
|
|
62
|
-
import {
|
|
63
|
-
import Ie from "./packages/iryx-ui/src/
|
|
64
|
-
import
|
|
65
|
-
import Re from "./packages/iryx-ui/src/
|
|
66
|
-
import
|
|
67
|
-
|
|
10
|
+
import { bannerTheme as m } from "./packages/iryx-ui/src/theme/banner.js";
|
|
11
|
+
import h from "./packages/iryx-ui/src/components/Banner.js";
|
|
12
|
+
import { breadcrumbTheme as g } from "./packages/iryx-ui/src/theme/breadcrumb.js";
|
|
13
|
+
import _ from "./packages/iryx-ui/src/components/Breadcrumb.js";
|
|
14
|
+
import { buttonGroupContextKey as v, useButtonGroup as y } from "./packages/iryx-ui/src/composables/button-group.js";
|
|
15
|
+
import { buttonTheme as b } from "./packages/iryx-ui/src/theme/button.js";
|
|
16
|
+
import x from "./packages/iryx-ui/src/components/Button.js";
|
|
17
|
+
import { buttonGroupTheme as S } from "./packages/iryx-ui/src/theme/button-group.js";
|
|
18
|
+
import C from "./packages/iryx-ui/src/components/ButtonGroup.js";
|
|
19
|
+
import { cardTheme as w } from "./packages/iryx-ui/src/theme/card.js";
|
|
20
|
+
import T from "./packages/iryx-ui/src/components/Card.js";
|
|
21
|
+
import { checkboxTheme as E } from "./packages/iryx-ui/src/theme/checkbox.js";
|
|
22
|
+
import D from "./packages/iryx-ui/src/components/Checkbox.js";
|
|
23
|
+
import { formContextKey as O, formFieldContextKey as k, getByPath as A, isStandardSchema as j, issuePath as M, useForm as N, useFormField as P } from "./packages/iryx-ui/src/composables/form.js";
|
|
24
|
+
import { fieldBase as F, inputTheme as I, textareaTheme as L } from "./packages/iryx-ui/src/theme/input.js";
|
|
25
|
+
import { comboboxTheme as R } from "./packages/iryx-ui/src/theme/combobox.js";
|
|
26
|
+
import z from "./packages/iryx-ui/src/components/Combobox.js";
|
|
27
|
+
import { resolveConfirm as B, useConfirm as V, useConfirmState as H } from "./packages/iryx-ui/src/composables/confirm.js";
|
|
28
|
+
import { dialogTheme as U } from "./packages/iryx-ui/src/theme/dialog.js";
|
|
29
|
+
import W from "./packages/iryx-ui/src/components/Dialog.js";
|
|
30
|
+
import G from "./packages/iryx-ui/src/components/ConfirmDialog.js";
|
|
31
|
+
import { dropdownMenuTheme as K } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
|
|
32
|
+
import { isSeparator as q, isSubmenu as J } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
|
|
33
|
+
import Y from "./packages/iryx-ui/src/components/DropdownMenu.js";
|
|
34
|
+
import { emptyStateTheme as X } from "./packages/iryx-ui/src/theme/empty-state.js";
|
|
35
|
+
import Z from "./packages/iryx-ui/src/components/EmptyState.js";
|
|
36
|
+
import Q from "./packages/iryx-ui/src/components/Form.js";
|
|
37
|
+
import { labelTheme as $ } from "./packages/iryx-ui/src/theme/label.js";
|
|
38
|
+
import ee from "./packages/iryx-ui/src/components/Label.js";
|
|
39
|
+
import te from "./packages/iryx-ui/src/components/FormField.js";
|
|
40
|
+
import ne from "./packages/iryx-ui/src/components/Input.js";
|
|
41
|
+
import { addDecimals as re, clampDecimal as ie, compareDecimals as ae, formatDecimal as oe, formatForLocale as se, isDecimal as ce, localeSeparators as le, parseDecimal as ue, parseFromLocale as de, roundDecimal as fe, toEditable as pe } from "./packages/iryx-ui/src/composables/decimal.js";
|
|
42
|
+
import { numberInputTheme as me } from "./packages/iryx-ui/src/theme/number-input.js";
|
|
43
|
+
import he from "./packages/iryx-ui/src/components/NumberInput.js";
|
|
44
|
+
import { paginationTheme as ge } from "./packages/iryx-ui/src/theme/pagination.js";
|
|
45
|
+
import _e from "./packages/iryx-ui/src/components/Pagination.js";
|
|
46
|
+
import { progressTheme as ve } from "./packages/iryx-ui/src/theme/progress.js";
|
|
47
|
+
import ye from "./packages/iryx-ui/src/components/Progress.js";
|
|
48
|
+
import { radioGroupTheme as be } from "./packages/iryx-ui/src/theme/radio-group.js";
|
|
49
|
+
import xe from "./packages/iryx-ui/src/components/RadioGroup.js";
|
|
50
|
+
import { selectTheme as Se } from "./packages/iryx-ui/src/theme/select.js";
|
|
51
|
+
import Ce from "./packages/iryx-ui/src/components/Select.js";
|
|
52
|
+
import { separatorTheme as we } from "./packages/iryx-ui/src/theme/separator.js";
|
|
53
|
+
import Te from "./packages/iryx-ui/src/components/Separator.js";
|
|
54
|
+
import { skeletonTheme as Ee } from "./packages/iryx-ui/src/theme/skeleton.js";
|
|
55
|
+
import De from "./packages/iryx-ui/src/components/Skeleton.js";
|
|
56
|
+
import { statTheme as Oe } from "./packages/iryx-ui/src/theme/stat.js";
|
|
57
|
+
import ke from "./packages/iryx-ui/src/components/Stat.js";
|
|
58
|
+
import { stepperTheme as Ae } from "./packages/iryx-ui/src/theme/stepper.js";
|
|
59
|
+
import je from "./packages/iryx-ui/src/components/Stepper.js";
|
|
60
|
+
import { switchTheme as Me } from "./packages/iryx-ui/src/theme/switch.js";
|
|
61
|
+
import Ne from "./packages/iryx-ui/src/components/Switch.js";
|
|
62
|
+
import { getRowValue as Pe, useDataTable as Fe } from "./packages/iryx-ui/src/composables/data-table.js";
|
|
63
|
+
import { tableTheme as Ie } from "./packages/iryx-ui/src/theme/table.js";
|
|
64
|
+
import Le from "./packages/iryx-ui/src/components/Table.js";
|
|
65
|
+
import { tabsTheme as Re } from "./packages/iryx-ui/src/theme/tabs.js";
|
|
66
|
+
import ze from "./packages/iryx-ui/src/components/Tabs.js";
|
|
67
|
+
import Be from "./packages/iryx-ui/src/components/Textarea.js";
|
|
68
|
+
import { useToast as Ve, useToastState as He } from "./packages/iryx-ui/src/composables/toast.js";
|
|
69
|
+
import { toastTheme as Ue } from "./packages/iryx-ui/src/theme/toast.js";
|
|
70
|
+
import We from "./packages/iryx-ui/src/components/Toaster.js";
|
|
71
|
+
import { tooltipTheme as Ge } from "./packages/iryx-ui/src/theme/tooltip.js";
|
|
72
|
+
import Ke from "./packages/iryx-ui/src/components/Tooltip.js";
|
|
73
|
+
import { IryxUi as qe, createIryxUi as Je } from "./packages/iryx-ui/src/plugin.js";
|
|
74
|
+
export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, W as Dialog, Y as DropdownMenu, Z as EmptyState, Q as Form, te as FormField, ne as Input, qe as IryxUi, ee as Label, he as NumberInput, _e as Pagination, ye as Progress, xe as RadioGroup, Ce as Select, Te as Separator, De as Skeleton, ke as Stat, je as Stepper, Ne as Switch, Le as Table, ze as Tabs, Be as Textarea, We as Toaster, Ke as Tooltip, re as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, ie as clampDecimal, l as clearTheme, R as comboboxTheme, ae as compareDecimals, e as componentNames, Je as createIryxUi, t as defaultConfig, U as dialogTheme, K as dropdownMenuTheme, X as emptyStateTheme, F as fieldBase, O as formContextKey, k as formFieldContextKey, oe as formatDecimal, se as formatForLocale, A as getByPath, Pe as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ce as isDecimal, q as isSeparator, j as isStandardSchema, J as isSubmenu, M as issuePath, $ as labelTheme, le as localeSeparators, me as numberInputTheme, ge as paginationTheme, ue as parseDecimal, de as parseFromLocale, ve as progressTheme, be as radioGroupTheme, B as resolveConfirm, fe as roundDecimal, Se as selectTheme, we as separatorTheme, Ee as skeletonTheme, Oe as statTheme, Ae as stepperTheme, Me as switchTheme, Ie as tableTheme, Re as tabsTheme, L as textareaTheme, u as themes, pe as toEditable, Ue as toastTheme, Ge as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, Fe as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, Ve as useToast, He as useToastState };
|
|
@@ -196,6 +196,20 @@ var e = [
|
|
|
196
196
|
strokeLinejoin: "round",
|
|
197
197
|
strokeWidth: "1.5",
|
|
198
198
|
key: "0"
|
|
199
|
+
}]], f = [["path", {
|
|
200
|
+
d: "M18 14C18 14 13.5811 19 12 19C10.4188 19 6 14 6 14",
|
|
201
|
+
stroke: "currentColor",
|
|
202
|
+
strokeLinecap: "round",
|
|
203
|
+
strokeLinejoin: "round",
|
|
204
|
+
strokeWidth: "1.5",
|
|
205
|
+
key: "0"
|
|
206
|
+
}], ["path", {
|
|
207
|
+
d: "M18 9.99996C18 9.99996 13.5811 5.00001 12 5C10.4188 4.99999 6 10 6 10",
|
|
208
|
+
stroke: "currentColor",
|
|
209
|
+
strokeLinecap: "round",
|
|
210
|
+
strokeLinejoin: "round",
|
|
211
|
+
strokeWidth: "1.5",
|
|
212
|
+
key: "1"
|
|
199
213
|
}]];
|
|
200
214
|
//#endregion
|
|
201
|
-
export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Cancel01Icon, s as CheckmarkCircle02Icon, c as InformationCircleIcon, l as Loading03Icon, u as MinusSignIcon, d as Tick02Icon };
|
|
215
|
+
export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Cancel01Icon, s as CheckmarkCircle02Icon, c as InformationCircleIcon, l as Loading03Icon, u as MinusSignIcon, d as Tick02Icon, f as UnfoldMoreIcon };
|
package/dist/nuxt.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface ModuleOptions {
|
|
|
7
7
|
unstyled: boolean;
|
|
8
8
|
/** Startup appearance. A preference the user already stored wins over this. */
|
|
9
9
|
appearance?: Appearance;
|
|
10
|
-
/** Color theme: a preset name (`'
|
|
10
|
+
/** Color theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */
|
|
11
11
|
theme?: Theme | ThemePresetName;
|
|
12
12
|
}
|
|
13
13
|
declare const _default: NuxtModule<TOptions, TOptions, false>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
//#region src/component-names.ts
|
|
2
|
-
var e = /* @__PURE__ */ "Alert.App.Badge.Breadcrumb.Button.ButtonGroup.Card.Checkbox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Tabs.Textarea.Toaster.Tooltip".split(".");
|
|
2
|
+
var e = /* @__PURE__ */ "Alert.App.Badge.Banner.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as componentNames };
|
|
@@ -2,12 +2,12 @@ import { Alert02Icon as e, AlertCircleIcon as t, Cancel01Icon as n, CheckmarkCir
|
|
|
2
2
|
import { useIryxUiConfig as a } from "../config.js";
|
|
3
3
|
import { alertTheme as o } from "../theme/alert.js";
|
|
4
4
|
import s from "./Icon.js";
|
|
5
|
-
import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h,
|
|
6
|
-
import { Primitive as
|
|
5
|
+
import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
|
|
6
|
+
import { Primitive as w } from "reka-ui";
|
|
7
7
|
//#region src/components/Alert.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var
|
|
8
|
+
var T = ["aria-label"], E = /*@__PURE__*/ h({
|
|
9
9
|
__name: "Alert",
|
|
10
|
-
props: {
|
|
10
|
+
props: /*@__PURE__*/ g({
|
|
11
11
|
as: { default: "div" },
|
|
12
12
|
variant: {},
|
|
13
13
|
title: {},
|
|
@@ -24,52 +24,68 @@ var C = ["aria-label"], w = /*@__PURE__*/ h({
|
|
|
24
24
|
},
|
|
25
25
|
class: {},
|
|
26
26
|
ui: {}
|
|
27
|
-
},
|
|
28
|
-
|
|
27
|
+
}, {
|
|
28
|
+
open: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: !0
|
|
31
|
+
},
|
|
32
|
+
openModifiers: {}
|
|
33
|
+
}),
|
|
34
|
+
emits: /*@__PURE__*/ g(["close"], ["update:open"]),
|
|
29
35
|
setup(h) {
|
|
30
|
-
let
|
|
36
|
+
let g = h, E = S(h, "open"), D = {
|
|
31
37
|
info: i,
|
|
32
38
|
success: r,
|
|
33
39
|
warning: e,
|
|
34
40
|
danger: t
|
|
35
|
-
},
|
|
36
|
-
if (
|
|
37
|
-
}),
|
|
38
|
-
variant:
|
|
39
|
-
withTitle: !!
|
|
40
|
-
})),
|
|
41
|
-
return (e, t) => (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
}, O = c(() => {
|
|
42
|
+
if (g.icon !== !1) return g.icon ?? D[g.variant ?? "info"];
|
|
43
|
+
}), k = c(() => g.variant === "danger" || g.variant === "warning" ? "alert" : "status"), A = a(), j = c(() => g.unstyled ?? A.unstyled), M = c(() => o({
|
|
44
|
+
variant: g.variant,
|
|
45
|
+
withTitle: !!g.title
|
|
46
|
+
})), N = c(() => j.value ? [g.ui?.root, g.class] : M.value.root({ class: [g.ui?.root, g.class] })), P = c(() => j.value ? g.ui?.icon : M.value.icon({ class: g.ui?.icon })), F = c(() => j.value ? g.ui?.content : M.value.content({ class: g.ui?.content })), I = c(() => j.value ? g.ui?.title : M.value.title({ class: g.ui?.title })), L = c(() => j.value ? g.ui?.description : M.value.description({ class: g.ui?.description })), R = c(() => j.value ? g.ui?.actions : M.value.actions({ class: g.ui?.actions })), z = c(() => j.value ? g.ui?.close : M.value.close({ class: g.ui?.close }));
|
|
47
|
+
return (e, t) => E.value ? (v(), l(x(w), {
|
|
48
|
+
key: 0,
|
|
49
|
+
as: g.as,
|
|
50
|
+
role: k.value,
|
|
51
|
+
class: _(N.value)
|
|
45
52
|
}, {
|
|
46
|
-
default:
|
|
47
|
-
|
|
53
|
+
default: C(() => [
|
|
54
|
+
O.value || e.$slots.icon ? (v(), d("div", {
|
|
48
55
|
key: 0,
|
|
49
|
-
class:
|
|
50
|
-
}, [
|
|
51
|
-
f("div", { class:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
class: _(P.value)
|
|
57
|
+
}, [y(e.$slots, "icon", {}, () => [m(s, { icon: O.value }, null, 8, ["icon"])])], 2)) : u("", !0),
|
|
58
|
+
f("div", { class: _(F.value) }, [
|
|
59
|
+
g.title || e.$slots.title ? (v(), d("p", {
|
|
60
|
+
key: 0,
|
|
61
|
+
class: _(I.value)
|
|
62
|
+
}, [y(e.$slots, "title", {}, () => [p(b(g.title), 1)])], 2)) : u("", !0),
|
|
63
|
+
g.description || e.$slots.default ? (v(), d("div", {
|
|
64
|
+
key: 1,
|
|
65
|
+
class: _(L.value)
|
|
66
|
+
}, [y(e.$slots, "default", {}, () => [p(b(g.description), 1)])], 2)) : u("", !0),
|
|
67
|
+
e.$slots.actions ? (v(), d("div", {
|
|
68
|
+
key: 2,
|
|
69
|
+
class: _(R.value)
|
|
70
|
+
}, [y(e.$slots, "actions")], 2)) : u("", !0)
|
|
71
|
+
], 2),
|
|
72
|
+
g.closable ? (v(), d("button", {
|
|
59
73
|
key: 1,
|
|
60
74
|
type: "button",
|
|
61
|
-
"aria-label":
|
|
62
|
-
class:
|
|
63
|
-
onClick: t[0] ||= (t) =>
|
|
64
|
-
|
|
75
|
+
"aria-label": g.closeLabel,
|
|
76
|
+
class: _(z.value),
|
|
77
|
+
onClick: t[0] ||= (t) => {
|
|
78
|
+
E.value = !1, e.$emit("close");
|
|
79
|
+
}
|
|
80
|
+
}, [y(e.$slots, "close", {}, () => [m(s, { icon: x(n) }, null, 8, ["icon"])])], 10, T)) : u("", !0)
|
|
65
81
|
]),
|
|
66
82
|
_: 3
|
|
67
83
|
}, 8, [
|
|
68
84
|
"as",
|
|
69
85
|
"role",
|
|
70
86
|
"class"
|
|
71
|
-
]));
|
|
87
|
+
])) : u("", !0);
|
|
72
88
|
}
|
|
73
89
|
});
|
|
74
90
|
//#endregion
|
|
75
|
-
export {
|
|
91
|
+
export { E as default };
|