xmlui 0.7.14 → 0.7.16

package/dist/scripts/src/components/metadata-helpers.js

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dInternal = dInternal;
+exports.dClick = dClick;
+exports.dGotFocus = dGotFocus;
+exports.dLostFocus = dLostFocus;
+exports.dDidChange = dDidChange;
+exports.dIndeterminate = dIndeterminate;
+exports.dLabel = dLabel;
+exports.dLabelPosition = dLabelPosition;
+exports.dLabelWidth = dLabelWidth;
+exports.dLabelBreak = dLabelBreak;
+exports.dAutoFocus = dAutoFocus;
+exports.dInitialValue = dInitialValue;
+exports.dReadonly = dReadonly;
+exports.dEnabled = dEnabled;
+exports.dMulti = dMulti;
+exports.dValidationStatus = dValidationStatus;
+exports.dValueApi = dValueApi;
+exports.dSetValueApi = dSetValueApi;
+exports.dComponent = dComponent;
+exports.dPlaceholder = dPlaceholder;
+exports.dMaxLength = dMaxLength;
+exports.dRequired = dRequired;
+exports.dStartText = dStartText;
+exports.dStartIcon = dStartIcon;
+exports.dEndText = dEndText;
+exports.dEndIcon = dEndIcon;
+exports.dExpanded = dExpanded;
+exports.dExpand = dExpand;
+exports.dCollapse = dCollapse;
+exports.dFocus = dFocus;
+exports.dValue = dValue;
+exports.dDidOpen = dDidOpen;
+exports.dDidClose = dDidClose;
+exports.dTriggerTemplate = dTriggerTemplate;
+exports.dOrientation = dOrientation;
+const abstractions_1 = require("./abstractions");
+function dInternal(description) {
+    return {
+        description: description !== null && description !== void 0 ? description : `This property is for internal use only.`,
+        isInternal: true,
+    };
+}
+function dClick(comp) {
+    return {
+        description: `This event is triggered when the ${comp} is clicked.`,
+    };
+}
+function dGotFocus(comp) {
+    return {
+        description: `This event is triggered when the ${comp} has received the focus.`,
+    };
+}
+function dLostFocus(comp) {
+    return {
+        description: `This event is triggered when the ${comp} has lost the focus.`,
+    };
+}
+function dDidChange(comp) {
+    return {
+        description: `This event is triggered when value of ${comp} has changed.`,
+    };
+}
+function dIndeterminate() {
+    return {
+        description: `The \`true\` value of this property signals that the component is in an ` +
+            `_intedeterminate state_.`,
+    };
+}
+function dLabel() {
+    return {
+        description: `This property sets the label of the component.`,
+    };
+}
+function dLabelPosition(def) {
+    return {
+        description: `Places the label at the given position of the component.`,
+        availableValues: abstractions_1.labelPositionMd,
+        defaultValue: def,
+    };
+}
+function dLabelWidth(comp) {
+    return {
+        description: `This property sets the width of the \`${comp}\`.`,
+    };
+}
+function dLabelBreak(comp) {
+    return {
+        description: `This boolean value indicates if the \`${comp}\` labels can be split into multiple ` +
+            `lines if it would overflow the available label width.`,
+        valueType: "boolean",
+        defaultValue: false,
+    };
+}
+function dAutoFocus() {
+    return {
+        description: "If this property is set to `true`, the component gets the focus automatically when displayed.",
+        valueType: "boolean",
+        defaultValue: false,
+    };
+}
+function dInitialValue(def) {
+    return {
+        description: `This property sets the component's initial value.`,
+        defaultValue: def,
+    };
+}
+function dReadonly() {
+    return {
+        description: `Set this property to \`true\` to disallow changing the component value.`,
+    };
+}
+function dEnabled() {
+    return {
+        description: `This boolean property value indicates whether the component responds to user events (\`true\`) or not (\`false\`).`,
+        valueType: "boolean",
+        defaultValue: true,
+    };
+}
+function dMulti() {
+    return {
+        description: "The `true` value of the property indicates if the user can select multiple items.",
+        valueType: "boolean",
+        defaultValue: false,
+    };
+}
+function dValidationStatus() {
+    return {
+        description: `This property allows you to set the validation status of the input component.`,
+        availableValues: abstractions_1.validationStatusMd,
+    };
+}
+function dValueApi() {
+    return {
+        description: `You can query this read-only API property to query the component's current value (\`true\`: ` +
+            `checked, \`false\`: unchecked).`,
+    };
+}
+function dSetValueApi() {
+    return {
+        description: `You can use this method to set the component's current value programmatically ` +
+            `(\`true\`: checked, \`false\`: unchecked).`,
+    };
+}
+function dComponent(description) {
+    return {
+        description,
+        valueType: "ComponentDef",
+    };
+}
+function dPlaceholder() {
+    return {
+        description: `A placeholder text that is visible in the input field when its empty.`,
+    };
+}
+function dMaxLength() {
+    return {
+        description: `This property sets the maximum length of the input it accepts.`,
+    };
+}
+function dRequired() {
+    return {
+        description: `Set this property to \`true\` to indicate it must have a value ` +
+            `before submitting the containing form.`,
+    };
+}
+function dStartText() {
+    return {
+        description: `This property sets a text to appear at the start (left side when the ` +
+            `left-to-right direction is set) of the input.`,
+    };
+}
+function dStartIcon() {
+    return {
+        description: `This property sets an icon to appear at the start (left side when the ` +
+            `left-to-right direction is set) of the input.`,
+    };
+}
+function dEndText() {
+    return {
+        description: `This property sets a text to appear on the end (right side when the ` +
+            `left-to-right direction is set) of the input.`,
+    };
+}
+function dEndIcon() {
+    return {
+        description: `This property sets an icon to appear on the end (right side when the ` +
+            `left-to-right direction is set) of the input.`,
+    };
+}
+function dExpanded(comp) {
+    return {
+        description: `This property indicates if the ${comp} is expanded (\`true\`) or collapsed (\`false\`).`,
+    };
+}
+function dExpand(comp) {
+    return {
+        description: `This method expands the ${comp}.`,
+    };
+}
+function dCollapse(comp) {
+    return {
+        description: `This method collapses the ${comp}.`,
+    };
+}
+function dFocus(comp) {
+    return {
+        description: `This method sets the focus on the ${comp}.`,
+    };
+}
+function dValue() {
+    return {
+        description: `You can query the component's value. If no value is set, it will ` +
+            `retrieve \`undefined\`.`,
+    };
+}
+`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`;
+function dDidOpen(comp) {
+    return {
+        description: `This event is triggered when the ${comp} has been displayed. The event handler has a single ` +
+            `boolean argument set to \`true\`, indicating that the user opened the component.`,
+    };
+}
+function dDidClose(comp) {
+    return {
+        description: `This event is triggered when the ${comp} has been closed. The event handler has a single ` +
+            `boolean argument set to \`true\`, indicating that the user closed the component.`,
+    };
+}
+function dTriggerTemplate(comp) {
+    return {
+        description: `This property allows you to define a custom trigger instead of the default one provided by ` +
+            `\`${comp}\`.`,
+        valueType: "ComponentDef",
+    };
+}
+function dOrientation(defaultValue) {
+    return {
+        description: `This property sets the main axis along which the nested components are rendered.`,
+        availableValues: abstractions_1.orientationOptionMd,
+        valueType: "string",
+        defaultValue,
+    };
+}

package/dist/scripts/src/components/slot-helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlotItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("@components-core/constants");
+const hooks_1 = require("@components-core/utils/hooks");
+exports.SlotItem = (0, react_1.memo)(({ node, renderChild, layoutContext, slotProps = constants_1.EMPTY_OBJECT }) => {
+    const shallowMemoedSlotProps = (0, hooks_1.useShallowCompareMemoize)(slotProps);
+    const nodeWithItem = (0, react_1.useMemo)(() => {
+        const templateProps = {};
+        Object.entries(shallowMemoedSlotProps).forEach(([key, value]) => {
+            templateProps["$" + key] = value;
+        });
+        return {
+            type: "Container",
+            contextVars: templateProps,
+            children: Array.isArray(node) ? node : [node],
+        };
+    }, [node, shallowMemoedSlotProps]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
+});

package/dist/scripts/src/components-core/ApiBoundComponent.js

@@ -0,0 +1,194 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiBoundComponent = ApiBoundComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChild, layoutContextRef, parentRendererContext, }) {
+    const wrappedWithAdapter = (0, react_1.useMemo)(() => {
+        function generateloaderUid(key) {
+            return `${node.uid}_data_${key}`;
+        }
+        const loaders = [...(node.loaders || [])];
+        const events = Object.assign({}, (node.events || {}));
+        const props = Object.assign({}, (node.props || {}));
+        const vars = Object.assign({}, (node.vars || {}));
+        const api = Object.assign({}, (node.api || {}));
+        apiBoundEvents.forEach((key) => {
+            const { type } = node.events[key];
+            switch (type) {
+                case "FileUpload": {
+                    const actionComponent = node.events[key];
+                    const { invalidates, asForm, formParams, queryParams, rawBody, body, url, headers, method, file, } = actionComponent.props;
+                    const { success, error } = actionComponent.events || {};
+                    events[key] = `(eventArgs) => {
+            return Actions.upload({
+              asForm: ${JSON.stringify(asForm)}, 
+              formParams: ${JSON.stringify(formParams)}, 
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)}, 
+              url: ${JSON.stringify(url)}, 
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              file: ${JSON.stringify(file)}, 
+              params: { '$param': eventArgs }, 
+              onError: ${JSON.stringify(error)}, 
+              onSuccess: ${JSON.stringify(success)}, 
+              onProgress: eventArgs.onProgress, 
+              invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}  }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                case "FileDownload": {
+                    const actionComponent = node.events[key];
+                    const { url, queryParams, rawBody, body, headers, method, fileName } = actionComponent.props;
+                    events[key] = `(eventArgs) => {
+            return Actions.download({
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)}, 
+              url: ${JSON.stringify(url)}, 
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              fileName: ${JSON.stringify(fileName)}, 
+              params: { '$param': eventArgs },
+            }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                case "APICall": {
+                    const actionComponent = node.events[key];
+                    const { when, uid } = actionComponent;
+                    const { confirmTitle, confirmMessage, confirmButtonLabel, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, invalidates, updates, optimisticValue, getOptimisticValue, headers, payloadType, method, url, queryParams, rawBody, body, } = actionComponent.props;
+                    const { success, error, progress, beforeRequest } = actionComponent.events || {};
+                    events[key] = `(eventArgs, options) => {
+            return Actions.callApi({
+              uid: ${JSON.stringify(uid)},
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              url: ${JSON.stringify(url)}, 
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)} || (options?.passAsDefaultBody ? eventArgs : undefined), 
+              confirmTitle: ${JSON.stringify(confirmTitle)}, 
+              confirmMessage: ${JSON.stringify(confirmMessage)}, 
+              confirmButtonLabel: ${JSON.stringify(confirmButtonLabel)}, 
+              inProgressNotificationMessage: ${JSON.stringify(inProgressNotificationMessage)}, 
+              completedNotificationMessage: ${JSON.stringify(completedNotificationMessage)}, 
+              errorNotificationMessage: ${JSON.stringify(errorNotificationMessage)}, 
+              params: { '$param': eventArgs }, 
+              onError: ${JSON.stringify(error)}, 
+              onProgress: ${JSON.stringify(progress)}, 
+              onBeforeRequest: ${JSON.stringify(beforeRequest)}, 
+              onSuccess: ${JSON.stringify(success)}, 
+              updates: ${JSON.stringify(updates)}, 
+              optimisticValue: ${JSON.stringify(optimisticValue)}, 
+              payloadType: ${JSON.stringify(payloadType)}, 
+              getOptimisticValue: ${JSON.stringify(getOptimisticValue)}, 
+              invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}, 
+              when: ${when === undefined ? undefined : JSON.stringify(when)} }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                default: {
+                    throw new Error("Unknown event handler component type: ", type);
+                }
+            }
+        });
+        apiBoundProps.forEach((key) => {
+            var _a;
+            const isDatasourceRef = ((_a = node.props[key]) === null || _a === void 0 ? void 0 : _a.type) === "DataSourceRef";
+            const loaderUid = node.props[key].uid || generateloaderUid(key);
+            const operation = node.props[key].props || node.props[key];
+            const loaderEvents = {};
+            Object.entries(node.events || {}).forEach(([eventKey, value]) => {
+                if (eventKey.startsWith(key)) {
+                    const capitalizedEventName = eventKey.substring(key.length);
+                    const eventName = capitalizedEventName.charAt(0).toLowerCase() + capitalizedEventName.slice(1);
+                    loaderEvents[eventName] = value;
+                }
+            });
+            if (key === "data") {
+                props.__DATA_RESOLVED = true;
+            }
+            if (!isDatasourceRef) {
+                loaders.push({
+                    type: "DataLoader",
+                    uid: loaderUid,
+                    props: operation,
+                    events: loaderEvents,
+                });
+                api[`fetch_${key}`] = `() => { ${loaderUid}.refetch(); }`;
+                api[`update_${key}`] = `(updaterFn) => { ${loaderUid}.update(updaterFn); }`;
+                api[`addItem_${key}`] = `(element, index) => {  ${loaderUid}.addItem(element, index); }`;
+                api[`getItems_${key}`] = `() => { return ${loaderUid}.getItems(); }`;
+                api[`deleteItem_${key}`] = `(element) => { ${loaderUid}.deleteItem(element); }`;
+                if (key === "data") {
+                    props._data_url = operation.url;
+                }
+            }
+            props[key] = `{ ${loaderUid}.value }`;
+            props.loading = `{${loaderUid}.inProgress === undefined ? true : ${loaderUid}.inProgress}`;
+            props.pageInfo = `{${loaderUid}.pageInfo}`;
+            events.requestFetchPrevPage = `${loaderUid}.fetchPrevPage()`;
+            events.requestFetchNextPage = `${loaderUid}.fetchNextPage()`;
+            // TODO if the user provides a requestRefetch handler, we should call it
+            //  and then call the loader's refetch method if it returns !false;
+            //  requestRefetch could receive parameters to select which apibound props to refetch
+            events.requestRefetch = `()=> ${loaderUid}.refetch();`;
+        });
+        const wrapped = Object.assign(Object.assign({}, node), { containerUid: uid, apiBoundContainer: true, props,
+            events });
+        if (loaders.length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.loaders = loaders;
+        }
+        if (Object.keys(vars).length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.vars = vars;
+        }
+        if (Object.keys(api).length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.api = api;
+        }
+        return wrapped;
+    }, [apiBoundEvents, apiBoundProps, node, uid]);
+    // useEffect(() => {
+    //   console.log("wrapped with adapter changed", wrappedWithAdapter);
+    // }, [wrappedWithAdapter]);
+    const renderedChild = renderChild(wrappedWithAdapter, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRendererContext);
+    return react_1.default.isValidElement(renderedChild) ? renderedChild : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedChild });
+}

package/dist/scripts/src/components-core/AppContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppContext = void 0;
+exports.useAppContext = useAppContext;
+const react_1 = require("react");
+/**
+ * Stores the object that holds the global functions and methods of xmlui.
+ */
+exports.AppContext = (0, react_1.createContext)(undefined);
+/**
+ * This React hook makes the current context of application services available
+ * within any component logic using the hook.
+ */
+function useAppContext() {
+    return (0, react_1.useContext)(exports.AppContext);
+}