@vuu-ui/vuu-layout 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,25 +1,25 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "description": "VUU Layout Components",
   "type": "module",
   "author": "heswell",
   "license": "Apache-2.0",
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-filter-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.2"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
-    "@vuu-ui/vuu-datatable": "2.1.19-beta.1",
-    "@vuu-ui/vuu-filters": "2.1.19-beta.1",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table": "2.1.19-beta.1",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-datatable": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filters": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -29,13 +29,12 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/Component.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+const Component_Component = /*#__PURE__*/ forwardRef(function({ resizeable, ...props }, ref) {
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: "Component",
+        ref: ref
+    });
+});
+Component_Component.displayName = "Component";
+var src_Component = Component_Component;
+registerComponent("Component", Component_Component, "component");
+export default src_Component;

package/src/LayoutContainer.css.js

@@ -0,0 +1,24 @@
+const css = `
+.vuuLayoutContainer {
+  outline: none;
+  display: inline-block;
+}
+
+[data-dragging="true"] {
+  z-index: 100;
+  position: absolute !important;
+}
+
+.vuuSimpleDraggableWrapper {
+  background-color: #fff;
+  box-shadow: 0 6px 10px #0003;
+}
+
+.vuuSimpleDraggableWrapper > * {
+  width: 100%;
+  height: 100%;
+}
+
+
+`;
+export default css;

package/src/LayoutContainer.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import LayoutContainer_0 from "./LayoutContainer.css";
+const LayoutContainer_LayoutContainer = /*#__PURE__*/ forwardRef(function({ children, className: classNameProp, dropTarget, resizeable: _, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-container",
+        css: LayoutContainer_0,
+        window: targetWindow
+    });
+    const className = clsx("vuuLayoutContainer", classNameProp);
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        ref: forwardedRef,
+        ...htmlAttributes,
+        children: children
+    });
+});
+const componentName = "LayoutContainer";
+LayoutContainer_LayoutContainer.displayName = componentName;
+registerComponent(componentName, LayoutContainer_LayoutContainer, "container");
+export { LayoutContainer_LayoutContainer as LayoutContainer };

package/src/debug.js

@@ -0,0 +1,16 @@
+import { typeOf } from "./utils/index.js";
+const tree = (el, depth = 0)=>{
+    const type = typeOf(el);
+    const spaces = "          ";
+    let str = `\n${spaces.slice(0, depth)}${type}`;
+    if ("View" !== type) {
+        const els = el.props.children || [];
+        (Array.isArray(els) ? els : [
+            els
+        ]).forEach((child)=>{
+            str += tree(child, depth + 1);
+        });
+    }
+    return str;
+};
+export { tree };

package/src/dock-layout/DockLayout.css.js

@@ -0,0 +1,36 @@
+const css = `
+.vuuDockLayout {
+  --chest-bg: var(--hw-chest-bg, inherit);
+  --drawer-bg: var(--hw-drawer-bg, inherit);
+  --drawer-size: var(--hw-drawer-size, 200px);
+  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
+  --drawer-transition-duration: var(--hw-drawer-transition-duration, .4s);
+  background-color: var(--chest-bg);
+  display: flex;
+}
+
+.vuuDockLayout-horizontal {
+  flex-direction: row;
+}
+
+.vuuDockLayout-vertical {
+  flex-direction: column;
+}
+
+.vuuDockLayout-content {
+  background-color: var(--chest-bg);
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+
+.vuuDockLayout-horizontal .vuuDockLayout-content, .vuuDockLayout-vertical .vuuDockLayout-content {
+  flex-basis: 100%;
+}
+
+
+`;
+export default css;

package/src/dock-layout/DockLayout.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { asReactElements, partition, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useMemo } from "react";
+import Drawer from "./Drawer.js";
+import DockLayout from "./DockLayout.css";
+const isDrawer = (component)=>component.type === Drawer;
+const isVertical = (element)=>element.props.position && element.props.position.match(/top|bottom/);
+const classBase = "vuuDockLayout";
+const DockLayout_DockLayout = (props)=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-dock-layput",
+        css: DockLayout,
+        window: targetWindow
+    });
+    const { children, className: classNameProp, id, style } = props;
+    const childElements = useMemo(()=>asReactElements(children), [
+        children
+    ]);
+    const [drawers, content] = partition(childElements, isDrawer);
+    const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
+    const orientation = 0 === verticalDrawers.length ? "horizontal" : 0 === horizontalDrawers.length ? "vertical" : "both";
+    const className = clsx(classBase, classNameProp, `${classBase}-${orientation}`);
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        id: id,
+        style: style,
+        children: [
+            drawers,
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                children: content
+            })
+        ]
+    });
+};
+DockLayout_DockLayout.displayName = "DockLayout";
+var dock_layout_DockLayout = DockLayout_DockLayout;
+registerComponent("DockLayout", DockLayout_DockLayout, "container");
+export default dock_layout_DockLayout;

package/src/dock-layout/Drawer.css.js

@@ -0,0 +1,150 @@
+const css = `
+.vuuDrawer {
+  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
+  --vuu-close-icon-svg: var(--svg-chevron-double-right);
+  transition: flex-basis;
+  transition-duration: var(--drawer-transition-duration);
+  z-index: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  position: relative;
+}
+
+.vuuDrawer-peekaboo {
+  flex-basis: var(--drawer-peek-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.vuuDrawer-inline.vuuDrawer-open {
+  flex-basis: var(--drawer-size);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.vuuDrawer-liner {
+  background-color: var(--drawer-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+.vuuDrawer-content {
+  height: 100%;
+  top: 0;
+  right: var(--drawer-peek-size);
+  transition: right;
+  transition-duration: var(--drawer-transition-duration);
+  flex: 100%;
+  width: 100%;
+  position: absolute;
+  overflow: hidden;
+}
+
+.vuuDrawer-open .vuuDrawer-content {
+  right: 0;
+}
+
+.vuuDrawer-left {
+  border-right: var(--drawer-leading-edge-border);
+}
+
+.vuuDrawer-right {
+  border-left: var(--drawer-leading-edge-border);
+}
+
+.vuuDrawer-top {
+  border-bottom: var(--drawer-leading-edge-border);
+}
+
+.vuuDrawer-bottom {
+  border-top: var(--drawer-leading-edge-border);
+}
+
+.vuuDrawer-left .vuuDrawer-liner, .vuuDrawer-right .vuuDrawer-liner {
+  height: 100%;
+  transition: width;
+}
+
+.vuuDrawer-top .vuuDrawer-liner, .vuuDrawer-bottom .vuuDrawer-liner {
+  width: 100%;
+  transition: height;
+}
+
+.vuuDrawer-inline .vuuDrawer-liner {
+  width: 100%;
+  height: 100%;
+}
+
+.vuuDrawer-over .vuuDrawer-liner {
+  transition-duration: .4s;
+  position: absolute;
+}
+
+.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
+  width: 0;
+  top: 0;
+  left: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
+  width: 0;
+  top: 0;
+  right: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
+  height: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner, .vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
+  width: var(--drawer-peek-size);
+}
+
+.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner, .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
+  height: var(--drawer-peek-size);
+}
+
+.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner, .vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
+  width: var(--drawer-size);
+}
+
+.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner, .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
+  height: var(--drawer-size);
+}
+
+.vuuDrawer-top, .vuuDrawer-left {
+  order: 0;
+}
+
+.vuuDrawer-bottom, .vuuDrawer-right {
+  order: 99;
+}
+
+.vuuDrawer-left, .vuuDrawer-right {
+  flex-direction: column;
+}
+
+.vuuToggleButton-container {
+  --saltButton-height: 28px;
+  --saltButton-width: 28px;
+  --vuu-icon-size: 12px;
+  flex: 0 0 28px;
+}
+
+.vuuDrawer-open {
+  --vuu-close-icon-svg: var(--svg-chevron-double-left);
+}
+
+
+`;
+export default css;

package/src/dock-layout/Drawer.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, useControlled } from "@salt-ds/core";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback } from "react";
+import Drawer from "./Drawer.css";
+const classBase = "vuuDrawer";
+const sizeAttribute = (value)=>"string" == typeof value ? value : value + "px";
+const getStyle = (styleProp, sizeOpen, sizeClosed)=>{
+    const hasSizeOpen = void 0 !== sizeOpen;
+    const hasSizeClosed = void 0 !== sizeClosed;
+    if (!styleProp && !hasSizeClosed && !hasSizeOpen) return;
+    if (!hasSizeClosed && !hasSizeOpen) return styleProp;
+    return {
+        ...styleProp,
+        "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
+        "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
+    };
+};
+const Drawer_Drawer = ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position = "left", inline, onClick, peekaboo = false, toggleButton, ...props })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-drawer",
+        css: Drawer,
+        window: targetWindow
+    });
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: defaultOpen ?? false,
+        name: "Drawer",
+        state: "open"
+    });
+    const className = clsx(classBase, classNameProp, `${classBase}-${position}`, {
+        [`${classBase}-open`]: open,
+        [`${classBase}-inline`]: inline,
+        [`${classBase}-over`]: !inline,
+        [`${classBase}-peekaboo`]: peekaboo
+    });
+    const toggleDrawer = useCallback(()=>{
+        setOpen(!open);
+    }, [
+        open,
+        setOpen
+    ]);
+    const style = getStyle(styleProp, sizeOpen, sizeClosed);
+    const handleClick = clickToOpen ? toggleDrawer : onClick;
+    const renderToggleButton = ()=>/*#__PURE__*/ jsx("div", {
+            className: clsx("vuuToggleButton-container"),
+            children: open ? /*#__PURE__*/ jsx(Button, {
+                "aria-label": "close",
+                onClick: toggleDrawer,
+                "data-icon": "close",
+                variant: "secondary"
+            }) : /*#__PURE__*/ jsx(Button, {
+                "aria-label": "open",
+                onClick: toggleDrawer,
+                "data-icon": "close",
+                variant: "secondary"
+            })
+        });
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: className,
+        onClick: handleClick,
+        style: style,
+        children: [
+            "start" == toggleButton ? renderToggleButton() : null,
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-liner`,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-content`,
+                    children: children
+                })
+            }),
+            "end" == toggleButton ? renderToggleButton() : null
+        ]
+    });
+};
+Drawer_Drawer.displayName = "Drawer";
+var dock_layout_Drawer = Drawer_Drawer;
+export default dock_layout_Drawer;

package/src/dock-layout/index.js

@@ -0,0 +1,2 @@
+export { default as DockLayout } from "./DockLayout.js";
+export { default as Drawer } from "./Drawer.js";