@builder.io/sdk-qwik 0.16.6 → 0.16.9

package/lib/node/blocks/form/form/form.qwik.cjs

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const qwik = require("@builder.io/qwik");
+const block = require("../../../components/block/block.qwik.cjs");
+const blocks = require("../../../components/blocks/blocks.qwik.cjs");
+const getEnv = require("../../../functions/get-env.qwik.cjs");
+const get = require("../../../functions/get.qwik.cjs");
+const isEditing = require("../../../functions/is-editing.qwik.cjs");
+const set = require("../../../functions/set.qwik.cjs");
+const mergeNewRootState = function mergeNewRootState2(props, state, formRef, newData) {
+  var _a, _b;
+  const combinedState = {
+    ...props.builderContext.rootState,
+    ...newData
+  };
+  if (props.builderContext.rootSetState)
+    (_b = (_a = props.builderContext).rootSetState) == null ? void 0 : _b.call(_a, combinedState);
+  else
+    props.builderContext.rootState = combinedState;
+};
+const submissionState = function submissionState2(props, state, formRef) {
+  return isEditing.isEditing() && props.previewState || state.formState;
+};
+const onSubmit = function onSubmit2(props, state, formRef, event) {
+  var _a;
+  const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
+  if (props.sendSubmissionsTo === "zapier")
+    event.preventDefault();
+  else if (sendWithJsProp) {
+    if (!(props.action || props.sendSubmissionsTo === "email")) {
+      event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    const el = event.currentTarget || event.target;
+    const headers = props.customHeaders || {};
+    let body;
+    const formData = new FormData(el);
+    const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
+      let value;
+      const key = el2.name;
+      if (el2 instanceof HTMLInputElement) {
+        if (el2.type === "radio") {
+          if (el2.checked) {
+            value = el2.name;
+            return {
+              key,
+              value
+            };
+          }
+        } else if (el2.type === "checkbox")
+          value = el2.checked;
+        else if (el2.type === "number" || el2.type === "range") {
+          const num = el2.valueAsNumber;
+          if (!isNaN(num))
+            value = num;
+        } else if (el2.type === "file")
+          value = el2.files;
+        else
+          value = el2.value;
+      } else
+        value = el2.value;
+      return {
+        key,
+        value
+      };
+    });
+    let formContentType = props.contentType;
+    if (props.sendSubmissionsTo === "email")
+      formContentType = "multipart/form-data";
+    Array.from(formPairs).forEach(({ value }) => {
+      if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList)
+        formContentType = "multipart/form-data";
+    });
+    if (formContentType !== "application/json")
+      body = formData;
+    else {
+      const json = {};
+      Array.from(formPairs).forEach(({ value, key }) => {
+        set.set(json, key, value);
+      });
+      body = JSON.stringify(json);
+    }
+    if (formContentType && formContentType !== "multipart/form-data") {
+      if (
+        /* Zapier doesn't allow content-type header to be sent from browsers */
+        !(sendWithJsProp && ((_a = props.action) == null ? void 0 : _a.includes("zapier.com")))
+      )
+        headers["content-type"] = formContentType;
+    }
+    const presubmitEvent = new CustomEvent("presubmit", {
+      detail: {
+        body
+      }
+    });
+    if (formRef.value) {
+      formRef.value.dispatchEvent(presubmitEvent);
+      if (presubmitEvent.defaultPrevented)
+        return;
+    }
+    state.formState = "sending";
+    const formUrl = `${getEnv.getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
+    fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action, {
+      body,
+      headers,
+      method: props.method || "post"
+    }).then(async (res) => {
+      let body2;
+      const contentType = res.headers.get("content-type");
+      if (contentType && contentType.indexOf("application/json") !== -1)
+        body2 = await res.json();
+      else
+        body2 = await res.text();
+      if (!res.ok && props.errorMessagePath) {
+        let message = get.get(body2, props.errorMessagePath);
+        if (message) {
+          if (typeof message !== "string")
+            message = JSON.stringify(message);
+          state.formErrorMessage = message;
+          mergeNewRootState(props, state, formRef, {
+            formErrorMessage: message
+          });
+        }
+      }
+      state.responseData = body2;
+      state.formState = res.ok ? "success" : "error";
+      if (res.ok) {
+        const submitSuccessEvent = new CustomEvent("submit:success", {
+          detail: {
+            res,
+            body: body2
+          }
+        });
+        if (formRef.value) {
+          formRef.value.dispatchEvent(submitSuccessEvent);
+          if (submitSuccessEvent.defaultPrevented)
+            return;
+          if (props.resetFormOnSubmit !== false)
+            formRef.value.reset();
+        }
+        if (props.successUrl) {
+          if (formRef.value) {
+            const event2 = new CustomEvent("route", {
+              detail: {
+                url: props.successUrl
+              }
+            });
+            formRef.value.dispatchEvent(event2);
+            if (!event2.defaultPrevented)
+              location.href = props.successUrl;
+          } else
+            location.href = props.successUrl;
+        }
+      }
+    }, (err) => {
+      const submitErrorEvent = new CustomEvent("submit:error", {
+        detail: {
+          error: err
+        }
+      });
+      if (formRef.value) {
+        formRef.value.dispatchEvent(submitErrorEvent);
+        if (submitErrorEvent.defaultPrevented)
+          return;
+      }
+      state.responseData = err;
+      state.formState = "error";
+    });
+  }
+};
+const FormComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  var _a;
+  qwik._jsxBranch();
+  qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES, "FormComponent_component_useStylesScoped_SVdPvm0do3s"));
+  const formRef = qwik.useSignal();
+  const state = qwik.useStore({
+    formErrorMessage: "",
+    formState: "unsubmitted",
+    responseData: null
+  });
+  return /* @__PURE__ */ qwik._jsxS("form", {
+    action: (() => {
+      !props.sendWithJs && props.action;
+    })(),
+    ref: formRef,
+    ...props.attributes,
+    children: [
+      props.builderBlock && props.builderBlock.children ? (((_a = props.builderBlock) == null ? void 0 : _a.children) || []).map((block$1, idx) => {
+        return /* @__PURE__ */ qwik._jsxC(block.Block, {
+          block: block$1,
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [qwik._IMMUTABLE]: {
+            context: qwik._fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, `form-block-${idx}`);
+      }) : null,
+      submissionState(props, state) === "error" ? /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+        path: "errorMessage",
+        get blocks() {
+          return props.errorMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [qwik._IMMUTABLE]: {
+          blocks: qwik._fnSignal((p0) => p0.errorMessage, [
+            props
+          ], "p0.errorMessage"),
+          context: qwik._fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: qwik._IMMUTABLE
+        }
+      }, 3, "0n_0") : null,
+      submissionState(props, state) === "sending" ? /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+        path: "sendingMessage",
+        get blocks() {
+          return props.sendingMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [qwik._IMMUTABLE]: {
+          blocks: qwik._fnSignal((p0) => p0.sendingMessage, [
+            props
+          ], "p0.sendingMessage"),
+          context: qwik._fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: qwik._IMMUTABLE
+        }
+      }, 3, "0n_1") : null,
+      submissionState(props, state) === "error" && state.responseData ? /* @__PURE__ */ qwik._jsxQ("pre", null, {
+        class: "builder-form-error-text pre-FormComponent"
+      }, JSON.stringify(state.responseData, null, 2), 1, "0n_2") : null,
+      submissionState(props, state) === "success" ? /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+        path: "successMessage",
+        get blocks() {
+          return props.successMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [qwik._IMMUTABLE]: {
+          blocks: qwik._fnSignal((p0) => p0.successMessage, [
+            props
+          ], "p0.successMessage"),
+          context: qwik._fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: qwik._IMMUTABLE
+        }
+      }, 3, "0n_3") : null
+    ],
+    onSubmit$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
+      const [formRef2, props2, state2] = qwik.useLexicalScope();
+      return onSubmit(props2, state2, formRef2, event);
+    }, "FormComponent_component_form_onSubmit_F3ZFTlkNAQk", [
+      formRef,
+      props,
+      state
+    ])
+  }, {
+    method: qwik._fnSignal((p0) => p0.method, [
+      props
+    ], "p0.method"),
+    name: qwik._fnSignal((p0) => p0.name, [
+      props
+    ], "p0.name"),
+    "preventdefault:submit": true,
+    validate: qwik._fnSignal((p0) => p0.validate, [
+      props
+    ], "p0.validate")
+  }, 0, "0n_4");
+}, "FormComponent_component_dk5c15Rvsfg"));
+const STYLES = `
+.pre-FormComponent {
+  padding: 10px;
+  color: red;
+  text-align: center;
+}
+`;
+exports.FormComponent = FormComponent;
+exports.STYLES = STYLES;
+exports.default = FormComponent;
+exports.mergeNewRootState = mergeNewRootState;
+exports.onSubmit = onSubmit;
+exports.submissionState = submissionState;

package/lib/node/blocks/form/form/form.qwik.mjs

@@ -0,0 +1,304 @@
+import { componentQrl, inlinedQrl, _jsxBranch, useStylesScopedQrl, useSignal, useStore, _jsxS, _jsxC, _IMMUTABLE, _fnSignal, _jsxQ, useLexicalScope } from "@builder.io/qwik";
+import { Block } from "../../../components/block/block.qwik.mjs";
+import { Blocks } from "../../../components/blocks/blocks.qwik.mjs";
+import { getEnv } from "../../../functions/get-env.qwik.mjs";
+import { get } from "../../../functions/get.qwik.mjs";
+import { isEditing } from "../../../functions/is-editing.qwik.mjs";
+import { set } from "../../../functions/set.qwik.mjs";
+const mergeNewRootState = function mergeNewRootState2(props, state, formRef, newData) {
+  var _a, _b;
+  const combinedState = {
+    ...props.builderContext.rootState,
+    ...newData
+  };
+  if (props.builderContext.rootSetState)
+    (_b = (_a = props.builderContext).rootSetState) == null ? void 0 : _b.call(_a, combinedState);
+  else
+    props.builderContext.rootState = combinedState;
+};
+const submissionState = function submissionState2(props, state, formRef) {
+  return isEditing() && props.previewState || state.formState;
+};
+const onSubmit = function onSubmit2(props, state, formRef, event) {
+  var _a;
+  const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
+  if (props.sendSubmissionsTo === "zapier")
+    event.preventDefault();
+  else if (sendWithJsProp) {
+    if (!(props.action || props.sendSubmissionsTo === "email")) {
+      event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    const el = event.currentTarget || event.target;
+    const headers = props.customHeaders || {};
+    let body;
+    const formData = new FormData(el);
+    const formPairs = Array.from(el.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
+      let value;
+      const key = el2.name;
+      if (el2 instanceof HTMLInputElement) {
+        if (el2.type === "radio") {
+          if (el2.checked) {
+            value = el2.name;
+            return {
+              key,
+              value
+            };
+          }
+        } else if (el2.type === "checkbox")
+          value = el2.checked;
+        else if (el2.type === "number" || el2.type === "range") {
+          const num = el2.valueAsNumber;
+          if (!isNaN(num))
+            value = num;
+        } else if (el2.type === "file")
+          value = el2.files;
+        else
+          value = el2.value;
+      } else
+        value = el2.value;
+      return {
+        key,
+        value
+      };
+    });
+    let formContentType = props.contentType;
+    if (props.sendSubmissionsTo === "email")
+      formContentType = "multipart/form-data";
+    Array.from(formPairs).forEach(({ value }) => {
+      if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList)
+        formContentType = "multipart/form-data";
+    });
+    if (formContentType !== "application/json")
+      body = formData;
+    else {
+      const json = {};
+      Array.from(formPairs).forEach(({ value, key }) => {
+        set(json, key, value);
+      });
+      body = JSON.stringify(json);
+    }
+    if (formContentType && formContentType !== "multipart/form-data") {
+      if (
+        /* Zapier doesn't allow content-type header to be sent from browsers */
+        !(sendWithJsProp && ((_a = props.action) == null ? void 0 : _a.includes("zapier.com")))
+      )
+        headers["content-type"] = formContentType;
+    }
+    const presubmitEvent = new CustomEvent("presubmit", {
+      detail: {
+        body
+      }
+    });
+    if (formRef.value) {
+      formRef.value.dispatchEvent(presubmitEvent);
+      if (presubmitEvent.defaultPrevented)
+        return;
+    }
+    state.formState = "sending";
+    const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
+    fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action, {
+      body,
+      headers,
+      method: props.method || "post"
+    }).then(async (res) => {
+      let body2;
+      const contentType = res.headers.get("content-type");
+      if (contentType && contentType.indexOf("application/json") !== -1)
+        body2 = await res.json();
+      else
+        body2 = await res.text();
+      if (!res.ok && props.errorMessagePath) {
+        let message = get(body2, props.errorMessagePath);
+        if (message) {
+          if (typeof message !== "string")
+            message = JSON.stringify(message);
+          state.formErrorMessage = message;
+          mergeNewRootState(props, state, formRef, {
+            formErrorMessage: message
+          });
+        }
+      }
+      state.responseData = body2;
+      state.formState = res.ok ? "success" : "error";
+      if (res.ok) {
+        const submitSuccessEvent = new CustomEvent("submit:success", {
+          detail: {
+            res,
+            body: body2
+          }
+        });
+        if (formRef.value) {
+          formRef.value.dispatchEvent(submitSuccessEvent);
+          if (submitSuccessEvent.defaultPrevented)
+            return;
+          if (props.resetFormOnSubmit !== false)
+            formRef.value.reset();
+        }
+        if (props.successUrl) {
+          if (formRef.value) {
+            const event2 = new CustomEvent("route", {
+              detail: {
+                url: props.successUrl
+              }
+            });
+            formRef.value.dispatchEvent(event2);
+            if (!event2.defaultPrevented)
+              location.href = props.successUrl;
+          } else
+            location.href = props.successUrl;
+        }
+      }
+    }, (err) => {
+      const submitErrorEvent = new CustomEvent("submit:error", {
+        detail: {
+          error: err
+        }
+      });
+      if (formRef.value) {
+        formRef.value.dispatchEvent(submitErrorEvent);
+        if (submitErrorEvent.defaultPrevented)
+          return;
+      }
+      state.responseData = err;
+      state.formState = "error";
+    });
+  }
+};
+const FormComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  var _a;
+  _jsxBranch();
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "FormComponent_component_useStylesScoped_SVdPvm0do3s"));
+  const formRef = useSignal();
+  const state = useStore({
+    formErrorMessage: "",
+    formState: "unsubmitted",
+    responseData: null
+  });
+  return /* @__PURE__ */ _jsxS("form", {
+    action: (() => {
+      !props.sendWithJs && props.action;
+    })(),
+    ref: formRef,
+    ...props.attributes,
+    children: [
+      props.builderBlock && props.builderBlock.children ? (((_a = props.builderBlock) == null ? void 0 : _a.children) || []).map((block, idx) => {
+        return /* @__PURE__ */ _jsxC(Block, {
+          block,
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, `form-block-${idx}`);
+      }) : null,
+      submissionState(props, state) === "error" ? /* @__PURE__ */ _jsxC(Blocks, {
+        path: "errorMessage",
+        get blocks() {
+          return props.errorMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [_IMMUTABLE]: {
+          blocks: _fnSignal((p0) => p0.errorMessage, [
+            props
+          ], "p0.errorMessage"),
+          context: _fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: _IMMUTABLE
+        }
+      }, 3, "0n_0") : null,
+      submissionState(props, state) === "sending" ? /* @__PURE__ */ _jsxC(Blocks, {
+        path: "sendingMessage",
+        get blocks() {
+          return props.sendingMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [_IMMUTABLE]: {
+          blocks: _fnSignal((p0) => p0.sendingMessage, [
+            props
+          ], "p0.sendingMessage"),
+          context: _fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: _IMMUTABLE
+        }
+      }, 3, "0n_1") : null,
+      submissionState(props, state) === "error" && state.responseData ? /* @__PURE__ */ _jsxQ("pre", null, {
+        class: "builder-form-error-text pre-FormComponent"
+      }, JSON.stringify(state.responseData, null, 2), 1, "0n_2") : null,
+      submissionState(props, state) === "success" ? /* @__PURE__ */ _jsxC(Blocks, {
+        path: "successMessage",
+        get blocks() {
+          return props.successMessage;
+        },
+        get context() {
+          return props.builderContext;
+        },
+        [_IMMUTABLE]: {
+          blocks: _fnSignal((p0) => p0.successMessage, [
+            props
+          ], "p0.successMessage"),
+          context: _fnSignal((p0) => p0.builderContext, [
+            props
+          ], "p0.builderContext"),
+          path: _IMMUTABLE
+        }
+      }, 3, "0n_3") : null
+    ],
+    onSubmit$: /* @__PURE__ */ inlinedQrl((event) => {
+      const [formRef2, props2, state2] = useLexicalScope();
+      return onSubmit(props2, state2, formRef2, event);
+    }, "FormComponent_component_form_onSubmit_F3ZFTlkNAQk", [
+      formRef,
+      props,
+      state
+    ])
+  }, {
+    method: _fnSignal((p0) => p0.method, [
+      props
+    ], "p0.method"),
+    name: _fnSignal((p0) => p0.name, [
+      props
+    ], "p0.name"),
+    "preventdefault:submit": true,
+    validate: _fnSignal((p0) => p0.validate, [
+      props
+    ], "p0.validate")
+  }, 0, "0n_4");
+}, "FormComponent_component_dk5c15Rvsfg"));
+const STYLES = `
+.pre-FormComponent {
+  padding: 10px;
+  color: red;
+  text-align: center;
+}
+`;
+export {
+  FormComponent,
+  STYLES,
+  FormComponent as default,
+  mergeNewRootState,
+  onSubmit,
+  submissionState
+};

package/lib/node/blocks/form/input/component-info.qwik.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const componentInfo = {
+  name: "Form:Input",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
+  inputs: [
+    {
+      name: "type",
+      type: "text",
+      enum: [
+        "text",
+        "number",
+        "email",
+        "url",
+        "checkbox",
+        "radio",
+        "range",
+        "date",
+        "datetime-local",
+        "search",
+        "tel",
+        "time",
+        "file",
+        "month",
+        "week",
+        "password",
+        "color",
+        "hidden"
+      ],
+      defaultValue: "text"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there",
+      helperText: "Text to display when there is no value"
+    },
+    // TODO: handle value vs default value automatically like ng-model
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "value",
+      type: "string",
+      advanced: true
+    },
+    {
+      name: "required",
+      type: "boolean",
+      helperText: "Is this input required to be filled out to submit a form",
+      defaultValue: false
+    }
+  ],
+  noWrap: true,
+  static: true,
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  }
+};
+exports.componentInfo = componentInfo;