@ulu/frontend-vue 0.6.13 → 0.6.15

package/dist/plugins/index.d.ts

@@ -1,6 +1,6 @@
 export { default as corePlugin } from './core/index.js';
-export { default as toastPlugin } from './toast/index.js';
 export { default as breakpointsPlugin } from './breakpoints/index.js';
 export { default as popoversPlugin, useTooltip, useTooltipFollow } from './popovers/index.js';
 export { default as modalsPlugin, useModals } from './modals/index.js';
+export { default as toastPlugin, useToast } from './toast/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/plugins/toast/UluToastDisplay.vue.js

@@ -1,23 +1,22 @@
-import { computed as i, createBlock as a, openBlock as e, Teleport as p, unref as s, createVNode as m, TransitionGroup as u, normalizeClass as _, withCtx as d, createElementBlock as f, Fragment as k, renderList as T, resolveDynamicComponent as g } from "vue";
+import { computed as i, createBlock as r, openBlock as e, Teleport as p, unref as s, createVNode as u, TransitionGroup as m, normalizeClass as _, withCtx as d, createElementBlock as f, Fragment as k, renderList as T, resolveDynamicComponent as g } from "vue";
 import { store as v } from "./store.js";
-/* empty css                     */
-const h = {
+const C = {
   __name: "UluToastDisplay",
   setup(x) {
     const { toasts: c, pluginOptions: o } = v, l = i(() => {
       const { position: n } = o;
-      return n.map((r) => `toast-container--${r}`);
+      return n.map((a) => `toast-container--${a}`);
     });
-    return (n, r) => (e(), a(p, {
+    return (n, a) => (e(), r(p, {
       to: s(o).teleportTo
     }, [
-      m(u, {
+      u(m, {
         class: _(["toast-container", l.value]),
         name: "toast-animation",
         tag: "div"
       }, {
         default: d(() => [
-          (e(!0), f(k, null, T(s(c), (t) => (e(), a(g(t.component), {
+          (e(!0), f(k, null, T(s(c), (t) => (e(), r(g(t.component), {
             key: t.uid,
             toast: t
           }, null, 8, ["toast"]))), 128))
@@ -28,5 +27,5 @@ const h = {
   }
 };
 export {
-  h as default
+  C as default
 };

package/dist/plugins/toast/index.d.ts

@@ -1,5 +1,7 @@
+import { useToast } from './useToast.js';
 /**
  * Install plugin
  */
 export default function install(app: any, userOptions?: {}): void;
+export { useToast };
 //# sourceMappingURL=index.d.ts.map

package/dist/plugins/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/index.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,kEASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/index.js"],"names":[],"mappings":"AAQA;;GAEG;AACH,kEASC;;yBAdwB,eAAe"}

package/dist/plugins/toast/useToast.js

@@ -0,0 +1,10 @@
+import { inject as o } from "vue";
+const n = () => {
+  const t = o("uluToast");
+  if (!t)
+    throw new Error("Toast plugin not installed");
+  return t;
+};
+export {
+  n as useToast
+};

package/lib/plugins/index.js

@@ -8,5 +8,5 @@
 export { default as corePlugin } from './core/index.js';
 export { default as popoversPlugin, useTooltip, useTooltipFollow } from './popovers/index.js';
 export { default as modalsPlugin, useModals } from './modals/index.js';
-export { default as toastPlugin } from './toast/index.js';
+export { default as toastPlugin, useToast } from "./toast/index.js";
 export { default as breakpointsPlugin } from './breakpoints/index.js';

package/lib/plugins/toast/UluToastDisplay.vue

@@ -26,21 +26,4 @@
     const { position } = pluginOptions;
     return position.map(p => `toast-container--${ p }`);
   });
-</script>
-
-<style lang="css">
-  .toast-animation-move, 
-  .toast-animation-enter-active,
-  .toast-animation-leave-active {
-    transition: all 0.3s ease;
-  }
-  .toast-animation-enter-from,
-  .toast-animation-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-  .toast-animation-leave-active {
-    position: absolute;
-    width: 100%;
-  }
-</style>
+</script>

package/lib/plugins/toast/_toast.scss

@@ -180,18 +180,18 @@ $config: (
     }
   }
 
-  // Vue animation
-  #{ $prefix }--animation-move, 
-  #{ $prefix }--animation-enter-active,
-  #{ $prefix }--animation-leave-active {
+  // Vue transition group animation on container
+  .toast-animation-move, 
+  .toast-animation-enter-active,
+  .toast-animation-leave-active {
     transition: all 0.3s ease;
   }
-  #{ $prefix }--animation-enter-from,
-  #{ $prefix }--animation-leave-to {
+  .toast-animation-enter-from,
+  .toast-animation-leave-to {
     opacity: 0;
     transform: translateX(30px);
   }
-  #{ $prefix }--animation-leave-active {
+  .toast-animation-leave-active {
     position: absolute;
     width: 100%;
   }

package/lib/plugins/toast/index.js

@@ -4,6 +4,7 @@
 import { store, api } from "./store.js";
 import UluToast from "./UluToast.vue";
 import UluToastDisplay from "./UluToastDisplay.vue";
+import { useToast } from "./useToast.js";
 
 /**
  * Install plugin
@@ -16,5 +17,7 @@ export default function install(app, userOptions = {}) {
   app.component("UluToastDisplay", UluToastDisplay);
 
   app.config.globalProperties.$uluToast = api;
-  app.provide('uluToast', api);
-}
+  app.provide("uluToast", api);
+}
+
+export { useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [