basefn 1.9.1 → 1.11.0

package/src/components/Basefn__Resizable.res.mjs

@@ -0,0 +1,343 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
+
+import './Basefn__Resizable.css'
+;
+
+function directionToString(d) {
+  if (d === "Horizontal") {
+    return "horizontal";
+  } else {
+    return "vertical";
+  }
+}
+
+let getClientX = (function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientX;
+});
+
+let getClientY = (function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientY;
+});
+
+let addDocListener = (function(ev, fn) {
+  document.addEventListener(ev, fn);
+});
+
+let removeDocListener = (function(ev, fn) {
+  document.removeEventListener(ev, fn);
+});
+
+let disableSelect = (function() {
+  document.body.style.userSelect = "none";
+  document.body.style.webkitUserSelect = "none";
+});
+
+let enableSelect = (function() {
+  document.body.style.userSelect = "";
+  document.body.style.webkitUserSelect = "";
+});
+
+let findClosest = (function(el, sel) {
+  return el.closest(sel);
+});
+
+let getElementRect = (function(el) {
+  return el.getBoundingClientRect();
+});
+
+let getKey = (function(e) { return e.key || "" });
+
+let getEventTarget = (function(e) {
+  return e.target;
+});
+
+let preventDefault = (function(e) { e.preventDefault() });
+
+let genId = (function() {
+  return "basefn-resizable-" + Math.random().toString(36).substr(2, 9);
+});
+
+let registerInstance = (function(id, cb) {
+  if (!window.__basefn_resizable) {
+    window.__basefn_resizable = {};
+
+    function handler(e) {
+      var target = e.target;
+      if (!target || !target.closest) return;
+      var handle = target.closest(".basefn-resizable__handle");
+      if (!handle) return;
+      var container = handle.closest(".basefn-resizable");
+      if (!container || !container.id) return;
+      var entry = window.__basefn_resizable[container.id];
+      if (!entry) return;
+      // Find the handle index among direct children of the container
+      var children = container.children;
+      var handleIndex = 0;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList.contains("basefn-resizable__handle")) {
+          if (children[i] === handle) {
+            entry(handleIndex, e);
+            return;
+          }
+          handleIndex++;
+        }
+      }
+    }
+
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler, { passive: false });
+  }
+
+  window.__basefn_resizable[id] = cb;
+});
+
+let initHandle = (function(el, idx, cb) {
+  if (el._basefnInit) return;
+  el._basefnInit = true;
+  el.addEventListener("mousedown", function(e) { cb(idx, e); });
+  el.addEventListener("touchstart", function(e) { cb(idx, e); }, { passive: false });
+});
+
+let getCurrentTarget = (function(e) {
+  return e.currentTarget;
+});
+
+function Basefn__Resizable(props) {
+  let __class = props.class;
+  let onResize = props.onResize;
+  let __withHandle = props.withHandle;
+  let __direction = props.direction;
+  let panels = props.panels;
+  let direction = __direction !== undefined ? __direction : "Horizontal";
+  let withHandle = __withHandle !== undefined ? __withHandle : true;
+  let $$class = __class !== undefined ? __class : "";
+  let containerId = genId();
+  let sizes = Signal$Xote.make(panels.map(p => p.defaultSize), undefined, undefined);
+  let isDragging = Signal$Xote.make(false, undefined, undefined);
+  let dragRef = {
+    contents: undefined
+  };
+  let getPos = evt => {
+    if (direction === "Horizontal") {
+      return getClientX(evt);
+    } else {
+      return getClientY(evt);
+    }
+  };
+  let getContainerDimension = container => {
+    let rect = getElementRect(container);
+    if (direction === "Horizontal") {
+      return rect.width;
+    } else {
+      return rect.height;
+    }
+  };
+  let clampSizes = (leftIdx, rightIdx, newLeft, newRight) => {
+    let lp = panels[leftIdx];
+    let rp = panels[rightIdx];
+    let lMin = Core__Option.getOr(lp.minSize, 0.0);
+    let lMax = Core__Option.getOr(lp.maxSize, 100.0);
+    let rMin = Core__Option.getOr(rp.minSize, 0.0);
+    let rMax = Core__Option.getOr(rp.maxSize, 100.0);
+    let total = newLeft + newRight;
+    if (newLeft < lMin) {
+      return [
+        lMin,
+        total - lMin
+      ];
+    } else if (newLeft > lMax) {
+      return [
+        lMax,
+        total - lMax
+      ];
+    } else if (newRight < rMin) {
+      return [
+        total - rMin,
+        rMin
+      ];
+    } else if (newRight > rMax) {
+      return [
+        total - rMax,
+        rMax
+      ];
+    } else {
+      return [
+        newLeft,
+        newRight
+      ];
+    }
+  };
+  let applySizes = newSizes => {
+    Signal$Xote.set(sizes, newSizes);
+    if (onResize !== undefined) {
+      return onResize(newSizes);
+    }
+  };
+  let onMouseMove = evt => {
+    let info = dragRef.contents;
+    if (info === undefined) {
+      return;
+    }
+    let containerSize = getContainerDimension(info.container);
+    if (containerSize <= 0.0) {
+      return;
+    }
+    let delta = getPos(evt) - info.startPos;
+    let deltaPercent = delta / containerSize * 100.0;
+    let li = info.handleIndex;
+    let ri = info.handleIndex + 1 | 0;
+    let origLeft = info.startSizes[li];
+    let origRight = info.startSizes[ri];
+    let match = clampSizes(li, ri, origLeft + deltaPercent, origRight - deltaPercent);
+    let newSizes = Signal$Xote.get(sizes).slice();
+    newSizes[li] = match[0];
+    newSizes[ri] = match[1];
+    applySizes(newSizes);
+  };
+  let onMouseUp = param => {
+    dragRef.contents = undefined;
+    Signal$Xote.set(isDragging, false);
+    enableSelect();
+    removeDocListener("mousemove", onMouseMove);
+    removeDocListener("mouseup", onMouseUp);
+    removeDocListener("touchmove", onMouseMove);
+    removeDocListener("touchend", onMouseUp);
+  };
+  let startDrag = (handleIndex, evt) => {
+    preventDefault(evt);
+    let target = getEventTarget(evt);
+    let maybeContainer = findClosest(target, ".basefn-resizable");
+    if (!(maybeContainer == null)) {
+      dragRef.contents = {
+        handleIndex: handleIndex,
+        startPos: getPos(evt),
+        startSizes: Signal$Xote.get(sizes).slice(),
+        container: maybeContainer
+      };
+      Signal$Xote.set(isDragging, true);
+      disableSelect();
+      addDocListener("mousemove", onMouseMove);
+      addDocListener("mouseup", onMouseUp);
+      addDocListener("touchmove", onMouseMove);
+      return addDocListener("touchend", onMouseUp);
+    }
+  };
+  registerInstance(containerId, startDrag);
+  let containerClass = "basefn-resizable basefn-resizable--" + directionToString(direction) + (
+    $$class !== "" ? " " + $$class : ""
+  );
+  let elements = [];
+  panels.forEach((panel, index) => {
+    let panelStyle = Computed$Xote.make(() => {
+      let size = Signal$Xote.get(sizes)[index];
+      return "flex-basis:" + size.toString() + "%;flex-grow:0;flex-shrink:0";
+    }, undefined);
+    let panelClass = Computed$Xote.make(() => {
+      let base = "basefn-resizable__panel";
+      if (Signal$Xote.get(isDragging)) {
+        return base + " basefn-resizable__panel--dragging";
+      } else {
+        return base;
+      }
+    }, undefined);
+    elements.push(XoteJSX$Xote.Elements.jsxKeyed("div", {
+      class: panelClass,
+      style: panelStyle,
+      children: panel.content
+    }, "panel-" + index.toString(), undefined));
+    if (index >= (panels.length - 1 | 0)) {
+      return;
+    }
+    let handleClass = "basefn-resizable__handle basefn-resizable__handle--" + directionToString(direction) + (
+      withHandle ? " basefn-resizable__handle--with-grip" : ""
+    );
+    elements.push(XoteJSX$Xote.Elements.jsxKeyed("div", {
+      class: handleClass,
+      role: "separator",
+      tabIndex: 0,
+      onKeyDown: evt => {
+        let key = getKey(evt);
+        let ri = index + 1 | 0;
+        let currentSizes = Signal$Xote.get(sizes);
+        let left = currentSizes[index];
+        let right = currentSizes[ri];
+        let delta;
+        if (direction === "Horizontal") {
+          switch (key) {
+            case "ArrowLeft" :
+              delta = - 1.0;
+              break;
+            case "ArrowRight" :
+              delta = 1.0;
+              break;
+            default:
+              delta = undefined;
+          }
+        } else {
+          switch (key) {
+            case "ArrowDown" :
+              delta = 1.0;
+              break;
+            case "ArrowUp" :
+              delta = - 1.0;
+              break;
+            default:
+              delta = undefined;
+          }
+        }
+        if (delta === undefined) {
+          return;
+        }
+        preventDefault(evt);
+        let match = clampSizes(index, ri, left + delta, right - delta);
+        let newSizes = currentSizes.slice();
+        newSizes[index] = match[0];
+        newSizes[ri] = match[1];
+        applySizes(newSizes);
+      },
+      onMouseEnter: evt => {
+        let el = getCurrentTarget(evt);
+        initHandle(el, index, startDrag);
+      },
+      children: withHandle ? XoteJSX$Xote.Elements.jsx("div", {
+          class: "basefn-resizable__handle-grip"
+        }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
+    }, "handle-" + index.toString(), undefined));
+  });
+  return XoteJSX$Xote.Elements.jsx("div", {
+    id: containerId,
+    class: containerClass,
+    children: Node$Xote.fragment(elements)
+  });
+}
+
+let make = Basefn__Resizable;
+
+export {
+  directionToString,
+  getClientX,
+  getClientY,
+  addDocListener,
+  removeDocListener,
+  disableSelect,
+  enableSelect,
+  findClosest,
+  getElementRect,
+  getKey,
+  getEventTarget,
+  preventDefault,
+  genId,
+  registerInstance,
+  initHandle,
+  getCurrentTarget,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__ScrollArea.res

@@ -29,7 +29,7 @@ let make = (
   ~maxHeight: option<string>=?,
   ~maxWidth: option<string>=?,
   ~className: option<string>=?,
-  ~children: Component.node,
+  ~children: Node.node,
 ) => {
   let getClassName = () => {
     let baseClass = "basefn-scroll-area"

package/src/components/Basefn__ScrollArea.res.mjs

@@ -1,6 +1,6 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__ScrollArea.css'
 ;
@@ -46,7 +46,7 @@ function Basefn__ScrollArea(props) {
     let maxWidthStyle = maxWidth !== undefined ? "max-width: " + maxWidth + ";" : "";
     return maxHeightStyle + maxWidthStyle;
   };
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: getClassName(),
     style: getStyle(),
     children: props.children

package/src/components/Basefn__Select.res

@@ -26,8 +26,8 @@ let make = (
     }
   }
   <select name="test" class="basefn-select" value={value} disabled onChange>
-    {Component.list(options, opt =>
-      <option value={opt.value}> {Component.text(opt.label)} </option>
+    {Node.list(options, opt =>
+      <option value={opt.value}> {Node.text(opt.label)} </option>
     )}
   </select>
 }

package/src/components/Basefn__Select.res.mjs

@@ -1,7 +1,8 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Select.css'
 ;
@@ -14,20 +15,20 @@ function Basefn__Select(props) {
   let onChange$1 = e => {
     let t = e.target;
     let v = t.value;
-    Xote.Signal.set(value, v);
+    Signal$Xote.set(value, v);
     if (onChange !== undefined) {
       return onChange(v);
     }
   };
-  return Xote__JSX.Elements.jsx("select", {
+  return XoteJSX$Xote.Elements.jsx("select", {
     class: "basefn-select",
     name: "test",
     value: value,
     disabled: disabled,
     onChange: onChange$1,
-    children: Xote.Component.list(props.options, opt => Xote__JSX.Elements.jsx("option", {
+    children: Node$Xote.list(props.options, opt => XoteJSX$Xote.Elements.jsx("option", {
       value: opt.value,
-      children: Xote.Component.text(opt.label)
+      children: Node$Xote.text(opt.label)
     }))
   });
 }

package/src/components/Basefn__Separator.res

@@ -37,7 +37,7 @@ let make = (
   | Some(text) =>
     <div class={getClassName() ++ " basefn-separator--with-label"}>
       <div class="basefn-separator__line" />
-      <span class="basefn-separator__label"> {Component.text(text)} </span>
+      <span class="basefn-separator__label"> {Node.text(text)} </span>
       <div class="basefn-separator__line" />
     </div>
   | None => <div class={getClassName()} role="separator" />

package/src/components/Basefn__Separator.res.mjs

@@ -1,7 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Separator.css'
 ;
@@ -37,23 +37,23 @@ function Basefn__Separator(props) {
     return "basefn-separator " + orientationClass + " " + variantClass;
   };
   if (label !== undefined) {
-    return Xote__JSX.Elements.jsxs("div", {
+    return XoteJSX$Xote.Elements.jsxs("div", {
       class: getClassName() + " basefn-separator--with-label",
-      children: Xote__JSX.array([
-        Xote__JSX.Elements.jsx("div", {
+      children: XoteJSX$Xote.array([
+        XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-separator__line"
         }),
-        Xote__JSX.Elements.jsx("span", {
+        XoteJSX$Xote.Elements.jsx("span", {
           class: "basefn-separator__label",
-          children: Xote.Component.text(label)
+          children: Node$Xote.text(label)
         }),
-        Xote__JSX.Elements.jsx("div", {
+        XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-separator__line"
         })
       ])
     });
   } else {
-    return Xote__JSX.Elements.jsx("div", {
+    return XoteJSX$Xote.Elements.jsx("div", {
       class: getClassName(),
       role: "separator"
     });

package/src/components/Basefn__Sidebar.res

@@ -26,9 +26,9 @@ let sizeToString = (size: size) => {
 
 @jsx.component
 let make = (
-  ~logo: option<Component.node>=?,
+  ~logo: option<Node.node>=?,
   ~sections: array<navSection>,
-  ~footer: option<Component.node>=?,
+  ~footer: option<Node.node>=?,
   ~size: size=Md,
   ~collapsed: bool=false,
 ) => {
@@ -66,7 +66,7 @@ let make = (
         <div class="basefn-sidebar__section">
           {switch section.title {
           | Some(title) =>
-            <div class="basefn-sidebar__section-title"> {Component.text(title)} </div>
+            <div class="basefn-sidebar__section-title"> {Node.text(title)} </div>
           | None => <> </>
           }}
           {section.items
@@ -76,17 +76,17 @@ let make = (
 
             Router.link(
               ~to={item.url},
-              ~attrs=[Component.attr("class", itemClass)],
+              ~attrs=[Node.attr("class", itemClass)],
               ~children=[
-                <div class="basefn-sidebar__item-text"> {Component.text(item.label)} </div>,
+                <div class="basefn-sidebar__item-text"> {Node.text(item.label)} </div>,
               ],
               (),
             )
           })
-          ->Component.fragment}
+          ->Node.fragment}
         </div>
       })
-      ->Component.fragment}
+      ->Node.fragment}
     </nav>
     {switch footer {
     | Some(footerContent) => <div class="basefn-sidebar__footer"> {footerContent} </div>

package/src/components/Basefn__Sidebar.res.mjs

@@ -1,8 +1,12 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
 import * as Basefn__Dom from "../Basefn__Dom.res.mjs";
+import * as Effect$Xote from "xote/src/Effect.res.mjs";
+import * as Router$Xote from "xote/src/Router.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Sidebar.css'
 ;
@@ -25,63 +29,63 @@ function Basefn__Sidebar(props) {
   let logo = props.logo;
   let size = __size !== undefined ? __size : "Md";
   let collapsed = __collapsed !== undefined ? __collapsed : false;
-  let scrolling = Xote.Signal.make(false, undefined, undefined);
+  let scrolling = Signal$Xote.make(false, undefined, undefined);
   let getSidebarClass = () => {
     let sizeClass = " basefn-sidebar--" + sizeToString(size);
     let collapsedClass = collapsed ? " basefn-sidebar--collapsed" : "";
     return "basefn-sidebar" + sizeClass + collapsedClass;
   };
-  Xote.Effect.run(() => Basefn__Dom.addEventListener("scroll", () => {
+  Effect$Xote.run(() => Basefn__Dom.addEventListener("scroll", () => {
     let scrollY = window.scrollY;
-    Xote.Signal.set(scrolling, scrollY >= 64);
+    Signal$Xote.set(scrolling, scrollY >= 64);
   }), undefined);
   let tmp;
   if (logo !== undefined) {
-    let $$class = Xote.Computed.make(() => "basefn-sidebar__header" + (
-      Xote.Signal.get(scrolling) ? " basefn-sidebar__header--scrolling" : ""
+    let $$class = Computed$Xote.make(() => "basefn-sidebar__header" + (
+      Signal$Xote.get(scrolling) ? " basefn-sidebar__header--scrolling" : ""
     ), undefined);
-    tmp = Xote__JSX.Elements.jsx("div", {
+    tmp = XoteJSX$Xote.Elements.jsx("div", {
       class: $$class,
-      children: Xote__JSX.Elements.jsx("div", {
+      children: XoteJSX$Xote.Elements.jsx("div", {
         class: "basefn-sidebar__logo",
         children: logo
       })
     });
   } else {
-    tmp = Xote__JSX.jsx(Xote__JSX.jsxFragment, {});
+    tmp = XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {});
   }
-  return Xote__JSX.Elements.jsxs("div", {
+  return XoteJSX$Xote.Elements.jsxs("div", {
     class: getSidebarClass(),
-    children: Xote__JSX.array([
+    children: XoteJSX$Xote.array([
       tmp,
-      Xote__JSX.Elements.jsx("nav", {
+      XoteJSX$Xote.Elements.jsx("nav", {
         class: "basefn-sidebar__nav",
-        children: Xote.Component.fragment(props.sections.map(section => {
+        children: Node$Xote.fragment(props.sections.map(section => {
           let title = section.title;
-          return Xote__JSX.Elements.jsxs("div", {
+          return XoteJSX$Xote.Elements.jsxs("div", {
             class: "basefn-sidebar__section",
-            children: Xote__JSX.array([
-              title !== undefined ? Xote__JSX.Elements.jsx("div", {
+            children: XoteJSX$Xote.array([
+              title !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
                   class: "basefn-sidebar__section-title",
-                  children: Xote.Component.text(title)
-                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
-              Xote.Component.fragment(section.items.map((item, index) => {
+                  children: Node$Xote.text(title)
+                }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {}),
+              Node$Xote.fragment(section.items.map((item, index) => {
                 let itemClass = "basefn-sidebar__item" + (
                   item.active ? " basefn-sidebar__item--active" : ""
                 );
-                return Xote.Router.link(item.url, [Xote.Component.attr("class", itemClass)], [Xote__JSX.Elements.jsx("div", {
+                return Router$Xote.link(item.url, [Node$Xote.attr("class", itemClass)], [XoteJSX$Xote.Elements.jsx("div", {
                     class: "basefn-sidebar__item-text",
-                    children: Xote.Component.text(item.label)
+                    children: Node$Xote.text(item.label)
                   })], undefined);
               }))
             ])
           });
         }))
       }),
-      footer !== undefined ? Xote__JSX.Elements.jsx("div", {
+      footer !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-sidebar__footer",
           children: footer
-        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+        }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
     ])
   });
 }

package/src/components/Basefn__Skeleton.res.mjs

@@ -1,6 +1,6 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Skeleton.css'
 ;
@@ -46,7 +46,7 @@ function Basefn__Skeleton(props) {
     let heightStyle = height !== undefined ? "height: " + height + ";" : "";
     return widthStyle + heightStyle;
   };
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: getClassName(),
     style: getStyle()
   });

package/src/components/Basefn__Slider.res

@@ -31,12 +31,12 @@ let make = (
         <div class="basefn-slider__header">
           {switch label {
           | Some(labelText) =>
-            <span class="basefn-slider__label"> {Component.text(labelText)} </span>
+            <span class="basefn-slider__label"> {Node.text(labelText)} </span>
           | None => <> </>
           }}
           {showValue
             ? <span class="basefn-slider__value">
-                {Component.textSignal(() => Float.toString(Signal.get(value)))}
+                {Node.signalText(() => Float.toString(Signal.get(value)))}
               </span>
             : <> </>}
         </div>
@@ -57,9 +57,9 @@ let make = (
         <div class="basefn-slider__markers">
           {markerLabels
           ->Array.map(marker => {
-            <span class="basefn-slider__marker"> {Component.text(marker)} </span>
+            <span class="basefn-slider__marker"> {Node.text(marker)} </span>
           })
-          ->Component.fragment}
+          ->Node.fragment}
         </div>
       | None => <> </>
       }}