@hiogawa/tiny-toast - npm Package Compare versions

Comparing version 0.1.1-pre.1 to 0.1.1-pre.2

./dist/index.js

@@ -48,2 +48,6 @@ // src/utils.ts
 }
+function cls(...args) {
+  return args.filter(Boolean).join(" ");
+}
+var styleAssign = Object.assign;
 
@@ -128,5 +132,120 @@ // src/core.ts
 };
+
+// ../../node_modules/.pnpm/@hiogawa+utils@1.6.1-pre.7/node_modules/@hiogawa/utils/dist/index.js
+function tinyassert(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError(message, tinyassert);
+}
+var TinyAssertionError = class _TinyAssertionError extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if ("captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction ?? _TinyAssertionError);
+    }
+  }
+};
+
+// src/common.ts
+var TOAST_POSITIONS = ["bottom-left", "top-center"];
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "info",
+  "blank",
+  "custom"
+];
+var TOAST_TYPE_ICONS = {
+  // https://remixicon.com/icon/checkbox-circle-fill
+  success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>`,
+  // https://remixicon.com/icon/close-circle-fill
+  error: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>`,
+  // https://remixicon.com/icon/information-fill
+  info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z"></path></svg>`
+};
+var TOAST_TYPE_ICON_COLORS = {
+  success: `#61d345`,
+  error: `#ff4b4b`,
+  info: `#1677ff`
+};
+function slideScaleCollapseTransition({
+  position
+}) {
+  return {
+    enterFrom: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        height: "0"
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        opacity: "0.5",
+        transform: cls(
+          "scale(0.5)",
+          position === "bottom-left" && "translateY(200%)",
+          position === "top-center" && "translateY(-200%)"
+        )
+      });
+    },
+    enterTo: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: el.firstElementChild.clientHeight + "px"
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "1",
+        transform: "scale(1) translateY(0)"
+      });
+    },
+    entered: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "",
+        height: ""
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: ""
+      });
+    },
+    leaveFrom: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.25s ease",
+        height: el.firstElementChild.clientHeight + "px"
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.25s ease",
+        opacity: "1",
+        transform: "scale(1) translateY(0)"
+      });
+    },
+    leaveTo: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: "0"
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "0",
+        transform: cls(
+          "scale(0)",
+          position === "bottom-left" && "translateY(150%)",
+          position === "top-center" && "translateY(-150%)"
+        )
+      });
+    }
+  };
+}
 export {
+  TOAST_POSITIONS,
   TOAST_STEP,
-  ToastManager
+  TOAST_TYPES,
+  TOAST_TYPE_ICONS,
+  TOAST_TYPE_ICON_COLORS,
+  ToastManager,
+  slideScaleCollapseTransition
 };

dist/index.d.ts

@@ -52,2 +52,26 @@ type PauseableTimeoutState = {
 
-export { TOAST_STEP, ToastCoreOptions, ToastItem, ToastManager };
+declare const TOAST_POSITIONS: readonly ["bottom-left", "top-center"];
+type ToastPosition = (typeof TOAST_POSITIONS)[number];
+declare const TOAST_TYPES: readonly ["success", "error", "info", "blank", "custom"];
+type ToastType = (typeof TOAST_TYPES)[number];
+declare const TOAST_TYPE_ICONS: {
+    success: string;
+    error: string;
+    info: string;
+};
+declare const TOAST_TYPE_ICON_COLORS: {
+    success: string;
+    error: string;
+    info: string;
+};
+declare function slideScaleCollapseTransition({ position, }: {
+    position: ToastPosition;
+}): {
+    enterFrom: (el: HTMLElement) => void;
+    enterTo: (el: HTMLElement) => void;
+    entered: (el: HTMLElement) => void;
+    leaveFrom: (el: HTMLElement) => void;
+    leaveTo: (el: HTMLElement) => void;
+};
+
+export { TOAST_POSITIONS, TOAST_STEP, TOAST_TYPES, TOAST_TYPE_ICONS, TOAST_TYPE_ICON_COLORS, ToastCoreOptions, ToastItem, ToastManager, ToastPosition, ToastType, slideScaleCollapseTransition };

dist/index.js

@@ -48,2 +48,6 @@ // src/utils.ts
 }
+function cls(...args) {
+  return args.filter(Boolean).join(" ");
+}
+var styleAssign = Object.assign;
 
@@ -128,5 +132,120 @@ // src/core.ts
 };
+
+// ../../node_modules/.pnpm/@hiogawa+utils@1.6.1-pre.7/node_modules/@hiogawa/utils/dist/index.js
+function tinyassert(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError(message, tinyassert);
+}
+var TinyAssertionError = class _TinyAssertionError extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if ("captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction ?? _TinyAssertionError);
+    }
+  }
+};
+
+// src/common.ts
+var TOAST_POSITIONS = ["bottom-left", "top-center"];
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "info",
+  "blank",
+  "custom"
+];
+var TOAST_TYPE_ICONS = {
+  // https://remixicon.com/icon/checkbox-circle-fill
+  success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>`,
+  // https://remixicon.com/icon/close-circle-fill
+  error: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>`,
+  // https://remixicon.com/icon/information-fill
+  info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z"></path></svg>`
+};
+var TOAST_TYPE_ICON_COLORS = {
+  success: `#61d345`,
+  error: `#ff4b4b`,
+  info: `#1677ff`
+};
+function slideScaleCollapseTransition({
+  position
+}) {
+  return {
+    enterFrom: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        height: "0"
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        opacity: "0.5",
+        transform: cls(
+          "scale(0.5)",
+          position === "bottom-left" && "translateY(200%)",
+          position === "top-center" && "translateY(-200%)"
+        )
+      });
+    },
+    enterTo: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: el.firstElementChild.clientHeight + "px"
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "1",
+        transform: "scale(1) translateY(0)"
+      });
+    },
+    entered: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "",
+        height: ""
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: ""
+      });
+    },
+    leaveFrom: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.25s ease",
+        height: el.firstElementChild.clientHeight + "px"
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.25s ease",
+        opacity: "1",
+        transform: "scale(1) translateY(0)"
+      });
+    },
+    leaveTo: (el) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: "0"
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "0",
+        transform: cls(
+          "scale(0)",
+          position === "bottom-left" && "translateY(150%)",
+          position === "top-center" && "translateY(-150%)"
+        )
+      });
+    }
+  };
+}
 export {
+  TOAST_POSITIONS,
   TOAST_STEP,
-  ToastManager
+  TOAST_TYPES,
+  TOAST_TYPE_ICONS,
+  TOAST_TYPE_ICON_COLORS,
+  ToastManager,
+  slideScaleCollapseTransition
 };

package.json

 {
   "name": "@hiogawa/tiny-toast",
-  "version": "0.1.1-pre.1",
+  "version": "0.1.1-pre.2",
   "type": "module",
@@ -15,5 +15,10 @@ "main": "./dist/index.js",
     "./dist/react": {
-      "import": "./dist/react.js",
-      "require": "./dist/react.cjs",
-      "types": "./dist/react.d.ts"
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./dist/preact": {
+      "import": "./dist/preact/index.js",
+      "require": "./dist/preact/index.cjs",
+      "types": "./dist/preact/index.d.ts"
     }
@@ -35,4 +40,6 @@ },
     "@types/react": "^18.2.14",
+    "preact": "^10.15.1",
     "react": "^18.2.0",
-    "@hiogawa/tiny-transition": "0.0.1-pre.3"
+    "@hiogawa/tiny-transition": "0.0.1-pre.3",
+    "@hiogawa/unocss-preset-antd": "2.2.1-pre.5"
   },
@@ -48,8 +55,6 @@ "peerDependencies": {
   "scripts": {
-    "build": "pnpm run --seq /^build:/",
-    "build:tsup": "tsup",
-    "build:unocss": "unocss dist/react.js dist/react.cjs --write-transformed --out-file dist/react.css",
-    "build:inject-css": "node misc/inject-css.mjs",
+    "dev": "vite --no-clearScreen",
+    "build": "tsup",
     "release": "pnpm publish --no-git-checks --access public"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221576

increased by201.22%

Number of package files

18

increased by50%

Lines of code

6635

increased by258.45%

Worsened metrics

Dev dependency count

7

increased by40%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes