@signal24/vue-foundation 4.5.0 → 4.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.5.0",
+    "version": "4.6.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "bin": {

package/src/components/index.ts

@@ -6,5 +6,6 @@ import VfSmartSelect from './smart-select.vue';
 
 export * from './alert-helpers';
 export * from './overlay-container';
+export * from './toast-helpers';
 
 export { VfAjaxSelect, VfAlertModal, VfEzSmartSelect, VfModal, VfSmartSelect };

package/src/components/toast-helpers.ts

@@ -0,0 +1,10 @@
+import { createOverlayInjection, removeOverlayInjection } from './overlay-container';
+import Toast, { type IToastOptions } from './toast.vue';
+
+export function showToast(options: IToastOptions) {
+    const injection = createOverlayInjection(Toast, {
+        ...options,
+        callback: () => {}
+    });
+    return () => removeOverlayInjection(injection);
+}

package/src/components/toast.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="vf-toast" :class="className" @click.stop="handleClick">
+        <div class="content">
+            <div class="message">{{ message }}</div>
+            <div v-if="!disableClose" class="close">x</div>
+        </div>
+        <div v-if="durationSecs !== null" class="progress-bar">
+            <div ref="progressInnerEl" class="inner"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+export interface IToastOptions {
+    message: string;
+    className?: string;
+    durationSecs?: number | null;
+    disableClose?: boolean;
+    onClick?: () => void;
+}
+
+const props = defineProps<
+    IToastOptions & {
+        callback: () => void;
+    }
+>();
+
+function handleClick() {
+    if (props.onClick) {
+        props.onClick();
+    } else if (!props.disableClose) {
+        props.callback();
+    }
+}
+
+const progressInnerEl = ref<HTMLElement>();
+if (props.durationSecs !== null) {
+    onMounted(() => {
+        const durationSecs = props.durationSecs ?? 5;
+        progressInnerEl.value?.animate([{ width: '0%' }, { width: '100%' }], {
+            duration: durationSecs * 1000,
+            easing: 'linear'
+        });
+        setTimeout(() => props.callback(), durationSecs * 1000);
+    });
+}
+</script>
+
+<style lang="scss">
+.vf-toast {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.vf-toast .content {
+    display: flex;
+    align-items: center;
+}
+</style>

package/src/helpers/context-menu.ts

@@ -53,7 +53,7 @@ export function showContextMenu(e: MouseEvent, config: ContextMenuConfig) {
         }
 
         if (item.shouldConfirm) {
-            itemEl.addEventListener('click', () => confirmAction(itemEl, item.handler));
+            itemEl.addEventListener('click', e => confirmAction(e, itemEl, item.handler));
         } else {
             itemEl.addEventListener('click', () => item.handler());
         }
@@ -85,7 +85,7 @@ export function showContextMenu(e: MouseEvent, config: ContextMenuConfig) {
         wrapperEl.remove();
     }
 
-    function confirmAction(itemEl: HTMLElement, handler: () => void) {
+    function confirmAction(e: MouseEvent, itemEl: HTMLElement, handler: () => void) {
         if (itemEl.classList.contains('pending-confirm')) {
             return handler();
         }
@@ -106,4 +106,3 @@ export function showContextMenu(e: MouseEvent, config: ContextMenuConfig) {
 }
 
 // TODO: actually de-select text rather than just using CSS to hide its selection
-// TODO: confirm isn't working