@signal24/vue-foundation 4.25.7 → 4.26.0

package/demo/components/demo-root.vue

@@ -6,15 +6,21 @@
         </select>
 
         <DemoVfSmartSelect v-if="selectedDemo === 'VfSmartSelect'" />
+        <DemoVfAlertModal v-else-if="selectedDemo === 'VfAlertModal'" />
+
+        <OverlayContainer />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { OverlayContainer } from '@/components';
+
+import DemoVfAlertModal from './demo-vf-alert-modal.vue';
 import DemoVfSmartSelect from './demo-vf-smart-select.vue';
 
-const demos = ['VfSmartSelect'] as const;
+const demos = ['VfSmartSelect', 'VfAlertModal'] as const;
 const selectedDemo = ref<(typeof demos)[number] | null>();
 </script>
 

package/demo/components/demo-vf-alert-modal.vue

@@ -0,0 +1,36 @@
+<template>
+    <div id="demo-vf-alert-modal">
+        <button @click="showAlertDemo">Show Alert Modal</button>
+        <button @click="showWaitDemo">Show Wait Modal</button>
+        <button @click="showMutableWaitDemo">Show Mutable Wait Modal</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { showAlert, showMutableWait, showWait } from '@/components';
+import { sleepSecs } from '@/helpers';
+
+async function showAlertDemo() {
+    await showAlert({
+        title: 'Alert Modal',
+        message: 'This is a simple alert modal.'
+    });
+    console.log('Alert modal closed');
+}
+
+async function showWaitDemo() {
+    const dismiss = showWait('Wait Demo', 'Waiting 1 second...');
+    await sleepSecs(1);
+    dismiss();
+}
+
+async function showMutableWaitDemo() {
+    const wait = showMutableWait({
+        message: 'Waiting 1 second...'
+    });
+    await sleepSecs(1);
+    wait.update('Another second...');
+    await sleepSecs(1);
+    wait.dismiss();
+}
+</script>

package/demo/components/demo-vf-smart-select.vue

@@ -68,6 +68,24 @@
 
             Selected value: {{ selectedCreateOption ?? '-' }}
         </div>
+
+        <div>
+            <VfSmartSelect v-model="selectedLoadedOption" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
+
+            Selected value: {{ selectedLoadedOption ?? '-' }}
+        </div>
+
+        <div>
+            <VfSmartSelect v-model="selectedLoadedOption2" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
+
+            Selected value: {{ selectedLoadedOption2 ?? '-' }}
+        </div>
+
+        <div>
+            <VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" />
+
+            Selected value: {{ selectedLoadedOption3 ?? '-' }}
+        </div>
     </div>
 </template>
 
@@ -76,6 +94,7 @@ import { cloneDeep, compact } from 'lodash';
 import { computed, onMounted, ref } from 'vue';
 
 import VfSmartSelect from '@/components/vf-smart-select.vue';
+import { sleepSecs } from '@/helpers';
 
 interface IOption {
     label: string;
@@ -104,6 +123,9 @@ const selectedDelayedOption1 = ref<IOption | null>(options[1]);
 const selectedDelayedOption2 = ref<string | null>('2');
 const selectedDelayedOption3 = ref<string | null>('19'); // intentionally invalid value
 const selectedCreateOption = ref<string | null>(null);
+const selectedLoadedOption = ref<string | null>(null);
+const selectedLoadedOption2 = ref<string | null>('5');
+const selectedLoadedOption3 = ref<IOption | null>({ value: '5', label: 'Option 5', group: 'Set 1' });
 
 const createdOptionTitle = ref<string>();
 const createOptions = computed(() =>
@@ -114,6 +136,11 @@ function setDelayedOptions() {
     delayedOptions.value = cloneDeep(options);
 }
 
+async function loadOptions() {
+    await sleepSecs(0.25);
+    return [...options];
+}
+
 function createOption(name: string) {
     createdOptionTitle.value = name;
     selectedCreateOption.value = 'new';

package/demo/index.ts

@@ -1,10 +1,12 @@
 import { createApp } from 'vue';
 
 import { configureVf } from '@/config';
+import { installVf } from '@/index';
 
 import DemoRoot from './components/demo-root.vue';
 
 const app = createApp(DemoRoot);
+installVf(app);
 configureVf({});
 
 app.mount(document.body);

package/dist/demo/components/demo-vf-alert-modal.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/components/alert-helpers.d.ts

@@ -16,4 +16,11 @@ export declare function showConfirmDestroy(options: IAlertOptions): Promise<bool
 export declare function showWait(title: string, message: string): () => void;
 export declare function showWait(message: string): () => void;
 export declare function showWait(options: IAlertOptions): () => void;
+interface IMutableWait {
+    update: (message: string) => void;
+    dismiss: () => void;
+}
+export declare function showMutableWait(title: string, message: string): IMutableWait;
+export declare function showMutableWait(message: string): IMutableWait;
+export declare function showMutableWait(options: IAlertOptions): IMutableWait;
 export {};

package/dist/src/components/overlay-container.d.ts

@@ -49,4 +49,5 @@ export declare function dismissOverlayInjectionByVnode(vnode: VNode): boolean;
 export declare function dismissOverlayInjectionById(id: string): boolean;
 export declare function removeOverlayInjection(injection: OverlayInjection<any, any>): void;
 export declare function presentOverlay<C extends OverlayComponent, R extends ComponentReturn<C>>(component: C, props: Omit<OverlayComponentProps<C>, 'callback'>, options?: OverlayOptions<C, R>): Promise<R | undefined>;
+export declare function updateOverlayProps<C extends OverlayComponent>(injection: OverlayInjection<C, any>, props: Partial<Omit<OverlayComponentProps<C>, 'callback'>>): Promise<void>;
 export {};