feat: useDialog composable for dialog management

README.md

@@ -153,6 +153,28 @@ watch(currentContent, (newContent) => {
 update({ excerpt: "Hello, Kirby!" });
 ```
 
+### useDialog
+
+Provides methods to open different types of dialogs.
+
+**Example:**
+
+```ts
+import { useDialog } from "kirbyuse";
+
+const { openTextDialog, openFieldsDialog } = useDialog();
+
+const result = await openTextDialog("Are you sure?");
+console.log(result); // -> true or false
+
+await openFieldsDialog({
+  info: {
+    type: "info",
+    text: "An info message",
+  },
+});
+```
+
 ### useI18n
 
 Returns translation utility functions.

src/composables/dialog.ts

@@ -0,0 +1,77 @@
+import { usePanel } from "kirbyuse";
+
+/**
+ * Provides methods to open different types of dialogs.
+ *
+ * @example
+ * ```ts
+ * const { openTextDialog } = useDialog()
+ *
+ * const result = await openTextDialog("Are you sure?")
+ * console.log(result) // -> true or false
+ * ```
+ */
+export function useDialog() {
+  /**
+   * Returns a promise that resolves when the dialog is closed.
+   */
+  function openTextDialog(text: string) {
+    let result = false;
+
+    return new Promise<boolean>((resolve) => {
+      const panel = usePanel();
+
+      panel.dialog.open({
+        component: "k-text-dialog",
+        props: { text },
+        on: {
+          // Close event will always be triggered, even on submit
+          close: () => {
+            setTimeout(() => {
+              resolve(result);
+            }, 25);
+          },
+          submit: () => {
+            result = true;
+            panel.dialog.close();
+          },
+        },
+      });
+    });
+  }
+
+  /**
+   * Returns a promise that resolves when the dialog is closed.
+   */
+  function openFieldsDialog(fields: Record<string, any>) {
+    let result = false;
+
+    return new Promise<boolean>((resolve) => {
+      const panel = usePanel();
+
+      panel.dialog.open({
+        component: "k-form-dialog",
+        props: {
+          fields,
+        },
+        on: {
+          // Close event will always be triggered, even on submit
+          close: () => {
+            setTimeout(() => {
+              resolve(result);
+            }, 25);
+          },
+          submit: () => {
+            result = true;
+            panel.dialog.close();
+          },
+        },
+      });
+    });
+  }
+
+  return {
+    openTextDialog,
+    openFieldsDialog,
+  };
+}

src/composables/i18n.ts

@@ -7,13 +7,15 @@ import { usePanel } from "./panel";
  * In most cases, use `window.panel.t` for Kirby's built-in translation function. This composable is useful for custom translation objects, such as those returned by a section's `label` property.
  *
  * @example
+ * ```ts
  * const { t } = useI18n()
  *
  * // Simple string
  * t("Hello") // -> "Hello"
  *
  * // Translation object
  * t({ en: "Hello", de: "Hallo" }) // -> Returns value based on current Panel language
+ * ```
  */
 export function useI18n() {
   const panel = usePanel();

src/composables/index.ts

@@ -3,6 +3,7 @@ export * from "./app";
 export * from "./block";
 export * from "./compatibility";
 export * from "./content";
+export * from "./dialog";
 export * from "./i18n";
 export * from "./panel";
 export * from "./section";