maz-ui 3.22.3 → 3.22.4

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 (14) hide show
  1. package/components/MazCard.mjs +1 -1
  2. package/components/MazGallery.d.ts +41 -0
  3. package/components/MazGallery.mjs +30 -21
  4. package/components/assets/MazGallery.css +1 -1
  5. package/components/chunks/{MazBtn-f7e94b59.mjs → MazBtn-1daf9063.mjs} +2 -2
  6. package/components/chunks/{MazCard-01b81dd2.mjs → MazCard-4331dca0.mjs} +3 -3
  7. package/components/chunks/{MazGallery-a8f6748b.mjs → MazGallery-b2dc4286.mjs} +31 -22
  8. package/components/chunks/{MazSpinner-98dd1f9d.mjs → MazSpinner-f1e69f29.mjs} +1 -1
  9. package/components/chunks/{MazTransitionExpand-f293b830.mjs → MazTransitionExpand-474b00d4.mjs} +1 -1
  10. package/nuxt/index.json +1 -1
  11. package/nuxt/types.d.mts +3 -2
  12. package/nuxt/types.d.ts +3 -2
  13. package/package.json +6 -6
  14. package/types/components/MazGallery.vue.d.ts +41 -0
package/components/MazCard.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { M } from "./chunks/MazCard-01b81dd2.mjs";
1
+ import { M } from "./chunks/MazCard-4331dca0.mjs";
2
2
  export {
3
3
  M as default
4
4
  };
package/components/MazGallery.d.ts CHANGED
@@ -2,111 +2,151 @@ import { type PropType } from 'vue';
2
2
  import type { MazGalleryImage } from './types';
3
3
  export type { MazGalleryImage } from './types';
4
4
  declare const _default: import("vue").DefineComponent<{
5
+ /**
6
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
7
+ * */
5
8
  images: {
6
9
  type: PropType<MazGalleryImage[]>;
7
10
  default: () => never[];
8
11
  };
12
+ /** Images count shown (max: 5) */
9
13
  imagesShownCount: {
10
14
  type: NumberConstructor;
11
15
  default: number;
12
16
  };
17
+ /** Remove transparent layer with the remain count (ex: +2) */
13
18
  noRemaining: {
14
19
  type: BooleanConstructor;
15
20
  default: boolean;
16
21
  };
22
+ /** Height of gallery */
17
23
  height: {
18
24
  type: (StringConstructor | NumberConstructor)[];
19
25
  default: number;
20
26
  };
27
+ /** Remove default height */
21
28
  noHeight: {
22
29
  type: BooleanConstructor;
23
30
  default: boolean;
24
31
  };
32
+ /** Width of gallery */
25
33
  width: {
26
34
  type: (StringConstructor | NumberConstructor)[];
27
35
  default: string;
28
36
  };
37
+ /** Remove default width */
29
38
  noWidth: {
30
39
  type: BooleanConstructor;
31
40
  default: boolean;
32
41
  };
42
+ /** Disable the border radius of the gallery */
33
43
  noRadius: {
34
44
  type: BooleanConstructor;
35
45
  default: boolean;
36
46
  };
47
+ /** Disable full size display when clicking on image */
37
48
  noZoom: {
38
49
  type: BooleanConstructor;
39
50
  default: boolean;
40
51
  };
52
+ /** Layer with photography icon when no images is provided */
41
53
  hasEmptyLayer: {
42
54
  type: BooleanConstructor;
43
55
  default: boolean;
44
56
  };
57
+ /** Lazy load image - if false, images are directly loaded */
45
58
  lazy: {
46
59
  type: BooleanConstructor;
47
60
  default: boolean;
48
61
  };
62
+ /** Disable blur effect on image hover */
49
63
  blur: {
50
64
  type: BooleanConstructor;
51
65
  default: boolean;
52
66
  };
67
+ /** Disable scale animation effect on image hover */
53
68
  scale: {
54
69
  type: BooleanConstructor;
55
70
  default: boolean;
56
71
  };
72
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
73
+ separatorColor: {
74
+ type: StringConstructor;
75
+ default: string;
76
+ };
57
77
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
78
+ /**
79
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
80
+ * */
58
81
  images: {
59
82
  type: PropType<MazGalleryImage[]>;
60
83
  default: () => never[];
61
84
  };
85
+ /** Images count shown (max: 5) */
62
86
  imagesShownCount: {
63
87
  type: NumberConstructor;
64
88
  default: number;
65
89
  };
90
+ /** Remove transparent layer with the remain count (ex: +2) */
66
91
  noRemaining: {
67
92
  type: BooleanConstructor;
68
93
  default: boolean;
69
94
  };
95
+ /** Height of gallery */
70
96
  height: {
71
97
  type: (StringConstructor | NumberConstructor)[];
72
98
  default: number;
73
99
  };
100
+ /** Remove default height */
74
101
  noHeight: {
75
102
  type: BooleanConstructor;
76
103
  default: boolean;
77
104
  };
105
+ /** Width of gallery */
78
106
  width: {
79
107
  type: (StringConstructor | NumberConstructor)[];
80
108
  default: string;
81
109
  };
110
+ /** Remove default width */
82
111
  noWidth: {
83
112
  type: BooleanConstructor;
84
113
  default: boolean;
85
114
  };
115
+ /** Disable the border radius of the gallery */
86
116
  noRadius: {
87
117
  type: BooleanConstructor;
88
118
  default: boolean;
89
119
  };
120
+ /** Disable full size display when clicking on image */
90
121
  noZoom: {
91
122
  type: BooleanConstructor;
92
123
  default: boolean;
93
124
  };
125
+ /** Layer with photography icon when no images is provided */
94
126
  hasEmptyLayer: {
95
127
  type: BooleanConstructor;
96
128
  default: boolean;
97
129
  };
130
+ /** Lazy load image - if false, images are directly loaded */
98
131
  lazy: {
99
132
  type: BooleanConstructor;
100
133
  default: boolean;
101
134
  };
135
+ /** Disable blur effect on image hover */
102
136
  blur: {
103
137
  type: BooleanConstructor;
104
138
  default: boolean;
105
139
  };
140
+ /** Disable scale animation effect on image hover */
106
141
  scale: {
107
142
  type: BooleanConstructor;
108
143
  default: boolean;
109
144
  };
145
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
146
+ separatorColor: {
147
+ type: StringConstructor;
148
+ default: string;
149
+ };
110
150
  }>>, {
111
151
  width: string | number;
112
152
  height: string | number;
@@ -121,5 +161,6 @@ declare const _default: import("vue").DefineComponent<{
121
161
  noZoom: boolean;
122
162
  hasEmptyLayer: boolean;
123
163
  scale: boolean;
164
+ separatorColor: string;
124
165
  }, {}>;
125
166
  export default _default;
package/components/MazGallery.mjs CHANGED
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  import "./assets/MazGallery.css";
8
- import { defineComponent, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
8
+ import { defineComponent, useCssVars, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
9
9
  const style = `
10
10
  .maz-zoom-img {
11
11
  position: fixed;
@@ -634,41 +634,47 @@ const _hoisted_3 = {
634
634
  class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
635
635
  };
636
636
  const _hoisted_4 = { class: "maz-text-2xl maz-text-white" };
637
- const lazyImgArgument = "bg-image";
638
637
  const _sfc_main = /* @__PURE__ */ defineComponent({
639
638
  __name: "MazGallery",
640
639
  props: {
641
- // Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
640
+ /**
641
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
642
+ * */
642
643
  images: {
643
644
  type: Array,
644
645
  default: () => []
645
646
  },
646
- // Images count shown (max: 5)
647
+ /** Images count shown (max: 5) */
647
648
  imagesShownCount: { type: Number, default: 5 },
648
- // Remove transparent layer with the remain count (ex: +2)
649
+ /** Remove transparent layer with the remain count (ex: +2) */
649
650
  noRemaining: { type: Boolean, default: false },
650
- // Height of gallery
651
+ /** Height of gallery */
651
652
  height: { type: [Number, String], default: 150 },
652
- // Remove default height
653
+ /** Remove default height */
653
654
  noHeight: { type: Boolean, default: false },
654
- // Width of gallery
655
+ /** Width of gallery */
655
656
  width: { type: [Number, String], default: "100%" },
656
- // Remove default width
657
+ /** Remove default width */
657
658
  noWidth: { type: Boolean, default: false },
658
- // Add the default border radius to gallery
659
+ /** Disable the border radius of the gallery */
659
660
  noRadius: { type: Boolean, default: false },
660
- // Add feature to show the carousel images on click
661
+ /** Disable full size display when clicking on image */
661
662
  noZoom: { type: Boolean, default: false },
662
- // Layer with photography icon when no images is provided
663
+ /** Layer with photography icon when no images is provided */
663
664
  hasEmptyLayer: { type: Boolean, default: true },
664
- // Lazy load image - if false, images are directly loaded
665
+ /** Lazy load image - if false, images are directly loaded */
665
666
  lazy: { type: Boolean, default: true },
666
- // Blur animation effect on image hover
667
+ /** Disable blur effect on image hover */
667
668
  blur: { type: Boolean, default: true },
668
- // Scale animation effect on image hover
669
- scale: { type: Boolean, default: true }
669
+ /** Disable scale animation effect on image hover */
670
+ scale: { type: Boolean, default: true },
671
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
672
+ separatorColor: { type: String, default: "transparent" }
670
673
  },
671
674
  setup(__props) {
675
+ useCssVars((_ctx) => ({
676
+ "7a2c056e": __props.separatorColor
677
+ }));
672
678
  const NoPhotographyIcon = defineAsyncComponent(() => import("./chunks/no-photography-b0d08d6f.mjs"));
673
679
  const props = __props;
674
680
  onBeforeMount(() => {
@@ -676,7 +682,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
676
682
  console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
677
683
  });
678
684
  const sizeStyle = computed(() => {
679
- const { height, width, noWidth, noHeight } = props;
685
+ const noWidth = props.noWidth;
686
+ const width = props.width;
687
+ const noHeight = props.noHeight;
688
+ const height = props.height;
680
689
  return {
681
690
  ...noWidth ? {} : {
682
691
  flex: "0 0 " + typeof width === "number" ? `${width}px` : width,
@@ -735,7 +744,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
735
744
  alt: image.alt,
736
745
  loading: "lazy"
737
746
  }, null, 8, _hoisted_2), [
738
- [unref(vLazyImg), { src: image.thumbnail, disabled: !__props.lazy }, lazyImgArgument],
747
+ [unref(vLazyImg), { src: image.thumbnail, disabled: !__props.lazy }, "bg-image"],
739
748
  [unref(vZoomImg), {
740
749
  src: image.src,
741
750
  alt: image.alt,
@@ -773,7 +782,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
773
782
  "div",
774
783
  {
775
784
  key: 0,
776
- class: normalizeClass(["maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !__props.noRadius }]),
785
+ class: normalizeClass(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !__props.noRadius }]),
777
786
  style: normalizeStyle([sizeStyle.value])
778
787
  },
779
788
  [
@@ -804,7 +813,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
804
813
  };
805
814
  }
806
815
  });
807
- const MazGallery_vue_vue_type_style_index_0_scoped_3710617f_lang = "";
816
+ const MazGallery_vue_vue_type_style_index_0_scoped_4e6fbc0c_lang = "";
808
817
  const _export_sfc = (sfc, props) => {
809
818
  const target = sfc.__vccOpts || sfc;
810
819
  for (const [key, val] of props) {
@@ -812,7 +821,7 @@ const _export_sfc = (sfc, props) => {
812
821
  }
813
822
  return target;
814
823
  };
815
- const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3710617f"]]);
824
+ const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e6fbc0c"]]);
816
825
  export {
817
826
  MazGallery as default
818
827
  };
package/components/assets/MazGallery.css CHANGED
@@ -1 +1 @@
1
- .m-gallery[data-v-3710617f]{position:relative;overflow:hidden}.m-gallery__hidden[data-v-3710617f]{display:none}.m-gallery__item[data-v-3710617f]{position:absolute;top:0;margin:0;height:50%;width:100%;overflow:hidden;border-left-width:2px;border-color:transparent;padding:0}.m-gallery__item--1[data-v-3710617f]{left:0;height:100%}.m-gallery__item--1[data-v-3710617f]:not(:last-child){width:50%}.m-gallery__item--2[data-v-3710617f]{left:50%;width:50%;height:50%}.m-gallery__item--2[data-v-3710617f]:last-child{height:100%}.m-gallery__item--2[data-v-3710617f]:nth-last-child(4){width:25%}.m-gallery__item--3[data-v-3710617f]{top:50%;left:50%;width:25%}.m-gallery__item--3[data-v-3710617f]:last-child{width:50%}.m-gallery__item--3[data-v-3710617f]:nth-last-child(3){top:0;left:75%}.m-gallery__item--4[data-v-3710617f]{border-top-width:2px;border-color:transparent;top:50%;left:50%;width:25%}.m-gallery__item--4[data-v-3710617f]:last-child{left:75%;width:25%}.m-gallery__item--5[data-v-3710617f]{border-top-width:2px;border-color:transparent;top:50%;left:75%;width:25%}.m-gallery__item[data-v-3710617f]:first-child{border-left:0}.m-gallery__item--3[data-v-3710617f]:last-child,.m-gallery__item--3[data-v-3710617f]:nth-last-child(2),.m-gallery__item--4[data-v-3710617f]:last-child,.m-gallery__item--5[data-v-3710617f]{border-top-width:2px;border-color:transparent}.m-gallery__item__image[data-v-3710617f]{height:100%;max-width:100%;width:100%;background-position:center center;background-size:cover;background-repeat:no-repeat;background-color:#0000007f}.m-gallery__remaining-layer[data-v-3710617f]{position:absolute;top:0;right:0;bottom:0;left:0}.m-gallery__remaining-layer a span[data-v-3710617f]{color:#fff;font-size:2rem}
1
+ .m-gallery[data-v-4e6fbc0c]{position:relative;overflow:hidden}.m-gallery__hidden[data-v-4e6fbc0c]{display:none}.m-gallery__item[data-v-4e6fbc0c]{position:absolute;top:0;margin:0;height:50%;width:100%;overflow:hidden;border-left-width:2px;padding:0;border-color:var(--7a2c056e)}.m-gallery__item--1[data-v-4e6fbc0c]{left:0;height:100%}.m-gallery__item--1[data-v-4e6fbc0c]:not(:last-child){width:50%}.m-gallery__item--2[data-v-4e6fbc0c]{left:50%;width:50%;height:50%}.m-gallery__item--2[data-v-4e6fbc0c]:last-child{height:100%}.m-gallery__item--2[data-v-4e6fbc0c]:nth-last-child(4){width:25%}.m-gallery__item--3[data-v-4e6fbc0c]{top:50%;left:50%;width:25%}.m-gallery__item--3[data-v-4e6fbc0c]:last-child{width:50%}.m-gallery__item--3[data-v-4e6fbc0c]:nth-last-child(3){top:0;left:75%}.m-gallery__item--4[data-v-4e6fbc0c]{border-top-width:2px;border-color:var(--7a2c056e);top:50%;left:50%;width:25%}.m-gallery__item--4[data-v-4e6fbc0c]:last-child{left:75%;width:25%}.m-gallery__item--5[data-v-4e6fbc0c]{border-top-width:2px;border-color:var(--7a2c056e);top:50%;left:75%;width:25%}.m-gallery__item[data-v-4e6fbc0c]:first-child{border-left:0}.m-gallery__item--3[data-v-4e6fbc0c]:last-child,.m-gallery__item--3[data-v-4e6fbc0c]:nth-last-child(2),.m-gallery__item--4[data-v-4e6fbc0c]:last-child,.m-gallery__item--5[data-v-4e6fbc0c]{border-top-width:2px;border-color:var(--7a2c056e)}.m-gallery__item__image[data-v-4e6fbc0c]{height:100%;max-width:100%;width:100%;background-position:center center;background-size:cover;background-repeat:no-repeat;background-color:#0000007f}.m-gallery__remaining-layer[data-v-4e6fbc0c]{position:absolute;top:0;right:0;bottom:0;left:0}.m-gallery__remaining-layer a span[data-v-4e6fbc0c]{color:#fff;font-size:2rem}
package/components/chunks/{MazBtn-f7e94b59.mjs → MazBtn-1daf9063.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import "../assets/MazBtn.css";
2
2
  import { defineComponent, defineAsyncComponent, useAttrs, useSlots, onBeforeMount, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, normalizeClass, renderSlot, unref, createCommentVNode, createElementVNode } from "vue";
3
- import { _ as _export_sfc } from "./MazCard-01b81dd2.mjs";
3
+ import { _ as _export_sfc } from "./MazCard-4331dca0.mjs";
4
4
  const _sfc_main = /* @__PURE__ */ defineComponent({
5
5
  __name: "MazBtn",
6
6
  props: {
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
46
46
  noElevation: { type: Boolean, default: false }
47
47
  },
48
48
  setup(__props) {
49
- const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-98dd1f9d.mjs"));
49
+ const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-f1e69f29.mjs"));
50
50
  const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
51
51
  const { href, to } = useAttrs();
52
52
  const slots = useSlots();
package/components/chunks/{MazCard-01b81dd2.mjs → MazCard-4331dca0.mjs} RENAMED
@@ -68,9 +68,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
68
68
  collapseOpen: { type: Boolean, default: false }
69
69
  },
70
70
  setup(__props) {
71
- const MazBtn = defineAsyncComponent(() => import("./MazBtn-f7e94b59.mjs"));
72
- const MazGallery = defineAsyncComponent(() => import("./MazGallery-a8f6748b.mjs"));
73
- const MazTransitionExpand = defineAsyncComponent(() => import("./MazTransitionExpand-f293b830.mjs"));
71
+ const MazBtn = defineAsyncComponent(() => import("./MazBtn-1daf9063.mjs"));
72
+ const MazGallery = defineAsyncComponent(() => import("./MazGallery-b2dc4286.mjs"));
73
+ const MazTransitionExpand = defineAsyncComponent(() => import("./MazTransitionExpand-474b00d4.mjs"));
74
74
  const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-a78b9604.mjs"));
75
75
  const props = __props;
76
76
  const slots = useSlots();
package/components/chunks/{MazGallery-a8f6748b.mjs → MazGallery-b2dc4286.mjs} RENAMED
@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  import "../assets/MazGallery.css";
8
- import { defineComponent, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
9
- import { _ as _export_sfc } from "./MazCard-01b81dd2.mjs";
8
+ import { defineComponent, useCssVars, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
9
+ import { _ as _export_sfc } from "./MazCard-4331dca0.mjs";
10
10
  const style = `
11
11
  .maz-zoom-img {
12
12
  position: fixed;
@@ -635,41 +635,47 @@ const _hoisted_3 = {
635
635
  class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
636
636
  };
637
637
  const _hoisted_4 = { class: "maz-text-2xl maz-text-white" };
638
- const lazyImgArgument = "bg-image";
639
638
  const _sfc_main = /* @__PURE__ */ defineComponent({
640
639
  __name: "MazGallery",
641
640
  props: {
642
- // Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
641
+ /**
642
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
643
+ * */
643
644
  images: {
644
645
  type: Array,
645
646
  default: () => []
646
647
  },
647
- // Images count shown (max: 5)
648
+ /** Images count shown (max: 5) */
648
649
  imagesShownCount: { type: Number, default: 5 },
649
- // Remove transparent layer with the remain count (ex: +2)
650
+ /** Remove transparent layer with the remain count (ex: +2) */
650
651
  noRemaining: { type: Boolean, default: false },
651
- // Height of gallery
652
+ /** Height of gallery */
652
653
  height: { type: [Number, String], default: 150 },
653
- // Remove default height
654
+ /** Remove default height */
654
655
  noHeight: { type: Boolean, default: false },
655
- // Width of gallery
656
+ /** Width of gallery */
656
657
  width: { type: [Number, String], default: "100%" },
657
- // Remove default width
658
+ /** Remove default width */
658
659
  noWidth: { type: Boolean, default: false },
659
- // Add the default border radius to gallery
660
+ /** Disable the border radius of the gallery */
660
661
  noRadius: { type: Boolean, default: false },
661
- // Add feature to show the carousel images on click
662
+ /** Disable full size display when clicking on image */
662
663
  noZoom: { type: Boolean, default: false },
663
- // Layer with photography icon when no images is provided
664
+ /** Layer with photography icon when no images is provided */
664
665
  hasEmptyLayer: { type: Boolean, default: true },
665
- // Lazy load image - if false, images are directly loaded
666
+ /** Lazy load image - if false, images are directly loaded */
666
667
  lazy: { type: Boolean, default: true },
667
- // Blur animation effect on image hover
668
+ /** Disable blur effect on image hover */
668
669
  blur: { type: Boolean, default: true },
669
- // Scale animation effect on image hover
670
- scale: { type: Boolean, default: true }
670
+ /** Disable scale animation effect on image hover */
671
+ scale: { type: Boolean, default: true },
672
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
673
+ separatorColor: { type: String, default: "transparent" }
671
674
  },
672
675
  setup(__props) {
676
+ useCssVars((_ctx) => ({
677
+ "7a2c056e": __props.separatorColor
678
+ }));
673
679
  const NoPhotographyIcon = defineAsyncComponent(() => import("./no-photography-b0d08d6f.mjs"));
674
680
  const props = __props;
675
681
  onBeforeMount(() => {
@@ -677,7 +683,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
677
683
  console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
678
684
  });
679
685
  const sizeStyle = computed(() => {
680
- const { height, width, noWidth, noHeight } = props;
686
+ const noWidth = props.noWidth;
687
+ const width = props.width;
688
+ const noHeight = props.noHeight;
689
+ const height = props.height;
681
690
  return {
682
691
  ...noWidth ? {} : {
683
692
  flex: "0 0 " + typeof width === "number" ? `${width}px` : width,
@@ -736,7 +745,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
736
745
  alt: image.alt,
737
746
  loading: "lazy"
738
747
  }, null, 8, _hoisted_2), [
739
- [unref(vLazyImg), { src: image.thumbnail, disabled: !__props.lazy }, lazyImgArgument],
748
+ [unref(vLazyImg), { src: image.thumbnail, disabled: !__props.lazy }, "bg-image"],
740
749
  [unref(vZoomImg), {
741
750
  src: image.src,
742
751
  alt: image.alt,
@@ -774,7 +783,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
774
783
  "div",
775
784
  {
776
785
  key: 0,
777
- class: normalizeClass(["maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !__props.noRadius }]),
786
+ class: normalizeClass(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !__props.noRadius }]),
778
787
  style: normalizeStyle([sizeStyle.value])
779
788
  },
780
789
  [
@@ -805,8 +814,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
805
814
  };
806
815
  }
807
816
  });
808
- const MazGallery_vue_vue_type_style_index_0_scoped_3710617f_lang = "";
809
- const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3710617f"]]);
817
+ const MazGallery_vue_vue_type_style_index_0_scoped_4e6fbc0c_lang = "";
818
+ const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e6fbc0c"]]);
810
819
  export {
811
820
  MazGallery as default
812
821
  };
package/components/chunks/{MazSpinner-98dd1f9d.mjs → MazSpinner-f1e69f29.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import "../assets/MazSpinner.css";
2
2
  import { defineComponent, openBlock, createElementBlock, normalizeClass, pushScopeId, popScopeId, createElementVNode } from "vue";
3
- import { _ as _export_sfc } from "./MazCard-01b81dd2.mjs";
3
+ import { _ as _export_sfc } from "./MazCard-4331dca0.mjs";
4
4
  const _withScopeId = (n) => (pushScopeId("data-v-c67298ec"), n = n(), popScopeId(), n);
5
5
  const _hoisted_1 = ["width", "height"];
6
6
  const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
package/components/chunks/{MazTransitionExpand-f293b830.mjs → MazTransitionExpand-474b00d4.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import "../assets/MazTransitionExpand.css";
2
2
  import { defineComponent, openBlock, createBlock, TransitionGroup, withCtx, renderSlot, nextTick } from "vue";
3
- import { _ as _export_sfc } from "./MazCard-01b81dd2.mjs";
3
+ import { _ as _export_sfc } from "./MazCard-4331dca0.mjs";
4
4
  const _sfc_main = /* @__PURE__ */ defineComponent({
5
5
  __name: "MazTransitionExpand",
6
6
  setup(__props) {
package/nuxt/index.json CHANGED
@@ -4,5 +4,5 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "3.22.3"
7
+ "version": "3.22.4"
8
8
  }
package/nuxt/types.d.mts CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
- import { } from './index'
2
+ import type { } from './index'
3
3
 
4
4
 
5
5
 
6
6
 
7
- export { MazUiNuxtOptions, default } from './index'
7
+
8
+ export type { MazUiNuxtOptions, default } from './index'
package/nuxt/types.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
- import { } from './index'
2
+ import type { } from './index'
3
3
 
4
4
 
5
5
 
6
6
 
7
- export { MazUiNuxtOptions, default } from './index'
7
+
8
+ export type { MazUiNuxtOptions, default } from './index'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maz-ui",
3
- "version": "3.22.3",
3
+ "version": "3.22.4",
4
4
  "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
5
5
  "author": "Louis Mazel <me@loicmazuel.com>",
6
6
  "main": "./modules/index.mjs",
@@ -93,14 +93,14 @@
93
93
  "@mazui/cli": "latest"
94
94
  },
95
95
  "devDependencies": {
96
- "@babel/core": "^7.23.2",
97
- "@babel/preset-env": "^7.23.2",
98
- "@babel/preset-typescript": "^7.23.2",
96
+ "@babel/core": "^7.23.3",
97
+ "@babel/preset-env": "^7.23.3",
98
+ "@babel/preset-typescript": "^7.23.3",
99
99
  "@nuxt/kit": "^3.8.1",
100
100
  "@nuxt/schema": "^3.8.1",
101
101
  "@types/dropzone": "^5.7.7",
102
102
  "@types/google.maps": "^3.54.7",
103
- "@vitejs/plugin-vue": "^4.4.0",
103
+ "@vitejs/plugin-vue": "^4.4.1",
104
104
  "@vitest/coverage-v8": "^0.34.6",
105
105
  "@vue/compiler-sfc": "^3.3.8",
106
106
  "@vue/eslint-config-prettier": "^8.0.0",
@@ -130,7 +130,7 @@
130
130
  "postcss-nested": "^6.0.0",
131
131
  "postcss-simple-vars": "^7.0.1",
132
132
  "postcss-url": "^10.1.3",
133
- "prettier-plugin-tailwindcss": "^0.5.6",
133
+ "prettier-plugin-tailwindcss": "^0.5.7",
134
134
  "replace-in-file": "^7.0.2",
135
135
  "rimraf": "^5.0.5",
136
136
  "sass": "^1.69.5",
package/types/components/MazGallery.vue.d.ts CHANGED
@@ -2,111 +2,151 @@ import { type PropType } from 'vue';
2
2
  import type { MazGalleryImage } from './types';
3
3
  export type { MazGalleryImage } from './types';
4
4
  declare const _default: import("vue").DefineComponent<{
5
+ /**
6
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
7
+ * */
5
8
  images: {
6
9
  type: PropType<MazGalleryImage[]>;
7
10
  default: () => never[];
8
11
  };
12
+ /** Images count shown (max: 5) */
9
13
  imagesShownCount: {
10
14
  type: NumberConstructor;
11
15
  default: number;
12
16
  };
17
+ /** Remove transparent layer with the remain count (ex: +2) */
13
18
  noRemaining: {
14
19
  type: BooleanConstructor;
15
20
  default: boolean;
16
21
  };
22
+ /** Height of gallery */
17
23
  height: {
18
24
  type: (StringConstructor | NumberConstructor)[];
19
25
  default: number;
20
26
  };
27
+ /** Remove default height */
21
28
  noHeight: {
22
29
  type: BooleanConstructor;
23
30
  default: boolean;
24
31
  };
32
+ /** Width of gallery */
25
33
  width: {
26
34
  type: (StringConstructor | NumberConstructor)[];
27
35
  default: string;
28
36
  };
37
+ /** Remove default width */
29
38
  noWidth: {
30
39
  type: BooleanConstructor;
31
40
  default: boolean;
32
41
  };
42
+ /** Disable the border radius of the gallery */
33
43
  noRadius: {
34
44
  type: BooleanConstructor;
35
45
  default: boolean;
36
46
  };
47
+ /** Disable full size display when clicking on image */
37
48
  noZoom: {
38
49
  type: BooleanConstructor;
39
50
  default: boolean;
40
51
  };
52
+ /** Layer with photography icon when no images is provided */
41
53
  hasEmptyLayer: {
42
54
  type: BooleanConstructor;
43
55
  default: boolean;
44
56
  };
57
+ /** Lazy load image - if false, images are directly loaded */
45
58
  lazy: {
46
59
  type: BooleanConstructor;
47
60
  default: boolean;
48
61
  };
62
+ /** Disable blur effect on image hover */
49
63
  blur: {
50
64
  type: BooleanConstructor;
51
65
  default: boolean;
52
66
  };
67
+ /** Disable scale animation effect on image hover */
53
68
  scale: {
54
69
  type: BooleanConstructor;
55
70
  default: boolean;
56
71
  };
72
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
73
+ separatorColor: {
74
+ type: StringConstructor;
75
+ default: string;
76
+ };
57
77
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
78
+ /**
79
+ * Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
80
+ * */
58
81
  images: {
59
82
  type: PropType<MazGalleryImage[]>;
60
83
  default: () => never[];
61
84
  };
85
+ /** Images count shown (max: 5) */
62
86
  imagesShownCount: {
63
87
  type: NumberConstructor;
64
88
  default: number;
65
89
  };
90
+ /** Remove transparent layer with the remain count (ex: +2) */
66
91
  noRemaining: {
67
92
  type: BooleanConstructor;
68
93
  default: boolean;
69
94
  };
95
+ /** Height of gallery */
70
96
  height: {
71
97
  type: (StringConstructor | NumberConstructor)[];
72
98
  default: number;
73
99
  };
100
+ /** Remove default height */
74
101
  noHeight: {
75
102
  type: BooleanConstructor;
76
103
  default: boolean;
77
104
  };
105
+ /** Width of gallery */
78
106
  width: {
79
107
  type: (StringConstructor | NumberConstructor)[];
80
108
  default: string;
81
109
  };
110
+ /** Remove default width */
82
111
  noWidth: {
83
112
  type: BooleanConstructor;
84
113
  default: boolean;
85
114
  };
115
+ /** Disable the border radius of the gallery */
86
116
  noRadius: {
87
117
  type: BooleanConstructor;
88
118
  default: boolean;
89
119
  };
120
+ /** Disable full size display when clicking on image */
90
121
  noZoom: {
91
122
  type: BooleanConstructor;
92
123
  default: boolean;
93
124
  };
125
+ /** Layer with photography icon when no images is provided */
94
126
  hasEmptyLayer: {
95
127
  type: BooleanConstructor;
96
128
  default: boolean;
97
129
  };
130
+ /** Lazy load image - if false, images are directly loaded */
98
131
  lazy: {
99
132
  type: BooleanConstructor;
100
133
  default: boolean;
101
134
  };
135
+ /** Disable blur effect on image hover */
102
136
  blur: {
103
137
  type: BooleanConstructor;
104
138
  default: boolean;
105
139
  };
140
+ /** Disable scale animation effect on image hover */
106
141
  scale: {
107
142
  type: BooleanConstructor;
108
143
  default: boolean;
109
144
  };
145
+ /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
146
+ separatorColor: {
147
+ type: StringConstructor;
148
+ default: string;
149
+ };
110
150
  }>>, {
111
151
  width: string | number;
112
152
  height: string | number;
@@ -121,5 +161,6 @@ declare const _default: import("vue").DefineComponent<{
121
161
  noZoom: boolean;
122
162
  hasEmptyLayer: boolean;
123
163
  scale: boolean;
164
+ separatorColor: string;
124
165
  }, {}>;
125
166
  export default _default;