class property supports array

grucloud · May 18, 2024 · 1a21717 · 1a21717
1 parent e49b086
commit 1a21717
Show file tree

Hide file tree

Showing 68 changed files with 243 additions and 372 deletions.
diff --git a/bau-css/bau-css.d.ts b/bau-css/bau-css.d.ts
@@ -6,5 +6,3 @@ export default function BauCss(input?: {
   keyframes: (any) => string;
   createGlobalStyles: (any) => any;
 };
-
-export function classNames(...cn: string[]): string;
diff --git a/bau-css/classNames.d.ts b/bau-css/classNames.d.ts
diff --git a/bau-css/classNames.js b/bau-css/classNames.js
diff --git a/bau-css/package.json b/bau-css/package.json
@@ -7,9 +7,7 @@
   "license": "BSD",
   "files": [
     "bau-css.js",
-    "bau-css.d.ts",
-    "classNames.js",
-    "classNames.d.ts"
+    "bau-css.d.ts"
   ],
   "types": "bau-css.d.ts",
   "keywords": [

diff --git a/bau-ui/accordion/accordion.js b/bau-ui/accordion/accordion.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 import collapsible from "../collapsible";
 import { Colors } from "../constants.js";
 
@@ -97,7 +96,7 @@ export default function (context, options = {}) {
       const AccordionHeader = () =>
         h3(
           {
-            class: () => classNames(itemNameState.val == name && "active"),
+            class: () => itemNameState.val == name && "active",
           },
           button(
             {
@@ -123,15 +122,15 @@ export default function (context, options = {}) {
 
       return li(
         {
-          class: classNames(color, variant, size),
+          class: [color, variant, size],
           onclick: onclick(name),
         },
         Collapsible({ Header: AccordionHeader, Content: AccordionContent })
       );
     };
     return div(
       {
-        class: classNames("accordion", className, options?.class, props.class),
+        class: ["accordion", className, options?.class, props.class],
       },
       ul(data.map(AccordionItem))
     );

diff --git a/bau-ui/alert/alert.js b/bau-ui/alert/alert.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 import { Colors } from "../constants.js";
 
 import button from "../button";
@@ -97,16 +96,16 @@ export default function (context, options = {}) {
     return div(
       {
         ...props,
-        class: classNames(
+        class: [
           "alert",
           `alert-${variant}`,
           options.class,
           variant,
           color,
           size,
           className,
-          props.class
-        ),
+          props.class,
+        ],
         role: "alert",
       },
       i({ class: "icon" }, severityMap[color]),

diff --git a/bau-ui/alertStack/alertStack.js b/bau-ui/alertStack/alertStack.js
@@ -1,6 +1,3 @@
-import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
-
 export default (context, options = {}) => {
   const { bau, css, keyframes } = context;
   const { limit = 10, deleteAfterDuration = 15e3 } = options;
@@ -87,7 +84,7 @@ export default (context, options = {}) => {
 
     return div(
       {
-        class: classNames(styles.stack, options?.class, props.class),
+        class: [styles.stack, options?.class, props.class],
       },
       bau.loop(messagesState, div(), AlertItem)
     );

diff --git a/bau-ui/animate/animate.js b/bau-ui/animate/animate.js
@@ -1,5 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
-
 export default function (context, options = {}) {
   const { bau, window } = context;
   const { div } = bau.tags;
@@ -11,7 +9,7 @@ export default function (context, options = {}) {
   ) {
     return div(
       {
-        class: classNames("animate", options?.class, props.class),
+        class: ["animate", options?.class, props.class],
         bauChildMutated: ({ record, element }) => {
           // Removed Nodes
           [...record.removedNodes].forEach((childNode) => {

diff --git a/bau-ui/autocomplete/autocomplete.js b/bau-ui/autocomplete/autocomplete.js
@@ -1,4 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
 import popover from "../popover/popover.js";
 import button from "../button/button.js";
@@ -238,19 +237,18 @@ export default function (context, componentOptions = {}) {
     });
 
     const contentEl = div(
-      { class: classNames(variant, color, size, "content") },
+      { class: [variant, color, size, "content"] },
       inputEl,
       () =>
         List(
-          { class: classNames(variant, color, size) },
+          { class: [variant, color, size] },
           optionsFilteredState.val.map((option, index) =>
             li(
               {
-                class: () =>
-                  classNames(
-                    itemIndexActive.val == index && "active",
-                    isOptionSelected(selectedState)(option) && "selected"
-                  ),
+                class: () => [
+                  itemIndexActive.val == index && "active",
+                  isOptionSelected(selectedState)(option) && "selected",
+                ],
                 onclick: onclickItem({ option, index }),
               },
               Option(option)
@@ -272,12 +270,12 @@ export default function (context, componentOptions = {}) {
     return div(
       {
         ...props,
-        class: classNames(
+        class: [
           "autocomplete",
           className,
           componentOptions?.class,
-          props?.class
-        ),
+          props?.class,
+        ],
       },
       bau.bind({
         deps: [selectedState],

diff --git a/bau-ui/avatar/avatar.js b/bau-ui/avatar/avatar.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 import skeleton from "../skeleton";
 
 export default function (context, options = {}) {
@@ -60,7 +59,7 @@ export default function (context, options = {}) {
       ...children
     ] = toPropsAndChildren(args);
     const Skeleton = skeleton(context, {
-      class: classNames(
+      class: [
         css`
           position: absolute;
           top: 0;
@@ -69,12 +68,12 @@ export default function (context, options = {}) {
           width: ${width}px;
         `,
         options?.class,
-        props.class
-      ),
+        props.class,
+      ],
     });
 
     return div(
-      { class: classNames(className, options?.class, props.class) },
+      { class: [className, options?.class, props.class] },
       () => loadingState.val && Skeleton(),
       () => errorState.val && alt,
       img({
@@ -83,17 +82,16 @@ export default function (context, options = {}) {
         height,
         onload,
         onerror,
-        class: () =>
-          classNames(
-            !loadingState.val && "visible",
-            errorState.val && "hide",
-            color,
-            variant,
-            size,
-            className,
-            options?.class,
-            props.class
-          ),
+        class: () => [
+          !loadingState.val && "visible",
+          errorState.val && "hide",
+          color,
+          variant,
+          size,
+          className,
+          options?.class,
+          props.class,
+        ],
         ...props,
       })
     );

diff --git a/bau-ui/badge/badge.js b/bau-ui/badge/badge.js
@@ -1,4 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
 
 export default function (context, options = {}) {
@@ -40,9 +39,9 @@ export default function (context, options = {}) {
     return span(
       {
         ...props,
-        class: classNames("badge", className, options?.class, props?.class),
+        class: ["badge", className, options?.class, props?.class],
       },
-      span({ class: classNames(color, variant, size) }, content),
+      span({ class: [color, variant, size] }, content),
       ...children
     );
   };

diff --git a/bau-ui/breadcrumbs/breadcrumbs.js b/bau-ui/breadcrumbs/breadcrumbs.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 import button from "../button/button.js";
 
 export default function (context, options = {}) {
@@ -54,7 +53,7 @@ export default function (context, options = {}) {
     return ul(
       {
         ...props,
-        class: classNames(className, options?.class, props?.class),
+        class: [className, options?.class, props?.class],
       },
       items.map(({ href, name }) =>
         li(
@@ -64,7 +63,7 @@ export default function (context, options = {}) {
               color,
               variant,
               size,
-              class: classNames(color, variant, size),
+              class: [color, variant, size],
             },
             name
           )

diff --git a/bau-ui/button/button.js b/bau-ui/button/button.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 
 import { Colors } from "../constants.js";
 
@@ -101,15 +100,15 @@ export default function (context, options = {}) {
       {
         ...(!href && { type: "button" }),
         ...props,
-        class: classNames(
+        class: [
           "button",
           options.class,
           variant,
           size,
           color,
           className,
-          props.class
-        ),
+          props.class,
+        ],
         href,
       },
       children

diff --git a/bau-ui/buttonGroup/buttonGroup.js b/bau-ui/buttonGroup/buttonGroup.js
@@ -1,4 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
 import { Colors } from "../constants.js";
 
@@ -60,15 +59,15 @@ export default function (context, options = {}) {
     return div(
       {
         ...props,
-        class: classNames(
+        class: [
           "button-group",
           variant,
           color,
           size,
           className,
           options?.class,
-          props?.class
-        ),
+          props?.class,
+        ],
       },
       ...children
     );

diff --git a/bau-ui/calendar/calendar.js b/bau-ui/calendar/calendar.js
@@ -1,4 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
 import { Colors } from "../constants.js";
 
@@ -40,15 +39,15 @@ export default function (context, options = {}) {
       {
         ...props,
         type: "date",
-        class: classNames(
+        class: [
           "calendar",
           className,
           color,
           variant,
           size,
           options?.class,
-          props?.class
-        ),
+          props?.class,
+        ],
       },
       ...children
     );

diff --git a/bau-ui/carousel/carousel.js b/bau-ui/carousel/carousel.js
@@ -1,4 +1,3 @@
-import classNames from "@grucloud/bau-css/classNames.js";
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
 
 export default function (context, options = {}) {
@@ -76,25 +75,19 @@ export default function (context, options = {}) {
     return div(
       {
         ...props,
-        class: classNames(
-          "carousel",
-          size,
-          className,
-          options?.class,
-          props?.class
-        ),
+        class: ["carousel", size, className, options?.class, props?.class],
       },
 
       div(
         {
-          class: classNames("control", "control-previous"),
+          class: ["control", "control-previous"],
           onclick: onclickPrevious,
         },
         Previous()
       ),
       div(
         {
-          class: classNames("control", "control-next"),
+          class: ["control", "control-next"],
           onclick: onclickNext,
         },
         Next()

diff --git a/bau-ui/checkbox/checkbox.js b/bau-ui/checkbox/checkbox.js
@@ -1,5 +1,4 @@
 import { toPropsAndChildren } from "@grucloud/bau/bau.js";
-import classNames from "@grucloud/bau-css/classNames.js";
 
 export default function (context, options = {}) {
   const { bau, css } = context;
@@ -79,14 +78,7 @@ export default function (context, options = {}) {
     return input({
       type: "checkbox",
       ...props,
-      class: classNames(
-        className,
-        color,
-        variant,
-        size,
-        options?.class,
-        props?.class
-      ),
+      class: [className, color, variant, size, options?.class, props?.class],
     });
   };
 }