From 1a217178d25b2869e0ceb95cb9eaec2d38446db8 Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Sat, 18 May 2024 19:44:58 +0200 Subject: [PATCH] class property supports array --- bau-css/bau-css.d.ts | 2 -- bau-css/classNames.d.ts | 3 -- bau-css/classNames.js | 3 -- bau-css/package.json | 4 +-- bau-ui/accordion/accordion.js | 7 ++-- bau-ui/alert/alert.js | 7 ++-- bau-ui/alertStack/alertStack.js | 5 +-- bau-ui/animate/animate.js | 4 +-- bau-ui/autocomplete/autocomplete.js | 20 +++++------ bau-ui/avatar/avatar.js | 30 ++++++++-------- bau-ui/badge/badge.js | 5 ++- bau-ui/breadcrumbs/breadcrumbs.js | 5 ++- bau-ui/button/button.js | 7 ++-- bau-ui/buttonGroup/buttonGroup.js | 7 ++-- bau-ui/calendar/calendar.js | 7 ++-- bau-ui/carousel/carousel.js | 13 ++----- bau-ui/checkbox/checkbox.js | 10 +----- bau-ui/chip/chip.js | 7 ++-- bau-ui/collapsible/collapsible.js | 18 +++------- bau-ui/divider/divider.js | 9 +---- bau-ui/drawer/drawer.js | 7 ++-- bau-ui/drillDownMenu/drillDownMenu.js | 20 +++++------ bau-ui/dropdownMenu/dropdownMenu.js | 11 +++--- .../src/components/navBarMenu.js | 35 +++++++++--------- .../animate/animate-visibility-hidden.ts | 4 +-- .../fileInput/fileInput-example-default.ts | 7 ++-- .../pages/fileInput/fileInput-grid-item.ts | 7 ++-- bau-ui/fileInput/fileInput.js | 11 +++--- bau-ui/form/form.js | 7 ++-- bau-ui/input/input.js | 7 ++-- bau-ui/inputSearch/inputSearch.js | 8 ++--- bau-ui/keyValueList/keyValueList.js | 8 +---- bau-ui/linearProgress/linearProgress.js | 7 ++-- bau-ui/list/list.js | 7 ++-- bau-ui/loadingButton/loadingButton.js | 7 ++-- bau-ui/modal/modal.js | 7 ++-- bau-ui/multiSelect/multiSelect.js | 11 +++--- .../paginationNavigation.js | 7 ++-- bau-ui/paper/paper.js | 9 +---- bau-ui/popover/popover.js | 3 +- bau-ui/radioButton/radioButton.js | 7 ++-- bau-ui/radioButtonGroup/radioButtonGroup.js | 7 ++-- bau-ui/resizable/resizable.js | 12 ++----- bau-ui/select/select.js | 11 +++--- bau-ui/selectNative/selectNative.js | 7 ++-- bau-ui/skeleton/skeleton.js | 9 +---- bau-ui/slider/slider.js | 7 ++-- bau-ui/spinner/spinner.js | 7 ++-- bau-ui/stepper/stepper.js | 29 +++++++-------- bau-ui/switch/switch.js | 7 ++-- bau-ui/tableContainer/tableContainer.js | 8 +---- bau-ui/tableOfContent/tableOfContent.js | 7 ++-- bau-ui/tablePagination/tablePagination.js | 7 ++-- bau-ui/tabs/tabs.js | 16 ++++----- bau-ui/themeSwitch/themeSwitch.js | 7 ++-- bau-ui/toggle/toggle.js | 7 ++-- bau-ui/toggleGroup/toggleGroup.js | 7 ++-- bau-ui/tooltip/tooltip.js | 7 ++-- bau-ui/treeView/treeView.js | 13 +++---- bau/bau.js | 6 +++- bau/examples/bau-ts-test/src/main.ts | 36 +++++++++++++++---- bau/index.html | 1 - bau/package.json | 1 - examples/bau-kit/src/utils/classNames.js | 3 -- examples/playground/main.js | 6 +--- examples/todoapp/src/footer.js | 3 +- examples/todoapp/src/todoItem.js | 10 +++--- examples/todoapp/src/utils.js | 4 --- 68 files changed, 243 insertions(+), 372 deletions(-) delete mode 100644 bau-css/classNames.d.ts delete mode 100644 bau-css/classNames.js diff --git a/bau-css/bau-css.d.ts b/bau-css/bau-css.d.ts index 9d984328..ef23814c 100644 --- 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 deleted file mode 100644 index cfe39f05..00000000 --- a/bau-css/classNames.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare module "@grucloud/bau-css/classNames" { - export default function classNames(...cn: string[]): string; -} diff --git a/bau-css/classNames.js b/bau-css/classNames.js deleted file mode 100644 index c7684657..00000000 --- a/bau-css/classNames.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function classNames(...cn) { - return cn.filter((className) => className).join(" "); -} diff --git a/bau-css/package.json b/bau-css/package.json index 6162953a..5278a065 100644 --- 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 index aa8d9f83..f40209a6 100644 --- 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,7 +122,7 @@ export default function (context, options = {}) { return li( { - class: classNames(color, variant, size), + class: [color, variant, size], onclick: onclick(name), }, Collapsible({ Header: AccordionHeader, Content: AccordionContent }) @@ -131,7 +130,7 @@ export default function (context, options = {}) { }; 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 index 63b84afc..c3d43421 100644 --- 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,7 +96,7 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( + class: [ "alert", `alert-${variant}`, options.class, @@ -105,8 +104,8 @@ export default function (context, options = {}) { 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 index 45f451b4..60399dee 100644 --- 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 index 991b8b2d..d510f1f9 100644 --- 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 index dd5d5115..c845b784 100644 --- 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 index e6442004..457bb4a3 100644 --- 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 index daa540d4..5bf9bb3c 100644 --- 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 index d722cb6e..1a9d158f 100644 --- 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 index 199eba83..f49fc181 100644 --- 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 index c16695ad..fc3ff557 100644 --- 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 index f6478875..1f844fb6 100644 --- 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 index 8d16cb24..ce8a9f76 100644 --- 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 index 71c37a81..d292f66a 100644 --- 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], }); }; } diff --git a/bau-ui/chip/chip.js b/bau-ui/chip/chip.js index 61cf4c6d..0096304b 100644 --- a/bau-ui/chip/chip.js +++ b/bau-ui/chip/chip.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 = {}) { @@ -46,7 +45,7 @@ export default function (context, options = {}) { { ...props, onclick, - class: classNames( + class: [ "chip", options.class, size, @@ -54,8 +53,8 @@ export default function (context, options = {}) { color, onclick && "clickable", className, - props.class - ), + props.class, + ], }, ...children ); diff --git a/bau-ui/collapsible/collapsible.js b/bau-ui/collapsible/collapsible.js index f36c85d9..85234135 100644 --- a/bau-ui/collapsible/collapsible.js +++ b/bau-ui/collapsible/collapsible.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 = {}) { @@ -78,21 +77,14 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( - "collapsible", - size, - className, - options?.class, - props?.class - ), + class: ["collapsible", size, className, options?.class, props?.class], }, div( { - class: () => - classNames( - "header", - Content ? (closeState.val ? "close" : "open") : "" - ), + class: () => [ + "header", + Content ? (closeState.val ? "close" : "open") : "", + ], onclick: (event) => { closeState.val = !closeState.val; event.stopPropagation(); diff --git a/bau-ui/divider/divider.js b/bau-ui/divider/divider.js index 1f20bfcd..9d217b5c 100644 --- a/bau-ui/divider/divider.js +++ b/bau-ui/divider/divider.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 = {}) { @@ -34,13 +33,7 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( - "divider", - size, - className, - options?.class, - props?.class - ), + class: ["divider", size, className, options?.class, props?.class], }, div({ class: "content" }, ...children) ); diff --git a/bau-ui/drawer/drawer.js b/bau-ui/drawer/drawer.js index 09d3c4ed..297b3292 100644 --- a/bau-ui/drawer/drawer.js +++ b/bau-ui/drawer/drawer.js @@ -1,5 +1,4 @@ import { toPropsAndChildren } from "@grucloud/bau/bau.js"; -import cn from "@grucloud/bau-css/classNames"; export default function (context, options) { const { bau, css } = context; @@ -54,10 +53,10 @@ export default function (context, options) { ...children ] = toPropsAndChildren(args); return div( - { class: cn(className, options?.class, props.class) }, + { class: [className, options?.class, props.class] }, // Overlay div({ - class: () => cn("overlay", openState.val && "overlay-open"), + class: () => ["overlay", openState.val && "overlay-open"], onclick: () => { openState.val = false; }, @@ -65,7 +64,7 @@ export default function (context, options) { // Content div( { - class: () => cn("content", openState.val && "content-open"), + class: () => ["content", openState.val && "content-open"], }, children ) diff --git a/bau-ui/drillDownMenu/drillDownMenu.js b/bau-ui/drillDownMenu/drillDownMenu.js index a804a875..7b7f44d4 100644 --- a/bau-ui/drillDownMenu/drillDownMenu.js +++ b/bau-ui/drillDownMenu/drillDownMenu.js @@ -1,4 +1,3 @@ -import cn from "@grucloud/bau-css/classNames.js"; import animate from "../animate/animate.js"; import button from "../button/button.js"; import list from "../list/list.js"; @@ -182,15 +181,14 @@ export default function (context, options = {}) { size, }) => List( - { class: cn(variant, color, size) }, + { class: [variant, color, size] }, children.map((subTree) => li( { - class: () => - cn( - subTree.children && "has-children", - isActive({ pathname: pathnameState.val, subTree }) && "active" - ), + class: () => [ + subTree.children && "has-children", + isActive({ pathname: pathnameState.val, subTree }) && "active", + ], }, renderMenuItem({ variant, color, size, subTree }) ) @@ -200,7 +198,7 @@ export default function (context, options = {}) { const Menu = ({ variant, color, size, currentTree, pathnameState }) => { const { children, parentTree, data, renderList } = currentTree; return div( - { class: cn("drillDownMenu", variant, color, size) }, + { class: ["drillDownMenu", variant, color, size] }, parentTree && renderHeader({ variant, color, size, data, currentTree }), children && renderList ? renderList({ @@ -310,14 +308,14 @@ export default function (context, options = {}) { return nav( { - class: cn( + class: [ className, variant, color, size, options?.class, - otherProps.class - ), + otherProps.class, + ], onclick, }, Animate( diff --git a/bau-ui/dropdownMenu/dropdownMenu.js b/bau-ui/dropdownMenu/dropdownMenu.js index b18f7678..847011dc 100644 --- a/bau-ui/dropdownMenu/dropdownMenu.js +++ b/bau-ui/dropdownMenu/dropdownMenu.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"; @@ -94,11 +93,11 @@ export default function (context, componentOptions = {}) { const Content = () => List( - { tabindex: "0", class: classNames(color, variant) }, + { tabindex: "0", class: [color, variant] }, items.map((item, index) => li( { - class: () => classNames(itemIndexActive.val == index && "active"), + class: () => [itemIndexActive.val == index && "active"], onclick: onclickItem({ item, index }), }, ListItem(item) @@ -125,14 +124,14 @@ export default function (context, componentOptions = {}) { return div( { ...props, - class: classNames( + class: [ "dropdownMenu", color, size, className, componentOptions?.class, - props?.class - ), + props?.class, + ], onkeydown, }, buttonEl, diff --git a/bau-ui/examples/bau-storybook/src/components/navBarMenu.js b/bau-ui/examples/bau-storybook/src/components/navBarMenu.js index f3829130..313f2de8 100644 --- a/bau-ui/examples/bau-storybook/src/components/navBarMenu.js +++ b/bau-ui/examples/bau-storybook/src/components/navBarMenu.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import drillDownMenu from "@grucloud/bau-ui/drillDownMenu"; import inputSearch from "@grucloud/bau-ui/inputSearch"; @@ -202,25 +201,23 @@ export default function (context) { }, style: () => states.drawerOpen.val ? "display:block;" : "display:none;", - class: classNames( - css` - grid-area: sidebar; - position: sticky; - top: calc(var(--header-height)); - align-self: start; - overflow-y: scroll; - height: calc(100vh - var(--header-height) - 1rem); - border-right: 1px solid var(--color-emphasis-200); - min-width: 200px; + class: css` + grid-area: sidebar; + position: sticky; + top: calc(var(--header-height)); + align-self: start; + overflow-y: scroll; + height: calc(100vh - var(--header-height) - 1rem); + border-right: 1px solid var(--color-emphasis-200); + min-width: 200px; - @media (max-width: 640px) { - position: fixed; - width: 100vw; - z-index: 1; - display: none; - } - ` - ), + @media (max-width: 640px) { + position: fixed; + width: 100vw; + z-index: 1; + display: none; + } + `, }, DrillDownMenu({ tree }) ); diff --git a/bau-ui/examples/bau-storybook/src/pages/animate/animate-visibility-hidden.ts b/bau-ui/examples/bau-storybook/src/pages/animate/animate-visibility-hidden.ts index ec02f544..69a24a64 100644 --- a/bau-ui/examples/bau-storybook/src/pages/animate/animate-visibility-hidden.ts +++ b/bau-ui/examples/bau-storybook/src/pages/animate/animate-visibility-hidden.ts @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames"; import button from "@grucloud/bau-ui/button"; import { Context } from "@grucloud/bau-ui/context"; @@ -28,8 +27,7 @@ export default (context: Context) => { ), p( { - class: () => - classNames(hideState.val ? "hide" : "", classNameTransition), + class: () => [hideState.val ? "hide" : "", classNameTransition], }, "ON" ) diff --git a/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-example-default.ts index d309d23e..836cb667 100644 --- a/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-example-default.ts +++ b/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-example-default.ts @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames"; import fileInput from "@grucloud/bau-ui/fileInput"; import { Context } from "@grucloud/bau-ui/context"; @@ -13,7 +12,7 @@ export default (context: Context) => { const FileInputLabel = ({ disabled }: any) => div( { - class: classNames( + class: [ css` display: flex; align-items: center; @@ -26,8 +25,8 @@ export default (context: Context) => { css` color: var(--color-emphasis-500); fill: var(--font-color-disabled); - ` - ), + `, + ], }, svg( { width: 100, height: 100, fill: "currentColor" }, diff --git a/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-grid-item.ts b/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-grid-item.ts index bea4b538..6e62cc3f 100644 --- a/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-grid-item.ts +++ b/bau-ui/examples/bau-storybook/src/pages/fileInput/fileInput-grid-item.ts @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames"; import fileInput from "@grucloud/bau-ui/fileInput"; import { Context } from "@grucloud/bau-ui/context"; @@ -24,7 +23,7 @@ export default (context: Context, options?: any) => { const FileInputLabel = ({ disabled }: any) => div( { - class: classNames( + class: [ css` display: flex; align-items: center; @@ -37,8 +36,8 @@ export default (context: Context, options?: any) => { css` color: var(--color-emphasis-500); fill: var(--font-color-disabled); - ` - ), + `, + ], }, svg( { width: 100, height: 100, fill: "currentColor" }, diff --git a/bau-ui/fileInput/fileInput.js b/bau-ui/fileInput/fileInput.js index 6f58959e..603a972d 100644 --- a/bau-ui/fileInput/fileInput.js +++ b/bau-ui/fileInput/fileInput.js @@ -1,6 +1,3 @@ -import { toPropsAndChildren } from "@grucloud/bau/bau.js"; -import classNames from "@grucloud/bau-css/classNames.js"; - export default function (context, options = {}) { const { bau, css } = context; const { div, label, input } = bau.tags; @@ -54,16 +51,16 @@ export default function (context, options = {}) { return div( { - class: classNames( + class: [ style.base, disabled && style.disabled, options?.class, - props.class - ), + props.class, + ], }, label( { - class: classNames(variant, color, size), + class: [variant, color, size], }, Component({ disabled }), input({ type: "file", disabled, ...otherProps }) diff --git a/bau-ui/form/form.js b/bau-ui/form/form.js index aac89092..32d98906 100644 --- a/bau-ui/form/form.js +++ b/bau-ui/form/form.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 = {}) { @@ -63,15 +62,15 @@ export default function (context, options = {}) { return form( { ...props, - class: classNames( + class: [ "form", color, variant, size, className, options?.class, - props?.class - ), + props?.class, + ], }, ...children ); diff --git a/bau-ui/input/input.js b/bau-ui/input/input.js index eff20f7e..19de1d45 100644 --- a/bau-ui/input/input.js +++ b/bau-ui/input/input.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import { Colors } from "../constants.js"; const colorsToCss = () => @@ -75,15 +74,15 @@ export default function (context, options = {}) { return input({ type: "text", ...otherProps, - class: classNames( + class: [ "input", options.class, options.size ?? "md", color, variant, className, - otherProps.class - ), + otherProps.class, + ], }); }; } diff --git a/bau-ui/inputSearch/inputSearch.js b/bau-ui/inputSearch/inputSearch.js index ae3697f1..25288712 100644 --- a/bau-ui/inputSearch/inputSearch.js +++ b/bau-ui/inputSearch/inputSearch.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import input from "../input/input.js"; export default function (context, options = {}) { @@ -38,11 +37,8 @@ export default function (context, options = {}) { ...otherProps, color, variant, - class: classNames( - "inputSearch", - options.class, - className, - otherProps.class + class: ["inputSearch", options.class, className, otherProps.class].join( + " " ), }); }; diff --git a/bau-ui/keyValueList/keyValueList.js b/bau-ui/keyValueList/keyValueList.js index e61279df..fad78bda 100644 --- a/bau-ui/keyValueList/keyValueList.js +++ b/bau-ui/keyValueList/keyValueList.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 = {}) { @@ -35,12 +34,7 @@ export default function (context, options = {}) { return ul( { ...props, - class: classNames( - "keyValueList", - className, - options?.class, - props?.class - ), + class: ["keyValueList", className, options?.class, props?.class], }, ...children ); diff --git a/bau-ui/linearProgress/linearProgress.js b/bau-ui/linearProgress/linearProgress.js index e054d656..9e456f56 100644 --- a/bau-ui/linearProgress/linearProgress.js +++ b/bau-ui/linearProgress/linearProgress.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"; @@ -75,15 +74,15 @@ export default function (context, options = {}) { class: { deps: [running], renderProp: () => (running) => - classNames( + [ "linearProgress", size, color, className, running && "running", options?.class, - props?.class - ), + props?.class, + ], }, }); }; diff --git a/bau-ui/list/list.js b/bau-ui/list/list.js index 5eb5ca2c..0f427688 100644 --- a/bau-ui/list/list.js +++ b/bau-ui/list/list.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 = {}) { @@ -48,15 +47,15 @@ export default function (context, options = {}) { return ul( { ...props, - class: classNames( + class: [ "list", className, color, variant, size, options?.class, - props?.class - ), + props?.class.join(" "), + ], }, ...children ); diff --git a/bau-ui/loadingButton/loadingButton.js b/bau-ui/loadingButton/loadingButton.js index 28596161..c153c6f7 100644 --- a/bau-ui/loadingButton/loadingButton.js +++ b/bau-ui/loadingButton/loadingButton.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import { toPropsAndChildren } from "@grucloud/bau/bau.js"; import button from "../button"; import spinner from "../spinner"; @@ -57,7 +56,7 @@ export default function (context, options = {}) { Button( { ...props, - class: classNames( + class: [ "loadingButton", size, variant, @@ -65,8 +64,8 @@ export default function (context, options = {}) { className, loading && "loading", options?.class, - props?.class - ), + props?.class, + ].join(" "), }, Spinner({ size, variant, color, visibility: loading }), span({ class: loading && "loading" }, children) diff --git a/bau-ui/modal/modal.js b/bau-ui/modal/modal.js index bf7de269..6c59899a 100644 --- a/bau-ui/modal/modal.js +++ b/bau-ui/modal/modal.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"; @@ -93,15 +92,15 @@ export default function (context, options = {}) { dialogEl.showModal(); } }, - class: classNames( + class: [ "modal", className, color, variant, size, options?.class, - props?.class - ), + props?.class, + ], }, children ); diff --git a/bau-ui/multiSelect/multiSelect.js b/bau-ui/multiSelect/multiSelect.js index 88f0001f..222091bb 100644 --- a/bau-ui/multiSelect/multiSelect.js +++ b/bau-ui/multiSelect/multiSelect.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"; @@ -154,11 +153,11 @@ export default function (context, componentOptions = {}) { const Content = () => { return List( - { tabindex: "0", class: classNames(color, variant) }, + { tabindex: "0", class: [color, variant] }, options.map((option, index) => li( { - class: () => classNames(itemIndexActive.val == index && "active"), + class: () => itemIndexActive.val == index && "active", }, bau.tags.label( Checkbox({ @@ -218,14 +217,14 @@ export default function (context, componentOptions = {}) { return div( { ...props, - class: classNames( + class: [ "multiSelect", color, size, className, componentOptions?.class, - props?.class - ), + props?.class, + ], onkeydown, }, selectEl, diff --git a/bau-ui/paginationNavigation/paginationNavigation.js b/bau-ui/paginationNavigation/paginationNavigation.js index 1bafc058..3c297cc8 100644 --- a/bau-ui/paginationNavigation/paginationNavigation.js +++ b/bau-ui/paginationNavigation/paginationNavigation.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 = {}) { @@ -70,13 +69,13 @@ export default function (context, options = {}) { "data-paginationnav": JSON.stringify(data), "aria-label": "pages navigation", ...props, - class: classNames( + class: [ "paginationNavigation", size, className, options?.class, - props?.class - ), + props?.class, + ], }, previous?.href && Link({ text: "Previous" })(previous), next?.href && Link({ text: "Next" })(next) diff --git a/bau-ui/paper/paper.js b/bau-ui/paper/paper.js index e55438f9..3a870799 100644 --- a/bau-ui/paper/paper.js +++ b/bau-ui/paper/paper.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 = {}) { @@ -45,13 +44,7 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( - "paper", - size, - className, - options?.class, - props?.class - ), + class: ["paper", size, className, options?.class, props?.class], }, ...children ); diff --git a/bau-ui/popover/popover.js b/bau-ui/popover/popover.js index d3789005..af34b617 100644 --- a/bau-ui/popover/popover.js +++ b/bau-ui/popover/popover.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) { @@ -59,7 +58,7 @@ export default function (context, options) { const dialogEl = dialog( { role: "presentation", - class: classNames("popover", className, options?.class, props?.class), + class: ["popover", className, options?.class, props?.class], onclick: (event) => { event.target === dialogEl && (closeDialog(), onClose?.call()); }, diff --git a/bau-ui/radioButton/radioButton.js b/bau-ui/radioButton/radioButton.js index e5d1d80d..a0febfbf 100644 --- a/bau-ui/radioButton/radioButton.js +++ b/bau-ui/radioButton/radioButton.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"; @@ -42,15 +41,15 @@ export default function (context, options = {}) { return input({ ...props, type: "radio", - class: classNames( + class: [ "radio-button", size, color, variant, className, options?.class, - props?.class - ), + props?.class, + ], }); }; } diff --git a/bau-ui/radioButtonGroup/radioButtonGroup.js b/bau-ui/radioButtonGroup/radioButtonGroup.js index 53ddca2d..9a817c5e 100644 --- a/bau-ui/radioButtonGroup/radioButtonGroup.js +++ b/bau-ui/radioButtonGroup/radioButtonGroup.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"; import radioButton from "../radioButton"; @@ -51,15 +50,15 @@ export default function (context, options = {}) { return div( { - class: classNames( + class: [ "radioButtonGroup", size, color, variant, className, options?.class, - props?.class - ), + props?.class, + ], }, radios.map(({ value, Label }) => label( diff --git a/bau-ui/resizable/resizable.js b/bau-ui/resizable/resizable.js index b6f09e8c..c6c6152a 100644 --- a/bau-ui/resizable/resizable.js +++ b/bau-ui/resizable/resizable.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 = {}) { @@ -48,12 +47,7 @@ export default function (context, options = {}) { return section( { ...props, - class: classNames( - "resizablePanelGroup", - props?.class, - options?.class, - className - ), + class: ["resizablePanelGroup", props?.class, options?.class, className], }, children ); @@ -65,7 +59,7 @@ export default function (context, options = {}) { return article( { ...props, - class: classNames("resizablePanel", props?.class), + class: ["resizablePanel", props?.class], }, children ); @@ -148,7 +142,7 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames("handle", direction), + class: ["handle", direction], role: "separator", bauMounted: ({ element }) => { element.addEventListener("mousedown", mouseDownHandler); diff --git a/bau-ui/select/select.js b/bau-ui/select/select.js index 4ebaeb27..1e6a7286 100644 --- a/bau-ui/select/select.js +++ b/bau-ui/select/select.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"; @@ -137,11 +136,11 @@ export default function (context, componentOptions = {}) { const Content = () => List( - { tabindex: "0", class: classNames(color, variant) }, + { tabindex: "0", class: [color, variant] }, options.map((option, index) => li( { - class: () => classNames(itemIndexActive.val == index && "active"), + class: () => itemIndexActive.val == index && "active", onclick: onclickItem({ option, index }), }, Option(option) @@ -192,14 +191,14 @@ export default function (context, componentOptions = {}) { return div( { ...props, - class: classNames( + class: [ "select", color, size, className, componentOptions?.class, - props?.class - ), + props?.class, + ], onkeydown, }, selectEl, diff --git a/bau-ui/selectNative/selectNative.js b/bau-ui/selectNative/selectNative.js index 0730c339..4e94d840 100644 --- a/bau-ui/selectNative/selectNative.js +++ b/bau-ui/selectNative/selectNative.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import { toPropsAndChildren } from "@grucloud/bau/bau.js"; export default function (context, componentOptions = {}) { @@ -31,15 +30,15 @@ export default function (context, componentOptions = {}) { return select( { ...props, - class: classNames( + class: [ "select-native", color, size, variant, className, componentOptions?.class, - props?.class - ), + props?.class, + ], }, children ); diff --git a/bau-ui/skeleton/skeleton.js b/bau-ui/skeleton/skeleton.js index 89f96fc8..b5e2356a 100644 --- a/bau-ui/skeleton/skeleton.js +++ b/bau-ui/skeleton/skeleton.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 = {}) { @@ -49,13 +48,7 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( - "skeleton", - size, - className, - options?.class, - props?.class - ), + class: ["skeleton", size, className, options?.class, props?.class], }, ...children ); diff --git a/bau-ui/slider/slider.js b/bau-ui/slider/slider.js index 0103116c..60c4fa16 100644 --- a/bau-ui/slider/slider.js +++ b/bau-ui/slider/slider.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"; export default function (context, options = {}) { @@ -35,15 +34,15 @@ export default function (context, options = {}) { { ...props, type: "range", - class: classNames( + class: [ "slider", color, variant, size, className, options?.class, - props.class - ), + props.class, + ], }, ...children ); diff --git a/bau-ui/spinner/spinner.js b/bau-ui/spinner/spinner.js index 44b6b1d7..c52dd560 100644 --- a/bau-ui/spinner/spinner.js +++ b/bau-ui/spinner/spinner.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import { Colors } from "../constants.js"; const sizeToPixel = { @@ -88,15 +87,15 @@ export default function (context, options = {}) { class: { deps: [visibility], renderProp: () => (visibility) => - classNames( + [ "spinner", className, color, variant, visibility == false ? "" : "visibility", options?.class, - otherProps.class - ), + otherProps.class, + ], }, version: "1.1", x: "0px", diff --git a/bau-ui/stepper/stepper.js b/bau-ui/stepper/stepper.js index 050d87ab..61b1fb76 100644 --- a/bau-ui/stepper/stepper.js +++ b/bau-ui/stepper/stepper.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"; @@ -130,13 +129,12 @@ export default function (context, options = {}) { const { Header, disabled, name, index } = stepper; return li( { - class: () => - classNames( - stepperCurrentState.val.name == name && "active", - activeStepIndex.val < index && "not-completed", - activeStepIndex.val > index && "completed", - disabled && "disabled" - ), + class: () => [ + stepperCurrentState.val.name == name && "active", + activeStepIndex.val < index && "not-completed", + activeStepIndex.val > index && "completed", + disabled && "disabled", + ], }, span({ class: "step-number" }, index + 1), span({ class: "step-label" }, () => Header(stepper)) @@ -174,26 +172,25 @@ export default function (context, options = {}) { bauUnmounted: () => { window.removeEventListener("popstate", hashchange); }, - class: classNames( + class: [ "stepper", variant, size, color, className, options?.class, - props.class - ), + props.class, + ], }, // Header bau.loop(stepperState, ul(), StepperHeader), bau.loop(stepsCreatedState, section(), (stepperDef) => div( { - class: () => - classNames( - "content", - stepperDef.name == stepperCurrentState.val.name && "visible" - ), + class: () => [ + "content", + stepperDef.name == stepperCurrentState.val.name && "visible", + ], }, stepperDef.Content({ nextStep: stepperDefs[getIndex(stepperDef) + 1], diff --git a/bau-ui/switch/switch.js b/bau-ui/switch/switch.js index 0246905b..4c63be7e 100644 --- a/bau-ui/switch/switch.js +++ b/bau-ui/switch/switch.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"; const colorsToCss = () => @@ -121,15 +120,15 @@ export default function (context, options = {}) { return input( { ...props, - class: classNames( + class: [ "switch", style, color, variant, size, options?.class, - props.class - ), + props.class, + ], type: "checkbox", }, ...children diff --git a/bau-ui/tableContainer/tableContainer.js b/bau-ui/tableContainer/tableContainer.js index 50fe4fb9..59353c5d 100644 --- a/bau-ui/tableContainer/tableContainer.js +++ b/bau-ui/tableContainer/tableContainer.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) { @@ -64,12 +63,7 @@ export default function (context, options) { return div( { ...props, - class: classNames( - "table-container", - className, - options?.class, - props?.class - ), + class: ["table-container", className, options?.class, props?.class], }, ...children ); diff --git a/bau-ui/tableOfContent/tableOfContent.js b/bau-ui/tableOfContent/tableOfContent.js index a3e3c6b5..94198fb5 100644 --- a/bau-ui/tableOfContent/tableOfContent.js +++ b/bau-ui/tableOfContent/tableOfContent.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 = {}) { @@ -144,15 +143,15 @@ export default function (context, options = {}) { return nav( { ...props, - class: classNames( + class: [ "tableOfContent", size, variant, color, className, options?.class, - props?.class - ), + props?.class, + ], bauMounted: (/*{ element }*/) => { window.addEventListener("scroll", handleScroll); }, diff --git a/bau-ui/tablePagination/tablePagination.js b/bau-ui/tablePagination/tablePagination.js index 2eb7ac63..6483aaa1 100644 --- a/bau-ui/tablePagination/tablePagination.js +++ b/bau-ui/tablePagination/tablePagination.js @@ -1,4 +1,3 @@ -import classNames from "@grucloud/bau-css/classNames.js"; import { toPropsAndChildren } from "@grucloud/bau/bau.js"; import button from "../button/button.js"; import buttonGroup from "../buttonGroup/buttonGroup.js"; @@ -110,13 +109,13 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( + class: [ "table-pagination", className, isLoading && "disabled", options?.class, - props?.class - ), + props?.class, + ], }, Spinner({ class: "spinner", visibility: isLoading, size: "md" }), totalCount > 0 diff --git a/bau-ui/tabs/tabs.js b/bau-ui/tabs/tabs.js index ea9a9740..a99a5a3d 100644 --- a/bau-ui/tabs/tabs.js +++ b/bau-ui/tabs/tabs.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"; @@ -134,11 +133,10 @@ export default function (context, options = {}) { const { Header, disabled, name } = tab; return li( { - class: () => - classNames( - tabCurrentState.val.name == name && "active", - disabled && "disabled" - ), + class: () => [ + tabCurrentState.val.name == name && "active", + disabled && "disabled", + ], }, a({ href: buildHref(name) }, Header(tab)) ); @@ -146,15 +144,15 @@ export default function (context, options = {}) { const rootEl = div( { - class: classNames( + class: [ "tabs", variant, size, color, className, options?.class, - props.class - ), + props.class, + ], bauMounted: ({ element }) => { window.addEventListener("popstate", hashchange); }, diff --git a/bau-ui/themeSwitch/themeSwitch.js b/bau-ui/themeSwitch/themeSwitch.js index 8da84337..5816ac82 100644 --- a/bau-ui/themeSwitch/themeSwitch.js +++ b/bau-ui/themeSwitch/themeSwitch.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"; const defaultMode = "light"; @@ -111,15 +110,15 @@ export default function (context, options = {}) { title: "Switch Theme", name: "theme-switch", ...props, - class: classNames( + class: [ "theme-switch", color, variant, size, className, options?.class, - props.class - ), + props.class, + ], type: "checkbox", checked: getStoredTheme() == "dark", onclick: (event) => { diff --git a/bau-ui/toggle/toggle.js b/bau-ui/toggle/toggle.js index 697da915..b6a7340e 100644 --- a/bau-ui/toggle/toggle.js +++ b/bau-ui/toggle/toggle.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, createGlobalStyles } = context; @@ -90,15 +89,15 @@ export default function (context, options = {}) { onclick && onclick(event); }, - class: classNames( + class: [ "toggle", size, color, variant, className, options?.class, - props?.class - ), + props?.class, + ], }, children ); diff --git a/bau-ui/toggleGroup/toggleGroup.js b/bau-ui/toggleGroup/toggleGroup.js index 270642ef..4a25b5bd 100644 --- a/bau-ui/toggleGroup/toggleGroup.js +++ b/bau-ui/toggleGroup/toggleGroup.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"; @@ -77,15 +76,15 @@ export default function (context, options = {}) { return div( { ...props, - class: classNames( + class: [ "toggle-group", size, color, variant, className, options?.class, - props?.class - ), + props?.class, + ], onclick, }, ...children diff --git a/bau-ui/tooltip/tooltip.js b/bau-ui/tooltip/tooltip.js index a2ea6cff..2e16df24 100644 --- a/bau-ui/tooltip/tooltip.js +++ b/bau-ui/tooltip/tooltip.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 = {}) { @@ -102,10 +101,10 @@ export default function (context, options = {}) { const tooltipContentEl = div( { - class: classNames("container", ...side.split("-")), + class: ["container", ...side.split("-")], }, div( - { class: classNames("content", color, variant, size), role: "tooltip" }, + { class: ["content", color, variant, size], role: "tooltip" }, titleEl ) ); @@ -159,7 +158,7 @@ export default function (context, options = {}) { const rootEl = div( { ...props, - class: classNames("tooltip", className, options?.class, props?.class), + class: ["tooltip", className, options?.class, props?.class], bauMounted: ({ element }) => { element.addEventListener("mouseover", mouseover); element.addEventListener("mouseout", mouseout); diff --git a/bau-ui/treeView/treeView.js b/bau-ui/treeView/treeView.js index f2e0a909..3e3baec5 100644 --- a/bau-ui/treeView/treeView.js +++ b/bau-ui/treeView/treeView.js @@ -1,5 +1,3 @@ -import { toPropsAndChildren } from "@grucloud/bau/bau.js"; -import classNames from "@grucloud/bau-css/classNames.js"; import collapsible from "../collapsible"; const treeAddParent = @@ -39,12 +37,10 @@ const createStyles = ({ css, createGlobalStyles }) => { padding-left: 0; overflow: hidden; background: inherit; - & > li { padding-left: var(--treeview-link-padding-horizontal); border-radius: 0.25rem; background: inherit; - & .header { width: 100%; display: flex; @@ -65,7 +61,6 @@ const createStyles = ({ css, createGlobalStyles }) => { } } } - & > ul > li { padding-left: 0rem; } @@ -113,7 +108,7 @@ export default function (context, options = {}) { const Content = () => ul( { - class: classNames(color, size), + class: [color, size], }, children.map(Tree({ depth: depth + 1, maxDepth, parent: item })) ); @@ -138,14 +133,14 @@ export default function (context, options = {}) { }) { return nav( { - class: classNames( + class: [ styles.nav, size, variant, color, options?.class, - otherProps.class - ), + otherProps.class, + ], }, ul( Tree({ maxDepth, color, variant, size })(treeAddParent({})({ ...tree })) diff --git a/bau/bau.js b/bau/bau.js index b8bb7ea0..7f9ba0aa 100644 --- a/bau/bau.js +++ b/bau/bau.js @@ -286,7 +286,11 @@ export default function Bau(input) { if (k.startsWith("bau")) continue; let setter = isSettableProp(name, k, protoOf(element)) ? (v) => v !== undefined && (element[k] = v) - : (v) => element.setAttribute(k, v); + : (v) => + element.setAttribute( + k, + Array.isArray(v) ? v.filter((c) => c).join(" ") : v + ); if (v == null) { } else if (isState(v)) { bind({ deps: [v], render: () => () => (setter(v.val), element) }); diff --git a/bau/examples/bau-ts-test/src/main.ts b/bau/examples/bau-ts-test/src/main.ts index 1a402ac2..8ea1490b 100644 --- a/bau/examples/bau-ts-test/src/main.ts +++ b/bau/examples/bau-ts-test/src/main.ts @@ -26,10 +26,6 @@ const { pre, } = bau.tags; -// const classNames = (...cn: string[]) => -// cn.filter((className) => className).join(" "); -// Conditional - const TestConditionalTernary = () => { const showState = bau.state(true); return article( @@ -764,6 +760,28 @@ const TestAttributeReturnNull = () => //"attributes returns null" ); +const TestAttributeArray = () => { + const cond = true; + return section( + h1("class property as array"), + p( + { class: ["myclass", cond && "active"] }, + "class as array to avoid using a classNames functions" + ) + ); +}; + +const TestAttributeReturnArray = () => { + const cond = true; + return section( + h1("class property as array"), + p( + { class: () => ["myclass", cond && "active"] }, + "class as a function that return an array" + ) + ); +}; + const App = ({}) => { return div( h1("Bau testing with Typescript"), @@ -827,9 +845,13 @@ const App = ({}) => { TestElementObject(), TestElementObjectNested() ), - - TestAttributeReturnString(), - TestAttributeReturnNull() + section( + h1("Attributes"), + TestAttributeReturnString(), + TestAttributeReturnNull(), + TestAttributeArray(), + TestAttributeReturnArray() + ) ); }; diff --git a/bau/index.html b/bau/index.html index 9d57b380..91e4c2fe 100644 --- a/bau/index.html +++ b/bau/index.html @@ -2,7 +2,6 @@ - Bau.js - Lean user interface for the web diff --git a/bau/package.json b/bau/package.json index 5b9411de..61bc7b40 100644 --- a/bau/package.json +++ b/bau/package.json @@ -27,7 +27,6 @@ "@vitest/browser": "0.32.2", "@vitest/coverage-c8": "0.32.2", "@vitest/utils": "0.32.2", - "happy-dom": "9.20.3", "vite": "4.3.9", "vite-bundle-visualizer": "0.8.0", "vitest": "0.32.2", diff --git a/examples/bau-kit/src/utils/classNames.js b/examples/bau-kit/src/utils/classNames.js index 1a340474..e69de29b 100644 --- a/examples/bau-kit/src/utils/classNames.js +++ b/examples/bau-kit/src/utils/classNames.js @@ -1,3 +0,0 @@ -export function classNames(...cn) { - return cn.filter((className) => className).join(" "); -} diff --git a/examples/playground/main.js b/examples/playground/main.js index 9c163498..c8a0070b 100644 --- a/examples/playground/main.js +++ b/examples/playground/main.js @@ -2,11 +2,7 @@ import "./style.css"; import Bau from "@grucloud/bau"; const bau = Bau(); -const { a, p, button, div, h1, span, td, tbody, datalist } = bau.tags; - -// const Row = ({ label }) => { -// return tr(td(label)); -// }; +const { button, div, h1 } = bau.tags; const App = () => { const appState = bau.state({ diff --git a/examples/todoapp/src/footer.js b/examples/todoapp/src/footer.js index c1778cad..eb7db1bc 100644 --- a/examples/todoapp/src/footer.js +++ b/examples/todoapp/src/footer.js @@ -1,5 +1,4 @@ import { pluralize } from "./utils"; -import { classNames } from "./utils"; export function footer({ bau, todosState, nowShowingState }) { const { a, footer, li, span, strong, ul, button } = bau.tags; @@ -18,7 +17,7 @@ export function footer({ bau, todosState, nowShowingState }) { }; const linkClass = (showType) => () => - classNames(nowShowingState.val == showType && "selected"); + nowShowingState.val == showType && "selected"; const onclick = (showType) => (event) => { nowShowingState.val = showType; diff --git a/examples/todoapp/src/todoItem.js b/examples/todoapp/src/todoItem.js index a56b776e..c3625ad2 100644 --- a/examples/todoapp/src/todoItem.js +++ b/examples/todoapp/src/todoItem.js @@ -1,4 +1,3 @@ -import { classNames } from "./utils"; import { ESCAPE_KEY, ENTER_KEY } from "./utils"; export function todoItem({ bau, todosState, editingIdState, onSave }) { @@ -72,11 +71,10 @@ export function todoItem({ bau, todosState, editingIdState, onSave }) { return li( { - class: () => - classNames( - completed && "completed", - id == editingIdState.val && "editing" - ), + class: () => [ + completed && "completed", + id == editingIdState.val && "editing", + ], }, div( { class: "view" }, diff --git a/examples/todoapp/src/utils.js b/examples/todoapp/src/utils.js index 55b52ce5..769d88e0 100644 --- a/examples/todoapp/src/utils.js +++ b/examples/todoapp/src/utils.js @@ -12,10 +12,6 @@ export const uuid = () => { return uuid; }; -export function classNames(...cn) { - return cn.filter((className) => className).join(" "); -} - export function pluralize(count, word) { return count <= 1 ? word : word + "s"; }