@queuezero/vue 0.1.3

package/dist/index.js

@@ -0,0 +1,565 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InMemoryStorageAdapter: () => import_queuezero3.InMemoryStorageAdapter,
+  LocalStorageAdapter: () => import_queuezero3.LocalStorageAdapter,
+  QueueZeroClient: () => import_queuezero3.QueueZeroClient,
+  ReferralShare: () => ReferralShare,
+  WAITLIST_INJECTION_KEY: () => WAITLIST_INJECTION_KEY,
+  WaitlistForm: () => WaitlistForm,
+  WaitlistStatus: () => WaitlistStatus,
+  createWaitlistPlugin: () => createWaitlistPlugin,
+  provideWaitlist: () => provideWaitlist,
+  useWaitlist: () => useWaitlist,
+  useWaitlistContext: () => useWaitlistContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/composables.ts
+var import_vue = require("vue");
+var import_queuezero = require("queuezero");
+var WAITLIST_INJECTION_KEY = /* @__PURE__ */ Symbol("queuezero-waitlist");
+function useWaitlist(campaign, config) {
+  const injected = (0, import_vue.inject)(WAITLIST_INJECTION_KEY, null);
+  if (injected && !campaign) {
+    return injected;
+  }
+  if (!campaign) {
+    throw new Error("useWaitlist requires a campaign slug or must be used within WaitlistProvider");
+  }
+  const client = new import_queuezero.QueueZeroClient(campaign, config);
+  const stateManager = new import_queuezero.QueueZeroStateManager(client);
+  const loading = (0, import_vue.ref)(stateManager.getState().loading);
+  const status = (0, import_vue.ref)(stateManager.getState().status);
+  const error = (0, import_vue.ref)(stateManager.getState().error);
+  const isJoined = (0, import_vue.ref)(stateManager.getState().isJoined);
+  const publicConfig = (0, import_vue.ref)(stateManager.getState().publicConfig);
+  stateManager.subscribe((newState) => {
+    loading.value = newState.loading;
+    status.value = newState.status;
+    error.value = newState.error;
+    isJoined.value = newState.isJoined;
+    publicConfig.value = newState.publicConfig;
+  });
+  (0, import_vue.onMounted)(async () => {
+    await stateManager.fetchPublicConfig();
+    if (stateManager.getState().isJoined) {
+      stateManager.refresh();
+    }
+  });
+  return {
+    loading,
+    status,
+    error,
+    isJoined,
+    publicConfig,
+    campaign,
+    join: stateManager.join.bind(stateManager),
+    refresh: stateManager.refresh.bind(stateManager),
+    fetchPublicConfig: stateManager.fetchPublicConfig.bind(stateManager),
+    getReferralLink: stateManager.getReferralLink.bind(stateManager),
+    getReferralCode: stateManager.getReferralCode.bind(stateManager),
+    reset: stateManager.reset.bind(stateManager)
+  };
+}
+function provideWaitlist(campaign, config) {
+  const waitlist = useWaitlist(campaign, config);
+  (0, import_vue.provide)(WAITLIST_INJECTION_KEY, waitlist);
+  return waitlist;
+}
+function useWaitlistContext() {
+  const context = (0, import_vue.inject)(WAITLIST_INJECTION_KEY);
+  if (!context) {
+    throw new Error("useWaitlistContext must be used within a component that calls provideWaitlist");
+  }
+  return context;
+}
+function createWaitlistPlugin(options) {
+  return {
+    install(app) {
+      const waitlist = useWaitlist(options.campaign, options.config);
+      app.provide(WAITLIST_INJECTION_KEY, waitlist);
+    }
+  };
+}
+
+// src/WaitlistForm.ts
+var import_vue2 = require("vue");
+var import_queuezero2 = require("queuezero");
+var WaitlistForm = (0, import_vue2.defineComponent)({
+  name: "WaitlistForm",
+  props: {
+    referrerCode: {
+      type: String,
+      default: void 0
+    },
+    metadata: {
+      type: Object,
+      default: () => ({})
+    },
+    placeholder: {
+      type: String,
+      default: "Enter your email"
+    },
+    buttonText: {
+      type: String,
+      default: "Join Waitlist"
+    },
+    loadingText: {
+      type: String,
+      default: "Joining..."
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    labelText: {
+      type: String,
+      default: "Email"
+    }
+  },
+  emits: {
+    success: (response) => true,
+    error: (error) => true
+  },
+  setup(props, { emit, slots }) {
+    const { join, loading, error: contextError, isJoined, publicConfig } = useWaitlistContext();
+    const email = (0, import_vue2.ref)("");
+    const localError = (0, import_vue2.ref)(null);
+    const formData = (0, import_vue2.reactive)({});
+    const displayError = (0, import_vue2.computed)(() => localError.value || contextError.value);
+    const formFields = (0, import_vue2.computed)(() => {
+      return publicConfig.value?.formFields?.filter((f) => f.enabled) ?? [];
+    });
+    const controller = (0, import_vue2.computed)(
+      () => new import_queuezero2.FormController(join, formFields.value, props.referrerCode)
+    );
+    async function handleSubmit(e) {
+      e?.preventDefault();
+      localError.value = null;
+      try {
+        const result = await controller.value.submit(email.value, formData, props.metadata);
+        if (result) {
+          email.value = "";
+          Object.keys(formData).forEach((key) => delete formData[key]);
+          emit("success", result);
+        } else if (contextError.value) {
+          emit("error", contextError.value);
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Failed to join");
+        localError.value = error;
+        emit("error", error);
+      }
+    }
+    function renderField(field) {
+      const fieldId = `qz-field-${field.key}`;
+      const fieldValue = formData[field.key] ?? "";
+      const labelNode = (0, import_vue2.h)("label", {
+        class: "qz-form-label",
+        for: fieldId
+      }, [
+        field.label,
+        field.required && (0, import_vue2.h)("span", { class: "qz-required" }, " *")
+      ]);
+      let inputNode;
+      switch (field.type) {
+        case "select":
+          inputNode = (0, import_vue2.h)("select", {
+            id: fieldId,
+            class: "qz-form-select",
+            value: fieldValue,
+            disabled: loading.value,
+            required: field.required,
+            onChange: (e) => {
+              formData[field.key] = e.target.value;
+            }
+          }, [
+            (0, import_vue2.h)("option", { value: "" }, field.placeholder || `Select ${field.label}`),
+            ...(field.options || []).map(
+              (opt) => (0, import_vue2.h)("option", { value: opt }, opt)
+            )
+          ]);
+          break;
+        case "checkbox":
+          inputNode = (0, import_vue2.h)("div", { class: "qz-form-checkbox-wrapper" }, [
+            (0, import_vue2.h)("input", {
+              id: fieldId,
+              type: "checkbox",
+              class: "qz-form-checkbox",
+              checked: !!formData[field.key],
+              disabled: loading.value,
+              required: field.required,
+              onChange: (e) => {
+                formData[field.key] = e.target.checked;
+              }
+            }),
+            (0, import_vue2.h)("label", { for: fieldId, class: "qz-form-checkbox-label" }, field.label)
+          ]);
+          return (0, import_vue2.h)("div", { class: "qz-form-field" }, [inputNode]);
+        case "number":
+          inputNode = (0, import_vue2.h)("input", {
+            id: fieldId,
+            type: "number",
+            class: "qz-form-input",
+            value: fieldValue,
+            placeholder: field.placeholder || "",
+            disabled: loading.value,
+            required: field.required,
+            onInput: (e) => {
+              formData[field.key] = e.target.value;
+            }
+          });
+          break;
+        default:
+          inputNode = (0, import_vue2.h)("input", {
+            id: fieldId,
+            type: field.type,
+            class: "qz-form-input",
+            value: fieldValue,
+            placeholder: field.placeholder || "",
+            disabled: loading.value,
+            required: field.required,
+            onInput: (e) => {
+              formData[field.key] = e.target.value;
+            }
+          });
+      }
+      return (0, import_vue2.h)("div", { class: "qz-form-field" }, [labelNode, inputNode]);
+    }
+    return () => {
+      if (isJoined.value) {
+        return null;
+      }
+      if (slots.default) {
+        return slots.default({
+          email: email.value,
+          setEmail: (val) => email.value = val,
+          formData,
+          formFields: formFields.value,
+          submit: handleSubmit,
+          loading: loading.value,
+          error: displayError.value
+        });
+      }
+      const fieldNodes = [];
+      fieldNodes.push(
+        (0, import_vue2.h)("div", { class: "qz-form-field" }, [
+          props.showLabel && (0, import_vue2.h)("label", { class: "qz-form-label", for: "qz-email" }, [
+            props.labelText,
+            (0, import_vue2.h)("span", { class: "qz-required" }, " *")
+          ]),
+          (0, import_vue2.h)("input", {
+            id: "qz-email",
+            type: "email",
+            value: email.value,
+            onInput: (e) => email.value = e.target.value,
+            placeholder: props.placeholder,
+            disabled: loading.value,
+            required: true,
+            class: "qz-form-input",
+            "aria-label": !props.showLabel ? props.labelText : void 0
+          })
+        ])
+      );
+      formFields.value.forEach((field) => {
+        fieldNodes.push(renderField(field));
+      });
+      return (0, import_vue2.h)(
+        "form",
+        {
+          class: "qz-form",
+          onSubmit: handleSubmit
+        },
+        [
+          ...fieldNodes,
+          (0, import_vue2.h)("div", { class: "qz-form-actions" }, [
+            (0, import_vue2.h)(
+              "button",
+              {
+                type: "submit",
+                disabled: loading.value,
+                class: "qz-form-button"
+              },
+              loading.value ? props.loadingText : props.buttonText
+            )
+          ]),
+          displayError.value && (0, import_vue2.h)(
+            "div",
+            { class: "qz-form-error", role: "alert" },
+            displayError.value.message
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/WaitlistStatus.ts
+var import_vue3 = require("vue");
+var WaitlistStatus = (0, import_vue3.defineComponent)({
+  name: "WaitlistStatus",
+  props: {
+    showReferrals: {
+      type: Boolean,
+      default: true
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    positionLabel: {
+      type: String,
+      default: "Position"
+    },
+    scoreLabel: {
+      type: String,
+      default: "Score"
+    },
+    referralsLabel: {
+      type: String,
+      default: "Referrals"
+    }
+  },
+  setup(props, { slots }) {
+    const { status, loading, isJoined } = useWaitlistContext();
+    return () => {
+      if (!isJoined.value || !status.value) {
+        return null;
+      }
+      if (loading.value && !status.value) {
+        return (0, import_vue3.h)("div", { class: "qz-status qz-status-loading" }, "Loading...");
+      }
+      if (slots.default) {
+        return slots.default(status.value);
+      }
+      return (0, import_vue3.h)("div", { class: "qz-status" }, [
+        (0, import_vue3.h)("div", { class: "qz-status-item qz-status-position" }, [
+          (0, import_vue3.h)("span", { class: "qz-status-label" }, props.positionLabel),
+          (0, import_vue3.h)(
+            "span",
+            { class: "qz-status-value" },
+            `#${status.value.position.toLocaleString()}`
+          )
+        ]),
+        props.showScore && (0, import_vue3.h)("div", { class: "qz-status-item qz-status-score" }, [
+          (0, import_vue3.h)("span", { class: "qz-status-label" }, props.scoreLabel),
+          (0, import_vue3.h)(
+            "span",
+            { class: "qz-status-value" },
+            status.value.priorityScore.toLocaleString()
+          )
+        ]),
+        props.showReferrals && (0, import_vue3.h)("div", { class: "qz-status-item qz-status-referrals" }, [
+          (0, import_vue3.h)("span", { class: "qz-status-label" }, props.referralsLabel),
+          (0, import_vue3.h)(
+            "span",
+            { class: "qz-status-value" },
+            status.value.referralCount.toLocaleString()
+          )
+        ])
+      ]);
+    };
+  }
+});
+
+// src/ReferralShare.ts
+var import_vue4 = require("vue");
+var ReferralShare = (0, import_vue4.defineComponent)({
+  name: "ReferralShare",
+  props: {
+    label: {
+      type: String,
+      default: "Share your referral link:"
+    },
+    copyButtonText: {
+      type: String,
+      default: "Copy"
+    },
+    copiedText: {
+      type: String,
+      default: "Copied!"
+    },
+    shareMessage: {
+      type: String,
+      default: "Join me on the waitlist!"
+    },
+    showSocialButtons: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    copy: (link) => true
+  },
+  setup(props, { emit, slots }) {
+    const { getReferralLink, getReferralCode, isJoined } = useWaitlistContext();
+    const copied = (0, import_vue4.ref)(false);
+    async function handleCopy() {
+      const link = getReferralLink();
+      if (!link) return;
+      try {
+        await navigator.clipboard.writeText(link);
+        copied.value = true;
+        emit("copy", link);
+        setTimeout(() => copied.value = false, 2e3);
+      } catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = link;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+        copied.value = true;
+        emit("copy", link);
+        setTimeout(() => copied.value = false, 2e3);
+      }
+    }
+    function handleTwitterShare() {
+      const link = getReferralLink();
+      if (!link) return;
+      const text = encodeURIComponent(`${props.shareMessage} ${link}`);
+      window.open(`https://twitter.com/intent/tweet?text=${text}`, "_blank", "noopener,noreferrer");
+    }
+    function handleLinkedInShare() {
+      const link = getReferralLink();
+      if (!link) return;
+      const url = encodeURIComponent(link);
+      window.open(
+        `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+        "_blank",
+        "noopener,noreferrer"
+      );
+    }
+    function handleEmailShare() {
+      const link = getReferralLink();
+      if (!link) return;
+      const subject = encodeURIComponent("Join me on the waitlist!");
+      const body = encodeURIComponent(`${props.shareMessage}
+
+${link}`);
+      window.location.href = `mailto:?subject=${subject}&body=${body}`;
+    }
+    return () => {
+      const link = getReferralLink();
+      const code = getReferralCode();
+      if (!isJoined.value || !link || !code) {
+        return null;
+      }
+      if (slots.default) {
+        return slots.default({
+          link,
+          code,
+          copy: handleCopy,
+          copied: copied.value
+        });
+      }
+      return (0, import_vue4.h)("div", { class: "qz-share" }, [
+        props.label && (0, import_vue4.h)("div", { class: "qz-share-label" }, props.label),
+        (0, import_vue4.h)("div", { class: "qz-share-link-container" }, [
+          (0, import_vue4.h)("input", {
+            type: "text",
+            value: link,
+            readonly: true,
+            class: "qz-share-input",
+            onClick: (e) => e.target.select()
+          }),
+          (0, import_vue4.h)(
+            "button",
+            {
+              onClick: handleCopy,
+              class: "qz-share-copy-button"
+            },
+            copied.value ? props.copiedText : props.copyButtonText
+          )
+        ]),
+        props.showSocialButtons && (0, import_vue4.h)("div", { class: "qz-share-social" }, [
+          (0, import_vue4.h)(
+            "button",
+            {
+              onClick: handleTwitterShare,
+              class: "qz-share-social-button qz-share-twitter",
+              "aria-label": "Share on Twitter"
+            },
+            (0, import_vue4.h)(
+              "svg",
+              { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" },
+              (0, import_vue4.h)("path", {
+                d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              })
+            )
+          ),
+          (0, import_vue4.h)(
+            "button",
+            {
+              onClick: handleLinkedInShare,
+              class: "qz-share-social-button qz-share-linkedin",
+              "aria-label": "Share on LinkedIn"
+            },
+            (0, import_vue4.h)(
+              "svg",
+              { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" },
+              (0, import_vue4.h)("path", {
+                d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+              })
+            )
+          ),
+          (0, import_vue4.h)(
+            "button",
+            {
+              onClick: handleEmailShare,
+              class: "qz-share-social-button qz-share-email",
+              "aria-label": "Share via Email"
+            },
+            (0, import_vue4.h)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, [
+              (0, import_vue4.h)("path", {
+                d: "M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
+              }),
+              (0, import_vue4.h)("path", {
+                d: "M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+              })
+            ])
+          )
+        ])
+      ]);
+    };
+  }
+});
+
+// src/index.ts
+var import_queuezero3 = require("queuezero");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InMemoryStorageAdapter,
+  LocalStorageAdapter,
+  QueueZeroClient,
+  ReferralShare,
+  WAITLIST_INJECTION_KEY,
+  WaitlistForm,
+  WaitlistStatus,
+  createWaitlistPlugin,
+  provideWaitlist,
+  useWaitlist,
+  useWaitlistContext
+});