@mekari/pixel3-toast 0.0.21 → 0.0.22-dev.1

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.
@@ -10,7 +10,7 @@ import {
10
10
 
11
11
  // src/toast.tsx
12
12
  import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
13
- import { defineComponent, ref, reactive, computed } from "vue";
13
+ import { defineComponent, ref, reactive, computed, onMounted } from "vue";
14
14
  import { toast as toaster, Toaster } from "vue-sonner";
15
15
  import { usePixelTheme } from "@mekari/pixel3-utils";
16
16
  import { MpIcon } from "@mekari/pixel3-icon";
@@ -41,6 +41,13 @@ var options = ref({});
41
41
  var MpToastManager = defineComponent({
42
42
  name: "MpToastManager",
43
43
  setup() {
44
+ onMounted(() => {
45
+ const rootNode = document.querySelector("[data-sonner-toaster]");
46
+ if (rootNode) {
47
+ rootNode.style.display = "flex";
48
+ rootNode.style.justifyContent = "center";
49
+ }
50
+ });
44
51
  return () => _createVNode(Toaster, _mergeProps(options.value, {
45
52
  "expand": true,
46
53
  "toastOptions": {
@@ -53,10 +60,6 @@ var MpToastManager = defineComponent({
53
60
  });
54
61
  var toastManagerNode = /* @__PURE__ */ __name(() => {
55
62
  const rootNode = document.querySelectorAll("[data-sonner-toaster]");
56
- if (rootNode[0]) {
57
- ;
58
- rootNode[0].style.display = "flex", rootNode[0].style.justifyContent = "center";
59
- }
60
63
  if (rootNode.length === 0) {
61
64
  console.warn("[Pixel]: MpToastManager not found in the tree.");
62
65
  return false;
@@ -75,19 +78,32 @@ var toast = {
75
78
  position = "top-center",
76
79
  duration = 5e3,
77
80
  variant = "success",
78
- render
81
+ render,
82
+ maxWidth
79
83
  } = option || {};
80
84
  if (toastManagerNode()) {
81
85
  options.value = {
82
86
  position
83
87
  };
88
+ if (maxWidth) {
89
+ const toasterNode = document.querySelector("[data-sonner-toaster]");
90
+ if (toasterNode) {
91
+ toasterNode.style.setProperty("--width", maxWidth);
92
+ }
93
+ }
84
94
  toaster.custom(_createVNode(MpToast, {
85
95
  "id": id,
86
96
  "title": title,
87
97
  "variant": variant,
88
98
  "render": render
89
99
  }, null), {
90
- duration
100
+ duration,
101
+ ...maxWidth && {
102
+ style: {
103
+ maxWidth,
104
+ width: maxWidth
105
+ }
106
+ }
91
107
  });
92
108
  }
93
109
  },
package/dist/index.js CHANGED
@@ -133,6 +133,13 @@ var options = (0, import_vue3.ref)({});
133
133
  var MpToastManager = (0, import_vue3.defineComponent)({
134
134
  name: "MpToastManager",
135
135
  setup() {
136
+ (0, import_vue3.onMounted)(() => {
137
+ const rootNode = document.querySelector("[data-sonner-toaster]");
138
+ if (rootNode) {
139
+ rootNode.style.display = "flex";
140
+ rootNode.style.justifyContent = "center";
141
+ }
142
+ });
136
143
  return () => (0, import_vue2.createVNode)(import_vue_sonner.Toaster, (0, import_vue2.mergeProps)(options.value, {
137
144
  "expand": true,
138
145
  "toastOptions": {
@@ -145,10 +152,6 @@ var MpToastManager = (0, import_vue3.defineComponent)({
145
152
  });
146
153
  var toastManagerNode = /* @__PURE__ */ __name(() => {
147
154
  const rootNode = document.querySelectorAll("[data-sonner-toaster]");
148
- if (rootNode[0]) {
149
- ;
150
- rootNode[0].style.display = "flex", rootNode[0].style.justifyContent = "center";
151
- }
152
155
  if (rootNode.length === 0) {
153
156
  console.warn("[Pixel]: MpToastManager not found in the tree.");
154
157
  return false;
@@ -167,19 +170,32 @@ var toast = {
167
170
  position = "top-center",
168
171
  duration = 5e3,
169
172
  variant = "success",
170
- render
173
+ render,
174
+ maxWidth
171
175
  } = option || {};
172
176
  if (toastManagerNode()) {
173
177
  options.value = {
174
178
  position
175
179
  };
180
+ if (maxWidth) {
181
+ const toasterNode = document.querySelector("[data-sonner-toaster]");
182
+ if (toasterNode) {
183
+ toasterNode.style.setProperty("--width", maxWidth);
184
+ }
185
+ }
176
186
  import_vue_sonner.toast.custom((0, import_vue2.createVNode)(MpToast, {
177
187
  "id": id,
178
188
  "title": title,
179
189
  "variant": variant,
180
190
  "render": render
181
191
  }, null), {
182
- duration
192
+ duration,
193
+ ...maxWidth && {
194
+ style: {
195
+ maxWidth,
196
+ width: maxWidth
197
+ }
198
+ }
183
199
  });
184
200
  }
185
201
  },
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpToastManager,
3
3
  toast
4
- } from "./chunk-BWQUDXIY.mjs";
4
+ } from "./chunk-LAEOE734.mjs";
5
5
  import "./chunk-VHOLH4TX.mjs";
6
6
  import "./chunk-VZBXYSQL.mjs";
7
7
  import "./chunk-DUGBXMFI.mjs";
@@ -1 +1 @@
1
- {"inputs":{"src/modules/toast.props.ts":{"bytes":755,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.connects.ts":{"bytes":867,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.hooks.ts":{"bytes":598,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toast.connects.ts","kind":"import-statement","original":"./toast.connects"},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/toast.tsx":{"bytes":3487,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/toast.props.ts","kind":"import-statement","original":"./modules/toast.props"},{"path":"src/modules/toast.hooks.ts","kind":"import-statement","original":"./modules/toast.hooks"},{"path":"./modules/toast.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.types.ts":{"bytes":947,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":222,"imports":[{"path":"src/toast.tsx","kind":"import-statement","original":"./toast"},{"path":"src/modules/toast.types.ts","kind":"import-statement","original":"./modules/toast.types"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue-sonner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":155},"src/toast.tsx":{"bytesInOutput":3130},"src/modules/toast.props.ts":{"bytesInOutput":310},"src/modules/toast.hooks.ts":{"bytesInOutput":440},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":5925},"dist/toast.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue-sonner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/toast.tsx","inputs":{"src/toast.tsx":{"bytesInOutput":3291},"src/modules/toast.props.ts":{"bytesInOutput":310},"src/modules/toast.hooks.ts":{"bytesInOutput":440},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":5914},"dist/modules/toast.connects.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/toast.connects.ts","inputs":{"src/modules/toast.connects.ts":{"bytesInOutput":866}},"bytes":1895},"dist/modules/toast.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/toast.hooks.ts","inputs":{"src/modules/toast.hooks.ts":{"bytesInOutput":585},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":2376},"dist/modules/toast.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toast.props.ts","inputs":{"src/modules/toast.props.ts":{"bytesInOutput":459}},"bytes":1393},"dist/modules/toast.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toast.types.ts","inputs":{"src/modules/toast.types.ts":{"bytesInOutput":82}},"bytes":784}}}
1
+ {"inputs":{"src/modules/toast.props.ts":{"bytes":755,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.connects.ts":{"bytes":867,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.hooks.ts":{"bytes":598,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toast.connects.ts","kind":"import-statement","original":"./toast.connects"},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/toast.tsx":{"bytes":3946,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/toast.props.ts","kind":"import-statement","original":"./modules/toast.props"},{"path":"src/modules/toast.hooks.ts","kind":"import-statement","original":"./modules/toast.hooks"},{"path":"./modules/toast.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.types.ts":{"bytes":968,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":222,"imports":[{"path":"src/toast.tsx","kind":"import-statement","original":"./toast"},{"path":"src/modules/toast.types.ts","kind":"import-statement","original":"./modules/toast.types"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue-sonner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":155},"src/toast.tsx":{"bytesInOutput":3593},"src/modules/toast.props.ts":{"bytesInOutput":310},"src/modules/toast.hooks.ts":{"bytesInOutput":440},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":6388},"dist/toast.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue-sonner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/toast.tsx","inputs":{"src/toast.tsx":{"bytesInOutput":3754},"src/modules/toast.props.ts":{"bytesInOutput":310},"src/modules/toast.hooks.ts":{"bytesInOutput":440},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":6377},"dist/modules/toast.connects.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/toast.connects.ts","inputs":{"src/modules/toast.connects.ts":{"bytesInOutput":866}},"bytes":1895},"dist/modules/toast.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/toast.hooks.ts","inputs":{"src/modules/toast.hooks.ts":{"bytesInOutput":585},"src/modules/toast.connects.ts":{"bytesInOutput":704}},"bytes":2376},"dist/modules/toast.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toast.props.ts","inputs":{"src/modules/toast.props.ts":{"bytesInOutput":459}},"bytes":1393},"dist/modules/toast.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toast.types.ts","inputs":{"src/modules/toast.types.ts":{"bytesInOutput":82}},"bytes":784}}}
@@ -1 +1 @@
1
- {"inputs":{"src/modules/toast.props.ts":{"bytes":755,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.connects.ts":{"bytes":867,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.hooks.ts":{"bytes":598,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toast.connects.ts","kind":"import-statement","original":"./toast.connects"},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/toast.tsx":{"bytes":3487,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/toast.props.ts","kind":"import-statement","original":"./modules/toast.props"},{"path":"src/modules/toast.hooks.ts","kind":"import-statement","original":"./modules/toast.hooks"},{"path":"./modules/toast.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.types.ts":{"bytes":947,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":222,"imports":[{"path":"src/toast.tsx","kind":"import-statement","original":"./toast"},{"path":"src/modules/toast.types.ts","kind":"import-statement","original":"./modules/toast.types"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-BWQUDXIY.mjs","kind":"import-statement"},{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"dist/chunk-IDFCRJI7.mjs","kind":"import-statement"}],"exports":["MpToastManager","toast"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":259},"dist/toast.mjs":{"imports":[{"path":"dist/chunk-BWQUDXIY.mjs","kind":"import-statement"},{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpToastManager","toast"],"entryPoint":"src/toast.tsx","inputs":{},"bytes":228},"dist/chunk-BWQUDXIY.mjs":{"imports":[{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true}],"exports":["MpToastManager","toast"],"inputs":{"src/toast.tsx":{"bytesInOutput":2903}},"bytes":3113},"dist/modules/toast.connects.mjs":{"imports":[{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["toastConnect"],"entryPoint":"src/modules/toast.connects.ts","inputs":{},"bytes":115},"dist/modules/toast.hooks.mjs":{"imports":[{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useToast"],"entryPoint":"src/modules/toast.hooks.ts","inputs":{},"bytes":139},"dist/chunk-VHOLH4TX.mjs":{"imports":[{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useToast"],"inputs":{"src/modules/toast.hooks.ts":{"bytesInOutput":379}},"bytes":538},"dist/chunk-VZBXYSQL.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["toastConnect"],"inputs":{"src/modules/toast.connects.ts":{"bytesInOutput":666}},"bytes":777},"dist/modules/toast.props.mjs":{"imports":[{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["toastProps"],"entryPoint":"src/modules/toast.props.ts","inputs":{},"bytes":111},"dist/chunk-DUGBXMFI.mjs":{"imports":[],"exports":["toastProps"],"inputs":{"src/modules/toast.props.ts":{"bytesInOutput":310}},"bytes":366},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/toast.types.mjs":{"imports":[{"path":"dist/chunk-IDFCRJI7.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/toast.types.ts","inputs":{},"bytes":32},"dist/chunk-IDFCRJI7.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/toast.types.ts":{"bytesInOutput":0}},"bytes":0}}}
1
+ {"inputs":{"src/modules/toast.props.ts":{"bytes":755,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.connects.ts":{"bytes":867,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.hooks.ts":{"bytes":598,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toast.connects.ts","kind":"import-statement","original":"./toast.connects"},{"path":"./toast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/toast.tsx":{"bytes":3946,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/toast.props.ts","kind":"import-statement","original":"./modules/toast.props"},{"path":"src/modules/toast.hooks.ts","kind":"import-statement","original":"./modules/toast.hooks"},{"path":"./modules/toast.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/toast.types.ts":{"bytes":968,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":222,"imports":[{"path":"src/toast.tsx","kind":"import-statement","original":"./toast"},{"path":"src/modules/toast.types.ts","kind":"import-statement","original":"./modules/toast.types"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-LAEOE734.mjs","kind":"import-statement"},{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"dist/chunk-IDFCRJI7.mjs","kind":"import-statement"}],"exports":["MpToastManager","toast"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":259},"dist/toast.mjs":{"imports":[{"path":"dist/chunk-LAEOE734.mjs","kind":"import-statement"},{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpToastManager","toast"],"entryPoint":"src/toast.tsx","inputs":{},"bytes":228},"dist/chunk-LAEOE734.mjs":{"imports":[{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue-sonner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true}],"exports":["MpToastManager","toast"],"inputs":{"src/toast.tsx":{"bytesInOutput":3360}},"bytes":3570},"dist/modules/toast.connects.mjs":{"imports":[{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["toastConnect"],"entryPoint":"src/modules/toast.connects.ts","inputs":{},"bytes":115},"dist/modules/toast.hooks.mjs":{"imports":[{"path":"dist/chunk-VHOLH4TX.mjs","kind":"import-statement"},{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useToast"],"entryPoint":"src/modules/toast.hooks.ts","inputs":{},"bytes":139},"dist/chunk-VHOLH4TX.mjs":{"imports":[{"path":"dist/chunk-VZBXYSQL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useToast"],"inputs":{"src/modules/toast.hooks.ts":{"bytesInOutput":379}},"bytes":538},"dist/chunk-VZBXYSQL.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["toastConnect"],"inputs":{"src/modules/toast.connects.ts":{"bytesInOutput":666}},"bytes":777},"dist/modules/toast.props.mjs":{"imports":[{"path":"dist/chunk-DUGBXMFI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["toastProps"],"entryPoint":"src/modules/toast.props.ts","inputs":{},"bytes":111},"dist/chunk-DUGBXMFI.mjs":{"imports":[],"exports":["toastProps"],"inputs":{"src/modules/toast.props.ts":{"bytesInOutput":310}},"bytes":366},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/toast.types.mjs":{"imports":[{"path":"dist/chunk-IDFCRJI7.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/toast.types.ts","inputs":{},"bytes":32},"dist/chunk-IDFCRJI7.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/toast.types.ts":{"bytesInOutput":0}},"bytes":0}}}
@@ -13,6 +13,7 @@ interface ToastProps {
13
13
  position?: ToastPosition;
14
14
  duration?: number;
15
15
  render?: () => void;
16
+ maxWidth?: string;
16
17
  }
17
18
  type ToastDefinedContext = Optional<ToastProps, 'id'>;
18
19
  interface ToastApiMachine<T extends PropTypes = PropTypes> {
@@ -13,6 +13,7 @@ interface ToastProps {
13
13
  position?: ToastPosition;
14
14
  duration?: number;
15
15
  render?: () => void;
16
+ maxWidth?: string;
16
17
  }
17
18
  type ToastDefinedContext = Optional<ToastProps, 'id'>;
18
19
  interface ToastApiMachine<T extends PropTypes = PropTypes> {
package/dist/toast.js CHANGED
@@ -131,6 +131,13 @@ var options = (0, import_vue3.ref)({});
131
131
  var MpToastManager = (0, import_vue3.defineComponent)({
132
132
  name: "MpToastManager",
133
133
  setup() {
134
+ (0, import_vue3.onMounted)(() => {
135
+ const rootNode = document.querySelector("[data-sonner-toaster]");
136
+ if (rootNode) {
137
+ rootNode.style.display = "flex";
138
+ rootNode.style.justifyContent = "center";
139
+ }
140
+ });
134
141
  return () => (0, import_vue2.createVNode)(import_vue_sonner.Toaster, (0, import_vue2.mergeProps)(options.value, {
135
142
  "expand": true,
136
143
  "toastOptions": {
@@ -143,10 +150,6 @@ var MpToastManager = (0, import_vue3.defineComponent)({
143
150
  });
144
151
  var toastManagerNode = /* @__PURE__ */ __name(() => {
145
152
  const rootNode = document.querySelectorAll("[data-sonner-toaster]");
146
- if (rootNode[0]) {
147
- ;
148
- rootNode[0].style.display = "flex", rootNode[0].style.justifyContent = "center";
149
- }
150
153
  if (rootNode.length === 0) {
151
154
  console.warn("[Pixel]: MpToastManager not found in the tree.");
152
155
  return false;
@@ -165,19 +168,32 @@ var toast = {
165
168
  position = "top-center",
166
169
  duration = 5e3,
167
170
  variant = "success",
168
- render
171
+ render,
172
+ maxWidth
169
173
  } = option || {};
170
174
  if (toastManagerNode()) {
171
175
  options.value = {
172
176
  position
173
177
  };
178
+ if (maxWidth) {
179
+ const toasterNode = document.querySelector("[data-sonner-toaster]");
180
+ if (toasterNode) {
181
+ toasterNode.style.setProperty("--width", maxWidth);
182
+ }
183
+ }
174
184
  import_vue_sonner.toast.custom((0, import_vue2.createVNode)(MpToast, {
175
185
  "id": id,
176
186
  "title": title,
177
187
  "variant": variant,
178
188
  "render": render
179
189
  }, null), {
180
- duration
190
+ duration,
191
+ ...maxWidth && {
192
+ style: {
193
+ maxWidth,
194
+ width: maxWidth
195
+ }
196
+ }
181
197
  });
182
198
  }
183
199
  },
package/dist/toast.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpToastManager,
3
3
  toast
4
- } from "./chunk-BWQUDXIY.mjs";
4
+ } from "./chunk-LAEOE734.mjs";
5
5
  import "./chunk-VHOLH4TX.mjs";
6
6
  import "./chunk-VZBXYSQL.mjs";
7
7
  import "./chunk-DUGBXMFI.mjs";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-toast",
3
3
  "description": "Mekari Pixel 3 | Toast component is used to show dynamic notifications and alerts to user",
4
- "version": "0.0.21",
4
+ "version": "0.0.22-dev.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
@@ -9,7 +9,7 @@
9
9
  ],
10
10
  "dependencies": {
11
11
  "vue-sonner": "^1.0.2",
12
- "@mekari/pixel3-icon": "0.1.1",
12
+ "@mekari/pixel3-icon": "0.1.2-dev.0",
13
13
  "@mekari/pixel3-utils": "0.1.0",
14
14
  "@mekari/pixel3-styled-system": "0.2.0"
15
15
  },