feat(programmatic): add programmatic instance count() function (#1161)

packages/oruga/src/components/loading/index.ts

@@ -9,7 +9,7 @@ import {
 } from "@/utils/plugins";
 
 /** export loading specific types */
-// no types to export here
+export type { LoadingProgrammaticOptions } from "./useLoadingProgrammatic";
 
 /** export loading plugin */
 export default {

packages/oruga/src/components/loading/useLoadingProgrammatic.ts

@@ -20,13 +20,17 @@ declare module "../../index" {
 const instances = new InstanceRegistry<ComponentInternalInstance>();
 
 /** useLoadingProgrammatic composable options */
-type LoadingProgrammaticOptions = Readonly<Omit<LoadingProps, "label">> & {
+export type LoadingProgrammaticOptions = Readonly<
+    Omit<LoadingProps, "label">
+> & {
     label?: string | Array<unknown>;
 } & PublicProgrammaticComponentOptions;
 
 const useLoadingProgrammatic = {
+    /** Returns the number of registered active instances. */
+    count: instances.count,
     /**
-     * create a new programmatic modal component
+     * Create a new programmatic modal component instance.
      * @param options loading label string or loading component props object
      * @param target specify a target the component get rendered into
      * @returns ProgrammaticExpose
@@ -64,11 +68,11 @@ const useLoadingProgrammatic = {
             slot,
         );
     },
-    /** close the last registred instance in the loading programmatic instance registry */
+    /** Close the last registred instance in the loading programmatic instance registry. */
     close(...args: unknown[]): void {
         instances.last()?.exposed?.close(...args);
     },
-    /** close all instances in the programmatic loading instance registry */
+    /** Close all instances in the programmatic loading instance registry. */
     closeAll(...args: unknown[]): void {
         instances.walk((entry) => entry.exposed?.close(...args));
     },

packages/oruga/src/components/modal/index.ts

@@ -9,7 +9,7 @@ import {
 } from "@/utils/plugins";
 
 /** export modal specific types */
-// no types to export here
+export type { ModalProgrammaticOptions } from "./useModalProgrammatic";
 
 /** export modal plugin */
 export default {

packages/oruga/src/components/modal/useModalProgrammatic.ts

@@ -24,15 +24,17 @@ declare module "../../index" {
 const instances = new InstanceRegistry<ComponentInternalInstance>();
 
 /** useModalProgrammatic composable options */
-type ModalProgrammaticOptions<C extends Component> = Readonly<
+export type ModalProgrammaticOptions<C extends Component> = Readonly<
     Omit<ModalProps<C>, "content">
 > & {
     content?: string | Array<unknown>;
 } & PublicProgrammaticComponentOptions;
 
 const useModalProgrammatic = {
+    /** Returns the number of registered active instances. */
+    count: instances.count,
     /**
-     * create a new programmatic modal component
+     * Create a new programmatic modal component instance.
      * @param options modal content string or modal component props object
      * @param target specify a target the component get rendered into
      * @returns ProgrammaticExpose
@@ -69,11 +71,11 @@ const useModalProgrammatic = {
             slot,
         );
     },
-    /** close the last registred instance in the modal programmatic instance registry */
+    /** Close the last registred instance in the modal programmatic instance registry. */
     close(...args: unknown[]): void {
         instances.last()?.exposed?.close(...args);
     },
-    /** close all instances in the programmatic modal instance registry */
+    /** Close all instances in the programmatic modal instance registry. */
     closeAll(...args: unknown[]): void {
         instances.walk((entry) => entry.exposed?.close(...args));
     },

packages/oruga/src/components/notification/index.ts

@@ -9,7 +9,7 @@ import {
 } from "@/utils/plugins";
 
 /** export notification specific types */
-// no types to export here
+export type { NotificationProgrammaticOptions } from "./useNotificationProgrammatic";
 
 /** export notification plugin */
 export default {

packages/oruga/src/components/notification/useNotificationProgrammatic.ts

@@ -21,7 +21,7 @@ declare module "../../index" {
 const instances = new InstanceRegistry<ComponentInternalInstance>();
 
 /** useNotificationProgrammatic composable options */
-type NotificationProgrammaticOptions<C extends Component> = Readonly<
+export type NotificationProgrammaticOptions<C extends Component> = Readonly<
     Omit<
         NotificationNoticeProps<C> & NotificationProps,
         "message" | "container"
@@ -31,8 +31,10 @@ type NotificationProgrammaticOptions<C extends Component> = Readonly<
 } & PublicProgrammaticComponentOptions;
 
 const useNotificationProgrammatic = {
+    /** Returns the number of registered active instances. */
+    count: instances.count,
     /**
-     * create a new programmatic modal component
+     * Create a new programmatic modal component instance.
      * @param options notification message string or notification component props object
      * @param target specify a target the component get rendered into
      * @returns ProgrammaticExpose
@@ -70,11 +72,11 @@ const useNotificationProgrammatic = {
             slot,
         );
     },
-    /** close the last registred instance in the notification programmatic instance registry */
+    /** Close the last registred instance in the notification programmatic instance registry. */
     close(...args: unknown[]): void {
         instances.last()?.exposed?.close(...args);
     },
-    /** close all instances in the programmatic notification instance registry */
+    /** Close all instances in the programmatic notification instance registry. */
     closeAll(...args: unknown[]): void {
         instances.walk((entry) => entry.exposed?.close(...args));
     },

packages/oruga/src/components/programmatic/InstanceRegistry.ts

@@ -7,23 +7,33 @@ export default class InstanceRegistry<T = ComponentInternalInstance> {
         this.entries = [];
     }
 
+    /** Returns the number of registered active instances. */
+    count(): number {
+        return this.entries.length;
+    }
+
+    /** Returns the first registered active instance. */
     fist(): T | undefined {
         return this.entries.at(0);
     }
 
+    /** Returns the last registered active instance. */
     last(): T | undefined {
         return this.entries.at(-1);
     }
 
+    /** Adds a new instance to the instance stack. */
     add(entry: T): void {
         this.entries.push(entry);
     }
 
+    /** Removes an instance from the instance stack. */
     remove(entry: T): void {
         const index = this.entries.indexOf(entry);
         this.entries.splice(index, 1);
     }
 
+    /** Call a function for every registered active instance. */
     walk(callback: (value: T) => boolean | void): void {
         // Walk a copy of the array so that the callback is allowed to remove the instance
         this.entries = [...this.entries].filter((e) => {

packages/oruga/src/components/programmatic/ProgrammaticComponent.ts

@@ -8,11 +8,7 @@ import {
     type VNode,
     type VNodeTypes,
 } from "vue";
-import type {
-    // ComponentExposed,
-    ComponentProps,
-} from "vue-component-type-helpers";
-
+import type { ComponentProps } from "vue-component-type-helpers";
 import type InstanceRegistry from "@/components/programmatic/InstanceRegistry";
 import { isClient } from "@/utils/ssr";
 

packages/oruga/src/components/programmatic/index.ts

@@ -1,6 +1,6 @@
 import type { App, Plugin } from "vue";
 
-import Programmatic from "./useProgrammatic";
+import useProgrammatic from "./useProgrammatic";
 
 import { registerComponentProgrammatic } from "@/utils/plugins";
 import InstanceRegistry from "./InstanceRegistry";
@@ -16,7 +16,7 @@ export { InstanceRegistry };
 /** export programmatic plugin */
 export default {
     install(app: App) {
-        registerComponentProgrammatic(app, "programmatic", Programmatic);
+        registerComponentProgrammatic(app, "programmatic", useProgrammatic);
     },
 } as Plugin;
 

packages/oruga/src/components/programmatic/useProgrammatic.ts

@@ -48,8 +48,10 @@ export type PublicProgrammaticComponentOptions = EmitsToProps<
 export type ProgrammaticExpose = ProgrammaticComponentExpose;
 
 export const useProgrammatic = {
+    /** Returns the number of registered active instances. */
+    count: instances.count,
     /**
-     * create a new programmatic component
+     * Create a new programmatic component instance.
      * @param component component to render
      * @param options render options
      * @param slot default slot content - see {@link https://vuejs.org/api/render-function.html#render-function-apis |Vue render function}

packages/oruga/src/components/sidebar/index.ts

@@ -9,7 +9,7 @@ import {
 } from "@/utils/plugins";
 
 /** export sidebar specific types */
-// no types to export here
+export type { SidebarProgrammaticOptions } from "./useSidebarProgrammatic";
 
 /** export sidebar plugin */
 export default {

packages/oruga/src/components/sidebar/useSidebarProgrammatic.ts

@@ -24,14 +24,16 @@ declare module "../../index" {
 const instances = new InstanceRegistry<ComponentInternalInstance>();
 
 /** useSidebarProgrammatic composable options */
-type SidebarProgrammaticOptions<C extends Component> = Readonly<
+export type SidebarProgrammaticOptions<C extends Component> = Readonly<
     SidebarProps<C>
 > &
     PublicProgrammaticComponentOptions;
 
 const useSidebarProgrammatic = {
+    /** Returns the number of registered active instances. */
+    count: instances.count,
     /**
-     * create a new programmatic modal component
+     * Create a new programmatic modal component instance.
      * @param options sidebar component props object
      * @param target specify a target the component get rendered into
      * @returns ProgrammaticExpose
@@ -53,11 +55,11 @@ const useSidebarProgrammatic = {
             onClose: options.onClose, // on close event handler
         });
     },
-    /** close the last registred instance in the sidebar programmatic instance registry */
+    /** Close the last registred instance in the sidebar programmatic instance registry. */
     close(...args: unknown[]): void {
         instances.last()?.exposed?.close(...args);
     },
-    /** close all instances in the programmatic sidebar instance registry */
+    /** Close all instances in the programmatic sidebar instance registry. */
     closeAll(...args: unknown[]): void {
         instances.walk((entry) => entry.exposed?.close(...args));
     },