@teammodlr/ui-kit 3.0.0-beta.2 → 3.0.0-beta.20

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.
Files changed (54) hide show
  1. package/lib/components/colorpicker/ColorPicker.vue.d.ts +0 -1
  2. package/lib/components/colorpicker/style/ColorPicker.css.d.ts +1 -0
  3. package/lib/components/dialog/Dialog.vue.d.ts +6 -2
  4. package/lib/components/dialogprovider/types.d.ts +2 -0
  5. package/lib/components/drawer/Drawer.vue.d.ts +142 -0
  6. package/lib/components/drawer/style/Drawer.css.d.ts +33 -0
  7. package/lib/components/drawer/style/index.d.ts +1 -0
  8. package/lib/components/index.d.ts +2 -0
  9. package/lib/components/messageprovider/MessageProvider.vue.d.ts +2 -0
  10. package/lib/components/messageprovider/style/Toaster.css.d.ts +1 -0
  11. package/lib/components/popover/Popover.vue.d.ts +113 -0
  12. package/lib/components/popover/style/Popover.css.d.ts +4 -0
  13. package/lib/components/popover/style/index.d.ts +1 -0
  14. package/lib/index.cjs.js +3 -3
  15. package/lib/index.es.js +5754 -5230
  16. package/lib/style.css +1 -1
  17. package/package.json +1 -1
  18. package/src/components/cardcontextmenu/style/Dropdown.css.ts +7 -0
  19. package/src/components/colorpicker/ColorPicker.vue +8 -11
  20. package/src/components/colorpicker/examples/basic.vue +8 -17
  21. package/src/components/colorpicker/style/ColorPicker.css.ts +6 -1
  22. package/src/components/dialog/Dialog.vue +32 -13
  23. package/src/components/dialog/style/Dialog.css.ts +15 -1
  24. package/src/components/dialogprovider/DialogProvider.vue +7 -1
  25. package/src/components/dialogprovider/types.ts +2 -0
  26. package/src/components/drawer/Drawer.vue +276 -0
  27. package/src/components/drawer/examples/basic.vue +15 -0
  28. package/src/components/drawer/examples/custom-title.vue +21 -0
  29. package/src/components/drawer/examples/index.stories.ts +24 -0
  30. package/src/components/drawer/examples/index.ts +7 -0
  31. package/src/components/drawer/examples/no-mask.vue +15 -0
  32. package/src/components/drawer/examples/no-outside-close.vue +15 -0
  33. package/src/components/drawer/examples/placements.vue +28 -0
  34. package/src/components/drawer/examples/with-footer.vue +21 -0
  35. package/src/components/drawer/examples/with-trigger.vue +13 -0
  36. package/src/components/drawer/style/Drawer.css.ts +208 -0
  37. package/src/components/drawer/style/index.ts +1 -0
  38. package/src/components/dropdown/Dropdown.vue +1 -1
  39. package/src/components/dropdown/style/Dropdown.css.ts +16 -0
  40. package/src/components/index.ts +2 -0
  41. package/src/components/messageprovider/MessageProvider.vue +36 -7
  42. package/src/components/messageprovider/style/Toaster.css.ts +24 -0
  43. package/src/components/modal/style/Modal.css.ts +26 -2
  44. package/src/components/popover/Popover.vue +155 -0
  45. package/src/components/popover/examples/arrow.vue +47 -0
  46. package/src/components/popover/examples/basic.vue +15 -0
  47. package/src/components/popover/examples/index.stories.ts +19 -0
  48. package/src/components/popover/examples/index.ts +4 -0
  49. package/src/components/popover/examples/placement.vue +59 -0
  50. package/src/components/popover/examples/variant.vue +30 -0
  51. package/src/components/popover/style/Popover.css.ts +203 -0
  52. package/src/components/popover/style/index.ts +1 -0
  53. package/src/components/tab/Tab.vue +1 -1
  54. package/src/components/tab/style/Tab.css.ts +6 -0
@@ -66,7 +66,6 @@ declare const _default: import("vue").DefineComponent<{
66
66
  transfer: import("vue").Ref<boolean>;
67
67
  canPickColor: import("vue").ComputedRef<boolean>;
68
68
  openEyeDropper: () => void;
69
- handleOpenChange: (value: boolean) => void;
70
69
  onSliderChangeComplete: () => void;
71
70
  hexInputUser: import("vue").Ref<string>;
72
71
  toggleInherit: () => void;
@@ -3,6 +3,7 @@ export declare const sliderThumb: string;
3
3
  export declare const eyeDrop: string;
4
4
  export declare const preview: string;
5
5
  export declare const colours: string;
6
+ export declare const trigger: string;
6
7
  export declare const reference: string;
7
8
  export declare const transparent: string;
8
9
  export declare const referenceColor: string;
@@ -65,12 +65,15 @@ declare const _default: import("vue").DefineComponent<{
65
65
  }>;
66
66
  wrapperStyle: ComputedRef<CSSProperties>;
67
67
  close: () => void;
68
+ handleAfterLeave: () => void;
69
+ handleEscapeKeyDown: (event: KeyboardEvent) => void;
68
70
  onEnter: () => void;
69
71
  handleOpenChange: (value: boolean) => void;
70
72
  handleOpenAutoFocus: (event: Event) => void;
71
- handleFocusOutside: (event: Event) => void;
73
+ handleOutsideEvent: (event: Event) => void;
72
74
  isOpen: ComputedRef<boolean>;
73
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "update:open" | "onClose" | "onOpen")[], "open" | "update:open" | "onClose" | "onOpen", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
75
+ activeFocusTrap: ComputedRef<boolean>;
76
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "update:open" | "close" | "onClose" | "onOpen")[], "open" | "update:open" | "close" | "onClose" | "onOpen", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
74
77
  title: {
75
78
  type: PropType<string | Ref<string>>;
76
79
  default: string;
@@ -104,6 +107,7 @@ declare const _default: import("vue").DefineComponent<{
104
107
  };
105
108
  }>> & {
106
109
  "onUpdate:open"?: ((...args: any[]) => any) | undefined;
110
+ onClose?: ((...args: any[]) => any) | undefined;
107
111
  onOpen?: ((...args: any[]) => any) | undefined;
108
112
  onOnClose?: ((...args: any[]) => any) | undefined;
109
113
  onOnOpen?: ((...args: any[]) => any) | undefined;
@@ -18,6 +18,7 @@ export interface DialogReactive {
18
18
  options: DialogOptions;
19
19
  open: () => void;
20
20
  close: () => void;
21
+ setFocusTrap: (enabled: boolean) => void;
21
22
  }
22
23
  export interface DialogApiInjection {
23
24
  create: (key: string, options?: DialogOptions) => DialogReactive;
@@ -25,4 +26,5 @@ export interface DialogApiInjection {
25
26
  hasOpenDialog: () => boolean;
26
27
  openDialogCount: () => number;
27
28
  openDialogKeys: () => string[];
29
+ setFocusTrap: (key: string, enabled: boolean) => void;
28
30
  }
@@ -0,0 +1,142 @@
1
+ import type { CSSProperties, PropType } from 'vue';
2
+ import * as style from './style';
3
+ type Placement = 'left' | 'right' | 'top' | 'bottom';
4
+ declare const _default: import("vue").DefineComponent<{
5
+ open: {
6
+ type: BooleanConstructor;
7
+ default: undefined;
8
+ };
9
+ placement: {
10
+ type: PropType<Placement>;
11
+ default: string;
12
+ };
13
+ width: {
14
+ type: (NumberConstructor | StringConstructor)[];
15
+ default: string;
16
+ };
17
+ height: {
18
+ type: (NumberConstructor | StringConstructor)[];
19
+ default: string;
20
+ };
21
+ title: {
22
+ type: StringConstructor;
23
+ default: string;
24
+ };
25
+ showClose: {
26
+ type: BooleanConstructor;
27
+ default: boolean;
28
+ };
29
+ showMask: {
30
+ type: BooleanConstructor;
31
+ default: boolean;
32
+ };
33
+ outsideClose: {
34
+ type: BooleanConstructor;
35
+ default: boolean;
36
+ };
37
+ focusTrap: {
38
+ type: BooleanConstructor;
39
+ default: boolean;
40
+ };
41
+ zIndex: {
42
+ type: NumberConstructor;
43
+ };
44
+ }, {
45
+ style: typeof style;
46
+ fade: {
47
+ enterActive: string;
48
+ leaveActive: string;
49
+ enterFrom: string;
50
+ leaveTo: string;
51
+ };
52
+ isOpen: import("vue").WritableComputedRef<boolean>;
53
+ zIndex: import("vue").Ref<number>;
54
+ hasFooter: import("vue").ComputedRef<boolean>;
55
+ hasTitle: import("vue").ComputedRef<boolean>;
56
+ hasTrigger: import("vue").ComputedRef<boolean>;
57
+ bodyRef: import("vue").Ref<HTMLElement | null>;
58
+ contentStyle: import("vue").ComputedRef<CSSProperties>;
59
+ currentTransition: import("vue").ComputedRef<{
60
+ enterActive: string;
61
+ leaveActive: string;
62
+ enterFrom: string;
63
+ leaveTo: string;
64
+ } | {
65
+ enterActive: string;
66
+ leaveActive: string;
67
+ enterFrom: string;
68
+ leaveTo: string;
69
+ } | {
70
+ enterActive: string;
71
+ leaveActive: string;
72
+ enterFrom: string;
73
+ leaveTo: string;
74
+ } | {
75
+ enterActive: string;
76
+ leaveActive: string;
77
+ enterFrom: string;
78
+ leaveTo: string;
79
+ }>;
80
+ open: () => void;
81
+ close: (e: MouseEvent | KeyboardEvent | undefined) => void;
82
+ handleOpenAutoFocus: (e: Event) => void;
83
+ handleOpenChange: (value: boolean) => void;
84
+ onEscapeKeyDown: (e: KeyboardEvent) => void;
85
+ onPointerDownOutside: (e: Event) => void;
86
+ onInteractOutside: (e: Event) => void;
87
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "update:open" | "close")[], "open" | "update:open" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
88
+ open: {
89
+ type: BooleanConstructor;
90
+ default: undefined;
91
+ };
92
+ placement: {
93
+ type: PropType<Placement>;
94
+ default: string;
95
+ };
96
+ width: {
97
+ type: (NumberConstructor | StringConstructor)[];
98
+ default: string;
99
+ };
100
+ height: {
101
+ type: (NumberConstructor | StringConstructor)[];
102
+ default: string;
103
+ };
104
+ title: {
105
+ type: StringConstructor;
106
+ default: string;
107
+ };
108
+ showClose: {
109
+ type: BooleanConstructor;
110
+ default: boolean;
111
+ };
112
+ showMask: {
113
+ type: BooleanConstructor;
114
+ default: boolean;
115
+ };
116
+ outsideClose: {
117
+ type: BooleanConstructor;
118
+ default: boolean;
119
+ };
120
+ focusTrap: {
121
+ type: BooleanConstructor;
122
+ default: boolean;
123
+ };
124
+ zIndex: {
125
+ type: NumberConstructor;
126
+ };
127
+ }>> & {
128
+ "onUpdate:open"?: ((...args: any[]) => any) | undefined;
129
+ onClose?: ((...args: any[]) => any) | undefined;
130
+ onOpen?: ((...args: any[]) => any) | undefined;
131
+ }, {
132
+ height: string | number;
133
+ width: string | number;
134
+ open: boolean;
135
+ title: string;
136
+ placement: Placement;
137
+ outsideClose: boolean;
138
+ showClose: boolean;
139
+ focusTrap: boolean;
140
+ showMask: boolean;
141
+ }, {}>;
142
+ export default _default;
@@ -0,0 +1,33 @@
1
+ export declare const mask: string;
2
+ export declare const placement: Record<"bottom" | "left" | "right" | "top", string>;
3
+ export declare const slideTransition: {
4
+ left: {
5
+ enterActive: string;
6
+ leaveActive: string;
7
+ enterFrom: string;
8
+ leaveTo: string;
9
+ };
10
+ right: {
11
+ enterActive: string;
12
+ leaveActive: string;
13
+ enterFrom: string;
14
+ leaveTo: string;
15
+ };
16
+ top: {
17
+ enterActive: string;
18
+ leaveActive: string;
19
+ enterFrom: string;
20
+ leaveTo: string;
21
+ };
22
+ bottom: {
23
+ enterActive: string;
24
+ leaveActive: string;
25
+ enterFrom: string;
26
+ leaveTo: string;
27
+ };
28
+ };
29
+ export declare const header: string;
30
+ export declare const title: string;
31
+ export declare const close: string;
32
+ export declare const body: string;
33
+ export declare const footer: string;
@@ -0,0 +1 @@
1
+ export * from './Drawer.css';
@@ -52,4 +52,6 @@ export { default as MConfirm } from './confirm/Confirm.vue';
52
52
  export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
53
53
  export { default as MDialog } from './dialog/Dialog.vue';
54
54
  export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue';
55
+ export { default as MDrawer } from './drawer/Drawer.vue';
55
56
  export { default as MTree } from './tree/Tree.vue';
57
+ export { default as MPopover } from './popover/Popover.vue';
@@ -1,6 +1,7 @@
1
1
  import 'vue-sonner/style.css';
2
2
  import type { MessageCloseButtonPosition, MessagePlacement } from './types';
3
3
  import type { PropType } from 'vue';
4
+ import * as style from './style/Toaster.css';
4
5
  declare const _default: import("vue").DefineComponent<{
5
6
  placement: {
6
7
  type: PropType<MessagePlacement>;
@@ -20,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
20
21
  };
21
22
  }, {
22
23
  sonnerPosition: import("vue").ComputedRef<("top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center") | undefined>;
24
+ style: typeof style;
23
25
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
24
26
  placement: {
25
27
  type: PropType<MessagePlacement>;
@@ -0,0 +1 @@
1
+ export declare const toaster: string;
@@ -0,0 +1,113 @@
1
+ import { type PropType } from 'vue';
2
+ import { type Placement } from '../../composables/usePopper';
3
+ import * as style from './style';
4
+ declare const _default: import("vue").DefineComponent<{
5
+ open: {
6
+ type: BooleanConstructor;
7
+ default: boolean;
8
+ };
9
+ modal: {
10
+ type: BooleanConstructor;
11
+ default: boolean;
12
+ };
13
+ placement: {
14
+ type: PropType<Placement>;
15
+ default: string;
16
+ validator: (value: Placement) => boolean;
17
+ };
18
+ transfer: {
19
+ type: BooleanConstructor;
20
+ default: boolean;
21
+ };
22
+ sideOffset: {
23
+ type: NumberConstructor;
24
+ default: number;
25
+ };
26
+ collisionPadding: {
27
+ type: PropType<number | {
28
+ top?: number;
29
+ right?: number;
30
+ bottom?: number;
31
+ left?: number;
32
+ }>;
33
+ default: number;
34
+ };
35
+ arrow: {
36
+ type: BooleanConstructor;
37
+ default: boolean;
38
+ };
39
+ variant: {
40
+ type: PropType<"light" | "dark">;
41
+ default: string;
42
+ };
43
+ zIndex: {
44
+ type: NumberConstructor;
45
+ };
46
+ }, {
47
+ isOpen: import("vue").Ref<boolean>;
48
+ zIndex: import("vue").Ref<number>;
49
+ showArrow: import("vue").ComputedRef<boolean>;
50
+ contentClasses: import("vue").ComputedRef<unknown[]>;
51
+ resolvedSide: import("vue").ComputedRef<"bottom" | "left" | "right" | "top" | undefined>;
52
+ resolvedAlign: import("vue").ComputedRef<"center" | "end" | "start" | undefined>;
53
+ style: typeof style;
54
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
55
+ open: {
56
+ type: BooleanConstructor;
57
+ default: boolean;
58
+ };
59
+ modal: {
60
+ type: BooleanConstructor;
61
+ default: boolean;
62
+ };
63
+ placement: {
64
+ type: PropType<Placement>;
65
+ default: string;
66
+ validator: (value: Placement) => boolean;
67
+ };
68
+ transfer: {
69
+ type: BooleanConstructor;
70
+ default: boolean;
71
+ };
72
+ sideOffset: {
73
+ type: NumberConstructor;
74
+ default: number;
75
+ };
76
+ collisionPadding: {
77
+ type: PropType<number | {
78
+ top?: number;
79
+ right?: number;
80
+ bottom?: number;
81
+ left?: number;
82
+ }>;
83
+ default: number;
84
+ };
85
+ arrow: {
86
+ type: BooleanConstructor;
87
+ default: boolean;
88
+ };
89
+ variant: {
90
+ type: PropType<"light" | "dark">;
91
+ default: string;
92
+ };
93
+ zIndex: {
94
+ type: NumberConstructor;
95
+ };
96
+ }>> & {
97
+ "onUpdate:open"?: ((...args: any[]) => any) | undefined;
98
+ }, {
99
+ open: boolean;
100
+ variant: "dark" | "light";
101
+ placement: Placement;
102
+ transfer: boolean;
103
+ arrow: boolean;
104
+ modal: boolean;
105
+ sideOffset: number;
106
+ collisionPadding: number | {
107
+ top?: number;
108
+ right?: number;
109
+ bottom?: number;
110
+ left?: number;
111
+ };
112
+ }, {}>;
113
+ export default _default;
@@ -0,0 +1,4 @@
1
+ export declare const content: string;
2
+ export declare const arrow: string;
3
+ export declare const dark: string;
4
+ export declare const close: string;
@@ -0,0 +1 @@
1
+ export * from './Popover.css';