oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.12k stars 170 forks source link

Vue 3 Composition API Notifcation - Utility File #535

Closed deotte closed 1 year ago

deotte commented 1 year ago

Overview of the problem

Oruga version: "^0.5.10" Vuejs version: "^3.2.45" OS/Browser: Chrome

Description

I'm using a Vue 3 app with Vite, and the composition API. I'm able to do oruga.notifcation.open() inside of my <script setup></script> components, but not in utility files:

Steps to reproduce

New codebase with any component. Using the Composition API. Create a utility class for oruga notifcations, and try to use it in a component:

// Toast.ts
import { useProgrammatic } from '@oruga-ui/oruga-next';

export function orugaToast(message: string, closable: boolean, variant?: string): void {
    const { oruga } = useProgrammatic;

    oruga.notification.open({
        message: message,
        closable: closable,
        variant: variant === undefined ? 'success' : variant,
    });
}
// Component.ts
import { orugaToast } from '@/utils/toast';

onMounted(() => {
   orugaToast('Hello', true);
});

Expected behavior

It should be able to open a notification like normal.

Actual behavior

oruga.notification isn't defined

Screenshot of error

deotte commented 1 year ago

Using https://github.com/oruga-ui/oruga/issues/256 for reference

jtommy commented 1 year ago

It's a function useProgrammatic()