@ulu/frontend-vue 0.6.16 → 0.6.18

package/dist/plugins/index.d.ts

@@ -2,5 +2,5 @@ export { default as corePlugin } from './core/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';
+export { default as toastPlugin, useToast, UluToast, UluToastDisplay } from './toast/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/plugins/toast/UluToast.vue.d.ts

@@ -4,10 +4,10 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
-    classes: Record<string, any>;
+    classes: boolean | Function | Record<string, any>;
     toast?: Record<string, any> | undefined;
     $props: {
-        readonly classes?: Record<string, any> | undefined;
+        readonly classes?: boolean | Function | Record<string, any> | undefined;
         readonly toast?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;

package/dist/plugins/toast/UluToast.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluToast.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/UluToast.vue"],"names":[],"mappings":"AAiDA;wBA6PqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;sPAQG"}
+{"version":3,"file":"UluToast.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/UluToast.vue"],"names":[],"mappings":"AAiDA;wBAgRqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;sPAQG"}

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

@@ -1,6 +1,7 @@
-import { createElementBlock as a, openBlock as e, normalizeClass as s, createCommentVNode as o, createElementVNode as u, renderSlot as m, createBlock as f, toDisplayString as i, Fragment as v, renderList as B, createVNode as C, nextTick as g } from "vue";
-import r from "../../components/elements/UluIcon.vue.js";
-const h = ["onClick"], V = {
+import { computed as f, createElementBlock as a, openBlock as s, normalizeClass as e, createCommentVNode as n, createElementVNode as r, renderSlot as m, createBlock as B, toDisplayString as d, Fragment as g, renderList as S, createVNode as h, nextTick as E } from "vue";
+import v from "../../components/elements/UluIcon.vue.js";
+import { mergeClassLookups as L } from "../../utils/props.js";
+const $ = ["onClick"], T = {
   __name: "UluToast",
   props: {
     /**
@@ -11,82 +12,86 @@ const h = ["onClick"], V = {
      * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
      */
     classes: {
-      type: Object,
-      default: () => ({
-        content: "type-small",
-        date: "type-small-x",
-        actions: "type-small-x",
-        action: "button button--small button--outline",
-        closeButton: "button button--icon button--transparent"
-      })
+      type: [Object, Boolean, Function],
+      default: () => ({})
     }
   },
   setup(t) {
-    const d = t, y = (n, c) => {
-      d.toast.close(), g(() => {
-        c(n, d.toast, c);
+    const k = {
+      content: "type-small",
+      date: "type-small-x",
+      actions: "type-small-x",
+      action: "button button--small button--outline",
+      closeButton: "button button--icon button--transparent"
+    }, i = t, o = f(() => L(
+      k,
+      i.classes,
+      i.toast?.classes
+    )), y = (l, c) => {
+      i.toast.close(), E(() => {
+        c(l, i.toast, c);
       });
     };
-    return (n, c) => (e(), a("div", {
-      class: s(["toast", [
+    return (l, c) => (s(), a("div", {
+      class: e(["toast", [
         {
           "toast--persistent": !t.toast.duration
         },
         t.toast?.class
       ]])
     }, [
-      t.toast.icon || n.$slots.icon ? (e(), a("div", {
+      t.toast.icon || l.$slots.icon ? (s(), a("div", {
         key: 0,
-        class: s(["toast__icon", t.classes.icon])
+        class: e(["toast__icon", o.value.icon])
       }, [
-        m(n.$slots, "icon", { toast: t.toast }, () => [
-          t.toast.icon ? (e(), f(r, {
+        m(l.$slots, "icon", { toast: t.toast }, () => [
+          t.toast.icon ? (s(), B(v, {
             key: 0,
             icon: t.toast.icon
-          }, null, 8, ["icon"])) : o("", !0)
+          }, null, 8, ["icon"])) : n("", !0)
         ])
-      ], 2)) : o("", !0),
-      u("div", {
-        class: s(["toast__content", t.classes.content])
+      ], 2)) : n("", !0),
+      r("div", {
+        class: e(["toast__content", o.value.content])
       }, [
-        m(n.$slots, "content", { toast: t.toast }, () => [
-          t.toast.title ? (e(), a("div", {
+        m(l.$slots, "content", { toast: t.toast }, () => [
+          t.toast.title ? (s(), a("div", {
             key: 0,
-            class: s(["toast__header", t.classes.header])
+            class: e(["toast__header", o.value.header])
           }, [
-            u("strong", {
-              class: s(["toast__title", t.classes.title])
-            }, i(t.toast.title), 3),
-            t.toast.date ? (e(), a("span", {
+            r("strong", {
+              class: e(["toast__title", o.value.title])
+            }, d(t.toast.title), 3),
+            t.toast.date ? (s(), a("span", {
               key: 0,
-              class: s(["toast__date", t.classes.date])
-            }, i(t.toast.date), 3)) : o("", !0)
-          ], 2)) : o("", !0),
-          t.toast.description ? (e(), a("div", {
+              class: e(["toast__date", o.value.date])
+            }, d(t.toast.date), 3)) : n("", !0)
+          ], 2)) : n("", !0),
+          t.toast.description ? (s(), a("div", {
             key: 1,
-            class: s(["toast__body", t.classes.body])
-          }, i(t.toast.description), 3)) : o("", !0)
+            class: e(["toast__body", o.value.body])
+          }, d(t.toast.description), 3)) : n("", !0)
         ])
       ], 2),
-      t.toast.actions?.length ? (e(), a("div", {
+      t.toast.actions?.length ? (s(), a("div", {
         key: 1,
-        class: s(["toast__actions", t.classes.actions])
+        class: e(["toast__actions", o.value.actions])
       }, [
-        (e(!0), a(v, null, B(t.toast.actions, (l, k) => (e(), a("button", {
-          key: k,
-          class: s(["toast__action", t.classes.action]),
-          onClick: (b) => y(b, l)
-        }, i(l.label), 11, h))), 128))
-      ], 2)) : o("", !0),
-      u("button", {
-        class: s(["toast__close", t.classes.closeButton]),
-        onClick: c[0] || (c[0] = (...l) => t.toast.close && t.toast.close(...l))
+        (s(!0), a(g, null, S(t.toast.actions, (u, b) => (s(), a("button", {
+          key: b,
+          class: e(["toast__action", o.value.action]),
+          onClick: (C) => y(C, u)
+        }, d(u.label), 11, $))), 128))
+      ], 2)) : n("", !0),
+      r("button", {
+        class: e(["toast__close", o.value.closeButton]),
+        onClick: c[0] || (c[0] = (...u) => t.toast.close && t.toast.close(...u))
       }, [
-        C(r, { icon: "type:close" })
+        h(v, { icon: "type:close" })
       ], 2)
     ], 2));
   }
 };
 export {
-  V as default
+  T as default
 };

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

@@ -2,10 +2,10 @@ declare namespace _default {
     namespace toastOptions {
         let component: import("vue").Raw<{
             new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
-                classes: Record<string, any>;
+                classes: boolean | Function | Record<string, any>;
                 toast?: Record<string, any> | undefined;
                 $props: {
-                    readonly classes?: Record<string, any> | undefined;
+                    readonly classes?: boolean | Function | Record<string, any> | undefined;
                     readonly toast?: Record<string, any> | undefined;
                 };
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, HTMLDivElement, import("vue").ComponentProvideOptions, {
@@ -16,10 +16,10 @@ declare namespace _default {
                 M: {};
                 Defaults: {};
             }, Readonly<{}> & Readonly<{}>, {
-                classes: Record<string, any>;
+                classes: boolean | Function | Record<string, any>;
                 toast?: Record<string, any> | undefined;
                 $props: {
-                    readonly classes?: Record<string, any> | undefined;
+                    readonly classes?: boolean | Function | Record<string, any> | undefined;
                     readonly toast?: Record<string, any> | undefined;
                 };
             }, {}, {}, {}, {}>;
@@ -27,10 +27,10 @@ declare namespace _default {
             __isTeleport?: never;
             __isSuspense?: never;
         } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
-            classes: Record<string, any>;
+            classes: boolean | Function | Record<string, any>;
             toast?: Record<string, any> | undefined;
             $props: {
-                readonly classes?: Record<string, any> | undefined;
+                readonly classes?: boolean | Function | Record<string, any> | undefined;
                 readonly toast?: Record<string, any> | undefined;
             };
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

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

@@ -1,7 +1,9 @@
 import { useToast } from './useToast.js';
+import { default as UluToast } from './UluToast.vue';
+import { default as UluToastDisplay } from './UluToastDisplay.vue';
 /**
  * Install plugin
  */
 export default function install(app: any, userOptions?: {}): void;
-export { useToast };
+export { useToast, UluToast, UluToastDisplay };
 //# 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":"AAQA;;GAEG;AACH,kEASC;;yBAdwB,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/toast/index.js"],"names":[],"mappings":"AAQA;;GAEG;AACH,kEASC;yBAdwB,eAAe;qBAFnB,gBAAgB;4BACT,uBAAuB"}

package/dist/plugins/toast/index.js

@@ -1,9 +1,11 @@
-import { store as i, api as s } from "./store.js";
-import n from "./UluToast.vue.js";
+import { store as s, api as a } from "./store.js";
+import i from "./UluToast.vue.js";
 import l from "./UluToastDisplay.vue.js";
-function e(o, t = {}) {
-  i.setPluginOptions(t?.plugin), i.setToastOptions(t?.toast), o.component("UluToast", n), o.component("UluToastDisplay", l), o.config.globalProperties.$uluToast = s, o.provide("uluToast", s);
+function r(o, t = {}) {
+  s.setPluginOptions(t?.plugin), s.setToastOptions(t?.toast), o.component("UluToast", i), o.component("UluToastDisplay", l), o.config.globalProperties.$uluToast = a, o.provide("uluToast", a);
 }
 export {
-  e as default
+  i as UluToast,
+  l as UluToastDisplay,
+  r as default
 };

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

@@ -10,10 +10,10 @@ export const store: {
     toastOptions: {
         component: import('vue').Raw<{
             new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
-                classes: Record<string, any>;
+                classes: boolean | Function | Record<string, any>;
                 toast?: Record<string, any> | undefined;
                 $props: {
-                    readonly classes?: Record<string, any> | undefined;
+                    readonly classes?: boolean | Function | Record<string, any> | undefined;
                     readonly toast?: Record<string, any> | undefined;
                 };
             }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
@@ -24,10 +24,10 @@ export const store: {
                 M: {};
                 Defaults: {};
             }, Readonly<{}> & Readonly<{}>, {
-                classes: Record<string, any>;
+                classes: boolean | Function | Record<string, any>;
                 toast?: Record<string, any> | undefined;
                 $props: {
-                    readonly classes?: Record<string, any> | undefined;
+                    readonly classes?: boolean | Function | Record<string, any> | undefined;
                     readonly toast?: Record<string, any> | undefined;
                 };
             }, {}, {}, {}, {}>;
@@ -35,10 +35,10 @@ export const store: {
             __isTeleport?: never;
             __isSuspense?: never;
         } & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
-            classes: Record<string, any>;
+            classes: boolean | Function | Record<string, any>;
             toast?: Record<string, any> | undefined;
             $props: {
-                readonly classes?: Record<string, any> | undefined;
+                readonly classes?: boolean | Function | Record<string, any> | undefined;
                 readonly toast?: Record<string, any> | undefined;
             };
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * as dom from './dom.js';
 export * as router from './router.js';
+export * as props from './props.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.js

@@ -1,6 +1,8 @@
 import * as o from "./dom.js";
 import * as r from "./router.js";
+import * as p from "./props.js";
 export {
   o as dom,
+  p as props,
   r as router
 };

package/dist/utils/props.d.ts

@@ -14,4 +14,18 @@ export function isArrayOfObjects(array: any[]): boolean;
  * @param {function} callback - Function called for each match, receiving the prop name
  */
 export function checkDeprecatedProps(props: object, deprecatedNames: string[], callback: Function): void;
+/**
+ * Merges multiple sources of class configuration objects (class lookups).
+ * Sources are evaluated left-to-right (later sources override earlier ones).
+ *
+ * Behavior:
+ * - Object: Merges with the currently resolved classes.
+ * - Boolean (false): Clears the currently resolved classes to an empty object.
+ * - Function: Called with (resolved, defaults). Its return value replaces the resolved classes.
+ *
+ * @param {Object} defaults The base default classes
+ * @param  {...(Object|Boolean|Function)} sources The sources to merge
+ * @returns {Object} The final resolved classes object
+ */
+export function mergeClassLookups(defaults: Object, ...sources: (Object | boolean | Function)[]): Object;
 //# sourceMappingURL=props.d.ts.map

package/dist/utils/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../lib/utils/props.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;GAIG;AACH,wDAEC;AAED;;;;;GAKG;AACH,4CAJW,MAAM,mBACN,MAAM,EAAE,4BASlB"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../lib/utils/props.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;GAIG;AACH,wDAEC;AAED;;;;;GAKG;AACH,4CAJW,MAAM,mBACN,MAAM,EAAE,4BASlB;AAED;;;;;;;;;;;;GAYG;AACH,4CAJW,MAAM,cACF,CAAC,MAAM,qBAAiB,CAAC,EAAA,GAC3B,MAAM,CAclB"}

package/dist/utils/props.js

@@ -1,12 +1,19 @@
-function f(e) {
-  return e.every((r) => typeof r == "object");
+function t(f) {
+  return f.every((r) => typeof r == "object");
 }
-function o(e, r, t) {
-  r.forEach((c) => {
-    e[c] !== void 0 && t(c);
+function c(f, r, o) {
+  r.forEach((e) => {
+    f[e] !== void 0 && o(e);
   });
 }
+function n(f, ...r) {
+  let o = { ...f };
+  for (const e of r)
+    e === !1 ? o = {} : typeof e == "function" ? o = e(o, f) : typeof e == "object" && e !== null && (o = { ...o, ...e });
+  return o;
+}
 export {
-  o as checkDeprecatedProps,
-  f as isArrayOfObjects
+  c as checkDeprecatedProps,
+  t as isArrayOfObjects,
+  n as mergeClassLookups
 };

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, useToast } from "./toast/index.js";
+export { default as toastPlugin, useToast, UluToast, UluToastDisplay } from "./toast/index.js";
 export { default as breakpointsPlugin } from './breakpoints/index.js';

package/lib/plugins/toast/UluToast.vue

@@ -11,46 +11,55 @@
       toast?.class
     ]"
   >
-    <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="classes.icon">
+    <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="resolvedClasses.icon">
       <slot name="icon" :toast="toast">
         <UluIcon v-if="toast.icon" :icon="toast.icon"/>
       </slot>
     </div>
-    <div class="toast__content" :class="classes.content">
+    <div class="toast__content" :class="resolvedClasses.content">
       <slot name="content" :toast="toast">
-        <div v-if="toast.title" class="toast__header" :class="classes.header">
-          <strong class="toast__title" :class="classes.title">
+        <div v-if="toast.title" class="toast__header" :class="resolvedClasses.header">
+          <strong class="toast__title" :class="resolvedClasses.title">
             {{ toast.title }}
           </strong>
-          <span v-if="toast.date" class="toast__date" :class="classes.date">
+          <span v-if="toast.date" class="toast__date" :class="resolvedClasses.date">
             {{ toast.date }}
           </span>
         </div>
-        <div v-if="toast.description" class="toast__body" :class="classes.body">
+        <div v-if="toast.description" class="toast__body" :class="resolvedClasses.body">
           {{ toast.description }}
         </div>
       </slot>
     </div>
-    <div v-if="toast.actions?.length" class="toast__actions" :class="classes.actions">
+    <div v-if="toast.actions?.length" class="toast__actions" :class="resolvedClasses.actions">
       <button 
         v-for="(action, index) in toast.actions"
         :key="index"
         class="toast__action" 
-        :class="classes.action"
+        :class="resolvedClasses.action"
         @click="handleAction($event, action)"
       >
         {{ action.label }}
       </button>
     </div>
-    <button class="toast__close" :class="classes.closeButton" @click="toast.close">
+    <button class="toast__close" :class="resolvedClasses.closeButton" @click="toast.close">
       <UluIcon :icon="'type:close'"/>
     </button>
   </div>
 </template>
 
 <script setup>
-  import { nextTick } from "vue";
+  import { nextTick, computed } from "vue";
   import UluIcon from "../../components/elements/UluIcon.vue";
+  import { mergeClassLookups } from "../../utils/props.js";
+  
+  const DEFAULT_CLASSES = {
+    content: "type-small",
+    date: "type-small-x",
+    actions: "type-small-x",
+    action: "button button--small button--outline",
+    closeButton: "button button--icon button--transparent"
+  };
 
   const props = defineProps({
     /**
@@ -61,17 +70,17 @@
      * Icons for each element { icon, header, content, date, actions, action, closeButton, title, body, closeButton }
      */
     classes: {
-      type: Object,
-      default: () => ({
-        content: "type-small",
-        date: "type-small-x",
-        actions: "type-small-x",
-        action: "button button--small button--outline",
-        closeButton: "button button--icon button--transparent"
-      })
+      type: [Object, Boolean, Function],
+      default: () => ({})
     }
   });
 
+  const resolvedClasses = computed(() => mergeClassLookups(
+    DEFAULT_CLASSES,
+    props.classes,
+    props.toast?.classes
+  ));
+
   const handleAction = (event, action) => {
     props.toast.close();
     nextTick(() => {

package/lib/plugins/toast/index.js

@@ -20,4 +20,4 @@ export default function install(app, userOptions = {}) {
   app.provide("uluToast", api);
 }
 
-export { useToast };
+export { useToast, UluToast, UluToastDisplay };

package/lib/utils/index.js

@@ -2,4 +2,5 @@
  * @module utils
  */
 export * as dom from './dom.js';
-export * as router from './router.js';
+export * as router from './router.js';
+export * as props from './props.js';

package/lib/utils/props.js

@@ -22,4 +22,31 @@ export function checkDeprecatedProps(props, deprecatedNames, callback) {
       callback(name);
     }
   });
+}
+
+/**
+ * Merges multiple sources of class configuration objects (class lookups).
+ * Sources are evaluated left-to-right (later sources override earlier ones).
+ * 
+ * Behavior:
+ * - Object: Merges with the currently resolved classes.
+ * - Boolean (false): Clears the currently resolved classes to an empty object.
+ * - Function: Called with (resolved, defaults). Its return value replaces the resolved classes.
+ * 
+ * @param {Object} defaults The base default classes
+ * @param  {...(Object|Boolean|Function)} sources The sources to merge
+ * @returns {Object} The final resolved classes object
+ */
+export function mergeClassLookups(defaults, ...sources) {
+  let resolved = { ...defaults };
+  for (const src of sources) {
+    if (src === false) {
+      resolved = {};
+    } else if (typeof src === "function") {
+      resolved = src(resolved, defaults);
+    } else if (typeof src === "object" && src !== null) {
+      resolved = { ...resolved, ...src };
+    }
+  }
+  return resolved;
 }

package/package.json

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