xmlui 0.9.47 → 0.9.48

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.47",
+    "version": "0.9.48",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -106,7 +106,8 @@
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
         "xml-formatter": "^3.6.6",
-        "yargs": "17.7.2"
+        "yargs": "17.7.2",
+        "xmlui-charts": "*"
     },
     "devDependencies": {
         "@babel/core": "7.19.6",

package/dist/scripts/src/components/Badge/Badge.js

@@ -11,6 +11,7 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const BadgeNative_1 = require("./BadgeNative");
 const metadata_helpers_1 = require("../metadata-helpers");
+const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 const COMP = "Badge";
 exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
@@ -57,5 +58,21 @@ exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     var _a;
     const value = extractValue.asDisplayText(node.props.value);
     const colorMap = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.colorMap);
-    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorMap === null || colorMap === void 0 ? void 0 : colorMap[value], style: layoutCss, children: value || renderChild(node.children) }));
+    let colorValue;
+    if (colorMap && value) {
+        const resolvedColor = colorMap[value];
+        if (typeof resolvedColor === "string") {
+            colorValue = resolveColor(resolvedColor);
+        }
+        else if ((0, BadgeNative_1.isBadgeColors)(resolvedColor)) {
+            colorValue = {
+                label: resolveColor(resolvedColor.label),
+                background: resolveColor(resolvedColor.background),
+            };
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorValue, style: layoutCss, children: value || renderChild(node.children) }));
 });
+function resolveColor(value) {
+    return value.startsWith("$") ? (0, StyleParser_1.toCssVar)(value) : value;
+}

package/dist/scripts/src/components/Badge/BadgeNative.js

@@ -4,11 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = exports.defaultProps = exports.badgeVariantValues = void 0;
+exports.isBadgeColors = isBadgeColors;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
 const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
 exports.badgeVariantValues = ["badge", "pill"];
+// --- Type guard for BadgeColors ---
+function isBadgeColors(color) {
+    return (typeof color === "object" &&
+        color !== null &&
+        "label" in color &&
+        "background" in color &&
+        typeof color.label === "string" &&
+        typeof color.background === "string");
+}
 exports.defaultProps = {
     variant: "badge",
 };

package/dist/scripts/src/components/Column/Column.js

@@ -35,6 +35,7 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
         canSort: {
             description: `This property sets whether the user can sort by a column by clicking on its header ` +
                 `(\`true\`) or not (\`false\`).`,
+            defaultValue: true,
             valueType: "boolean",
         },
         pinTo: {
@@ -71,9 +72,9 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
         $cell: {
             description: "The value of the cell being rendered.",
         },
-    }
+    },
 });
 exports.columnComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ColumnMd, (rendererContext) => {
     const { node, renderChild, extractValue, layoutCss } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(ColumnNative_1.Column, { style: layoutCss, header: extractValue.asDisplayText(node.props.header), accessorKey: extractValue.asOptionalString(node.props.bindTo), canSort: extractValue.asOptionalBoolean(node.props.canSort), canResize: extractValue.asOptionalBoolean(node.props.canResize), pinTo: extractValue.asOptionalString(node.props.pinTo), width: extractValue(node.props.width), minWidth: extractValue(node.props.minWidth), maxWidth: extractValue(node.props.maxWidth), nodeChildren: node.children, renderChild: renderChild, id: node.uid }));
+    return ((0, jsx_runtime_1.jsx)(ColumnNative_1.Column, { style: layoutCss, header: extractValue.asDisplayText(node.props.header), accessorKey: extractValue.asOptionalString(node.props.bindTo), canSort: extractValue.asOptionalBoolean(node.props.canSort, true), canResize: extractValue.asOptionalBoolean(node.props.canResize), pinTo: extractValue.asOptionalString(node.props.pinTo), width: extractValue(node.props.width), minWidth: extractValue(node.props.minWidth), maxWidth: extractValue(node.props.maxWidth), nodeChildren: node.children, renderChild: renderChild, id: node.uid }));
 });

package/dist/scripts/src/components/ComponentProvider.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentRegistry = void 0;
 exports.ComponentProvider = ComponentProvider;
@@ -95,6 +98,8 @@ const APICall_2 = require("./APICall/APICall");
 const Option_1 = require("./Option/Option");
 const AutoComplete_1 = require("./AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
+// @ts-ignore
+const xmlui_charts_1 = __importDefault(require("xmlui-charts"));
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
@@ -346,12 +351,15 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_Image !== "false") {
             this.registerCoreComponent(Image_1.imageComponentRenderer);
         }
-        if (process.env.VITE_USER_COMPONENTS_XmluiCodeHightlighter !== "false") {
+        if (process.env.VITE_USED_COMPONENTS_XmluiCodeHightlighter !== "false") {
             this.registerCoreComponent(XmluiCodeHighlighter_1.codeComponentRenderer);
         }
-        if (process.env.VITE_USER_COMPONENTS_Markdown !== "false") {
+        if (process.env.VITE_USED_COMPONENTS_Markdown !== "false") {
             this.registerCoreComponent(Markdown_1.markdownComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_Charts !== "false") {
+            this.extensionRegistered(xmlui_charts_1.default);
+        }
         if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
             //TODO, if it proves to be a working solution, make these components skippable, too
             this.registerCoreComponent(PageMetaTitle_1.pageMetaTitleComponentRenderer);
@@ -679,7 +687,7 @@ class ComponentRegistry {
      * @returns True if the component is registered; otherwise, false.
      */
     hasComponent(componentName) {
-        return (this.pool.get(componentName) !== undefined ||
+        return (this.lookupComponentRenderer(componentName) !== undefined ||
             this.loaders.get(componentName) !== undefined ||
             this.actionFns.get(componentName) !== undefined);
     }

package/dist/scripts/src/components/Form/FormContext.js

@@ -24,7 +24,7 @@ exports.validationModeMd = [
     {
         value: "onLostFocus",
         description: "Show/hide error (if present) only if the field loses focus.",
-    }
+    },
 ];
 exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
 function useFormContextPart(selector) {
@@ -113,6 +113,7 @@ exports.formControlTypesMd = [
     },
     {
         value: "custom",
-        description: "Custom control specified in children",
-    }
+        description: "A custom control specified in children. If `type` is not specified " +
+            "but the `FormItem` has children, it considers the control a custom one.",
+    },
 ];

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -204,7 +204,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
         }));
     const resolvedRestProps = extractValue(nonLayoutCssProps);
     const formItemType = extractValue.asOptionalString(type);
-    const isCustomFormItem = formItemType === undefined && !!node.children;
+    const isCustomFormItem = (formItemType === undefined || formItemType === "custom") && !!node.children;
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
     return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))

package/dist/scripts/src/components/Icon/Icon.js

@@ -25,11 +25,14 @@ exports.IconMd = (0, ComponentDefs_1.createMetadata)({
         fallback: (0, ComponentDefs_1.d)(`This optional property provides a way to handle situations when the provided ` +
             `[icon name](#name) is not found in the registry.`),
     },
+    events: {
+        click: (0, ComponentDefs_1.d)("This event is triggered when the icon is clicked."),
+    },
     themeVars: (0, themeVars_1.parseScssVar)(Icon_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`size-${COMP}`]: "1.25em",
     },
 });
-exports.iconComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.IconMd, ({ node, extractValue, layoutCss }) => {
-    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), style: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback) }));
+exports.iconComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.IconMd, ({ node, extractValue, layoutCss, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), style: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback), onClick: lookupEventHandler("click") }));
 });

package/dist/scripts/src/components/Icon/IconNative.js

@@ -25,14 +25,14 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
-    var { name, fallback, style, className, size } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size"]);
+    var { name, fallback, style, className, size, onClick } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick"]);
     const iconRenderer = useFindIconRenderer(name, fallback);
     const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
     const width = computedSize || restProps.width;
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 
         // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }) });
+        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), onClick });
     // ---
     const customIconUrl = useCustomIconUrl(name);
     if (customIconUrl) {

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -12,7 +12,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const Theme_module_scss_1 = __importDefault(require("./Theme.module.scss"));
 const ThemeProvider_1 = require("../../components-core/theming/ThemeProvider");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const themeVars_1 = require("../../components-core/theming/themeVars");
 const constants_1 = require("../../components-core/constants");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
 const NotificationToast_1 = require("./NotificationToast");
@@ -47,7 +46,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         return foundTheme;
     }, [activeTheme, generatedId, id, themeTone, themeVars, themes]);
     const { themeCssVars, getResourceUrl, fontLinks, allThemeVarsWithResolvedHierarchicalVars, getThemeVar, } = (0, ThemeProvider_1.useCompiledTheme)(currentTheme, themeTone, themes, resources, resourceMap);
-    const { css, className, rangeClassName, fromClass, toClass } = (0, react_1.useMemo)(() => {
+    const { css, className } = (0, react_1.useMemo)(() => {
         const vars = Object.assign(Object.assign({}, themeCssVars), { "color-scheme": themeTone });
         // const vars = themeCssVars;
         let css = Object.entries(vars)
@@ -55,16 +54,8 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
             return key + ":" + value + ";";
         })
             .join(" ");
-        css += `font-family: var(${(0, themeVars_1.getVarKey)("fontFamily")});`;
         const className = getClassName(css);
-        const fromClass = `${className}-from`;
-        const toClass = `${className}-to`;
-        let rangeClassName;
-        if (!isRoot) {
-            rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
-            css += `color: var(${(0, themeVars_1.getVarKey)("textColor-primary")});`;
-        }
-        else {
+        if (isRoot) {
             css += `--screenSize: 0;`;
             const maxWidthPhone = getThemeVar("maxWidth-phone");
             const maxWidthLandscapePhone = getThemeVar("maxWidth-landscape-phone");
@@ -95,29 +86,9 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         }
         return {
             className,
-            rangeClassName,
-            fromClass,
-            toClass,
             css,
         };
     }, [isRoot, themeCssVars, themeTone, getThemeVar]);
-    // useInsertionEffect(() => {
-    //   //PERF OPT IDEA: don't inject the css content that we already have
-    //   // (e.g. in Items component we inject and generate classes for all items if we use a theme for an item, but they have the same content.
-    //   // We could inject one class, and use that instead. The harder part is keeping track of them, and remove when nobody uses them)
-    //   injectCSS(`.${className} {${css}}`, className);
-    //   if (rangeClassName) {
-    //     injectCSS(`.${rangeClassName} {${css}}`, rangeClassName);
-    //   }
-    //   let injectedClassNames = [className, rangeClassName];
-    //   return () => {
-    //     injectedClassNames.forEach(injectedClassName => {
-    //       if (injectedClassName) {
-    //         cleanupCss(injectedClassName);
-    //       }
-    //     });
-    //   };
-    // }, [className, css]);
     const [themeRoot, setThemeRoot] = (0, react_1.useState)(root);
     const currentThemeContextValue = (0, react_1.useMemo)(() => {
         const themeVal = {
@@ -167,7 +138,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         // </ThemeContext.Provider>
         );
     }
-    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
                         if (el) {
                             setThemeRoot(el);