@agnos-ui/core 0.10.0-next.1 → 0.10.0-next.3

package/{dom-Bcg9ORcA.js → dom-DD1hAVZy.js}

@@ -1,11 +1,73 @@
 import { BROWSER } from "esm-env";
-import { noop } from "./utils/func.js";
 import { readable, batch, asReadable, writable, computed } from "@amadeus-it-group/tansu";
-const ssrHTMLElementAttributesAndStyle = Symbol("attributesAndStyle");
+import { noop } from "./utils/func.js";
+const importantSuffixRegExp = /\s*!important$/;
+const withoutImportant = (value) => value?.replace(importantSuffixRegExp, "") ?? "";
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+const getStyleKeyFromDirectProp = (str) => {
+  if (typeof str !== "string" || str.startsWith("--")) {
+    return void 0;
+  }
+  return toKebabCase(str);
+};
+const getStyleKeyFromMethods = (str) => {
+  if (!str.startsWith("--") && str !== toKebabCase(str)) {
+    return void 0;
+  }
+  return str;
+};
+const ssrHTMLElementStyle = /* @__PURE__ */ Symbol("style");
+class SSRStyle {
+  // all styles in kebab-case, including custom properties:
+  [ssrHTMLElementStyle] = {};
+  constructor() {
+    return new Proxy(this, {
+      get: (target, prop) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          return withoutImportant(target[ssrHTMLElementStyle][styleKey]);
+        } else {
+          return target[prop];
+        }
+      },
+      set: (target, prop, value) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          target.setProperty(styleKey, value);
+        } else {
+          target[prop] = value;
+        }
+        return true;
+      }
+    });
+  }
+  setProperty(property, value, priority) {
+    if (!value) {
+      this.removeProperty(property);
+      return;
+    }
+    const key = getStyleKeyFromMethods(property);
+    if (!key || priority !== "important" && priority !== "" && priority != null || importantSuffixRegExp.test(value)) {
+      return;
+    }
+    this[ssrHTMLElementStyle][key] = value + (priority ? " !important" : "");
+  }
+  removeProperty(property) {
+    const key = getStyleKeyFromMethods(property);
+    if (!key) {
+      return "";
+    }
+    const style = this[ssrHTMLElementStyle];
+    const value = style[key];
+    delete style[key];
+    return withoutImportant(value);
+  }
+}
+const ssrHTMLElementAttributesAndStyle = /* @__PURE__ */ Symbol("attributesAndStyle");
 const spaceRegExp = /\s+/;
 const ssrHTMLElement = () => {
   const attributes = {};
-  const style = {};
+  const style = new SSRStyle();
   let classNames = /* @__PURE__ */ new Set();
   const toggleClass = (className, force = !classNames.has(className)) => {
     if (force) {
@@ -40,10 +102,12 @@ const ssrHTMLElement = () => {
       }
     },
     [ssrHTMLElementAttributesAndStyle]() {
-      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style } };
+      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style[ssrHTMLElementStyle] } };
     }
   };
 };
+const cssEscapeStyleName = (styleName) => styleName.replace(/([^\w-])/gi, "\\$1");
+const cssTextFromObject = (style) => Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${cssEscapeStyleName(name)}: ${value};`).join("");
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -302,7 +366,7 @@ function directiveAttributes(...directives) {
   if (classNames.length) {
     attributes["class"] = classNames.join(" ");
   }
-  const stringStyle = Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${name}: ${value};`).join("");
+  const stringStyle = cssTextFromObject(style);
   if (stringStyle.length) {
     attributes["style"] = stringStyle;
   }
@@ -387,10 +451,16 @@ function bindAttribute(node, attributeName, value$) {
   const isClass = attributeName === "class";
   return isClass ? classNamesSubscribe(node, value$) : attributeSubscribe(node, attributeName, value$);
 }
+const isCustomProperty = (styleName) => styleName.startsWith("--");
 function bindStyle(node, styleName, value$) {
   return value$.subscribe((value) => {
     const style = node.style;
-    style[styleName] = "" + (notEmpty(value) ? value : "");
+    value = "" + (notEmpty(value) ? value : "");
+    if (isCustomProperty(styleName)) {
+      style.setProperty(styleName, value);
+    } else {
+      style[styleName] = value;
+    }
   });
 }
 function bindClassName(node, className, value$) {

package/drawer-Caz4Uypu.js

@@ -0,0 +1,291 @@
+import { computed, asWritable, writable, untrack, readable } from "@amadeus-it-group/tansu";
+import { focusElement } from "./services/focusElement.js";
+import { createPointerdownPositionDirective } from "./services/pointerdownPosition.js";
+import { portal } from "./services/portal.js";
+import { siblingsInert } from "./services/siblingsInert.js";
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { a as bindDirective, l as createBrowserStoreDirective, n as mergeDirectives, p as createAttributesDirective, d as directiveSubscribe, i as isBrowserHTMLElement } from "./dom-DD1hAVZy.js";
+import { noop } from "./utils/func.js";
+import { r as removeScrollbars, a as revertScrollbars } from "./scrollbars-CcxSrnCx.js";
+import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
+import { createWidgetFactory } from "./utils/widget.js";
+import { g as typeNumberOrNull, c as typeBoolean, h as typeFunction, i as typeHTMLElementOrNull, e as typeString } from "./writables-Is1bF1Vt.js";
+function getDrawerDefaultConfig() {
+  return {
+    ...defaultDrawerConfig
+  };
+}
+const defaultDrawerConfig = {
+  animated: true,
+  ariaDescribedBy: "",
+  ariaLabelledBy: "",
+  backdropClass: "",
+  backdropTransition: noop,
+  className: "w-full",
+  visible: false,
+  container: typeof window !== "undefined" ? document.body : null,
+  transition: noop,
+  verticalTransition: noop,
+  onHidden: noop,
+  onShown: noop,
+  onSizeChange: noop,
+  onVisibleChange: noop,
+  onMinimizedChange: noop,
+  onMaximizedChange: noop,
+  onResizingChange: noop,
+  resizable: false,
+  backdrop: true,
+  bodyScroll: false,
+  size: null
+};
+const configValidator = {
+  animated: typeBoolean,
+  ariaDescribedBy: typeString,
+  ariaLabelledBy: typeString,
+  backdropClass: typeString,
+  backdropTransition: typeFunction,
+  className: typeString,
+  visible: typeBoolean,
+  transition: typeFunction,
+  verticalTransition: typeFunction,
+  container: typeHTMLElementOrNull,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  onSizeChange: typeFunction,
+  onVisibleChange: typeFunction,
+  onMinimizedChange: typeFunction,
+  onMaximizedChange: typeFunction,
+  onResizingChange: typeFunction,
+  resizable: typeBoolean,
+  backdrop: typeBoolean,
+  bodyScroll: typeBoolean,
+  size: typeNumberOrNull
+};
+const createDrawer = createWidgetFactory("drawer", (config) => {
+  const [
+    {
+      backdrop$,
+      backdropTransition$,
+      backdropClass$,
+      bodyScroll$,
+      transition$,
+      verticalTransition$,
+      visible$: requestedVisible$,
+      container$,
+      className$,
+      size$: _dirtySize$,
+      animated$,
+      ariaDescribedBy$,
+      ariaLabelledBy$,
+      onHidden$,
+      onShown$,
+      onSizeChange$,
+      onVisibleChange$,
+      onMinimizedChange$,
+      onMaximizedChange$,
+      onResizingChange$,
+      ...stateProps
+    },
+    patch
+  ] = writablesForProps(defaultDrawerConfig, config, configValidator);
+  const size$ = bindableProp(_dirtySize$, onSizeChange$, (value) => value ? Math.round(value) : value);
+  const isVertical$ = computed(() => {
+    const isVertical = ["block-start", "block-end"].some((placement) => className$().includes(placement));
+    return isVertical;
+  });
+  const transition = createTransition({
+    props: {
+      animated: animated$,
+      animatedOnInit: animated$,
+      transition: asWritable(computed(() => isVertical$() ? verticalTransition$() : transition$())),
+      visible: requestedVisible$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const drawerPortalDirective = bindDirective(
+    portal,
+    computed(() => ({ container: container$() }))
+  );
+  const { directive: drawerElementDirective, element$: drawerElement$ } = createBrowserStoreDirective();
+  const drawerAttributeDirective = mergeDirectives(
+    drawerElementDirective,
+    createAttributesDirective(() => ({
+      attributes: {
+        class: className$,
+        role: readable("dialog"),
+        "aria-describedby": ariaDescribedBy$,
+        "aria-labelledby": ariaLabelledBy$,
+        "aria-modal": readable("true"),
+        tabIndex: readable("-1")
+      },
+      styles: {
+        position: computed(() => {
+          const container = container$();
+          return container && isBrowserHTMLElement(container) && container !== document.body ? "relative" : "fixed";
+        }),
+        outline: readable("none")
+      },
+      events: {
+        keydown: async (e) => {
+          if (e.key === "Escape") {
+            await transition.api.hide();
+          }
+        }
+      }
+    }))
+  );
+  const backdropTransition = createTransition({
+    props: {
+      animated: animated$,
+      transition: backdropTransition$
+    }
+  });
+  const backdropPortalDirective = bindDirective(
+    portal,
+    computed(() => {
+      const container = container$();
+      const element = container ? transition.stores.element$() : void 0;
+      return {
+        container,
+        insertBefore: element?.parentElement === container ? element : void 0
+      };
+    })
+  );
+  const backdropHidden$ = computed(() => {
+    if (!bodyScroll$()) {
+      if (hidden$()) {
+        revertScrollbars();
+      } else {
+        removeScrollbars();
+      }
+    }
+    return !backdrop$() || hidden$();
+  });
+  const backdropAttributeDirective = createAttributesDirective(() => ({
+    attributes: {
+      class: backdropClass$,
+      "data-agnos-ignore-inert": true$
+    },
+    events: {
+      click: async () => await transition.api.hide()
+    }
+  }));
+  const direction$ = computed(() => ["inline-start", "block-start"].some((placement) => className$().includes(placement)) ? 1 : -1);
+  const isMinimized$ = writable(void 0);
+  const isMaximized$ = writable(void 0);
+  function setSize(size) {
+    const drawerElement = drawerElement$();
+    const isVertical = isVertical$();
+    size = Math.round(Math.max(0, size));
+    drawerElement.style[isVertical ? "height" : "width"] = `${size}px`;
+    const elementSize = Math.round(drawerElement[isVertical ? "offsetHeight" : "offsetWidth"]);
+    size$.set(elementSize);
+    isMinimized$.set(size != null && (size < elementSize || size === 0));
+    isMaximized$.set(!!size && size > elementSize);
+    return elementSize;
+  }
+  const splitterDirective = mergeDirectives(
+    createPointerdownPositionDirective((event) => {
+      const drawerElement = drawerElement$();
+      const isVertical = isVertical$();
+      const startSize = drawerElement[isVertical ? "offsetHeight" : "offsetWidth"];
+      const clientXorY = isVertical ? "clientY" : "clientX";
+      const startPos = event[clientXorY];
+      const direction = direction$();
+      onResizingChange$()(true);
+      return {
+        onMove(event2) {
+          setSize(startSize + direction * (event2[clientXorY] - startPos));
+        },
+        onEnd() {
+          drawerElement.style[isVertical ? "height" : "width"] = "";
+          onResizingChange$()(false);
+        }
+      };
+    }),
+    createAttributesDirective(() => ({
+      events: {
+        keydown: (e) => {
+          const { key } = e;
+          const size = size$() || drawerElement$()?.[isVertical$() ? "offsetHeight" : "offsetWidth"];
+          if (size != null) {
+            switch (key) {
+              case "ArrowLeft":
+              case "ArrowDown":
+                onResizingChange$()(true);
+                setSize(size - 10);
+                onResizingChange$()(false);
+                break;
+              case "ArrowRight":
+              case "ArrowUp":
+                onResizingChange$()(true);
+                setSize(size + 10);
+                onResizingChange$()(false);
+                break;
+            }
+          }
+        }
+      }
+    }))
+  );
+  const visible$ = transition.stores.visible$;
+  const transitioning$ = computed(() => transition.stores.transitioning$() || backdropTransition.stores.transitioning$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
+  const minSizeAction$ = computed(() => {
+    const isMinimized = isMinimized$();
+    if (isMinimized != null) {
+      untrack(() => onMinimizedChange$()(isMinimized));
+    }
+  });
+  const maxSizeAction$ = computed(() => {
+    const isMaximized = isMaximized$();
+    if (isMaximized != null) {
+      untrack(() => onMaximizedChange$()(isMaximized));
+    }
+  });
+  const action$ = computed(() => {
+    minSizeAction$();
+    maxSizeAction$();
+  });
+  const widget = {
+    ...stateStores({
+      ...stateProps,
+      backdropClass$,
+      className$,
+      container$,
+      size$,
+      visible$,
+      backdropHidden$,
+      hidden$
+    }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide
+    },
+    directives: {
+      drawerPortalDirective,
+      drawerDirective: mergeDirectives(
+        directiveSubscribe(action$),
+        drawerAttributeDirective,
+        bindDirective(
+          siblingsInert,
+          computed(() => !bodyScroll$())
+        ),
+        // This directive must come after the attribute directive, to ensure that all the classes and attributes are applied for the transition
+        transition.directives.directive,
+        focusElement
+      ),
+      backdropPortalDirective,
+      backdropDirective: mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+      splitterDirective
+    }
+  };
+  return widget;
+});
+export {
+  createDrawer as c,
+  getDrawerDefaultConfig as g
+};