@scalar/use-toasts - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

CHANGELOG.md

 # @scalar/use-toasts
 
+## 0.10.2
+
+### Patch Changes
+
+- [#8925](https://github.com/scalar/scalar/pull/8925): chore: source vite-plugin-css-injected-by-js from the shared pnpm catalog
+
 ## 0.10.1
@@ -4,0 +10,0 @@

dist/index.js

@@ -1,14 +0,2 @@
-(function() {
-	//#region \0vite/all-css
-	try {
-		if (typeof document != "undefined") {
-			var elementStyle = document.createElement("style");
-			elementStyle.appendChild(document.createTextNode("/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n/*$vite$:1*/"));
-			document.head.appendChild(elementStyle);
-		}
-	} catch (e) {
-		console.error("vite-plugin-css-injected-by-js", e);
-	}
-	//#endregion
-})();
+(function() {	try {		if (typeof document != "undefined") {			var elementStyle = document.createElement("style");			elementStyle.appendChild(document.createTextNode("/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n/*$vite$:1*/"));			document.head.appendChild(elementStyle);		}	} catch (e) {		console.error("vite-plugin-css-injected-by-js", e);	}})();
 import { createBlock, createCommentVNode, defineComponent, onMounted, openBlock, ref, unref } from "vue";
@@ -15,0 +3,0 @@ import { Toaster, toast } from "vue-sonner";

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/hooks/useToasts.ts","../src/components/ScalarToasts.vue","../src/components/ScalarToasts.vue"],"sourcesContent":["export type ToastOptions = {\n  timeout?: number\n  description?: string\n}\n\nexport type ToastFunction = (message: string, level?: 'warn' | 'info' | 'error', options?: ToastOptions) => void | null\n\nconst state: {\n  toast: ToastFunction\n} = {\n  toast: () => null,\n}\n\nexport function initializeToasts(toastFunction: ToastFunction) {\n  state.toast = toastFunction\n}\n\n/** Emit toasts */\nexport function useToasts() {\n  return {\n    initializeToasts,\n    toast: (message: string, level: 'warn' | 'info' | 'error' = 'info', options: ToastOptions = { timeout: 3000 }) => {\n      state.toast(message, level, options)\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { toast, Toaster } from 'vue-sonner'\n\nimport { useToasts, type ToastOptions } from '../hooks/useToasts'\n\n// The toaster is only required on the client\nconst isClientMounted = ref(false)\nonMounted(() => (isClientMounted.value = true))\n\nconst toastMethods = {\n  success: toast.success,\n  error: toast.error,\n  warn: toast.warning,\n  info: toast,\n}\n\nconst { initializeToasts } = useToasts()\ninitializeToasts((message, level = 'info', options: ToastOptions = {}) => {\n  const toastAction = toastMethods[level] || toastMethods.info\n\n  toastAction(message, {\n    duration: options.timeout || 3000,\n    description: options.description,\n  })\n})\n</script>\n\n<template>\n  <Toaster\n    v-if=\"isClientMounted\"\n    class=\"scalar-toaster\">\n  </Toaster>\n</template>\n\n<style>\n/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { toast, Toaster } from 'vue-sonner'\n\nimport { useToasts, type ToastOptions } from '../hooks/useToasts'\n\n// The toaster is only required on the client\nconst isClientMounted = ref(false)\nonMounted(() => (isClientMounted.value = true))\n\nconst toastMethods = {\n  success: toast.success,\n  error: toast.error,\n  warn: toast.warning,\n  info: toast,\n}\n\nconst { initializeToasts } = useToasts()\ninitializeToasts((message, level = 'info', options: ToastOptions = {}) => {\n  const toastAction = toastMethods[level] || toastMethods.info\n\n  toastAction(message, {\n    duration: options.timeout || 3000,\n    description: options.description,\n  })\n})\n</script>\n\n<template>\n  <Toaster\n    v-if=\"isClientMounted\"\n    class=\"scalar-toaster\">\n  </Toaster>\n</template>\n\n<style>\n/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n</style>\n"],"mappings":";;;AAOA,IAAM,QAEF,EACF,aAAa,MACd;AAED,SAAgB,iBAAiB,eAA8B;AAC7D,OAAM,QAAQ;;;AAIhB,SAAgB,YAAY;AAC1B,QAAO;EACL;EACA,QAAQ,SAAiB,QAAmC,QAAQ,UAAwB,EAAE,SAAS,KAAM,KAAK;AAChH,SAAM,MAAM,SAAS,OAAO,QAAQ;;EAEvC;;;;;;;EEjBH,MAAM,kBAAkB,IAAI,MAAK;AACjC,kBAAiB,gBAAgB,QAAQ,KAAK;EAE9C,MAAM,eAAe;GACnB,SAAS,MAAM;GACf,OAAO,MAAM;GACb,MAAM,MAAM;GACZ,MAAM;GACR;EAEA,MAAM,EAAE,qBAAqB,WAAU;AACvC,oBAAkB,SAAS,QAAQ,QAAQ,UAAwB,EAAE,KAAK;AAGxE,IAFoB,aAAa,UAAU,aAAa,MAE5C,SAAS;IACnB,UAAU,QAAQ,WAAW;IAC7B,aAAa,QAAQ;IACtB,CAAA;IACF;;UAKS,gBAAA,SAAA,WAAA,EADR,YAGU,MAAA,QAAA,EAAA;;IADR,OAAM"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/hooks/useToasts.ts","../src/components/ScalarToasts.vue","../src/components/ScalarToasts.vue"],"sourcesContent":["export type ToastOptions = {\n  timeout?: number\n  description?: string\n}\n\nexport type ToastFunction = (message: string, level?: 'warn' | 'info' | 'error', options?: ToastOptions) => void | null\n\nconst state: {\n  toast: ToastFunction\n} = {\n  toast: () => null,\n}\n\nexport function initializeToasts(toastFunction: ToastFunction) {\n  state.toast = toastFunction\n}\n\n/** Emit toasts */\nexport function useToasts() {\n  return {\n    initializeToasts,\n    toast: (message: string, level: 'warn' | 'info' | 'error' = 'info', options: ToastOptions = { timeout: 3000 }) => {\n      state.toast(message, level, options)\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { toast, Toaster } from 'vue-sonner'\n\nimport { useToasts, type ToastOptions } from '../hooks/useToasts'\n\n// The toaster is only required on the client\nconst isClientMounted = ref(false)\nonMounted(() => (isClientMounted.value = true))\n\nconst toastMethods = {\n  success: toast.success,\n  error: toast.error,\n  warn: toast.warning,\n  info: toast,\n}\n\nconst { initializeToasts } = useToasts()\ninitializeToasts((message, level = 'info', options: ToastOptions = {}) => {\n  const toastAction = toastMethods[level] || toastMethods.info\n\n  toastAction(message, {\n    duration: options.timeout || 3000,\n    description: options.description,\n  })\n})\n</script>\n\n<template>\n  <Toaster\n    v-if=\"isClientMounted\"\n    class=\"scalar-toaster\">\n  </Toaster>\n</template>\n\n<style>\n/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { toast, Toaster } from 'vue-sonner'\n\nimport { useToasts, type ToastOptions } from '../hooks/useToasts'\n\n// The toaster is only required on the client\nconst isClientMounted = ref(false)\nonMounted(() => (isClientMounted.value = true))\n\nconst toastMethods = {\n  success: toast.success,\n  error: toast.error,\n  warn: toast.warning,\n  info: toast,\n}\n\nconst { initializeToasts } = useToasts()\ninitializeToasts((message, level = 'info', options: ToastOptions = {}) => {\n  const toastAction = toastMethods[level] || toastMethods.info\n\n  toastAction(message, {\n    duration: options.timeout || 3000,\n    description: options.description,\n  })\n})\n</script>\n\n<template>\n  <Toaster\n    v-if=\"isClientMounted\"\n    class=\"scalar-toaster\">\n  </Toaster>\n</template>\n\n<style>\n/**\n* We need to be explicit to avoid !important. :)\n*\n* Original: https://github.com/xiaoluoboding/vue-sonner/blob/311ecc8d9a51b619f968e20f4b44992ad8412850/packages/styles.css#L91-L103\n*/\n.scalar-toaster [data-sonner-toast][data-styled='true'] {\n  background: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  padding: 18px;\n  border: none;\n  border-radius: var(--scalar-radius-lg);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-font-medium);\n  box-shadow: var(--scalar-shadow-2);\n}\n.scalar-toaster [data-sonner-toast] [data-icon] {\n  align-self: flex-start;\n  position: relative;\n  top: 2px;\n}\n.scalar-toaster [data-sonner-toast][data-styled='true'][data-expanded='true'] {\n  height: auto;\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='error'] [data-icon] {\n  color: color-mix(in srgb, var(--scalar-color-red) 75%, var(--scalar-color-1));\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] {\n  background: var(--scalar-background-1);\n}\n.scalar-toaster [data-sonner-toast][data-type='warning'] [data-icon] {\n  color: color-mix(\n    in srgb,\n    var(--scalar-color-orange) 90%,\n    var(--scalar-color-1)\n  );\n}\n</style>\n"],"mappings":";;;;AAOA,IAAM,QAEF,EACF,aAAa,MACd;AAED,SAAgB,iBAAiB,eAA8B;AAC7D,OAAM,QAAQ;;;AAIhB,SAAgB,YAAY;AAC1B,QAAO;EACL;EACA,QAAQ,SAAiB,QAAmC,QAAQ,UAAwB,EAAE,SAAS,KAAM,KAAK;AAChH,SAAM,MAAM,SAAS,OAAO,QAAQ;;EAEvC;;;;;;;EEjBH,MAAM,kBAAkB,IAAI,MAAK;AACjC,kBAAiB,gBAAgB,QAAQ,KAAK;EAE9C,MAAM,eAAe;GACnB,SAAS,MAAM;GACf,OAAO,MAAM;GACb,MAAM,MAAM;GACZ,MAAM;GACR;EAEA,MAAM,EAAE,qBAAqB,WAAU;AACvC,oBAAkB,SAAS,QAAQ,QAAQ,UAAwB,EAAE,KAAK;AAGxE,IAFoB,aAAa,UAAU,aAAa,MAE5C,SAAS;IACnB,UAAU,QAAQ,WAAW;IAC7B,aAAa,QAAQ;IACtB,CAAA;IACF;;UAKS,gBAAA,SAAA,WAAA,EADR,YAGU,MAAA,QAAA,EAAA;;IADR,OAAM"}

package.json

@@ -20,3 +20,3 @@ {
   ],
-  "version": "0.10.1",
+  "version": "0.10.2",
   "engines": {
@@ -39,4 +39,4 @@ "node": ">=22"
   "dependencies": {
-    "vue": "^3.5.26",
-    "vue-sonner": "^1.0.3"
+    "vue": "^3.5.30",
+    "vue-sonner": "^1.3.2"
   },
@@ -47,4 +47,5 @@ "devDependencies": {
     "vite": "8.0.0",
-    "vite-plugin-css-injected-by-js": "^3.4.0",
-    "vitest": "4.1.0"
+    "vite-plugin-css-injected-by-js": "^5.0.0",
+    "vitest": "4.1.0",
+    "@scalar/themes": "0.15.3"
   },
@@ -55,5 +56,5 @@ "scripts": {
     "preview": "vite preview",
-    "test": "vitest",
+    "test": "vitest --run",
     "types:check": "vue-tsc --noEmit"
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18900

0.79%

Worsened metrics

Dev dependency count

6

20%

Lines of code

69

-13.75%

Dependency changes

• Updated

  vue@^3.5.30

• Updated

  vue-sonner@^1.3.2