umwd-components 0.1.769 → 0.1.771

package/dist/esm/src/components/common/markdown/MarkdownDisplay.js

@@ -7,9 +7,13 @@
   
 import { jsx } from 'react/jsx-runtime';
 import MuiMarkdown from 'mui-markdown';
+import { Box } from '@mui/material';
 
-function MarkdownDisplay({ children, props, }) {
-    return jsx(MuiMarkdown, { ...props, children: children });
+function MarkdownDisplay({ children, props, onClickCallback, sx, }) {
+    return (jsx(Box, { onClick: onClickCallback, sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(MuiMarkdown, { ...props, children: children }) }));
 }
 
 export { MarkdownDisplay as default };

package/dist/esm/src/components/common/markdown/MarkdownTextField.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import MarkdownDisplay from './MarkdownDisplay.js';
+
+function MarkdownTextField({ id, name, label, defaultValue = "", sx, onChangeCallback, }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const [value, setValue] = useState(defaultValue);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChangeCallback) {
+            onChangeCallback(newValue);
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx(TextField, { id: id, name: name, label: label, value: value, variant: "standard", fullWidth: true, multiline: true, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), sx: {
+                    display: isFocused ? "block" : "none",
+                    "& .MuiInputBase-input": {
+                        color: "inherit",
+                        padding: 0,
+                    },
+                    ...sx,
+                } }), !isFocused && value && (jsx(MarkdownDisplay, { onClickCallback: () => setIsFocused(true), sx: { cursor: "pointer" }, children: value }))] }));
+}
+
+export { MarkdownTextField as default };

package/dist/esm/src/components/e-commerce/categories/CategorySelectorV2.js

@@ -4,19 +4,42 @@
  * @license MIT
  */
   
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
-const CategorySelector = ({ categories, currentValue, }) => {
-    console.log("CategorySelector props", { categories, currentValue });
+const CategorySelector = ({ name = "categories", categories, currentValue, sx, multiple = true, onChangeCallback, }) => {
     const [selectedValues, setSelectedValues] = useState(currentValue || []);
     const handleCategoryChange = (event, value) => {
-        value.map((category) => category.documentId);
-        setSelectedValues(value.map((category) => category.documentId));
+        if (!value) {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+            return;
+        }
+        if (multiple === true && Array.isArray(value)) {
+            const ids = value.map((category) => category.documentId);
+            setSelectedValues(ids);
+            if (onChangeCallback)
+                onChangeCallback(ids);
+        }
+        else if (value && !Array.isArray(value)) {
+            setSelectedValues([value.documentId]);
+            if (onChangeCallback)
+                onChangeCallback([value.documentId]);
+        }
+        else {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+        }
     };
-    return (jsxs(Fragment, { children: [jsx(Autocomplete, { multiple: true, options: categories, getOptionLabel: (option) => option.title, filterSelectedOptions: true, onChange: handleCategoryChange, renderInput: (params) => jsx(TextField, { ...params, label: "Category" }), value: categories.filter((category) => selectedValues.includes(category.documentId)) }), jsx("input", { type: "hidden", name: "categories", value: JSON.stringify(selectedValues) || "" })] }));
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(Autocomplete, { multiple: true, options: categories, getOptionLabel: (option) => option.title, filterSelectedOptions: true, onChange: handleCategoryChange, renderInput: (params) => jsx(TextField, { ...params, label: "Category" }), value: categories.filter((category) => selectedValues.includes(category.documentId)) }), jsx("input", { type: "hidden", name: name, value: JSON.stringify(selectedValues) || "" })] }));
 };
 
 export { CategorySelector as default };

package/dist/esm/src/components/e-commerce/products/ProductSelector.js

@@ -10,16 +10,22 @@ import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
-const ProductSelector = ({ productNames, currentValue, sx, multiple = true, onChangeCallback, }) => {
+const ProductSelector = ({ name = "products", productNames, currentValue, sx, multiple = true, onChangeCallback, }) => {
     const [selectedValues, setSelectedValues] = useState(currentValue || []);
     const handleProductChange = (event, value) => {
-        if (multiple === true) {
+        if (!value) {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+            return;
+        }
+        if (multiple === true && Array.isArray(value)) {
             const ids = value.map((product) => product.documentId);
             setSelectedValues(ids);
             if (onChangeCallback)
                 onChangeCallback(ids);
         }
-        else if (value) {
+        else if (value && !Array.isArray(value)) {
             setSelectedValues([value.documentId]);
             if (onChangeCallback)
                 onChangeCallback([value.documentId]);
@@ -35,9 +41,7 @@ const ProductSelector = ({ productNames, currentValue, sx, multiple = true, onCh
             ...(Array.isArray(sx) ? sx : [sx]),
         ], children: [jsx(Autocomplete, { multiple: multiple, options: productNames, getOptionLabel: (option) => {
                     return `${option.product_number} | ${option.title}`;
-                }, filterSelectedOptions: true, onChange: handleProductChange, renderInput: (params) => jsx(TextField, { ...params, label: "Products" }), defaultValue: multiple
-                    ? productNames.filter((productName) => selectedValues.includes(productName.documentId))
-                    : productNames.find((productName) => productName.documentId === selectedValues[0]) || null }), jsx("input", { type: "hidden", name: "products", value: JSON.stringify(selectedValues) })] }));
+                }, filterSelectedOptions: true, onChange: handleProductChange, renderInput: (params) => jsx(TextField, { ...params, label: "Products" }), value: productNames.filter((productName) => selectedValues.includes(productName.documentId)) }), jsx("input", { type: "hidden", name: name, value: JSON.stringify(selectedValues) })] }));
 };
 
 export { ProductSelector as default };

package/dist/esm/src/components/page-builder/PBCategoryBlock.js

@@ -1,4 +1,3 @@
-"use client";
 /*
  * UMWD-Components
  * @copyright Jelle Paulus
@@ -13,23 +12,29 @@ import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
 import { useTheme } from '@mui/material/styles';
 import { setOpacity } from '../../lib/utils.js';
 import ProductCard from '../e-commerce/products/ProductCard.js';
 import MarkdownDisplay from '../common/markdown/MarkdownDisplay.js';
 
-function PBCategoryBlock({ data, }) {
+function PBCategoryBlock({ data, index, }) {
     const { maxWidth = "lg", sx = {}, glass = false, previewAmount = 3 } = data;
     const theme = useTheme();
-    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
-                        p: 2,
-                        backdropFilter: "blur(3px)",
-                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
-                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
-                    }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h4", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: data.category.title }), data.category?.description &&
-                                typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
-                                            .slice(0, previewAmount)
-                                            .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }));
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, children: jsx(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                            p: 2,
+                            backdropFilter: "blur(3px)",
+                            backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                            border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                        }, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: data.category.title, variant: "outlined", fullWidth: true, InputProps: {
+                                        readOnly: true,
+                                    }, sx: { mb: 2 } }), jsx(TextField, { id: "description", name: "description", label: "Description", defaultValue: data.category.description, variant: "outlined", fullWidth: true, InputProps: {
+                                        readOnly: true,
+                                    } }), data.category?.description &&
+                                    typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
+                                                .slice(0, previewAmount)
+                                                .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }) }));
 }
 
 export { PBCategoryBlock };

package/dist/esm/src/components/page-builder/PageBuilder.js

@@ -62,7 +62,7 @@ function blockRenderer(block, index) {
         case "page-elements.product-block":
             return (jsx(PBProductBlock, { data: block }, `${block.id}-${block.__component}`));
         case "page-elements.category-block":
-            return (jsx(PBCategoryBlock, { data: block }, `${block.id}-${block.__component}`));
+            return (jsx(PBCategoryBlock, { data: block, index: index }, `${block.id}-${block.__component}`));
         default:
             return null;
     }

package/dist/esm/src/data/loaders/page-elements/getSinglePage.js

@@ -19,63 +19,85 @@ async function getSinglePage(slug) {
     url.search = qs.stringify({
         populate: {
             blocks: {
-                populate: "*",
-                /* {
-                  logoImage: {
-                    populate: true,
-                    // fields: ["url", "alternativeText"],
-                  },
-                  bgImage: {
-                    populate: true,
-                    // fields: ["url", "alternativeText"],
-                  },
-                  image: {
-                    populate: true,
-                    // fields: ["url", "alternativeText"],
-                  },
-                  link: {
-                    populate: true,
-                  },
-                  feature: {
-                    populate: true,
-                  },
-                  icon: {
-                    populate: true,
-                  },
-                  airplane: {
-                    populate: {
-                      floorplan: true,
+                on: {
+                    "page-elements.features-section": {
+                        populate: {
+                            feature: {
+                                populate: "*",
+                            },
+                        },
+                    },
+                    "page-elements.hero-section": {
+                        populate: { bgImage: "*", link: "*", logoImage: "*" },
+                    },
+                    "page-elements.review-section": {
+                        populate: {
+                            review: {
+                                populate: "*",
+                            },
+                        },
+                    },
+                    "page-elements.text-image-section": {
+                        populate: { image: "*" },
                     },
-                  },
-                  column: {
-                    populate: true,
-                  },
-                  partner: {
-                    populate: {
-                      text: true,
-                      photo: true,
-                      links: true,
+                    "page-elements.icon-section": {
+                        populate: {
+                            icon: {
+                                populate: "*",
+                            },
+                        },
                     },
-                  },
-                  pictures: true,
-                  companies: {
-                    populate: {
-                      logo: true,
+                    "page-elements.contact-section": {
+                        populate: "*",
+                    },
+                    "page-elements.fleet-section": {
+                        populate: {
+                            airplane: {
+                                populate: {
+                                    floorplan: "*",
+                                },
+                            },
+                        },
+                    },
+                    "page-elements.columns-section": {
+                        populate: {
+                            column: "*",
+                        },
+                    },
+                    "page-elements.personalia-section": {
+                        populate: {
+                            partner: "*",
+                        },
+                    },
+                    "page-elements.picture-bar-section": {
+                        populate: {
+                            pictures: "*",
+                        },
+                    },
+                    "page-elements.logo-bar-section": {
+                        populate: {
+                            companies: {
+                                populate: "*",
+                            },
+                        },
+                    },
+                    "page-elements.category-block": {
+                        populate: {
+                            category: "*",
+                        },
                     },
-                  },
-                  textV2: true,
-                  category: {
-                    populate: {
-                      products: {
+                    "page-elements.product-block": {
                         populate: {
-                          image: true,
-                          price: true,
+                            product: "*",
                         },
-                      },
                     },
-                  },
-                }, */
+                },
             },
+            /*{
+               populate: {
+                
+                
+              },*/
         },
     });
     console.log(url.href);

package/dist/esm/src/index.js

@@ -90,6 +90,7 @@ export { StrapiErrors } from './components/StrapiErrors.js';
 export { SubmitButton } from './components/SubmitButton.js';
 export { default as MarkdownDisplay } from './components/common/markdown/MarkdownDisplay.js';
 export { default as MarkdownEditor } from './components/common/markdown/MarkdownEditor.js';
+export { default as MarkdownTextField } from './components/common/markdown/MarkdownTextField.js';
 export { areBusinessCredentailsComplete } from './lib/areBusinessCredentialsComplete.js';
 export { isCustomerProfileComplete } from './lib/isCustomerProfileComplete.js';
 export { isCustomerProfileCompleteV2 } from './lib/isCustomerProfileCompleteV2.js';