feat: update programmatic oruga

oruga-ui · Sep 29, 2023 · ea7661c · ea7661c
1 parent 33f2cd5
commit ea7661c
Show file tree

Hide file tree

Showing 21 changed files with 215 additions and 135 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/icon/custom-icon-pack.vue b/packages/docs-next/.vitepress/theme/examples/icon/custom-icon-pack.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onBeforeMount, onBeforeUnmount } from "vue";
-import { useProgrammatic } from "../../../../../oruga-next/dist/oruga";
+import { useOruga } from "../../../../../oruga-next/dist/oruga";
 
 const customIconConfig = {
     iconComponent: undefined,
@@ -38,7 +38,7 @@ const customIconConfig = {
 
 const docsIcon = ref();
 
-const { oruga } = useProgrammatic();
+const oruga = useOruga();
 
 onBeforeMount(() => {
     docsIcon.value = oruga.config.getOptions().iconComponent;

diff --git a/packages/docs-next/.vitepress/theme/examples/loading/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/loading/programmatically.vue
@@ -1,15 +1,17 @@
 <script setup>
 import { ref } from "vue";
-import { useProgrammatic } from "../../../../../oruga-next/dist/oruga";
+import { useOruga } from "../../../../../oruga-next/dist/oruga";
 
-const isFullPage = ref(true);
+const oruga = useOruga();
+
+const elementRef = ref();
 
-const { oruga } = useProgrammatic();
+const isFullPage = ref(true);
 
 function openLoading() {
     const loadingComponent = oruga.loading.open({
         fullPage: isFullPage.value,
-        container: isFullPage.value ? null : this.$refs.element,
+        container: isFullPage.value ? null : elementRef.value,
     });
     setTimeout(() => loadingComponent.close(), 3 * 1000);
 }
@@ -29,7 +31,7 @@ function openLoading() {
                 Display loader over full page
             </o-switch>
         </o-field>
-        <p ref="element" style="position: relative">
+        <p ref="elementRef" style="position: relative">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
             fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit
             sapien laoreet elit

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/programmatically-async.vue b/packages/docs-next/.vitepress/theme/examples/modal/programmatically-async.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { useProgrammatic } from "../../../../../oruga-next/dist/oruga";
+import { useOruga } from "../../../../../oruga-next/dist/oruga";
 import ModalForm from "./_modal-form-async.vue";
 
-const { oruga } = useProgrammatic();
+const oruga = useOruga();
 
 const promptModal = async () => {
     const instance = oruga.modal.open({

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/modal/programmatically.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { h } from "vue";
-import { useProgrammatic } from "../../../../../oruga-next/dist/oruga";
+import { useOruga } from "../../../../../oruga-next/dist/oruga";
 import ModalForm from "./_modal-form.vue";
 
-const { oruga } = useProgrammatic();
+const oruga = useOruga();
 
 function imageModal() {
     const vnode = h("p", { style: { "text-align": "center" } }, [

diff --git a/packages/docs-next/.vitepress/theme/examples/notification/programmatically-opening.vue b/packages/docs-next/.vitepress/theme/examples/notification/programmatically-opening.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { useProgrammatic } from "../../../../../oruga-next/dist/oruga";
+import { useOruga } from "../../../../../oruga-next/dist/oruga";
 import NotificationForm from "./_notification-form.vue";
 
-const { oruga } = useProgrammatic();
+const oruga = useOruga();
 
 function simple() {
     oruga.notification.open("Something happened");

diff --git a/packages/docs-next/.vitepress/theme/index.ts b/packages/docs-next/.vitepress/theme/index.ts
@@ -12,7 +12,7 @@ import ExampleViewer from "./components/ExampleViewer.vue";
 import Expo from "./components/Expo.vue";
 import Carbon from "./components/Carbon.vue";
 
-import Oruga, { useProgrammatic } from "../../../oruga-next/dist/oruga";
+import Oruga, { useOruga } from "../../../oruga-next/dist/oruga";
 
 import { bulmaConfig } from "@oruga-ui/theme-bulma";
 import { bootstrapConfig } from "@oruga-ui/theme-bootstrap";
@@ -101,14 +101,14 @@ export default {
                 case "theme-bulma": {
                     bulmaConfig.iconPack = "fas";
                     bulmaConfig.iconComponent = "vue-fontawesome";
-                    const { oruga } = useProgrammatic() as any;
+                    const { oruga } = useOruga();
                     oruga.config.setOptions(bulmaConfig);
                     break;
                 }
                 case "theme-bootstrap": {
                     bootstrapConfig.iconPack = "fas";
                     bootstrapConfig.iconComponent = "vue-fontawesome";
-                    const { oruga } = useProgrammatic() as any;
+                    const { oruga } = useOruga();
                     oruga.config.setOptions(bootstrapConfig);
                     break;
                 }

diff --git a/packages/docs-next/documentation/customisation.md b/packages/docs-next/documentation/customisation.md
@@ -239,9 +239,9 @@ You can also add and override classes to a component directly using class proper
 
 As alternative Oruga allows to customize each components providing and overriding the `Config` object programmatically:
 ```js
-import { useProgrammatic } from '@oruga-ui/oruga-next';
+import { useOruga } from '@oruga-ui/oruga-next';
 
-const { oruga } = useProgrammatic();
+const oruga = useOruga();
 
 const config = oruga.config.getOptions();
 

diff --git a/packages/oruga-next/package.json b/packages/oruga-next/package.json
@@ -105,8 +105,8 @@
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.4",
     "vite-plugin-istanbul": "^5.0.0",
-    "vite-tsconfig-paths": "^4.2.1",
-    "vue": "^3.2.45",
+    "vite-tsconfig-paths": "^4.2.1",    
+    "vue": "^3.3.4",
     "vue-tsc": "^1.8.11"
   },
   "nyc": {

diff --git a/packages/oruga-next/src/components/loading/index.ts b/packages/oruga-next/src/components/loading/index.ts
@@ -3,40 +3,47 @@ import { createVNode, render } from "vue";
 
 import Loading from "./Loading.vue";
 
-import { VueInstance } from "../../utils/config";
-import { merge } from "../../utils/helpers";
+import { VueInstance } from "@/utils/config";
+import { merge } from "@/utils/helpers";
 import {
     registerComponent,
     registerComponentProgrammatic,
-} from "../../utils/plugins";
-import InstanceRegistry from "../../utils/InstanceRegistry";
+} from "@/utils/plugins";
+import InstanceRegistry from "@/utils/InstanceRegistry";
+
+declare module "@/types" {
+    interface OrugaPrgrammatic {
+        loading: typeof LoadingProgrammatic;
+    }
+}
 
 let localVueInstance: App;
 
-const instances = new InstanceRegistry();
+const instances = new InstanceRegistry<typeof Loading>();
 
 const LoadingProgrammatic = {
     open(
         params: Readonly<ComponentPropsOptions>,
     ): InstanceType<typeof Loading> {
-        const defaultParam = {
+        const defaultParams = {
             programmatic: { instances },
+            active: true,
         };
-        const propsData = merge(defaultParam, params);
+
+        const propsData = merge(defaultParams, params);
         propsData.promise = new Promise((p1, p2) => {
             propsData.programmatic.resolve = p1;
             propsData.programmatic.reject = p2;
         });
+
         const app = localVueInstance || VueInstance;
         const vnode = createVNode(Loading, propsData);
         vnode.appContext = app._context;
         render(vnode, document.createElement("div"));
         return vnode.component.proxy as InstanceType<typeof Loading>;
     },
-    closeAll(...args: any[]) {
-        instances.walk((entry) => {
-            entry.close(...args);
-        });
+    closeAll(...args: any[]): void {
+        instances.walk((entry) => entry.close(...args));
     },
 };
 

diff --git a/packages/oruga-next/src/components/modal/index.ts b/packages/oruga-next/src/components/modal/index.ts
@@ -3,17 +3,23 @@ import { createVNode, render } from "vue";
 
 import Modal from "./Modal.vue";
 
-import { VueInstance } from "../../utils/config";
-import { merge } from "../../utils/helpers";
+import { VueInstance } from "@/utils/config";
+import { merge } from "@/utils/helpers";
 import {
     registerComponent,
     registerComponentProgrammatic,
-} from "../../utils/plugins";
-import InstanceRegistry from "../../utils/InstanceRegistry";
+} from "@/utils/plugins";
+import InstanceRegistry from "@/utils/InstanceRegistry";
+
+declare module "@/types" {
+    interface OrugaPrgrammatic {
+        modal: typeof ModalProgrammatic;
+    }
+}
 
 let localVueInstance: App;
 
-const instances = new InstanceRegistry();
+const instances = new InstanceRegistry<typeof Modal>();
 
 const ModalProgrammatic = {
     open(params: OModal | string): InstanceType<typeof Modal> {
@@ -26,33 +32,31 @@ const ModalProgrammatic = {
             newParams = params;
         }
 
-        const defaultParam = {
+        const defaultParams = {
             programmatic: { instances },
         };
+
         let slot;
         if (Array.isArray(newParams.content)) {
             slot = newParams.content;
             delete newParams.content;
         }
-        const propsData = merge(defaultParam, newParams);
+
+        const propsData = merge(defaultParams, newParams);
         propsData.promise = new Promise((p1, p2) => {
             propsData.programmatic.resolve = p1;
             propsData.programmatic.reject = p2;
         });
+        const defaultSlot = () => slot;
 
         const app = localVueInstance || VueInstance;
-        const defaultSlot = () => {
-            return slot;
-        };
         const vnode = createVNode(Modal, propsData, defaultSlot);
         vnode.appContext = app._context;
         render(vnode, document.createElement("div"));
         return vnode.component.proxy as InstanceType<typeof Modal>;
     },
-    closeAll(...args: any[]) {
-        instances.walk((entry) => {
-            entry.close(...args);
-        });
+    closeAll(...args: any[]): void {
+        instances.walk((entry) => entry.close(...args));
     },
 };
 

diff --git a/packages/oruga-next/src/components/notification/index.ts b/packages/oruga-next/src/components/notification/index.ts
@@ -1,22 +1,26 @@
+import type { App, DefineComponent, Plugin } from "vue";
+import { createVNode, render } from "vue";
+
 import Notification from "./Notification.vue";
 import NotificationNotice from "./NotificationNotice.vue";
 
-import { getOptions } from "../../utils/config";
-import { getValueByPath } from "../../utils/helpers";
-import { merge } from "../../utils/helpers";
-import { VueInstance } from "../../utils/config";
+import { VueInstance, getOption } from "@/utils/config";
+import { merge } from "@/utils/helpers";
 import {
     registerComponent,
     registerComponentProgrammatic,
-} from "../../utils/plugins";
-import InstanceRegistry from "../..//utils/InstanceRegistry";
+} from "@/utils/plugins";
+import InstanceRegistry from "@//utils/InstanceRegistry";
 
-import type { App, DefineComponent, Plugin } from "vue";
-import { createVNode, render } from "vue";
+declare module "@/types" {
+    interface OrugaPrgrammatic {
+        notification: typeof NotificationProgrammatic;
+    }
+}
 
 let localVueInstance: App;
 
-const instances = new InstanceRegistry();
+const instances = new InstanceRegistry<typeof NotificationNotice>();
 
 const NotificationProgrammatic = {
     open(params): InstanceType<typeof NotificationNotice> {
@@ -29,45 +33,38 @@ const NotificationProgrammatic = {
             newParams = params;
         }
 
-        const defaultParam = {
+        const defaultParams = {
             programmatic: { instances },
-            position: getValueByPath(
-                getOptions(),
-                "notification.position",
-                "top-right",
-            ),
+            position: getOption("notification.position", "top-right"),
             closable:
-                params.closable ||
-                getValueByPath(getOptions(), "notification.closable", false),
+                params.closable || getOption("notification.closable", false),
         };
+
         let slot;
         if (Array.isArray(newParams.message)) {
             slot = newParams.message;
             delete newParams.message;
         }
 
         newParams.active = true;
-        const propsData = merge(defaultParam, newParams);
+        const propsData = merge(defaultParams, newParams);
         propsData.promise = new Promise((p1, p2) => {
             propsData.programmatic.resolve = p1;
             propsData.programmatic.reject = p2;
         });
 
-        const app = localVueInstance || VueInstance;
         propsData.propsNotification = Object.assign({}, propsData);
         propsData.propsNotification.isActive = true;
-        const defaultSlot = () => {
-            return slot;
-        };
+        const defaultSlot = () => slot;
+
+        const app = localVueInstance || VueInstance;
         const vnode = createVNode(NotificationNotice, propsData, defaultSlot);
         vnode.appContext = app._context;
         render(vnode, document.createElement("div"));
         return vnode.component.proxy as InstanceType<typeof NotificationNotice>;
     },
-    closeAll(...args: any[]) {
-        instances.walk((entry) => {
-            entry.close(...args);
-        });
+    closeAll(...args: any[]): void {
+        instances.walk((entry) => entry.close(...args));
     },
 };