@lundal/zed-solid 0.0.12 → 0.0.14

package/dist/IconButton.d.ts

@@ -7,6 +7,6 @@ export type IconButtonProps = {
     type: "primary" | "secondary" | "tertiary";
     icon: JSX.Element;
     label: string;
-    onClick: () => void;
+    onClick: "submit" | (() => void);
 };
 export declare function IconButton(props: IconButtonProps): JSX.Element;

package/dist/index.d.ts

@@ -22,3 +22,6 @@ export * from './Row.tsx';
 export * from './Select.tsx';
 export * from './Spinner.tsx';
 export * from './TextBox.tsx';
+export * from './signals/createForm.ts';
+export * from './signals/createInterval.ts';
+export * from './signals/createSize.ts';

package/dist/index.js

@@ -1,7 +1,7 @@
 import './style.css';
 import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
-import { sharedConfig, createRenderEffect, untrack, createComponent, For, createMemo, createSignal, onMount } from "solid-js";
+import { sharedConfig, createRenderEffect, untrack, createComponent, For, createMemo, createSignal, onMount, onCleanup } from "solid-js";
 import { A } from "@solidjs/router";
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
@@ -684,22 +684,24 @@ var _tmpl$$a = /* @__PURE__ */ template(`<button>`);
 function IconButton(props) {
   return (() => {
     var _el$ = _tmpl$$a();
-    _el$.$$click = () => !props.busy && props.onClick();
+    _el$.$$click = () => props.onClick !== "submit" && !props.busy && props.onClick();
     insert(_el$, () => props.icon);
     createRenderEffect((_p$) => {
-      var _v$ = mergeClasses(`z-button z-button--icon z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.label, _v$5 = props.label;
+      var _v$ = mergeClasses(`z-button z-button--icon z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.label, _v$5 = props.label, _v$6 = props.onClick === "submit" ? "submit" : "button";
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _p$.t = style(_el$, _v$2, _p$.t);
       _v$3 !== _p$.a && setAttribute(_el$, "aria-busy", _p$.a = _v$3);
       _v$4 !== _p$.o && setAttribute(_el$, "aria-label", _p$.o = _v$4);
       _v$5 !== _p$.i && setAttribute(_el$, "title", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$, "type", _p$.n = _v$6);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0
+      i: void 0,
+      n: void 0
     });
     return _el$;
   })();
@@ -1014,6 +1016,80 @@ function TextBox(props) {
   })();
 }
 delegateEvents(["input"]);
+function createForm(options) {
+  const [fields, setFields] = createSignal(options.initiator());
+  const errors = createMemo(() => options.validator(fields()));
+  const invalid = createMemo(() => containsTruthy(errors()));
+  const [state, setState] = createSignal({
+    type: "HideErrors"
+  });
+  return {
+    fields,
+    errors: () => state().type === "ShowErrors" ? errors() : {},
+    state,
+    busy: () => state().type === "Submitting",
+    update: (fields2) => {
+      setFields((prevFields) => ({ ...prevFields, ...fields2 }));
+    },
+    reset: () => {
+      setFields(() => options.initiator());
+    },
+    submit: () => {
+      if (state().type === "Submitting") {
+        return;
+      }
+      if (invalid()) {
+        setState({ type: "ShowErrors" });
+        return;
+      }
+      setState({ type: "Submitting" });
+      options.submitter(fields()).then((value) => {
+        var _a;
+        setState({ type: "Success", value });
+        (_a = options.onSuccess) == null ? void 0 : _a.call(options, value);
+      }).catch((error) => {
+        var _a;
+        setState({ type: "Failure", error });
+        (_a = options.onFailure) == null ? void 0 : _a.call(options, error);
+      });
+    }
+  };
+}
+function containsTruthy(value) {
+  if (!value) {
+    return false;
+  }
+  if (typeof value === "object") {
+    if (Array.isArray(value)) {
+      return value.some(containsTruthy);
+    } else {
+      return Object.values(value).some(containsTruthy);
+    }
+  }
+  return true;
+}
+function createInterval(fn, interval = 1e3) {
+  const [value, setValue] = createSignal(fn());
+  const id = setInterval(() => setValue(fn), interval);
+  onCleanup(() => clearInterval(id));
+  return value;
+}
+function createSize(element) {
+  const [size, setSize] = createSignal({ width: 0, height: 0 });
+  let observer;
+  onMount(() => {
+    const _element = element();
+    observer = new ResizeObserver(() => {
+      setSize({ width: _element.offsetWidth, height: _element.offsetHeight });
+    });
+    observer.observe(_element);
+  });
+  onCleanup(() => {
+    observer == null ? void 0 : observer.disconnect();
+    observer = void 0;
+  });
+  return size;
+}
 export {
   Button,
   Card,
@@ -1039,5 +1115,8 @@ export {
   Row,
   Select,
   Spinner,
-  TextBox
+  TextBox,
+  createForm,
+  createInterval,
+  createSize
 };

package/dist/signals/createForm.d.ts

@@ -0,0 +1,38 @@
+import { Accessor } from 'solid-js';
+
+type Options<Fields, Errors, Success, Failure> = {
+    initiator: () => Fields;
+    validator: (fields: Fields) => Errors;
+    submitter: (fields: Fields) => Promise<Success>;
+    onSuccess?: (result: Success) => void;
+    onFailure?: (result: Failure) => void;
+};
+type Form<Fields, Errors, Success, Failure> = {
+    fields: Accessor<Fields>;
+    errors: Accessor<Partial<Errors>>;
+    state: Accessor<State<Success, Failure>>;
+    busy: Accessor<boolean>;
+    update: (fields: Partial<Fields>) => void;
+    reset: () => void;
+    submit: () => void;
+};
+export declare function createForm<Fields, Errors, Success, Failure>(options: Options<Fields, Errors, Success, Failure>): Form<Fields, Errors, Success, Failure>;
+type State<Value, Error> = HideErrors | ShowErrors | Submitting | Success<Value> | Failure<Error>;
+type HideErrors = {
+    type: "HideErrors";
+};
+type ShowErrors = {
+    type: "ShowErrors";
+};
+type Submitting = {
+    type: "Submitting";
+};
+type Success<Value> = {
+    type: "Success";
+    value: Value;
+};
+type Failure<Error> = {
+    type: "Failure";
+    error: Error;
+};
+export {};

package/dist/signals/createInterval.d.ts

@@ -0,0 +1,11 @@
+import { Accessor } from 'solid-js';
+
+/**
+ * Create a readonly signal that is recomputed at regular intervals
+ *
+ * ### Example
+ * ```ts
+ *  const now = createInterval(() => Date.now());
+ * ```
+ */
+export declare function createInterval<T>(fn: () => T, interval?: number): Accessor<T>;

package/dist/signals/createSize.d.ts

@@ -0,0 +1,24 @@
+import { Accessor } from 'solid-js';
+
+type Size = {
+    width: number;
+    height: number;
+};
+/**
+ * Create a readonly signal for an element's size
+ *
+ * ### Example
+ * ```tsx
+ * export function Example() {
+ *   let element!: HTMLDivElement;
+ *   const size = createSize(() => element);
+ *   return (
+ *     <div ref={element}>
+ *       Size: {JSON.stringify(size())}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function createSize(element: Accessor<HTMLElement>): Accessor<Size>;
+export {};

package/dist/style.css

@@ -651,7 +651,6 @@ dialog:focus-visible {
   --z-button-secondary-text: #e6e6e6;
   --z-button-tertiary-fill: transparent;
   --z-button-tertiary-text: #e6e6e6;
-  --z-button-icon-fill: #2c2c35;
   --z-input-border: #79798a; /* Lc 30 */
   --z-input-active-border: #6068ff; /* Lc 30 */
   --z-input-active-fill: #7882ff; /* Lc 40 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lundal/zed-solid",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "module": "dist/index.js",