fix(#19): support HTML content

src/Snackbar.ts

@@ -43,11 +43,13 @@ export function createNotification(options: CreateNotifyOptions) {
     let locationX = potentialLocation.split(' ')[1] || 'right';
     let div = document.createElement('div');
 
-    if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
+    if (!isNotEmptyAndNotNull(options.text) && !isNotEmptyAndNotNull(options.htmlContent))
+      throw new Error('text or htmlContent is required');
 
     return new Promise((resolve, reject) => {
       const props = {
         text: options.text,
+        htmlContent: options.htmlContent,
         level: options.level,
         location: potentialLocation,
         notifyOptions: options.notifyOptions || PluginContext.getPluginOptions()?.defaults?.notify || undefined,
@@ -98,6 +100,6 @@ export function createNotification(options: CreateNotifyOptions) {
   }
 }
 
-function isNotEmptyAndNotNull(value: string): boolean {
+function isNotEmptyAndNotNull(value?: string): boolean {
   return value !== undefined && value !== null && value.trim().length > 0 && value !== '';
 }

src/components/Snackbar.vue

@@ -5,7 +5,11 @@ import { VSnackbar, VLayout } from 'vuetify/lib/components/index.mjs';
 const props = defineProps({
   text: {
     type: String,
-    required: true
+    required: false
+  },
+  htmlContent: {
+    type: String,
+    default: false
   },
   location: {
     type: String,
@@ -46,7 +50,8 @@ function close(){
       :dark="level === 'warning' || level === 'error'"
       @update:model-value="close()"
     >
-      {{text}}
+      <span v-if="text">{{text}}</span>
+      <div v-if="htmlContent" v-html="htmlContent"></div>
     </VSnackbar>
   </VLayout>
 </template>

src/index.d.ts

@@ -59,7 +59,8 @@ export type CreateDialogOptions = {
 };
 
 export type CreateNotifyOptions = {
-  text: string;
+  text?: string;
+  htmlContent?: string;
   level?: Level;
   location?: VSnackbar['$props']['location'];
   notifyOptions?: VSnackbar['$props'];

src/types.ts

@@ -59,7 +59,8 @@ export type CreateDialogOptions = {
 };
 
 export type CreateNotifyOptions = {
-  text: string;
+  text?: string;
+  htmlContent?: string;
   level?: Level;
   location?: VSnackbar['$props']['location'];
   notifyOptions?: VSnackbar['$props'];

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    /* Set the JavaScript language version for emitted JavaScript and include 
+    /* Set the JavaScript language version for emitted JavaScript and include
        compatible library declarations. */
     "target": "ESNext",
     /* Specify what JSX code is generated. */
@@ -46,4 +46,4 @@
     "**/cypress",
     "**/node_modules",
   ]
-}
+}