@queuezero/vue 0.1.3

package/dist/index.mjs

@@ -0,0 +1,528 @@
+// src/composables.ts
+import { ref, onMounted, inject, provide } from "vue";
+import { QueueZeroClient, QueueZeroStateManager } from "queuezero";
+var WAITLIST_INJECTION_KEY = /* @__PURE__ */ Symbol("queuezero-waitlist");
+function useWaitlist(campaign, config) {
+  const injected = 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 QueueZeroClient(campaign, config);
+  const stateManager = new QueueZeroStateManager(client);
+  const loading = ref(stateManager.getState().loading);
+  const status = ref(stateManager.getState().status);
+  const error = ref(stateManager.getState().error);
+  const isJoined = ref(stateManager.getState().isJoined);
+  const publicConfig = 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;
+  });
+  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);
+  provide(WAITLIST_INJECTION_KEY, waitlist);
+  return waitlist;
+}
+function useWaitlistContext() {
+  const context = 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
+import { defineComponent, ref as ref2, computed as computed2, h, reactive } from "vue";
+import { FormController } from "queuezero";
+var WaitlistForm = 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 = ref2("");
+    const localError = ref2(null);
+    const formData = reactive({});
+    const displayError = computed2(() => localError.value || contextError.value);
+    const formFields = computed2(() => {
+      return publicConfig.value?.formFields?.filter((f) => f.enabled) ?? [];
+    });
+    const controller = computed2(
+      () => new 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 = h("label", {
+        class: "qz-form-label",
+        for: fieldId
+      }, [
+        field.label,
+        field.required && h("span", { class: "qz-required" }, " *")
+      ]);
+      let inputNode;
+      switch (field.type) {
+        case "select":
+          inputNode = h("select", {
+            id: fieldId,
+            class: "qz-form-select",
+            value: fieldValue,
+            disabled: loading.value,
+            required: field.required,
+            onChange: (e) => {
+              formData[field.key] = e.target.value;
+            }
+          }, [
+            h("option", { value: "" }, field.placeholder || `Select ${field.label}`),
+            ...(field.options || []).map(
+              (opt) => h("option", { value: opt }, opt)
+            )
+          ]);
+          break;
+        case "checkbox":
+          inputNode = h("div", { class: "qz-form-checkbox-wrapper" }, [
+            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;
+              }
+            }),
+            h("label", { for: fieldId, class: "qz-form-checkbox-label" }, field.label)
+          ]);
+          return h("div", { class: "qz-form-field" }, [inputNode]);
+        case "number":
+          inputNode = 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 = 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 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(
+        h("div", { class: "qz-form-field" }, [
+          props.showLabel && h("label", { class: "qz-form-label", for: "qz-email" }, [
+            props.labelText,
+            h("span", { class: "qz-required" }, " *")
+          ]),
+          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 h(
+        "form",
+        {
+          class: "qz-form",
+          onSubmit: handleSubmit
+        },
+        [
+          ...fieldNodes,
+          h("div", { class: "qz-form-actions" }, [
+            h(
+              "button",
+              {
+                type: "submit",
+                disabled: loading.value,
+                class: "qz-form-button"
+              },
+              loading.value ? props.loadingText : props.buttonText
+            )
+          ]),
+          displayError.value && h(
+            "div",
+            { class: "qz-form-error", role: "alert" },
+            displayError.value.message
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/WaitlistStatus.ts
+import { defineComponent as defineComponent2, h as h2 } from "vue";
+var WaitlistStatus = defineComponent2({
+  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 h2("div", { class: "qz-status qz-status-loading" }, "Loading...");
+      }
+      if (slots.default) {
+        return slots.default(status.value);
+      }
+      return h2("div", { class: "qz-status" }, [
+        h2("div", { class: "qz-status-item qz-status-position" }, [
+          h2("span", { class: "qz-status-label" }, props.positionLabel),
+          h2(
+            "span",
+            { class: "qz-status-value" },
+            `#${status.value.position.toLocaleString()}`
+          )
+        ]),
+        props.showScore && h2("div", { class: "qz-status-item qz-status-score" }, [
+          h2("span", { class: "qz-status-label" }, props.scoreLabel),
+          h2(
+            "span",
+            { class: "qz-status-value" },
+            status.value.priorityScore.toLocaleString()
+          )
+        ]),
+        props.showReferrals && h2("div", { class: "qz-status-item qz-status-referrals" }, [
+          h2("span", { class: "qz-status-label" }, props.referralsLabel),
+          h2(
+            "span",
+            { class: "qz-status-value" },
+            status.value.referralCount.toLocaleString()
+          )
+        ])
+      ]);
+    };
+  }
+});
+
+// src/ReferralShare.ts
+import { defineComponent as defineComponent3, ref as ref3, h as h3 } from "vue";
+var ReferralShare = defineComponent3({
+  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 = ref3(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 h3("div", { class: "qz-share" }, [
+        props.label && h3("div", { class: "qz-share-label" }, props.label),
+        h3("div", { class: "qz-share-link-container" }, [
+          h3("input", {
+            type: "text",
+            value: link,
+            readonly: true,
+            class: "qz-share-input",
+            onClick: (e) => e.target.select()
+          }),
+          h3(
+            "button",
+            {
+              onClick: handleCopy,
+              class: "qz-share-copy-button"
+            },
+            copied.value ? props.copiedText : props.copyButtonText
+          )
+        ]),
+        props.showSocialButtons && h3("div", { class: "qz-share-social" }, [
+          h3(
+            "button",
+            {
+              onClick: handleTwitterShare,
+              class: "qz-share-social-button qz-share-twitter",
+              "aria-label": "Share on Twitter"
+            },
+            h3(
+              "svg",
+              { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" },
+              h3("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"
+              })
+            )
+          ),
+          h3(
+            "button",
+            {
+              onClick: handleLinkedInShare,
+              class: "qz-share-social-button qz-share-linkedin",
+              "aria-label": "Share on LinkedIn"
+            },
+            h3(
+              "svg",
+              { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" },
+              h3("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"
+              })
+            )
+          ),
+          h3(
+            "button",
+            {
+              onClick: handleEmailShare,
+              class: "qz-share-social-button qz-share-email",
+              "aria-label": "Share via Email"
+            },
+            h3("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, [
+              h3("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"
+              }),
+              h3("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
+import { QueueZeroClient as QueueZeroClient2, InMemoryStorageAdapter, LocalStorageAdapter } from "queuezero";
+export {
+  InMemoryStorageAdapter,
+  LocalStorageAdapter,
+  QueueZeroClient2 as QueueZeroClient,
+  ReferralShare,
+  WAITLIST_INJECTION_KEY,
+  WaitlistForm,
+  WaitlistStatus,
+  createWaitlistPlugin,
+  provideWaitlist,
+  useWaitlist,
+  useWaitlistContext
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@queuezero/vue",
+  "version": "0.1.3",
+  "description": "Vue components and composables for QueueZero viral waitlists",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external vue",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external vue",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "keywords": [
+    "waitlist",
+    "viral",
+    "referral",
+    "vue",
+    "composables"
+  ],
+  "author": "QueueZero Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "queuezero": "^0.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.11",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  }
+}