@ramesesinc/platform-core 0.1.6 → 0.1.9

package/dist/index.css

@@ -681,6 +681,9 @@ video {
 .z-\[9999\] {
   z-index: 9999;
 }
+.m-0 {
+  margin: 0px;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -813,6 +816,9 @@ video {
 .max-h-\[60px\] {
   max-height: 60px;
 }
+.min-h-\[100px\] {
+  min-height: 100px;
+}
 .min-h-\[60px\] {
   min-height: 60px;
 }
@@ -879,9 +885,18 @@ video {
 .w-full {
   width: 100%;
 }
+.min-w-\[100px\] {
+  min-width: 100px;
+}
 .min-w-\[180px\] {
   min-width: 180px;
 }
+.min-w-\[200px\] {
+  min-width: 200px;
+}
+.min-w-\[300px\] {
+  min-width: 300px;
+}
 .min-w-\[50px\] {
   min-width: 50px;
 }
@@ -1112,10 +1127,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(232 240 254 / var(--tw-bg-opacity, 1));
 }
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
 .bg-black\/40 {
   background-color: rgb(0 0 0 / 0.4);
 }
@@ -1185,9 +1196,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
 }
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1196,6 +1204,9 @@ video {
   -o-object-fit: cover;
      object-fit: cover;
 }
+.p-0 {
+  padding: 0px;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1450,6 +1461,9 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.outline {
+  outline-style: solid;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1566,6 +1580,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
 .hover\:text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));

package/dist/lib/utils/BeanUtils.js

@@ -1,6 +1,6 @@
 export const getValue = (path, data) => {
     if (path == null)
-        return undefined;
+        return null;
     // If path is an object, recursively resolve all its values
     if (typeof path === "object") {
         const resolved = {};
@@ -10,7 +10,7 @@ export const getValue = (path, data) => {
         return resolved;
     }
     if (typeof path !== "string")
-        return undefined;
+        return null;
     if (!path.includes("{"))
         return path;
     // If the entire string is a single placeholder e.g. "{vdata}" or "{vdata.company.name}"
@@ -21,10 +21,10 @@ export const getValue = (path, data) => {
         let current = data;
         for (const token of tokens) {
             if (current == null)
-                return undefined;
+                return null;
             current = current[token];
         }
-        return current !== undefined ? current : undefined;
+        return current == null ? null : current;
     }
     // If the string contains placeholders mixed with other text e.g. "Hello {name}!"
     // fall back to string replacement
@@ -36,13 +36,13 @@ export const getValue = (path, data) => {
                 return match;
             current = current[token];
         }
-        return current !== undefined ? current : match;
+        return current == null ? null : current;
     });
 };
 export const replaceValues = (obj, source) => {
     // Handle null or undefined
-    if (obj === null || obj === undefined) {
-        return obj;
+    if (obj == null) {
+        return null;
     }
     // Handle primitives (numbers, booleans)
     if (typeof obj !== 'object' && typeof obj !== 'string') {

package/dist/templates/DataListTemplate.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataList from "../components/table/DataList";
+import { usePageViewContext } from "../core/PageViewContext";
 import Panel from "../core/Panel";
 import BorderLayout from "../layouts/BorderLayout";
 const DataListTemplate = (props) => {
     const { title, cols, data, rowsPerPage, rowActions, bulkActions, toolbarActions, header, footer, right, left, commonActions, filters, disableTotalCount, emptyMessage, errorMessage, striped, bordered, hover, dense, showPagination, paginationPosition, showPageInfo, showTotalCount, showRowsPerPage, rowsPerPageOptions, searchable, searchPlaceholder, searchDebounce, onSearchChange, showFilterPanel, onFilterChange, sortable, defaultSort, showSortIndicator, selectable, selectionMode, onSelectionChange, selectOnRowClick, onRowClick, onRowDoubleClick, toolbarTitle, showRefreshButton, showExportButton, onError, onRefresh, onExport, className, rowClassName, } = props !== null && props !== void 0 ? props : {};
-    const attr = { title, cols, data, rowsPerPage, commonActions, rowActions, toolbarActions, bulkActions, filters };
+    const pageView = usePageViewContext();
+    const getPreferredTitle = () => {
+        return title !== null && title !== void 0 ? title : pageView.getUI().getTitle();
+    };
+    const attr = { title: getPreferredTitle(), cols, data, rowsPerPage, commonActions, rowActions, toolbarActions, bulkActions, filters };
     const loadPanel = (section) => {
         return _jsx(Panel, { content: section });
     };
-    return (_jsx(BorderLayout, { className: "py-2", north: loadPanel(header), south: loadPanel(footer), east: loadPanel(right), west: loadPanel(left), children: _jsx(DataList, { attr: attr }) }));
+    return (_jsx(BorderLayout, { className: "p-0", north: loadPanel(header), south: loadPanel(footer), east: loadPanel(right), west: loadPanel(left), children: _jsx(DataList, { attr: attr }) }));
 };
 export default DataListTemplate;

package/dist/templates/ExplorerTemplate.js

@@ -11,7 +11,7 @@ const ExplorerTemplate = (props) => {
                                 width: "230px",
                                 opacity: open ? 1 : 0,
                                 pointerEvents: open ? "auto" : "none",
-                            }, children: _jsx(TreeMenu, { name: name, menugroup: menugroup, items: items, data: data }) }) }), _jsx("button", { onClick: () => setOpen((prev) => !prev), className: "absolute top-5 -right-4 w-8 h-8 bg-white border rounded-full flex items-center justify-center shadow z-10", children: open ? _jsx(ChevronLeft, { size: 18 }) : _jsx(ChevronRight, { size: 18 }) })] }), children: _jsx("div", { className: "px-6 py-2", children: _jsx(PageView, { name: name, depends: name }) }) }) }));
+                            }, children: _jsx(TreeMenu, { name: name, menugroup: menugroup, items: items, data: data }) }) }), _jsx("button", { onClick: () => setOpen((prev) => !prev), className: "absolute top-5 -right-4 w-8 h-8 bg-white border rounded-full flex items-center justify-center shadow z-10", children: open ? _jsx(ChevronLeft, { size: 18 }) : _jsx(ChevronRight, { size: 18 }) })] }), children: _jsx("div", { className: "px-6 py-1", children: _jsx(PageView, { name: name, depends: name }) }) }) }));
 };
 ExplorerTemplate.hasSelectionHandling = true;
 export default ExplorerTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramesesinc/platform-core",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "Platform Core Library",
   "author": "Rameses Systems Inc.",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "./index.css": "./dist/index.css"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc && postcss src/styles/index.css -o dist/index.css && cp -r src/components dist/ && cp -r src/layouts dist/lib/ && npm run copy-res",
+    "build": "rm -rf dist && tsc && postcss src/styles/index.css -o dist/index.css",
     "build2": "rm -rf dist && tsc",
     "clean": "rm -rf dist",
     "dev": "tsc --watch",
@@ -36,9 +36,9 @@
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@ramesesinc/app-forms": "0.1.0",
-    "@ramesesinc/client": "1.0.14",
-    "@ramesesinc/lib": "1.0.12",
+    "@ramesesinc/app-forms": "*",
+    "@ramesesinc/client": "*",
+    "@ramesesinc/lib": "*",
     "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",

package/dist/components/action/AlertMessage.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { usePageContext } from "../../core/PageContext";
-import { render } from "../../lib/utils/ExprUtil";
-import { AbstractComponent } from "../../types/component";
-
-/* ------------------------------------------------------------------ */
-/* Types */
-
-interface AlertMessageProps extends AbstractComponent {
-  expr: string;
-  className?: string;
-  title?: string;
-}
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-const AlertMessage = (props: AlertMessageProps) => {
-  const { expr, className = "", title } = props ?? {};
-  const pageContext = usePageContext();
-
-  /* ---------------------- Events ---------------------- */
-  const handleClick = () => {
-    if (expr) {
-      alert(render(expr, pageContext?.getAllData()));
-    }
-  };
-
-  /* ---------------------- Render ---------------------- */
-  return (
-    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
-      {title || "Alert"}
-    </button>
-  );
-};
-
-export default AlertMessage;

package/dist/components/action/Button.tsx

@@ -1,230 +0,0 @@
-import { getError, mergeCN, UIButtonControl } from "@ramesesinc/client";
-import React, { ReactNode, useState } from "react";
-import { useApp } from "../../core/AppContext";
-import { usePageContext } from "../../core/PageContext";
-
-const RADIUS_STYLES = {
-  none: "rounded-none",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-2xl",
-  "3xl": "rounded-3xl",
-  full: "rounded-full",
-};
-
-interface BaseButtonProps extends UIButtonControl {
-  children?: ReactNode;
-  title?: string;
-  icon?: ReactNode;
-  iconOrientation?: "left" | "right" | "top" | "bottom";
-
-  loader?: ReactNode | (() => ReactNode);
-  loaderLabel?: string;
-
-  variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
-
-  radius?: "none" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-
-  size?: "sm" | "md" | "lg";
-
-  type?: "button" | "submit";
-
-  isLoading?: boolean;
-
-  actionid?: string;
-  actionParams?: Record<string, any>;
-}
-
-const BaseButton = ({
-  binding,
-  className = "",
-  title,
-  disabled = false,
-  immediate = false,
-  onClick,
-
-  children,
-
-  icon,
-  iconOrientation = "left",
-  loader,
-  loaderLabel,
-
-  variant = "text",
-  radius = "md",
-  size = "md",
-
-  isLoading = false,
-  actionid,
-  actionParams,
-}: BaseButtonProps) => {
-  const pageContext = usePageContext();
-  binding = pageContext.binding;
-  const { tenant, module } = useApp();
-
-  // --- Style Calculation ---
-  const baseStyles =
-    "inline-flex items-center justify-center px-4 py-[4px] text-md font-medium shadow-sm transition-all duration-150 ease-in-out space-x-2";
-  const focusStyles =
-    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
-
-  const variantStyles = {
-    primary: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
-    secondary: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-indigo-300",
-    danger: "border border-transparent bg-red-600 text-white hover:bg-red-700 focus:ring-red-400",
-
-    text: "border border-transparent bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
-    contained: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
-    outlined: "border bg-transparent border-blue-500 text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
-  };
-
-  const disabledStyles = "opacity-70 cursor-not-allowed";
-  const isVertical = iconOrientation === "top" || iconOrientation === "bottom";
-  const flexDirectionClass = isVertical ? "flex-col" : "flex-row";
-
-  // Gap is needed if an icon is present OR if no custom loader is provided (fallback uses a spinner).
-  const gapClass = icon || (isLoading && !loader) ? (isVertical ? "gap-1" : "gap-2") : "";
-
-  let roundingStyle = RADIUS_STYLES[radius || "md"];
-  if (roundingStyle == null) {
-    roundingStyle = RADIUS_STYLES["md"];
-  }
-
-  const finalClassNames = mergeCN(
-    baseStyles,
-    focusStyles,
-    variantStyles[variant],
-    flexDirectionClass,
-    gapClass,
-    roundingStyle,
-    `${disabled || isLoading ? disabledStyles : ""}`,
-    className ?? "",
-  );
-
-  const [internalLoading, setInternalLoading] = useState(false);
-
-  const loading = isLoading || internalLoading;
-
-  // --- Content Calculation ---
-  // This is the main logic block that determines what to display.
-  let content: ReactNode;
-
-  if (loading) {
-    // LOADING STATE
-    if (loader) {
-      // If a custom loader is provided, use it.
-      content = typeof loader === "function" ? loader() : loader;
-    } else {
-      // Fallback loader: Spinner + original title
-      content = (
-        <>
-          <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-          <span>{loaderLabel ?? children}</span>
-        </>
-      );
-    }
-  } else {
-    // NORMAL STATE
-    content = (
-      <>
-        {icon && (iconOrientation === "left" || iconOrientation === "top") && icon}
-        <span>{title || children}</span>
-        {icon && (iconOrientation === "right" || iconOrientation === "bottom") && icon}
-      </>
-    );
-  }
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (loading || disabled) return;
-
-    try {
-      setInternalLoading(true);
-
-      if (!immediate && binding) {
-        const validationResult = binding.validate();
-        if (validationResult != null && validationResult !== "") {
-          return;
-        }
-      }
-
-      if (onClick != null) {
-        const result = onClick?.(event);
-        if (result != null && typeof result.then === "function") {
-          result
-            .then(() => {
-              // successful execution
-            })
-            .catch((err: any) => {
-              const e = getError(err);
-              binding?.setError(e.message);
-            });
-        }
-      } else if (actionid != null && actionid.trim() !== "") {
-        Promise.resolve()
-          .then(async () => {
-            // const actionFunc = await ResourceLoader.getAction(actionid || "");
-            // const opt = { tenant, module };
-            // const params = { ...actionParams, opt };
-            // resolveParams(params ?? {});
-            // const result = await actionFunc(params);
-            // console.log("result", result);
-          })
-          .catch((err: any) => {
-            console.log("action error", err);
-            const e = getError(err);
-            binding?.setError(e.message);
-          });
-      }
-    } catch (err) {
-      console.log("err", err);
-      const e = getError(err);
-      binding?.setError(e.message);
-    } finally {
-      setInternalLoading(false);
-    }
-  };
-
-  const resolveParams = (source: Record<string, any>) => {
-    Object.entries(source || {}).forEach(([key, value]) => {
-      if (value != null && typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
-        const name = value.slice(1, -1);
-        if (name === "data") {
-          source[key] = binding?.getData();
-        } else {
-          source[key] = binding?.get(name);
-        }
-      } else if (value != null && typeof value === "object") {
-        resolveParams(value);
-      }
-    });
-  };
-
-  return (
-    <button type="submit" onClick={handleClick} className={finalClassNames} disabled={disabled || loading}>
-      {content}
-    </button>
-  );
-};
-
-// Button
-const Button = (props: BaseButtonProps) => {
-  const { variant = "text" } = props ?? {};
-  return <BaseButton {...props} variant={variant} type="button" />;
-};
-
-// Submit
-const Submit = (props: BaseButtonProps) => {
-  const { variant = "primary" } = props ?? {};
-  return <BaseButton {...props} variant={variant} type="submit" />;
-};
-
-export default Button;
-export { Button, Submit };

package/dist/components/action/CancelEdit.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import React from "react";
-import { usePageContext } from "../../core/PageContext";
-import { AbstractComponent } from "../../types/component";
-
-/* ------------------------------------------------------------------ */
-/* Types */
-
-interface CancelEditProps extends AbstractComponent {
-  children?: React.ReactNode;
-  className?: string;
-  title?: string;
-}
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-const CancelEdit = (props: CancelEditProps) => {
-  const { children, className = "", title } = props ?? {};
-  const pageContext = usePageContext();
-
-  /* ---------------------- Events ---------------------- */
-  const handleClick = async () => {
-    try {
-      await pageContext?.set("mode", "read");
-    } catch (err: any) {
-      alert(err.message);
-    }
-  };
-
-  /* ---------------------- Render ---------------------- */
-  return (
-    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
-      {children || title || "Cancel Edit"}
-    </button>
-  );
-};
-
-export default CancelEdit;

package/dist/components/action/DeleteData.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import React from "react";
-import { usePageContext } from "../../core/PageContext";
-import { usePageViewContext } from "../../core/PageViewContext";
-import { useRowContext } from "../../core/RowContext";
-import { getValue } from "../../lib/utils/BeanUtils";
-import { getUrlPageParams } from "../../lib/utils/PageUtils";
-import { AbstractComponent } from "../../types/component";
-
-/* ------------------------------------------------------------------ */
-/* Types */
-
-interface DeleteDataProps extends AbstractComponent {
-  api: string;
-  className?: string;
-  title?: string;
-  icon?: string | React.ReactNode;
-  opt?: Record<string, any>;
-  iconOnly?: boolean;
-  params: Record<string, any>;
-}
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-const DeleteData = (props: DeleteDataProps) => {
-  const { api, className = "", title, icon, opt = {}, params, iconOnly = false } = props ?? {};
-  const { data = {} } = opt;
-
-  const rowContext = useRowContext();
-  const pageView = usePageViewContext();
-  const pageContext = usePageContext();
-
-  /* ---------------------- Events ---------------------- */
-  const handleClick = async () => {
-    try {
-      if (!api) throw new Error("api not defined");
-      if (data) {
-        const allData = pageContext?.getAllData() ?? {};
-        const urlParams = getUrlPageParams();
-        const d = getValue(params, { ...allData, ...urlParams?.params, ...data });
-        await pageContext?.execService(api, d);
-      } else {
-        const vdata = pageContext?.getData() ?? {};
-        const urlParams = getUrlPageParams();
-        const d = getValue(params, { ...urlParams?.params, ...vdata });
-        await pageContext?.execService(api, vdata);
-      }
-      // pageContext?.refresh();
-    } catch (err: any) {
-      alert(err.message);
-    }
-  };
-
-  /* ---------------------- Render ---------------------- */
-  return (
-    <>
-      {iconOnly ? (
-        <span onClick={handleClick} className={`cursor-pointer ${className}`}>
-          {icon}
-        </span>
-      ) : (
-        <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
-          {icon && <span className="dl-action-icon">{icon}</span>}
-          {title || "Remove"}
-        </button>
-      )}
-    </>
-  );
-};
-
-export default DeleteData;

package/dist/components/action/Edit.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import React from "react";
-import { usePageContext } from "../../core/PageContext";
-import { AbstractComponent } from "../../types/component";
-
-/* ------------------------------------------------------------------ */
-/* Types */
-
-interface EditProps extends AbstractComponent {
-  children?: React.ReactNode;
-  className?: string;
-  title?: string;
-}
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-const Edit = (props: EditProps) => {
-  const { children, className = "", title } = props ?? {};
-  const pageContext = usePageContext();
-
-  /* ---------------------- Events ---------------------- */
-  const handleClick = async () => {
-    try {
-      await pageContext?.set("editable", true);
-    } catch (err: any) {
-      alert(err.message);
-    }
-  };
-
-  /* ---------------------- Render ---------------------- */
-  return (
-    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
-      {children || title || "Edit"}
-    </button>
-  );
-};
-
-export default Edit;