@hiogawa/tiny-toast - npm Package Compare versions

Comparing version 0.1.1-pre.9 to 0.1.1-pre.10

./dist/index.js

@@ -12,3 +12,3 @@ import {
   slideScaleCollapseTransition
-} from "./chunk-4WBKZ5NU.js";
+} from "./chunk-XB36VLM6.js";
 
@@ -859,29 +859,44 @@ // ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.2-pre.3_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-RI43RBO2.js
     },
-    h.div(
-      {
-        style: istyle({
-          position: "absolute",
-          bottom: "0.5rem",
-          left: "0.75rem",
-          display: "flex",
-          flexDirection: "column"
-        })
-      },
-      itemsByPosition.get("bottom-left")?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
-    ),
-    h.div(
-      {
-        style: istyle({
-          position: "absolute",
-          top: "0.5rem",
-          width: "100%",
-          display: "flex",
-          flexDirection: "column-reverse",
-          alignItems: "center"
-        })
-      },
-      itemsByPosition.get("top-center")?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
-    )
+    TOAST_POSITIONS.map((position) => {
+      const items = itemsByPosition.get(position);
+      if (!items) {
+        return h(Fragment, { key: position });
+      }
+      const [y, x] = position.split("-");
+      return h.div(
+        {
+          key: position,
+          style: CONTAINER_POSITION_STYLES.base + CONTAINER_POSITION_STYLES[x] + CONTAINER_POSITION_STYLES[y]
+        },
+        items.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
+      );
+    })
   );
 }
+var CONTAINER_POSITION_STYLES = {
+  base: istyle({
+    display: "flex",
+    position: "absolute"
+  }),
+  bottom: istyle({
+    flexDirection: "column",
+    bottom: "0.5rem"
+  }),
+  top: istyle({
+    flexDirection: "column-reverse",
+    top: "0.5rem"
+  }),
+  left: istyle({
+    left: "0.75rem",
+    alignItems: "flex-start"
+  }),
+  right: istyle({
+    right: "0.75rem",
+    alignItems: "flex-end"
+  }),
+  center: istyle({
+    alignItems: "center",
+    width: "100%"
+  })
+};
 function ToastAnimation({
@@ -939,2 +954,4 @@ toast,
       style: istyle({
+        color: "rgba(0, 0, 0, 0.88)",
+        background: "white",
         display: "flex",
@@ -974,6 +991,8 @@ alignItems: "center",
   };
-  render() {
-    const el = document.createElement("div");
-    el.setAttribute("data-tiny-toast", "");
-    document.body.appendChild(el);
+  render(userEl) {
+    const el = userEl ?? document.createElement("div");
+    if (!userEl) {
+      el.setAttribute("data-tiny-toast", "");
+      document.body.appendChild(el);
+    }
     const root = createRoot(el);
@@ -983,3 +1002,5 @@ root.render(h(ToastContainer, { toast: this }));
       root.unmount();
-      el.remove();
+      if (!userEl) {
+        el.remove();
+      }
     };
@@ -986,0 +1007,0 @@ }

dist/index.d.ts

@@ -1,3 +0,3 @@
-import { T as ToastManager, a as ToastType, b as ToastPosition, c as ToastItem } from './common-299702c5.js';
-export { f as TOAST_POSITIONS, e as TOAST_STEP, g as TOAST_TYPES, h as TOAST_TYPE_ICONS, i as TOAST_TYPE_ICON_COLORS, d as ToastCoreOptions, s as slideScaleCollapseTransition } from './common-299702c5.js';
+import { T as ToastManager, a as ToastType, b as ToastPosition, c as ToastItem } from './common-e333e7f5.js';
+export { f as TOAST_POSITIONS, e as TOAST_STEP, g as TOAST_TYPES, h as TOAST_TYPE_ICONS, i as TOAST_TYPE_ICON_COLORS, d as ToastCoreOptions, s as slideScaleCollapseTransition } from './common-e333e7f5.js';
 
@@ -26,3 +26,3 @@ interface TinyToastData {
     defaultOptions: DefaultOptions;
-    render(): () => void;
+    render(userEl?: HTMLElement): () => void;
     success: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;
@@ -29,0 +29,0 @@ error: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;

dist/index.js

@@ -12,3 +12,3 @@ import {
   slideScaleCollapseTransition
-} from "./chunk-4WBKZ5NU.js";
+} from "./chunk-XB36VLM6.js";
 
@@ -859,29 +859,44 @@ // ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.2-pre.3_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-RI43RBO2.js
     },
-    h.div(
-      {
-        style: istyle({
-          position: "absolute",
-          bottom: "0.5rem",
-          left: "0.75rem",
-          display: "flex",
-          flexDirection: "column"
-        })
-      },
-      itemsByPosition.get("bottom-left")?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
-    ),
-    h.div(
-      {
-        style: istyle({
-          position: "absolute",
-          top: "0.5rem",
-          width: "100%",
-          display: "flex",
-          flexDirection: "column-reverse",
-          alignItems: "center"
-        })
-      },
-      itemsByPosition.get("top-center")?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
-    )
+    TOAST_POSITIONS.map((position) => {
+      const items = itemsByPosition.get(position);
+      if (!items) {
+        return h(Fragment, { key: position });
+      }
+      const [y, x] = position.split("-");
+      return h.div(
+        {
+          key: position,
+          style: CONTAINER_POSITION_STYLES.base + CONTAINER_POSITION_STYLES[x] + CONTAINER_POSITION_STYLES[y]
+        },
+        items.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
+      );
+    })
   );
 }
+var CONTAINER_POSITION_STYLES = {
+  base: istyle({
+    display: "flex",
+    position: "absolute"
+  }),
+  bottom: istyle({
+    flexDirection: "column",
+    bottom: "0.5rem"
+  }),
+  top: istyle({
+    flexDirection: "column-reverse",
+    top: "0.5rem"
+  }),
+  left: istyle({
+    left: "0.75rem",
+    alignItems: "flex-start"
+  }),
+  right: istyle({
+    right: "0.75rem",
+    alignItems: "flex-end"
+  }),
+  center: istyle({
+    alignItems: "center",
+    width: "100%"
+  })
+};
 function ToastAnimation({
@@ -939,2 +954,4 @@ toast,
       style: istyle({
+        color: "rgba(0, 0, 0, 0.88)",
+        background: "white",
         display: "flex",
@@ -974,6 +991,8 @@ alignItems: "center",
   };
-  render() {
-    const el = document.createElement("div");
-    el.setAttribute("data-tiny-toast", "");
-    document.body.appendChild(el);
+  render(userEl) {
+    const el = userEl ?? document.createElement("div");
+    if (!userEl) {
+      el.setAttribute("data-tiny-toast", "");
+      document.body.appendChild(el);
+    }
     const root = createRoot(el);
@@ -983,3 +1002,5 @@ root.render(h(ToastContainer, { toast: this }));
       root.unmount();
-      el.remove();
+      if (!userEl) {
+        el.remove();
+      }
     };
@@ -986,0 +1007,0 @@ }

dist/react/index.d.ts

 import React from 'react';
-import { b as ToastPosition, a as ToastType, c as ToastItem, T as ToastManager, d as ToastCoreOptions } from '../common-299702c5.js';
+import { b as ToastPosition, a as ToastType, c as ToastItem, T as ToastManager, d as ToastCoreOptions } from '../common-e333e7f5.js';
 
@@ -4,0 +4,0 @@ type RenderReactNode = (props: {

dist/react/index.js

@@ -9,3 +9,3 @@ import {
   slideScaleCollapseTransition
-} from "../chunk-4WBKZ5NU.js";
+} from "../chunk-XB36VLM6.js";
 
@@ -12,0 +12,0 @@ // src/react/api.tsx

package.json

 {
   "name": "@hiogawa/tiny-toast",
-  "version": "0.1.1-pre.9",
+  "version": "0.1.1-pre.10",
   "homepage": "https://github.com/hi-ogawa/unocss-preset-antd/tree/main/packages/tiny-toast",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

276959

increased by95.42%

Number of package files

22

increased by69.23%

Lines of code

9255

increased by88.69%

No dependency changes