maz-ui 3.1.0 → 3.2.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.
Files changed (40) hide show
  1. package/components/MazAvatar.js +2 -2
  2. package/components/MazBadge.d.ts +1 -1
  3. package/components/MazBottomSheet.js +2 -2
  4. package/components/MazBtn.js +2 -2
  5. package/components/MazCard.js +2 -2
  6. package/components/MazCarousel.js +2 -2
  7. package/components/MazChart.js +1 -1
  8. package/components/MazCheckbox.js +1 -1
  9. package/components/MazDialog.js +2 -2
  10. package/components/MazDialogPromise.js +2 -2
  11. package/components/MazDrawer.js +2 -2
  12. package/components/MazDropzone.js +2 -2
  13. package/components/MazGallery.js +2 -2
  14. package/components/MazIcon.js +2 -2
  15. package/components/MazInput.d.ts +1 -1
  16. package/components/MazInput.js +2 -2
  17. package/components/MazInputNumber.js +2 -2
  18. package/components/MazInputPrice.js +2 -2
  19. package/components/MazInputTags.js +2 -2
  20. package/components/MazLazyImg.js +2 -2
  21. package/components/MazPhoneNumberInput/types.d.ts +3 -3
  22. package/components/MazPhoneNumberInput.js +2 -2
  23. package/components/MazPicker/types.d.ts +5 -5
  24. package/components/MazPicker/utils.d.ts +2 -2
  25. package/components/MazPicker.js +2 -2
  26. package/components/MazRadioButtons.js +1 -1
  27. package/components/MazSelect.d.ts +2 -2
  28. package/components/MazSelect.js +2 -2
  29. package/components/MazSlider.js +2 -2
  30. package/components/MazSwitch.js +1 -1
  31. package/components/MazTabsBar.js +2 -2
  32. package/components/MazTabsContentItem.js +2 -2
  33. package/components/MazTextarea.js +1 -1
  34. package/components/types.d.ts +6 -6
  35. package/css/aos.css +1 -1
  36. package/css/main.css +99 -104
  37. package/maz-ui.d.ts +15 -15
  38. package/modules/index.js +2 -2
  39. package/package.json +37 -38
  40. package/tailwindcss/variables/utilities.js +1 -1
package/css/main.css CHANGED
@@ -27,111 +27,111 @@ textarea {
27
27
 
28
28
  :root {
29
29
  /* PRIMARY */
30
- --maz-color-primary-50: #e3f1ff;
31
- --maz-color-primary-100: #bcdeff;
32
- --maz-color-primary-200: #94caff;
33
- --maz-color-primary-300: #6db7ff;
34
- --maz-color-primary-400: #45a3ff;
35
- --maz-color-primary: #1e90ff;
36
- --maz-color-primary-600: #1977d2;
37
- --maz-color-primary-700: #145ea6;
38
- --maz-color-primary-800: #0e4479;
39
- --maz-color-primary-900: #092b4d;
40
- --maz-color-primary-contrast: white;
41
- --maz-color-primary-alpha: rgb(30 144 255 / 60%);
42
- --maz-color-primary-alpha-20: rgb(30 144 255 / 20%);
30
+ --maz-color-primary-50: hsl(210deg 100% 95%);
31
+ --maz-color-primary-100: hsl(210deg 100% 87%);
32
+ --maz-color-primary-200: hsl(210deg 100% 79%);
33
+ --maz-color-primary-300: hsl(210deg 100% 71%);
34
+ --maz-color-primary-400: hsl(210deg 100% 64%);
35
+ --maz-color-primary: hsl(210deg 100% 56%);
36
+ --maz-color-primary-600: hsl(210deg 79% 46%);
37
+ --maz-color-primary-700: hsl(210deg 78% 36%);
38
+ --maz-color-primary-800: hsl(210deg 79% 26%);
39
+ --maz-color-primary-900: hsl(210deg 79% 17%);
40
+ --maz-color-primary-contrast: hsl(0deg 0% 100%);
41
+ --maz-color-primary-alpha: hsl(210deg 100% 56% / 60%);
42
+ --maz-color-primary-alpha-20: hsl(210deg 100% 56% / 20%);
43
43
  /* SECONDARY */
44
- --maz-color-secondary-50: #e3f9f3;
45
- --maz-color-secondary-100: #bbf1e3;
46
- --maz-color-secondary-200: #93e9d2;
47
- --maz-color-secondary-300: #6be1c2;
48
- --maz-color-secondary-400: #44d9b1;
49
- --maz-color-secondary: #1cd1a1;
50
- --maz-color-secondary-600: #17ac85;
51
- --maz-color-secondary-700: #128869;
52
- --maz-color-secondary-800: #0d634c;
53
- --maz-color-secondary-900: #083f30;
54
- --maz-color-secondary-contrast: white;
55
- --maz-color-secondary-alpha: rgb(28 209 161 / 60%);
56
- --maz-color-secondary-alpha-20: rgb(28 209 161 / 20%);
44
+ --maz-color-secondary-50: hsl(164deg 65% 93%);
45
+ --maz-color-secondary-100: hsl(164deg 66% 84%);
46
+ --maz-color-secondary-200: hsl(164deg 66% 75%);
47
+ --maz-color-secondary-300: hsl(164deg 66% 65%);
48
+ --maz-color-secondary-400: hsl(164deg 66% 56%);
49
+ --maz-color-secondary: hsl(164deg 76% 46%);
50
+ --maz-color-secondary-600: hsl(164deg 76% 38%);
51
+ --maz-color-secondary-700: hsl(164deg 77% 30%);
52
+ --maz-color-secondary-800: hsl(164deg 77% 22%);
53
+ --maz-color-secondary-900: hsl(164deg 77% 14%);
54
+ --maz-color-secondary-contrast: hsl(0deg 0% 100%);
55
+ --maz-color-secondary-alpha: hsl(164deg 76% 46% / 60%);
56
+ --maz-color-secondary-alpha-20: hsl(164deg 76% 46% / 20%);
57
57
  /* INFO */
58
- --maz-color-info-50: #e2f3f6;
59
- --maz-color-info-100: #b9e3ea;
60
- --maz-color-info-200: #91d3dd;
61
- --maz-color-info-300: #68c3d1;
62
- --maz-color-info-400: #40b2c4;
63
- --maz-color-info: #17a2b8;
64
- --maz-color-info-600: #138698;
65
- --maz-color-info-700: #0f6978;
66
- --maz-color-info-800: #0b4d57;
67
- --maz-color-info-900: #073137;
68
- --maz-color-info-contrast: white;
69
- --maz-color-info-alpha: rgb(23 162 184 / 60%);
70
- --maz-color-info-alpha-20: rgb(23 162 184 / 20%);
58
+ --maz-color-info-50: hsl(188deg 53% 93%);
59
+ --maz-color-info-100: hsl(188deg 54% 82%);
60
+ --maz-color-info-200: hsl(188deg 53% 72%);
61
+ --maz-color-info-300: hsl(188deg 53% 61%);
62
+ --maz-color-info-400: hsl(188deg 53% 51%);
63
+ --maz-color-info: hsl(188deg 78% 41%);
64
+ --maz-color-info-600: hsl(188deg 78% 34%);
65
+ --maz-color-info-700: hsl(188deg 78% 26%);
66
+ --maz-color-info-800: hsl(188deg 78% 19%);
67
+ --maz-color-info-900: hsl(188deg 77% 12%);
68
+ --maz-color-info-contrast: hsl(0deg 0% 100%);
69
+ --maz-color-info-alpha: hsl(188deg 78% 41% / 60%);
70
+ --maz-color-info-alpha-20: hsl(188deg 78% 41% / 20%);
71
71
  /* SUCCESS */
72
- --maz-color-success-50: #f2f9e5;
73
- --maz-color-success-100: #e1f0c2;
74
- --maz-color-success-200: #cfe79e;
75
- --maz-color-success-300: #bddf7a;
76
- --maz-color-success-400: #acd656;
77
- --maz-color-success: #9acd32;
78
- --maz-color-success-600: #7fa929;
79
- --maz-color-success-700: #648521;
80
- --maz-color-success-800: #496118;
81
- --maz-color-success-900: #2e3e0f;
82
- --maz-color-success-contrast: white;
83
- --maz-color-success-alpha: rgb(154 205 50 / 60%);
84
- --maz-color-success-alpha-20: rgb(154 205 50 / 20%);
72
+ --maz-color-success-50: hsl(80deg 63% 94%);
73
+ --maz-color-success-100: hsl(80deg 61% 85%);
74
+ --maz-color-success-200: hsl(80deg 60% 76%);
75
+ --maz-color-success-300: hsl(80deg 61% 68%);
76
+ --maz-color-success-400: hsl(80deg 61% 59%);
77
+ --maz-color-success: hsl(80deg 61% 50%);
78
+ --maz-color-success-600: hsl(80deg 61% 41%);
79
+ --maz-color-success-700: hsl(80deg 60% 33%);
80
+ --maz-color-success-800: hsl(80deg 60% 24%);
81
+ --maz-color-success-900: hsl(80deg 61% 15%);
82
+ --maz-color-success-contrast: hsl(0deg 0% 100%);
83
+ --maz-color-success-alpha: hsl(80deg 61% 50% / 60%);
84
+ --maz-color-success-alpha-20: hsl(80deg 61% 50% / 20%);
85
85
  /* WARNING */
86
- --maz-color-warning-50: #fff6e5;
87
- --maz-color-warning-100: #fee9c1;
88
- --maz-color-warning-200: #fedd9d;
89
- --maz-color-warning-300: #fdd079;
90
- --maz-color-warning-400: #fdc455;
91
- --maz-color-warning: #fcb731;
92
- --maz-color-warning-600: #d09728;
93
- --maz-color-warning-700: #a47720;
94
- --maz-color-warning-800: #785717;
95
- --maz-color-warning-900: #4c370f;
96
- --maz-color-warning-contrast: #374151;
97
- --maz-color-warning-alpha: rgb(252 183 49 / 60%);
98
- --maz-color-warning-alpha-20: rgb(252 183 49 / 20%);
86
+ --maz-color-warning-50: hsl(40deg 100% 95%);
87
+ --maz-color-warning-100: hsl(40deg 97% 88%);
88
+ --maz-color-warning-200: hsl(40deg 98% 81%);
89
+ --maz-color-warning-300: hsl(40deg 97% 73%);
90
+ --maz-color-warning-400: hsl(40deg 98% 66%);
91
+ --maz-color-warning: hsl(40deg 97% 59%);
92
+ --maz-color-warning-600: hsl(40deg 68% 49%);
93
+ --maz-color-warning-700: hsl(40deg 67% 38%);
94
+ --maz-color-warning-800: hsl(40deg 68% 28%);
95
+ --maz-color-warning-900: hsl(40deg 67% 18%);
96
+ --maz-color-warning-contrast: hsl(217deg 19% 27%);
97
+ --maz-color-warning-alpha: hsl(40deg 97% 59% / 60%);
98
+ --maz-color-warning-alpha-20: hsl(40deg 97% 59% / 20%);
99
99
  /* DANGER */
100
- --maz-color-danger-50: #ffedec;
101
- --maz-color-danger-100: #ffd3d2;
102
- --maz-color-danger-200: #ffbab8;
103
- --maz-color-danger-300: #ffa09e;
104
- --maz-color-danger-400: #ff8784;
105
- --maz-color-danger: #ff6d6a;
106
- --maz-color-danger-600: #d25a57;
107
- --maz-color-danger-700: #a64745;
108
- --maz-color-danger-800: #793432;
109
- --maz-color-danger-900: #4d2120;
110
- --maz-color-danger-contrast: white;
111
- --maz-color-danger-alpha: rgb(255 109 106 / 60%);
112
- --maz-color-danger-alpha-20: rgb(255 109 106 / 20%);
100
+ --maz-color-danger-50: hsl(1deg 100% 96%);
101
+ --maz-color-danger-100: hsl(1deg 100% 91%);
102
+ --maz-color-danger-200: hsl(2deg 100% 86%);
103
+ --maz-color-danger-300: hsl(1deg 100% 81%);
104
+ --maz-color-danger-400: hsl(1deg 100% 76%);
105
+ --maz-color-danger: hsl(1deg 100% 71%);
106
+ --maz-color-danger-600: hsl(1deg 58% 58%);
107
+ --maz-color-danger-700: hsl(1deg 41% 46%);
108
+ --maz-color-danger-800: hsl(g 42% 34%);
109
+ --maz-color-danger-900: hsl(1deg 41% 21%);
110
+ --maz-color-danger-contrast: hsl(0deg 0% 100%);
111
+ --maz-color-danger-alpha: hsl(1deg 100% 71% / 60%);
112
+ --maz-color-danger-alpha-20: hsl(1deg 100% 71% / 20%);
113
113
  /* WHITE */
114
- --maz-color-white: white;
115
- --maz-color-white-contrast: black;
114
+ --maz-color-white: hsl(0deg 0% 100%);
115
+ --maz-color-white-contrast: hsl(0deg 0% 0%);
116
116
  /* BLACK */
117
- --maz-color-black: black;
118
- --maz-color-black-contrast: white;
117
+ --maz-color-black: hsl(0deg 0% 0%);
118
+ --maz-color-black-contrast: hsl(0deg 0% 100%);
119
119
  /** TEXT COLOR LIGHT **/
120
- --maz-color-text-light: #d9d9d9;
121
- --maz-color-muted-light: rgb(0 0 0 / 54%);
120
+ --maz-color-text-light: hsl(0deg 0% 85%);
121
+ --maz-color-muted-light: hsl(0deg 0% 0% / 54%);
122
122
  /** TEXT COLOR DARK **/
123
- --maz-color-text-dark: #212427;
124
- --maz-color-muted-dark: rgb(228 228 228 / 54%);
123
+ --maz-color-text-dark: hsl(210deg 8% 14%);
124
+ --maz-color-muted-dark: hsl(0deg 0% 89% / 54%);
125
125
  /** BG OVERLAY **/
126
- --maz-bg-overlay: rgb(0 0 0 / 50%);
126
+ --maz-bg-overlay: hsl(0deg 0% 0% / 50%);
127
127
  /** BG LIGHT COLOR **/
128
- --maz-bg-color-light: white;
129
- --maz-bg-color-light-light: #efefef;
130
- --maz-bg-color-light-lighter: #f2f2f2;
128
+ --maz-bg-color-light: hsl(0deg 0% 100%);
129
+ --maz-bg-color-light-light: hsl(0deg 0% 94%);
130
+ --maz-bg-color-light-lighter: hsl(0deg 0% 95%);
131
131
  /** BG DARK COLOR **/
132
- --maz-bg-color-dark: #21222e;
133
- --maz-bg-color-dark-light: #303144;
134
- --maz-bg-color-dark-lighter: #3b3c53;
132
+ --maz-bg-color-dark: hsl(235deg 16% 15%);
133
+ --maz-bg-color-dark-light: hsl(237deg 17% 23%);
134
+ --maz-bg-color-dark-lighter: hsl(238deg 17% 28%);
135
135
  /**
136
136
  * FONT FAMILY
137
137
  * Not used in the library --> Use this variable on your <html> element (optional)
@@ -659,8 +659,8 @@ html.--backdrop-present {
659
659
  }
660
660
 
661
661
  .m-drawer .m-drawer-content-wrap > .m-drawer-header {
662
- -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
663
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
662
+ -webkit-box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
663
+ box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
664
664
  }
665
665
 
666
666
  .m-drawer .m-drawer-content-wrap > .m-drawer-body {
@@ -776,8 +776,8 @@ html.--backdrop-present {
776
776
  }
777
777
 
778
778
  .m-drawer .m-backdrop-content > .m-drawer-content-wrap {
779
- -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
780
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
779
+ -webkit-box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
780
+ box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
781
781
  }
782
782
 
783
783
  *, ::before, ::after {
@@ -2105,8 +2105,8 @@ html.--backdrop-present {
2105
2105
  }
2106
2106
 
2107
2107
  .maz-elevation {
2108
- -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
2109
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
2108
+ -webkit-box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
2109
+ box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.1);
2110
2110
  }
2111
2111
 
2112
2112
  .maz-flex-center {
@@ -2122,11 +2122,6 @@ html.--backdrop-present {
2122
2122
  background-color: var(--maz-color-bg-lighter);
2123
2123
  }
2124
2124
 
2125
- .focus\:maz-outline-none:focus {
2126
- outline: 2px solid transparent;
2127
- outline-offset: 2px;
2128
- }
2129
-
2130
2125
  @media (min-width: 768px) {
2131
2126
  .tab-m\:maz-fixed {
2132
2127
  position: fixed;
package/maz-ui.d.ts CHANGED
@@ -3,14 +3,14 @@ import { Component, App, Directive, Plugin } from 'vue';
3
3
 
4
4
  declare function injectStrict<T>(key: string, fallback?: T): NonNullable<T>;
5
5
 
6
- declare type ArgumentTypes<F extends (...args: any[]) => void> = F extends (...args: infer A) => any ? A : never;
7
- declare type MethodTypes = {
6
+ type ArgumentTypes<F extends (...args: any[]) => void> = F extends (...args: infer A) => any ? A : never;
7
+ type MethodTypes = {
8
8
  cancel: () => void;
9
9
  flush: () => void;
10
10
  };
11
11
  declare function debounce<T extends (...args: any[]) => void>(fn: T, wait?: number, callFirst?: boolean): ((...args: ArgumentTypes<T>) => void) & MethodTypes;
12
12
 
13
- declare type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
13
+ type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
14
14
  declare function truthyFilter<T>(value: T): value is Truthy<T>;
15
15
 
16
16
  declare function mount(component: Component, { props, children, element, app, }?: {
@@ -33,7 +33,7 @@ declare const DEFAULT_OPTIONS: {
33
33
  storageThemeValueLight: string;
34
34
  };
35
35
  declare const theme: vue.Ref<string | undefined>;
36
- declare type ThemeHandlerOptions = Partial<typeof DEFAULT_OPTIONS>;
36
+ type ThemeHandlerOptions = Partial<typeof DEFAULT_OPTIONS>;
37
37
  declare const useThemeHandler: (opts?: ThemeHandlerOptions) => {
38
38
  autoSetTheme: () => void;
39
39
  toggleTheme: () => void;
@@ -41,7 +41,7 @@ declare const useThemeHandler: (opts?: ThemeHandlerOptions) => {
41
41
  hasLightTheme: vue.ComputedRef<boolean>;
42
42
  };
43
43
 
44
- declare type IdleTimeoutCallback = ({ isIdle, eventType, }: {
44
+ type IdleTimeoutCallback = ({ isIdle, eventType, }: {
45
45
  isIdle: boolean;
46
46
  eventType?: string;
47
47
  }) => void;
@@ -51,7 +51,7 @@ interface IdleTimeoutStrictOption {
51
51
  once: boolean;
52
52
  immediate: boolean;
53
53
  }
54
- declare type IdleTimeoutOptions = Partial<IdleTimeoutStrictOption>;
54
+ type IdleTimeoutOptions = Partial<IdleTimeoutStrictOption>;
55
55
 
56
56
  declare class IdleTimeout {
57
57
  private readonly defaultOptions;
@@ -80,15 +80,15 @@ declare class IdleTimeout {
80
80
  set idle(value: boolean);
81
81
  }
82
82
 
83
- declare type UserVisibilyCallback = ({ isVisible, }: {
83
+ type UserVisibilyCallback = ({ isVisible, }: {
84
84
  isVisible: boolean;
85
85
  }) => void;
86
- declare type UserVisibilyStrictOptions = {
86
+ type UserVisibilyStrictOptions = {
87
87
  immediate: boolean;
88
88
  timeout: number;
89
89
  once: boolean;
90
90
  };
91
- declare type UserVisibilyOptions = Partial<UserVisibilyStrictOptions>;
91
+ type UserVisibilyOptions = Partial<UserVisibilyStrictOptions>;
92
92
 
93
93
  declare class UserVisibility {
94
94
  private element;
@@ -143,11 +143,11 @@ interface ClassOptions$1 {
143
143
  onError?: (el: Element) => unknown;
144
144
  onIntersecting?: (el: Element) => unknown;
145
145
  }
146
- declare type vLazyImgOptions = Partial<ClassOptions$1>;
146
+ type vLazyImgOptions = Partial<ClassOptions$1>;
147
147
  interface vLazyImgBindingOptions extends vLazyImgOptions {
148
148
  src?: string;
149
149
  }
150
- declare type vLazyImgBinding = string | vLazyImgBindingOptions;
150
+ type vLazyImgBinding = string | vLazyImgBindingOptions;
151
151
 
152
152
  declare const vLazyImg: Directive;
153
153
 
@@ -166,7 +166,7 @@ interface vZoomImgBindingOptions extends vZoomImgOptions {
166
166
  src: string;
167
167
  alt?: string;
168
168
  }
169
- declare type vZoomImgBinding = string | vZoomImgBindingOptions;
169
+ type vZoomImgBinding = string | vZoomImgBindingOptions;
170
170
 
171
171
  declare const plugin$4: {
172
172
  install(app: any): void;
@@ -196,12 +196,12 @@ declare const filters: {
196
196
  date: (date: string | number | Date, locale: string, options?: Intl.DateTimeFormatOptions | undefined) => string;
197
197
  number: (number: string | number, locale: string, options: Intl.NumberFormatOptions) => string;
198
198
  };
199
- declare type Filters = typeof filters;
199
+ type Filters = typeof filters;
200
200
  declare const installFilters: {
201
201
  install(app: any): void;
202
202
  };
203
203
 
204
- declare type ToasterPositions = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
204
+ type ToasterPositions = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
205
205
  interface ToasterOptions {
206
206
  position?: ToasterPositions;
207
207
  timeout?: number;
@@ -224,7 +224,7 @@ declare const plugin$2: {
224
224
  install(app: any, options?: ToasterOptions): void;
225
225
  };
226
226
 
227
- declare type LoaderId = unknown;
227
+ type LoaderId = unknown;
228
228
 
229
229
  declare class WaitHandler {
230
230
  private _loaders;