xmlui 0.9.32 → 0.9.34

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

@@ -85,6 +85,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         [`width-navPanel-${COMP}`]: "$space-64",
+        [`backgroundColor-navPanel-${COMP}`]: "$backgroundColor",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`boxShadow-header-${COMP}`]: "$boxShadow-spread",
         [`boxShadow-navPanel-${COMP}`]: "$boxShadow-spread",

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

@@ -17,17 +17,18 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
     props: {},
     themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        "backgroundColor-CodeBlock": "#f2f7fc", // "$color-surface-100"
+        "backgroundColor-CodeBlock": "$color-primary-50",
         "backgroundColor-CodeBlock-header": "$color-primary-100",
         "marginTop-CodeBlock": "$space-5",
         "marginBottom-CodeBlock": "$space-5",
-        "backgroundColor-CodeBlock-highlightRow": "$color-surface-200",
-        "backgroundColor-CodeBlock-highlightString": "$color-surface-300",
+        "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-200-rgb, .25)",
+        "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-200-rgb, .5)",
         "borderRadius-CodeBlock": "$space-2",
         dark: {
-            "backgroundColor-CodeBlock-header": "$color-primary-200",
-            "backgroundColor-CodeBlock": "#112033",
-            "backgroundColor-CodeBlock-highlightRow": "$color-surface-100",
+            "backgroundColor-CodeBlock-header": "$color-surface-200",
+            "backgroundColor-CodeBlock": "$color-surface-50",
+            "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-300-rgb, .15)",
+            "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-300-rgb, .5)",
         }
     },
 });

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

@@ -576,6 +576,10 @@ class ComponentRegistry {
         var _a;
         (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
     }
+    getExtensionManager() {
+        return this.extensionManager;
+    }
+    ;
     // --- Registers a compound component using its definition and metadata
     registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
         const component = {

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -19,7 +19,7 @@ exports.defaultProps = {
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
-    iconVerticalCollapsed: "chevronright",
+    iconVerticalCollapsed: "chevronup",
 };
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -55,13 +55,14 @@ function DrawerNavPanel({ logoContent, children, className, style, }) {
     return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
 }
 exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer, renderChild, }, forwardedRef) {
-    var _a;
+    var _a, _b;
     const scrollContainerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
     const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
     const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
+    const vertical = (_b = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _b === void 0 ? void 0 : _b.startsWith("vertical");
     const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
     // console.log(appLayoutContext);
     if (inDrawer) {
@@ -69,6 +70,7 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,
+            [NavPanel_module_scss_1.default.vertical]: vertical,
             [NavPanel_module_scss_1.default.condensed]: isCondensed,
         }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }));
 });

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -28,7 +28,9 @@ const Tooltip_1 = require("./Tooltip");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const utils_1 = require("./utils");
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, }) {
+const AppContext_1 = require("../../components-core/AppContext");
+const ComponentRegistryContext_1 = require("../ComponentRegistryContext");
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, withFrame = true }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -36,6 +38,8 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
     const theme = (0, ThemeContext_1.useTheme)();
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const apiWorker = (0, react_1.useMemo)(() => {
         if (typeof document !== "undefined") {
             return (0, browser_1.setupWorker)();
@@ -54,6 +58,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             ? Object.assign(Object.assign({ type: "in-memory" }, api), { apiUrl: "/api" }) : undefined;
     }, [api]);
     //console.log("mock", mock);
+    const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
             standalone: {
@@ -63,7 +68,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                     name: title,
                     themes: [],
                     defaultTheme: activeTheme,
-                }
+                },
             },
             options: {
                 fixedTheme: false,
@@ -76,8 +81,8 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             },
         };
         const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
-        window.open(`/#/playground#${appQueryString}`, "_blank");
-    }), [app, activeTheme]);
+        window.open(useHashBasedRouting ? `/#/playground#${appQueryString}` : `/playground#${appQueryString}`, "_blank");
+    }), [app, components, title, activeTheme, activeTone, useHashBasedRouting]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
@@ -115,14 +120,15 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+                    compoundComponents,
+                    themes: config === null || config === void 0 ? void 0 : config.themes,
+                }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }));
+        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                             openPlayground();
                                         }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                             setRefreshVersion(refreshVersion + 1);
-                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
-                                    compoundComponents,
-                                    themes: config === null || config === void 0 ? void 0 : config.themes,
-                                }, resources: config === null || config === void 0 ? void 0 : config.resources }, `app-${nestedAppId}-${refreshVersion}`) })] }) }) }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }) }));
     }, [
         activeTheme,
         allowPlaygroundPopup,
@@ -137,6 +143,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         height,
         mock,
         nestedAppId,
+        openPlayground,
         refreshVersion,
         theme.themeStyles,
         title,
@@ -149,11 +156,11 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             contentRootRef.current = null;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.nestedApp, children: (0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
-                width: "100%",
-                height: "100%",
-                overflow: "auto",
-                position: "relative",
-                isolation: "isolate",
-            } }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
+            width: "100%",
+            height: "100%",
+            overflow: "auto",
+            position: "relative",
+            isolation: "isolate",
+        } }));
 }