@rettangoli/ui 0.1.2-rc33 → 0.1.2-rc34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc33",
+  "version": "0.1.2-rc34",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -49,7 +49,7 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "0.0.7-rc14",
+    "@rettangoli/fe": "0.0.7-rc16",
     "commander": "^13.1.0",
     "jempl": "0.1.4-rc1",
     "js-yaml": "^4.1.0",

package/src/components/globalUi/globalUi.handlers.js

@@ -0,0 +1,51 @@
+export const handleDialogClose = (_, deps) => {
+  const { store, render } = deps;
+  
+  store.closeDialog();
+  render();
+};
+
+export const handleConfirm = (_, deps) => {
+  const { store, render, globalUI } = deps;
+  
+  store.closeDialog();
+  render();
+  globalUI.emit('event', true);
+};
+
+export const handleCancel = (_, deps) => {
+  const { store, render, globalUI } = deps;
+
+  store.closeDialog();
+  render();
+  globalUI.emit('event', false);
+};
+
+export const showAlert = (options, deps) => {
+  const { store, render } = deps;
+  
+  if (store.selectIsOpen()) {
+    throw new Error("A dialog is already open");
+  }
+  
+  store.setAlertConfig(options);
+  render();
+};
+
+export const showConfirm = async (options, deps) => {
+  const { store, render, globalUI } = deps;
+  
+  if (store.selectIsOpen()) {
+    throw new Error("A dialog is already open");
+  }
+  
+  store.setConfirmConfig(options);
+  render();
+
+  return new Promise((resolve) => {
+    globalUI.once('event', (result) => {
+      // result contains info of whehter is confirm of cancel
+      resolve(result)
+    });
+  });
+};

package/src/components/globalUi/globalUi.store.js

@@ -0,0 +1,57 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  config: {
+    status: undefined, // undefined | info | warning | error
+    title: "",
+    message: "",
+    confirmText: "OK",
+    cancelText: "Cancel",
+    mode: "alert", // alert | confirm
+  },
+});
+
+export const setAlertConfig = (state, options) => {
+  if (!options.message) {
+    throw new Error("message is required for showAlert");
+  }
+  
+  state.config = {
+    status: options.status || undefined,
+    title: options.title || "",
+    message: options.message,
+    confirmText: options.confirmText || "OK",
+    cancelText: "",
+    mode: "alert",
+  };
+  state.isOpen = true;
+};
+
+export const setConfirmConfig = (state, options) => {
+  if (!options.message) {
+    throw new Error("message is required for showConfirm");
+  }
+  
+  state.config = {
+    status: options.status || undefined,
+    title: options.title || "",
+    message: options.message,
+    confirmText: options.confirmText || "Yes",
+    cancelText: options.cancelText || "Cancel",
+    mode: "confirm",
+  };
+  state.isOpen = true;
+};
+
+export const closeDialog = (state) => {
+  state.isOpen = false;
+};
+
+export const selectConfig = ({ state }) => state.config;
+export const selectIsOpen = ({ state }) => state.isOpen;
+
+export const toViewData = ({ state }) => {
+  return {
+    isOpen: state.isOpen,
+    config: state.config,
+  };
+};

package/src/components/globalUi/globalUi.view.yaml

@@ -0,0 +1,59 @@
+elementName: rtgl-global-ui
+
+viewDataSchema:
+  type: object
+  properties:
+    isOpen:
+      type: boolean
+    config:
+      type: object
+      properties:
+        status:
+          type: string
+        title:
+          type: string
+        message:
+          type: string
+        confirmText:
+          type: string
+        cancelText:
+          type: string
+        mode:
+          type: string
+
+refs:
+  dialog:
+    eventListeners:
+      close:
+        handler: handleDialogClose
+  confirm-button:
+    eventListeners:
+      click:
+        handler: handleConfirm
+  cancel-button:
+    eventListeners:
+      click:
+        handler: handleCancel
+
+template:
+  - rtgl-dialog#dialog ?open=${isOpen} s=sm:
+      - rtgl-view slot=content g=lg p=lg:
+          - rtgl-view d=h ah=c g=md:
+              - $if config.status == 'error':
+                  - rtgl-icon name=x-circle c=error s=lg:
+                $elif config.status == 'warning':
+                  - rtgl-icon name=alert-triangle c=warning s=lg:
+                $elif config.status == 'info':
+                  - rtgl-icon name=info c=primary s=lg:
+                $elif config.status:
+                  - rtgl-icon name=check-circle c=success s=lg:
+              - $if config.title:
+                  - rtgl-text fs=lg fw=600: ${config.title}
+
+          - rtgl-view p=md:
+              - rtgl-text: ${config.message}
+
+          - rtgl-view d=h jc=fe g=md mt=lg:
+              - $if config.mode == 'confirm':
+                  - rtgl-button#cancel-button variant=se: ${config.cancelText}
+              - rtgl-button#confirm-button variant=pr: ${config.confirmText}

package/src/deps/createGlobalUI.js

@@ -0,0 +1,39 @@
+const createGlobalUI = (globalUIElement) => {
+  let listeners = {};
+
+  return {
+    once: (event, callback) => {
+      if (!listeners[event]) {
+        listeners[event] = [];
+      }
+      const onceCallback = (...args) => {
+        callback(...args);
+        listeners[event] = listeners[event].filter(cb => cb !== onceCallback);
+      }
+      listeners[event].push(onceCallback);
+    },
+    emit: (event, ...args) => {
+      if (listeners[event]) {
+        listeners[event].forEach(callback => {
+          callback(...args);
+        });
+      }
+    },
+    showAlert: async (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      globalUIElement.transformedHandlers.showAlert(options);
+    },
+    showConfirm: async (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      return globalUIElement.transformedHandlers.showConfirm(options);
+    }
+  };
+}
+
+export default createGlobalUI;

package/src/index.js

@@ -7,6 +7,7 @@ import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
+import createGlobalUI from './deps/createGlobalUI.js';
 
 export {
     RettangoliButton,
@@ -18,4 +19,5 @@ export {
     RettangoliTextArea,
     RettangoliDialog,
     RettangoliPopover,
+    createGlobalUI,
 }

package/src/setup.js

@@ -1,7 +1,12 @@
 import { createWebPatch } from '@rettangoli/fe';
+import createGlobalUI from './deps/createGlobalUI';
 import { h } from 'snabbdom/build/h';
 
-const componentDependencies = {}
+const globalUI = createGlobalUI();
+
+const componentDependencies = {
+  globalUI: globalUI
+}
 
 const deps = {
   components: componentDependencies,
@@ -13,4 +18,4 @@ export {
   h,
   patch,
   deps,
-}
+}