@resee-movies/nuxt-ux 0.3.1 → 0.4.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -133,6 +133,13 @@ function importModules(nuxt) {
       ...primeOptions?.includeComponents ?? []
     ])
   );
+  nuxt.options.vite.optimizeDeps ??= {};
+  nuxt.options.vite.optimizeDeps.include ??= [];
+  nuxt.options.vite.optimizeDeps.include.push(
+    "primevue/usetoast",
+    "primevue/toasteventbus",
+    "primevue/toastservice"
+  );
   const Primevue = {
     defaults: {
       autoImport: false,
@@ -214,7 +221,10 @@ const module = defineNuxtModule({
     const sources = options.tailwind?.sources?.slice() ?? [];
     const plugins = options.tailwind?.plugins?.slice() ?? [];
     const imports = options.tailwind?.plugins?.slice() ?? [];
-    sources.push(components);
+    const constants = await resolver.resolvePath("./runtime/constants", {
+      extensions: ["ts", "js"]
+    });
+    sources.push(components, constants);
     plugins.push(await resolvePath("@egoist/tailwindcss-icons"));
     imports.push(stylesheet);
     addComponentsDir({ path: components, prefix: options.componentPrefix });

package/dist/runtime/components/Dialog.vue.d.ts

@@ -11,12 +11,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }>, {
     size: "xxs" | "xs" | "sm" | "md" | "lg";
+    closable: boolean;
     showHeaderText: boolean;
     showHeaderStyle: boolean;
     showModalStyle: boolean;
     modal: boolean;
     contentClass: any;
-    closable: boolean;
     dismissableMask: boolean;
     showHeader: boolean;
     position: import("@primevue/core").HintedString<"top" | "center" | "bottom" | "left" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright">;

package/dist/runtime/components/Image.vue

@@ -145,5 +145,5 @@ const altText = computed(() => {
 </script>
 
 <style scoped>
-@reference "tailwindcss";.image{background-color:#fff;overflow:clip;position:relative;width:-moz-max-content;width:max-content;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image .icon{color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
+@reference "tailwindcss";.image{background-color:#fff;overflow:clip;position:relative;width:-moz-fit-content;width:fit-content;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image .icon{color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
 </style>

package/dist/runtime/components/Message.vue

@@ -1,8 +1,12 @@
 <template>
   <PrimeMessage :severity="props.severity" class="message" :pt="passthroughProps">
-    <slot>
-      {{ props.text }}
-    </slot>
+    <template #icon>
+      <Icon :name="props.icon" :size="props.iconSize" />
+    </template>
+
+    <template #default>
+      <slot>{{ props.text }}</slot>
+    </template>
   </PrimeMessage>
 </template>
 
@@ -12,12 +16,15 @@ import { computed } from "vue";
 
 <script setup>
 import PrimeMessage from "primevue/message";
+import Icon from "./Icon.vue";
 const props = defineProps({
   severity: { type: String, required: false },
   text: { type: String, required: false },
   class: { type: String, required: false },
   style: { type: String, required: false },
-  accented: { type: Boolean, required: false }
+  accented: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  iconSize: { type: String, required: false }
 });
 const passthroughProps = computed(() => {
   return {

package/dist/runtime/components/Message.vue.d.ts

@@ -1,10 +1,13 @@
 import type { StatusLevel } from '../types/index.js';
+import type { IconProps } from './Icon.vue.js';
 export interface MessageProps {
     severity?: StatusLevel;
     text?: string;
     class?: string;
     style?: string;
     accented?: boolean;
+    icon?: IconProps['name'];
+    iconSize?: IconProps['size'];
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;

package/dist/runtime/components/NotificationContainer.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import { isString } from "@resee-movies/utilities/strings/is-string";
 import PrimeToast, {} from "primevue/toast";
 import { StatusLevelIcons } from "../constants";
 const passthroughProps = {
@@ -19,9 +20,16 @@ const passthroughProps = {
       props.message?.summary?.trim() ? "has-summary" : void 0
     ]
   }),
-  messageIcon: ({ props }) => ({
-    class: ["icon", StatusLevelIcons[props.message?.severity ?? "default"]]
-  }),
+  messageIcon: ({ props }) => {
+    let iconClassName = StatusLevelIcons[props.message?.severity ?? "default"];
+    if (props.message && "icon" in props.message && isString(props.message.icon)) {
+      iconClassName = props.message.icon;
+    }
+    console.log(iconClassName);
+    return {
+      class: ["icon", iconClassName]
+    };
+  },
   root: { class: "notification-container" },
   messageContent: { class: "content" },
   messageText: { class: "text" },

package/dist/runtime/composables/use-notification.d.ts

@@ -1,17 +1,24 @@
-export type NotificationOptions = {
+import type { ToastServiceMethods } from 'primevue/toastservice';
+import type { StatusLevel } from '../types/index.js';
+export interface NotificationOptions {
     headline?: string;
     closable?: boolean;
-};
-export type UseNotificationReturn = {
-    notify: (message: string, options?: NotificationOptions) => void;
-    notifyInfo: (message: string, options?: NotificationOptions) => void;
-    notifyHelp: (message: string, options?: NotificationOptions) => void;
-    notifySuccess: (message: string, options?: NotificationOptions) => void;
-    notifyWarning: (message: string, options?: NotificationOptions) => void;
-    notifyError: (message: string, options?: NotificationOptions) => void;
-};
+    icon?: string;
+    lifetime?: number;
+}
+export declare class NotificationService {
+    readonly notify: (message: string, options?: NotificationOptions & {
+        severity?: StatusLevel;
+    }) => void;
+    readonly notifyInfo: (message: string, options?: NotificationOptions) => void;
+    readonly notifyHelp: (message: string, options?: NotificationOptions) => void;
+    readonly notifySuccess: (message: string, options?: NotificationOptions) => void;
+    readonly notifyWarning: (message: string, options?: NotificationOptions) => void;
+    readonly notifyError: (message: string, options?: NotificationOptions) => void;
+    constructor(toast: ToastServiceMethods);
+}
 /**
  * Returns a collection of methods for providing user feedback via popup
  * notifications (a.k.a. toast notifications / snackbar notifications).
  */
-export declare function useNotification(): UseNotificationReturn;
+export declare function useNotification(): NotificationService;

package/dist/runtime/composables/use-notification.js

@@ -1,31 +1,31 @@
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
 import { useToast } from "primevue/usetoast";
-const DefaultLifetime = 5e3;
-function createToastMessageOptions(message, status, config) {
-  return {
-    detail: message,
-    severity: status,
-    summary: config?.headline,
-    closable: config?.closable === true,
-    life: config?.closable === true ? void 0 : DefaultLifetime
-  };
-}
-function createToastMessageClosure(toast, status) {
-  const fn = (message, options) => {
-    toast.add(createToastMessageOptions(message, status, options));
-  };
-  Object.defineProperty(fn, "name", {
-    value: `notify${status ?? ""}`
-  });
-  return fn;
+export class NotificationService {
+  notify;
+  notifyInfo;
+  notifyHelp;
+  notifySuccess;
+  notifyWarning;
+  notifyError;
+  constructor(toast) {
+    this.notify = (message, options) => {
+      toast.add({
+        detail: message,
+        severity: options?.severity,
+        summary: options?.headline,
+        closable: options?.closable === true,
+        life: isNumber(options?.lifetime) ? options?.lifetime : 5e3,
+        /* @ts-expect-error - adding custom props to extend functionality */
+        icon: options?.icon
+      });
+    };
+    this.notifyInfo = (message, options) => this.notify(message, { severity: "info", ...options });
+    this.notifyHelp = (message, options) => this.notify(message, { severity: "help", ...options });
+    this.notifySuccess = (message, options) => this.notify(message, { severity: "success", ...options });
+    this.notifyWarning = (message, options) => this.notify(message, { severity: "warn", ...options });
+    this.notifyError = (message, options) => this.notify(message, { severity: "error", ...options });
+  }
 }
 export function useNotification() {
-  const toast = useToast();
-  return {
-    notify: createToastMessageClosure(toast, void 0),
-    notifyInfo: createToastMessageClosure(toast, "info"),
-    notifyHelp: createToastMessageClosure(toast, "help"),
-    notifySuccess: createToastMessageClosure(toast, "success"),
-    notifyWarning: createToastMessageClosure(toast, "warn"),
-    notifyError: createToastMessageClosure(toast, "error")
-  };
+  return new NotificationService(useToast());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"