@jsenv/navi 0.0.1

package/src/components/input/field_css.js

@@ -0,0 +1,118 @@
+import.meta.css = /* css */ `
+  [data-field],
+  [data-field-wrapper] {
+    --field-border-width: 1px;
+    --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);
+
+    --field-disabled-border-color: color-mix(
+      in srgb,
+      var(--field-border-color) 30%,
+      white
+    );
+    --field-readonly-border-color: var(--field-disabled-border-color);
+    --field-active-border-color: color-mix(
+      in srgb,
+      var(--field-border-color) 90%,
+      black
+    );
+    --field-hover-border-color: color-mix(
+      in srgb,
+      var(--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(
+      in srgb,
+      var(--field-background-color) 95%,
+      black
+    );
+
+    --field-disabled-text-color: color-mix(
+      in srgb,
+      currentColor 30%,
+      transparent
+    );
+    --field-readonly-text-color: var(--field-disabled-text-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][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);
+  }
+
+  [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-with-border][readonly],
+  [data-field-with-border][data-readonly] {
+    outline-color: var(--field-readonly-border-color);
+  }
+
+  [data-field][readonly],
+  [data-field][data-readonly] {
+    color: var(--field-readonly-text-color);
+  }
+
+  [data-field-with-background][readonly],
+  [data-field-with-background][data-readonly] {
+    background-color: var(--field-readonly-background-color);
+  }
+
+  [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]: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);
+    background-color: var(--field-disabled-background-color);
+    color: var(--field-disabled-text-color);
+  }
+`;

package/src/components/input/input.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "preact/compat";
+import { InputCheckbox } from "./input_checkbox.jsx";
+import { InputRadio } from "./input_radio.jsx";
+import { InputTextual } from "./input_textual.jsx";
+
+export const Input = forwardRef((props, ref) => {
+  const { type } = props;
+  if (type === "radio") {
+    return <InputRadio {...props} ref={ref} />;
+  }
+  if (type === "checkbox") {
+    return <InputCheckbox {...props} ref={ref} />;
+  }
+  return <InputTextual {...props} ref={ref} />;
+});

package/src/components/input/input_checkbox.jsx

@@ -0,0 +1,370 @@
+import { requestAction, useConstraints } from "@jsenv/validation";
+import { forwardRef } from "preact/compat";
+import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
+import { useNavState } from "../../browser_integration/browser_integration.js";
+import { useActionStatus } from "../../use_action_status.js";
+import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
+import {
+  useActionBoundToOneParam,
+  useOneFormParam,
+} from "../action_execution/use_action.js";
+import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { LoaderBackground } from "../loader/loader_background.jsx";
+import { useActionEvents } from "../use_action_events.js";
+import { useAutoFocus } from "../use_auto_focus.js";
+import { useFormEvents } from "./use_form_event.js";
+
+import.meta.css = /* css */ `
+  .custom_checkbox_wrapper {
+    display: inline-flex;
+    box-sizing: content-box;
+
+    --checkmark-color: white;
+    --checkmark-disabled-color: #eeeeee;
+    --checked-color: #3b82f6;
+    --checked-disabled-color: #d3d3d3;
+  }
+
+  .custom_checkbox_wrapper input {
+    position: absolute;
+    opacity: 0;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  .custom_checkbox {
+    width: 13px;
+    height: 13px;
+    border: 1px solid var(--field-border-color);
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: inline-flex;
+    margin: 3px 3px 3px 4px;
+  }
+  .custom_checkbox svg {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transform: scale(0.5);
+    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);
+  }
+  .custom_checkbox_wrapper:hover input:checked + .custom_checkbox {
+    background: var(--field-strong-color);
+    border-color: var(--field-strong-color);
+  }
+  .custom_checkbox_wrapper input:checked + .custom_checkbox {
+    background: var(--checked-color);
+    border-color: var(--checked-color);
+  }
+  .custom_checkbox_wrapper input:checked + .custom_checkbox svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .custom_checkbox_wrapper input[data-readonly] + .custom_checkbox {
+    background-color: var(--field-disabled-background-color);
+    border-color: var(--field-disabled-border-color);
+  }
+  .custom_checkbox_wrapper input[data-readonly]:checked + .custom_checkbox {
+    background: var(--checked-disabled-color);
+    border-color: var(--checked-disabled-color);
+  }
+  .custom_checkbox_wrapper:hover input[data-readonly] + .custom_checkbox {
+    background-color: var(--field-disabled-background-color);
+    border-color: var(--field-disabled-border-color);
+  }
+  .custom_checkbox_wrapper:hover
+    input[data-readonly]:checked
+    + .custom_checkbox {
+    background: var(--checked-disabled-color);
+    border-color: var(--checked-disabled-color);
+  }
+  .custom_checkbox_wrapper
+    input[data-readonly]:checked
+    + .custom_checkbox
+    .custom_checkbox_marker {
+    stroke: var(--checkmark-disabled-color);
+  }
+
+  .custom_checkbox_wrapper input:focus-visible + .custom_checkbox {
+    outline: 2px solid var(--field-outline-color);
+    outline-offset: 1px;
+  }
+
+  .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);
+  }
+`;
+
+export const InputCheckbox = forwardRef((props, ref) => {
+  return renderActionableComponent(props, ref, {
+    Basic: InputCheckboxBasic,
+    WithAction: InputCheckboxWithAction,
+    InsideForm: InputCheckboxInsideForm,
+  });
+});
+
+const InputCheckboxBasic = forwardRef((props, ref) => {
+  const {
+    autoFocus,
+    constraints = [],
+    value = "on",
+    checked,
+    loading,
+    readOnly,
+    disabled,
+    onClick,
+    onChange,
+    appeareance = "custom", // "custom" or "default"
+    ...rest
+  } = props;
+
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  useAutoFocus(innerRef, autoFocus);
+  useConstraints(innerRef, constraints);
+
+  const [innerChecked, setInnerChecked] = useState(checked);
+  const checkedRef = useRef(checked);
+  if (checkedRef.current !== checked) {
+    setInnerChecked(checked);
+    checkedRef.current = checked;
+  }
+
+  const handleChange = (e) => {
+    const isChecked = e.target.checked;
+    setInnerChecked(isChecked);
+    onChange?.(e);
+  };
+
+  const inputCheckbox = (
+    <input
+      ref={innerRef}
+      type="checkbox"
+      value={value}
+      checked={innerChecked}
+      data-readonly={readOnly && !disabled ? "" : undefined}
+      data-validation-message-arrow-x="center"
+      disabled={disabled}
+      onClick={(e) => {
+        if (readOnly) {
+          e.preventDefault();
+        }
+        onClick?.(e);
+      }}
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+
+  const inputCheckboxDisplayed =
+    appeareance === "custom" ? (
+      <CustomCheckbox>{inputCheckbox}</CustomCheckbox>
+    ) : (
+      inputCheckbox
+    );
+
+  const inputCheckboxWithLoader = (
+    <LoaderBackground
+      loading={loading}
+      inset={-1}
+      targetSelector={appeareance === "custom" ? ".custom_checkbox" : ""}
+      color="light-dark(#355fcc, #3b82f6)"
+    >
+      {inputCheckboxDisplayed}
+    </LoaderBackground>
+  );
+
+  return inputCheckboxWithLoader;
+});
+const CustomCheckbox = ({ children }) => {
+  return (
+    <div className="custom_checkbox_wrapper" data-field-wrapper="">
+      {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"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+const InputCheckboxWithAction = forwardRef((props, ref) => {
+  const {
+    id,
+    name,
+    value = "on",
+    checked: checkedExternal,
+    valueSignal,
+    action,
+    readOnly,
+    loading,
+    onCancel,
+    onChange,
+    actionErrorEffect,
+    onActionPrevented,
+    onActionStart,
+    onActionAbort,
+    onActionError,
+    onActionEnd,
+    ...rest
+  } = props;
+  if (import.meta.dev && !name && !valueSignal) {
+    console.warn(`InputCheckboxWithAction requires a name prop to be set.`);
+  }
+
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const [navState, setNavState] = useNavState(id);
+  const [boundAction, checkedValue, setCheckedValue, resetCheckedValue] =
+    useActionBoundToOneParam(
+      action,
+      name,
+      valueSignal ? valueSignal : checkedExternal ? value : undefined,
+      navState ? value : undefined,
+    );
+  const checked = checkedValue === value;
+  useEffect(() => {
+    if (checkedExternal) {
+      setNavState(checked ? false : undefined);
+    } else {
+      setNavState(checked ? true : undefined);
+    }
+  }, [checkedExternal, checked]);
+  const { loading: actionLoading } = useActionStatus(boundAction);
+  const executeAction = useExecuteAction(innerRef, {
+    errorEffect: actionErrorEffect,
+  });
+  const innerLoading = loading || actionLoading;
+
+  useActionEvents(innerRef, {
+    onCancel: (e, reason) => {
+      if (reason === "blur_invalid") {
+        return;
+      }
+      setNavState(undefined);
+      resetCheckedValue();
+      onCancel?.(e, reason);
+    },
+    onPrevented: onActionPrevented,
+    onAction: executeAction,
+    onStart: onActionStart,
+    onAbort: (e) => {
+      resetCheckedValue();
+      onActionAbort?.(e);
+    },
+    onError: (e) => {
+      resetCheckedValue();
+      onActionError?.(e);
+    },
+    onEnd: (e) => {
+      setNavState(undefined);
+      onActionEnd?.(e);
+    },
+  });
+
+  return (
+    <InputCheckboxBasic
+      {...rest}
+      ref={innerRef}
+      id={id}
+      name={name}
+      value={value}
+      checked={checked}
+      data-action={boundAction}
+      loading={innerLoading}
+      readOnly={readOnly || innerLoading}
+      onChange={(e) => {
+        const checkboxIsChecked = e.target.checked;
+        setCheckedValue(checkboxIsChecked ? value : undefined);
+        requestAction(boundAction, { event: e });
+        onChange?.(e);
+      }}
+    />
+  );
+});
+
+const InputCheckboxInsideForm = forwardRef((props, ref) => {
+  const {
+    formContext,
+    id,
+    name,
+    value = "on",
+    checked: checkedExternal,
+    readOnly,
+    onChange,
+    ...rest
+  } = props;
+  const { formIsReadOnly } = formContext;
+
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const [navState, setNavState] = useNavState(id);
+  const [checkedValue, setCheckedValue, resetCheckedValue] = useOneFormParam(
+    name,
+    checkedExternal ? value : undefined,
+    navState ? value : undefined,
+  );
+  const checked = checkedValue === value;
+  useEffect(() => {
+    if (checkedExternal) {
+      setNavState(checked ? false : undefined);
+    } else {
+      setNavState(checked ? true : undefined);
+    }
+  }, [checkedExternal, checked]);
+
+  useFormEvents(innerRef, {
+    onFormActionAbort: () => {
+      resetCheckedValue();
+    },
+    onFormActionError: () => {
+      resetCheckedValue();
+    },
+  });
+
+  return (
+    <InputCheckboxBasic
+      {...rest}
+      ref={innerRef}
+      id={id}
+      name={name}
+      checked={checked}
+      readOnly={readOnly || formIsReadOnly}
+      onChange={(e) => {
+        const checkboxIsChecked = e.target.checked;
+        setCheckedValue(checkboxIsChecked ? value : undefined);
+        onChange?.(e);
+      }}
+    />
+  );
+});