@jsenv/navi 0.1.1 → 0.2.0

package/src/components/field/field_css.js

@@ -1,121 +1,87 @@
 import.meta.css = /* css */ `
-  [data-field],
-  [data-field-wrapper] {
-    --field-border-width: 1px;
-    --field-outline-width: 1px;
+  :root {
+    --navi-field-border-width: 1px;
+    --navi-field-outline-width: 1px;
 
-    --field-strong-color: light-dark(#355fcc, #3b82f6);
-    --field-outline-color: var(--field-strong-color);
-    --field-background-color: light-dark(#f3f4f6, #2d3748);
-    --field-border-color: light-dark(#767676, #8e8e93);
+    --navi-field-border-color: light-dark(#767676, #8e8e93);
+    --navi-field-outline-color: light-dark(#355fcc, #3b82f6);
+    --navi-field-background-color: light-dark(#f3f4f6, #2d3748);
+    --navi-field-accent-color: light-dark(#355fcc, #3b82f6);
 
-    --field-disabled-border-color: color-mix(
+    --navi-field-disabled-border-color: color-mix(
       in srgb,
-      var(--field-border-color) 30%,
+      var(--navi-field-border-color) 30%,
       white
     );
-    --field-readonly-border-color: var(--field-disabled-border-color);
-    --field-active-border-color: color-mix(
+    --navi-field-readonly-border-color: var(--navi-field-disabled-border-color);
+    --navi-field-active-border-color: color-mix(
       in srgb,
-      var(--field-border-color) 90%,
+      var(--navi-field-border-color) 90%,
       black
     );
-    --field-hover-border-color: color-mix(
+    --navi-field-hover-border-color: color-mix(
       in srgb,
-      var(--field-border-color) 70%,
+      var(--navi-field-border-color) 70%,
       black
     );
 
-    --field-disabled-background-color: var(--field-background-color);
-    --field-readonly-background-color: var(--field-disabled-background-color);
-    --field-hover-background-color: color-mix(
+    --navi-field-disabled-background-color: var(--navi-field-background-color);
+    --navi-field-readonly-background-color: var(
+      --navi-field-disabled-background-color
+    );
+    --navi-field-hover-background-color: color-mix(
       in srgb,
-      var(--field-background-color) 95%,
+      var(--navi-field-background-color) 95%,
       black
     );
 
-    --field-disabled-text-color: color-mix(
+    --navi-field-readonly-color: color-mix(
       in srgb,
       currentColor 30%,
       transparent
     );
-    --field-readonly-text-color: var(--field-disabled-text-color);
+    --navi-field-disabled-color: var(--navi-field-readonly-color);
   }
 
-  [data-field] {
-    border-radius: 2px;
-    outline-width: var(--field-border-width);
-    outline-style: solid;
-    outline-color: transparent;
-    outline-offset: calc(-1 * (var(--field-border-width)));
-  }
+  [data-field-border-and-outline] {
+    border-width: calc(
+      var(--navi-field-border-width) + var(--navi-field-outline-width)
+    );
 
-  [data-field][data-field-with-border] {
-    border-width: calc(var(--field-border-width) + var(--field-outline-width));
     border-style: solid;
-    border-color: transparent;
-    outline-color: var(--field-border-color);
-  }
-
-  [data-field-with-border-hover] {
-    border: 0;
-  }
-
-  [data-field-with-background] {
-    background-color: var(--field-background-color);
-  }
-  [data-field-with-background-hover] {
-    background: none;
-  }
-
-  [data-field-with-background]:hover {
-    background-color: var(--field-hover-background-color);
-  }
 
-  [data-field-with-hover]:hover {
-    outline-color: var(--field-hover-border-color);
+    border-color: transparent;
+    outline-width: var(--navi-field-border-width);
+    outline-style: none;
+    outline-color: var(--navi-field-border-color);
+    outline-offset: calc(-1 * (var(--navi-field-border-width)));
   }
-
-  [data-field-with-border]:active,
-  [data-field][data-field-with-border][data-active] {
-    outline-color: var(--field-active-border-color);
-    background-color: none;
+  [data-field-wrapper][data-focus-visible] [data-field-border-and-outline] {
+    outline-width: calc(
+      var(--navi-field-border-width) + var(--navi-field-outline-width)
+    );
+    outline-style: solid;
+    outline-offset: calc(
+      -1 * (var(--navi-field-border-width) + var(--navi-field-outline-width))
+    );
   }
-
-  [data-field-with-border][readonly],
-  [data-field-with-border][data-readonly] {
-    outline-color: var(--field-readonly-border-color);
+  [data-field-wrapper][data-readonly] [data-field-border-and-outline] {
+    --navi-field-outline-color: var(--navi-field-readonly-border-color);
+    --navi-field-background-color: none;
   }
-
-  [data-field][readonly],
-  [data-field][data-readonly] {
-    color: var(--field-readonly-text-color);
+  [data-field-wrapper][data-active] [data-field-border-and-outline] {
+    --navi-field-outline-color: var(--navi-field-active-border-color);
+    --navi-field-background-color: none;
   }
 
-  [data-field-with-background][readonly],
-  [data-field-with-background][data-readonly] {
-    background-color: var(--field-readonly-background-color);
+  [data-field-border-hover-only] {
+    border: 0;
   }
-
-  [data-field]:focus-visible,
-  [data-field][data-focus-visible]:focus {
-    outline-style: solid;
-    outline-width: calc(var(--field-border-width) + var(--field-outline-width));
-    outline-offset: calc(
-      -1 * (var(--field-border-width) + var(--field-outline-width))
-    );
-    outline-color: var(--field-outline-color);
+  [data-field-wrapper][data-hover] [data-field-with-hover-effect-on-border] {
+    outline-color: var(--navi-field-hover-border-color);
   }
 
-  [data-field]:disabled,
-  [data-field][data-disabled],
-  [data-field-with-hover]:disabled:hover,
-  [data-field-with-hover][data-disabled]:hover {
-    outline-color: var(--field-disabled-border-color);
-    color: var(--field-disabled-text-color);
-  }
-  [data-field-with-background]:disabled,
-  [data-field-with-background][disabled] {
-    background-color: var(--field-disabled-background-color);
+  [data-field-wrapper][data-readonly] [data-field] {
+    --navi-field-color: var(--navi-field-readonly-color);
   }
 `;

package/src/components/field/form.jsx

@@ -18,7 +18,10 @@ import { useContext, useImperativeHandle, useMemo, useRef } from "preact/hooks";
 
 import { requestAction } from "../../validation/custom_constraint_validation.js";
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
-import { FormContext } from "../action_execution/form_context.js";
+import {
+  FormActionContext,
+  FormContext,
+} from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
@@ -193,9 +196,11 @@ const FormWithAction = forwardRef((props, ref) => {
         });
       }}
     >
-      <LoadingElementContext.Provider value={formActionRequester}>
-        {children}
-      </LoadingElementContext.Provider>
+      <FormActionContext.Provider value={actionBoundToUIState}>
+        <LoadingElementContext.Provider value={formActionRequester}>
+          {children}
+        </LoadingElementContext.Provider>
+      </FormActionContext.Provider>
     </FormBasic>
   );
 });

package/src/components/field/input_checkbox.jsx

@@ -1,5 +1,11 @@
+import { pickLightOrDark } from "@jsenv/dom";
 import { forwardRef } from "preact/compat";
-import { useContext, useImperativeHandle, useRef } from "preact/hooks";
+import {
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from "preact/hooks";
 
 import { useActionStatus } from "../../use_action_status.js";
 import { requestAction } from "../../validation/custom_constraint_validation.js";
@@ -7,9 +13,17 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { LoadableInlineElement } from "../loader/loader_background.jsx";
+import {
+  LoadableInlineElement,
+  LoaderBackground,
+} from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
-import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import { initCustomField } from "./custom_field.js";
+import {
+  ReportDisabledOnLabelContext,
+  ReportReadOnlyOnLabelContext,
+} from "./label.jsx";
+import "./navi_css_vars.js";
 import { useActionEvents } from "./use_action_events.js";
 import {
   DisabledContext,
@@ -25,38 +39,70 @@ import {
 } from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .custom_checkbox_wrapper[data-field-wrapper] {
+  :root {
+    --navi-checkmark-color-light: white;
+    --navi-checkmark-color-dark: rgb(55, 55, 55);
+    --navi-checkmark-color: var(--navi-checkmark-light-color);
+  }
+
+  .navi_checkbox {
+    position: relative;
     display: inline-flex;
     box-sizing: content-box;
 
-    --checkmark-color: white;
-    --checkmark-disabled-color: #eeeeee;
-    --checked-color: #3b82f6;
-    --checked-disabled-color: #d3d3d3;
+    --outline-offset: 1px;
+    --outline-width: 2px;
+    --border-width: 1px;
+    --border-radius: 2px;
+    --width: 13px;
+    --height: 13px;
 
-    /* TODO: find a better way maybe? */
-    --field-strong-color: var(--checked-color);
-  }
+    --outline-color: light-dark(#4476ff, #3b82f6);
+    --border-color: light-dark(#767676, #8e8e93);
+    --background-color: white;
+    --accent-color: light-dark(#4476ff, #3b82f6);
+    /* --color: currentColor; */
+    --checkmark-color: var(--navi-checkmark-color);
 
-  .custom_checkbox_wrapper input {
+    --border-color-readonly: color-mix(in srgb, var(--border-color) 30%, white);
+    --border-color-disabled: var(--border-color-readonly);
+    --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+    --border-color-checked-readonly: #d3d3d3;
+    --border-color-checked-disabled: #d3d3d3;
+    --background-color-checked-readonly: var(--navi-background-color-readonly);
+    --background-color-checked-disabled: var(--navi-background-color-disabled);
+    --checkmark-color-readonly: var(--navi-color-readonly);
+    --checkmark-color-disabled: var(--navi-color-disabled);
+  }
+  .navi_checkbox input {
     position: absolute;
-    opacity: 0;
     inset: 0;
     margin: 0;
     padding: 0;
     border: none;
+    opacity: 0;
+    cursor: inherit;
   }
-
-  .custom_checkbox {
-    width: 13px;
-    height: 13px;
-    border: 1px solid var(--field-border-color);
-    border-radius: 2px;
-    box-sizing: border-box;
+  .navi_checkbox_field {
     display: inline-flex;
+    box-sizing: border-box;
+    width: var(--width);
+    height: var(--height);
     margin: 3px 3px 3px 4px;
+    background-color: var(--background-color);
+    border-width: var(--border-width);
+    border-style: solid;
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    outline-width: var(--outline-width);
+
+    outline-style: none;
+
+    outline-color: var(--outline-color);
+    outline-offset: var(--outline-offset);
+    /* color: var(--color); */
   }
-  .custom_checkbox svg {
+  .navi_checkbox_marker {
     width: 100%;
     height: 100%;
     opacity: 0;
@@ -64,69 +110,50 @@ import.meta.css = /* css */ `
     transition: all 0.15s ease;
     pointer-events: none;
   }
-  .custom_checkbox svg path {
-    stroke: var(--checkmark-color);
-  }
 
-  .custom_checkbox_wrapper:hover .custom_checkbox {
-    border-color: var(--field-hover-border-color);
+  /* Focus */
+  .navi_checkbox[data-focus-visible] .navi_checkbox_field {
+    outline-style: solid;
   }
-  .custom_checkbox_wrapper:hover input:checked + .custom_checkbox {
-    background: var(--field-strong-color);
-    border-color: var(--field-strong-color);
+  /* Hover */
+  .navi_checkbox[data-hover] .navi_checkbox_field {
+    --border-color: var(--border-color-hover);
   }
-  .custom_checkbox_wrapper input:checked + .custom_checkbox {
-    background: var(--checked-color);
-    border-color: var(--checked-color);
+  /* Checked */
+  .navi_checkbox[data-checked] .navi_checkbox_field {
+    --background-color: var(--accent-color);
+    --border-color: var(--accent-color);
   }
-  .custom_checkbox_wrapper input:checked + .custom_checkbox svg {
+  .navi_checkbox[data-checked] .navi_checkbox_marker {
     opacity: 1;
+    stroke: var(--checkmark-color);
     transform: scale(1);
   }
-
-  .custom_checkbox_wrapper input[data-readonly] + .custom_checkbox {
-    background-color: var(--field-readonly-background-color);
-    border-color: var(--field-readonly-border-color);
-  }
-  .custom_checkbox_wrapper input[data-readonly]:checked + .custom_checkbox {
-    background: var(--checked-disabled-color);
-    border-color: var(--checked-disabled-color);
+  /* Readonly */
+  .navi_checkbox[data-readonly] .navi_checkbox_field,
+  .navi_checkbox[data-readonly][data-hover] .navi_checkbox_field {
+    --border-color: var(--border-color-readonly);
+    --background-color: var(--background-color-readonly);
   }
-  .custom_checkbox_wrapper:hover input[data-readonly] + .custom_checkbox {
-    background-color: var(--field-readonly-background-color);
-    border-color: var(--field-readonly-border-color);
+  .navi_checkbox[data-checked][data-readonly] .navi_checkbox_field {
+    --background-color: var(--background-color-checked-readonly);
+    --border-color: var(--border-color-checked-readonly);
   }
-  .custom_checkbox_wrapper:hover
-    input[data-readonly]:checked
-    + .custom_checkbox {
-    background: var(--checked-disabled-color);
-    border-color: var(--checked-disabled-color);
+  .navi_checkbox[data-checked][data-readonly] .navi_checkbox_marker {
+    stroke: var(--checkmark-color-readonly);
   }
-  .custom_checkbox_wrapper
-    input[data-readonly]:checked
-    + .custom_checkbox
-    .custom_checkbox_marker {
-    stroke: var(--checkmark-disabled-color);
+  /* Disabled */
+  .navi_checkbox[data-disabled] .navi_checkbox_field {
+    --background-color: var(--background-color-disabled);
+    --border-color: var(--border-color-disabled);
   }
-
-  .custom_checkbox_wrapper input:focus-visible + .custom_checkbox {
-    outline: 2px solid var(--field-outline-color);
-    outline-offset: 1px;
+  .navi_checkbox[data-checked][data-disabled] .navi_checkbox_field {
+    --border-color: var(--border-color-checked-disabled);
+    --background-color: var(--background-color-checked-disabled);
   }
 
-  .custom_checkbox_wrapper input[disabled] + .custom_checkbox {
-    background-color: var(--field-disabled-background-color);
-    border-color: var(--field-disabled-border-color);
-  }
-  .custom_checkbox_wrapper input[disabled]:checked + .custom_checkbox {
-    background: var(--checked-disabled-color);
-    border-color: var(--checked-disabled-color);
-  }
-  .custom_checkbox_wrapper
-    input[disabled]:checked
-    + .custom_checkbox
-    .custom_checkbox_marker {
-    stroke: var(--checkmark-disabled-color);
+  .navi_checkbox[data-checked][data-disabled] .navi_checkbox_marker {
+    stroke: var(--checkmark-color-disabled);
   }
 `;
 
@@ -165,6 +192,7 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
   const {
     name,
     readOnly,
@@ -174,10 +202,11 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
 
     autoFocus,
     constraints = [],
-    appeareance = "custom", // "custom" or "default"
+    appeareance = "navi", // "navi" or "default"
     accentColor,
     onClick,
     onInput,
+    style,
     ...rest
   } = props;
   const innerRef = useRef(null);
@@ -191,6 +220,7 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
   const innerReadOnly =
     readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
   reportReadOnlyOnLabel?.(innerReadOnly);
+  reportDisabledOnLabel?.(innerDisabled);
   useAutoFocus(innerRef, autoFocus);
   useConstraints(innerRef, constraints);
 
@@ -204,9 +234,9 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
       {...rest}
       ref={innerRef}
       type="checkbox"
+      style={appeareance === "default" ? style : undefined}
       name={innerName}
       checked={checked}
-      data-readonly={innerReadOnly ? "" : undefined}
       readOnly={innerReadOnly}
       disabled={innerDisabled}
       required={innerRequired}
@@ -233,44 +263,85 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
       }}
     />
   );
-
-  const inputCheckboxDisplayed =
-    appeareance === "custom" ? (
-      <CustomCheckbox accentColor={accentColor}>{inputCheckbox}</CustomCheckbox>
-    ) : (
-      inputCheckbox
+  const loaderProps = {
+    loading: innerLoading,
+    inset: -1,
+    style: {
+      "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+    },
+    color: "var(--accent-color)",
+  };
+  if (appeareance === "navi") {
+    return (
+      <NaviCheckbox
+        data-action={actionName}
+        inputRef={innerRef}
+        accentColor={accentColor}
+        readOnly={readOnly}
+        disabled={innerDisabled}
+        style={style}
+      >
+        <LoaderBackground
+          {...loaderProps}
+          targetSelector=".navi_checkbox_field"
+        >
+          {inputCheckbox}
+        </LoaderBackground>
+      </NaviCheckbox>
     );
+  }
 
   return (
-    <LoadableInlineElement
-      data-action={actionName}
-      loading={innerLoading}
-      inset={-1}
-      targetSelector={appeareance === "custom" ? ".custom_checkbox" : ""}
-      color="light-dark(#355fcc, #3b82f6)"
-    >
-      {inputCheckboxDisplayed}
+    <LoadableInlineElement {...loaderProps} data-action={actionName}>
+      {inputCheckbox}
     </LoadableInlineElement>
   );
 });
-const CustomCheckbox = ({ accentColor, children }) => {
+const NaviCheckbox = ({
+  accentColor,
+  readOnly,
+  disabled,
+  inputRef,
+  style,
+  children,
+  ...rest
+}) => {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    const naviCheckbox = ref.current;
+    const colorPicked = pickLightOrDark(
+      naviCheckbox,
+      "var(--accent-color)",
+      "var(--navi-checkmark-color-light)",
+      "var(--navi-checkmark-color-dark)",
+    );
+    naviCheckbox.style.setProperty("--checkmark-color", colorPicked);
+  }, [accentColor]);
+
+  useLayoutEffect(() => {
+    return initCustomField(ref.current, inputRef.current);
+  }, []);
+
   return (
     <div
-      className="custom_checkbox_wrapper"
-      data-field-wrapper=""
+      {...rest}
+      ref={ref}
+      className="navi_checkbox"
       style={{
-        ...(accentColor ? { "--checked-color": accentColor } : {}),
+        ...(accentColor ? { "--accent-color": accentColor } : {}),
+        ...style,
       }}
+      data-readonly={readOnly ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
     >
       {children}
-      <div className="custom_checkbox">
-        <svg viewBox="0 0 12 12" aria-hidden="true">
-          <path
-            className="custom_checkbox_marker"
-            d="M10.5 2L4.5 9L1.5 5.5"
-            fill="none"
-            strokeWidth="2"
-          />
+      <div className="navi_checkbox_field">
+        <svg
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          className="navi_checkbox_marker"
+        >
+          <path d="M10.5 2L4.5 9L1.5 5.5" fill="none" strokeWidth="2" />
         </svg>
       </div>
     </div>