@queuezero/vue 0.1.8 → 0.1.10

package/README.md

@@ -77,9 +77,32 @@ Ready-to-use signup form.
     <input :value="email" @input="setEmail($event.target.value)" />
     <button @click="submit">{{ loading ? '...' : 'Join' }}</button>
   </WaitlistForm>
+
+  <!-- Modal mode -->
+  <WaitlistForm
+    display-mode="modal"
+    trigger-text="Join Our Waitlist"
+    modal-size="md"
+  <!-- Headless modal mode -->
+  <WaitlistForm
+    display-mode="modal"
+    attach-to-text="Join Waitlist"
+    modal-size="md"
+  />
 </template>
 ```
 
+#### Modal Mode Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `display-mode` | `'inline' \| 'modal'` | `'inline'` | Display as inline form or modal |
+| `trigger-text` | `string` | `'Join Waitlist'` | Button text (modal mode only) |
+| `attach-to-text` | `string` | - | Text to match for auto-attaching modal (headless mode) |
+| `modal-size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Modal width (modal mode only) |
+
+The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.
+
 ### WaitlistStatus
 
 Displays position, score, and referral count.

package/dist/index.d.mts

@@ -62,6 +62,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
 }
 /**
  * Props for WaitlistStatus component
@@ -218,11 +222,19 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<"sm" | "md" | "lg">;
         default: string;
     };
+    triggerSelector: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    attachToText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     success: (response: SubmitResponse) => true;
     error: (error: Error) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -266,6 +278,14 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<"sm" | "md" | "lg">;
         default: string;
     };
+    triggerSelector: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    attachToText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onSuccess?: ((response: SubmitResponse) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
@@ -280,6 +300,8 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
     displayMode: "inline" | "modal";
     triggerText: string;
     modalSize: "sm" | "md" | "lg";
+    triggerSelector: string;
+    attachToText: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 /**

package/dist/index.d.ts

@@ -62,6 +62,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
 }
 /**
  * Props for WaitlistStatus component
@@ -218,11 +222,19 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<"sm" | "md" | "lg">;
         default: string;
     };
+    triggerSelector: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    attachToText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     success: (response: SubmitResponse) => true;
     error: (error: Error) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -266,6 +278,14 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<"sm" | "md" | "lg">;
         default: string;
     };
+    triggerSelector: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    attachToText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onSuccess?: ((response: SubmitResponse) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
@@ -280,6 +300,8 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
     displayMode: "inline" | "modal";
     triggerText: string;
     modalSize: "sm" | "md" | "lg";
+    triggerSelector: string;
+    attachToText: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 /**

package/dist/index.js

@@ -76,7 +76,13 @@ function useWaitlist(campaign, config) {
     join: stateManager.join.bind(stateManager),
     refresh: stateManager.refresh.bind(stateManager),
     fetchPublicConfig: stateManager.fetchPublicConfig.bind(stateManager),
-    getReferralLink: stateManager.getReferralLink.bind(stateManager),
+    getReferralLink: () => {
+      const code = stateManager.getReferralCode();
+      if (code && typeof window !== "undefined") {
+        return `${window.location.origin}${window.location.pathname}?ref=${code}`;
+      }
+      return stateManager.getReferralLink();
+    },
     getReferralCode: stateManager.getReferralCode.bind(stateManager),
     reset: stateManager.reset.bind(stateManager)
   };
@@ -147,6 +153,14 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
     modalSize: {
       type: String,
       default: "md"
+    },
+    triggerSelector: {
+      type: String,
+      default: void 0
+    },
+    attachToText: {
+      type: String,
+      default: void 0
     }
   },
   emits: {
@@ -158,6 +172,7 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
     const email = (0, import_vue2.ref)("");
     const localError = (0, import_vue2.ref)(null);
     const isModalOpen = (0, import_vue2.ref)(false);
+    const successData = (0, import_vue2.ref)(null);
     const formData = (0, import_vue2.reactive)({});
     const displayError = (0, import_vue2.computed)(() => localError.value || contextError.value);
     const branding = (0, import_vue2.computed)(() => publicConfig.value?.branding || {});
@@ -169,6 +184,32 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
     const controller = (0, import_vue2.computed)(
       () => new import_queuezero2.FormController(join, formFields.value, props.referrerCode)
     );
+    const cleanupFns = [];
+    (0, import_vue2.onMounted)(() => {
+      if (props.displayMode !== "modal") return;
+      const attach = (element) => {
+        const handler = (e) => {
+          e.preventDefault();
+          isModalOpen.value = true;
+        };
+        element.addEventListener("click", handler);
+        cleanupFns.push(() => element.removeEventListener("click", handler));
+      };
+      if (props.triggerSelector) {
+        document.querySelectorAll(props.triggerSelector).forEach(attach);
+      }
+      if (props.attachToText) {
+        const lowerText = props.attachToText.toLowerCase();
+        document.querySelectorAll("a, button").forEach((el) => {
+          if (el.textContent?.toLowerCase().includes(lowerText)) {
+            attach(el);
+          }
+        });
+      }
+    });
+    (0, import_vue2.onUnmounted)(() => {
+      cleanupFns.forEach((fn) => fn());
+    });
     async function handleSubmit(e) {
       e?.preventDefault();
       localError.value = null;
@@ -177,6 +218,7 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
         if (result) {
           email.value = "";
           Object.keys(formData).forEach((key) => delete formData[key]);
+          successData.value = result;
           emit("success", result);
         } else if (contextError.value) {
           emit("error", contextError.value);
@@ -210,7 +252,7 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
               formData[field.key] = e.target.value;
             }
           }, [
-            (0, import_vue2.h)("option", { value: "" }, field.placeholder || `Select ${field.label}`),
+            (0, import_vue2.h)("option", { value: "" }, "Select an option"),
             ...(field.options || []).map(
               (opt) => (0, import_vue2.h)("option", { value: opt }, opt)
             )
@@ -343,9 +385,10 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
       if (props.displayMode === "inline") {
         return formContent;
       }
-      return (0, import_vue2.h)("div", { class: "qz-waitlist-modal-wrapper" }, [
-        // Trigger button
-        (0, import_vue2.h)(
+      const isHeadless = !!(props.triggerSelector || props.attachToText);
+      const children = [];
+      if (!isHeadless) {
+        children.push((0, import_vue2.h)(
           "button",
           {
             type: "button",
@@ -356,9 +399,10 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
             }
           },
           props.triggerText
-        ),
-        // Modal overlay (only when open)
-        isModalOpen.value && (0, import_vue2.h)(
+        ));
+      }
+      if (isModalOpen.value) {
+        children.push((0, import_vue2.h)(
           "div",
           {
             class: "qz-modal-overlay",
@@ -389,12 +433,25 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
               // Body
               (0, import_vue2.h)("div", { class: "qz-modal-body" }, [
                 (0, import_vue2.h)("h2", { class: "qz-modal-title" }, publicConfig.value?.name || "Join Waitlist"),
-                formContent
+                successData.value ? (0, import_vue2.h)("div", { class: "qz-success" }, [
+                  (0, import_vue2.h)("h3", { style: { fontSize: "1.25rem", fontWeight: "600", marginBottom: "0.5rem", textAlign: "center" } }, "You're on the list!"),
+                  (0, import_vue2.h)("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: "0.9" } }, `You're #${successData.value.position || "?"} in line.`),
+                  successData.value.referralLink && (0, import_vue2.h)("div", { style: { marginTop: "1.5rem" } }, [
+                    (0, import_vue2.h)("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: "0.9", textAlign: "center" } }, "Refer friends to move up:"),
+                    (0, import_vue2.h)("input", {
+                      class: "qz-form-input",
+                      style: { textAlign: "center", cursor: "pointer" },
+                      readonly: true,
+                      value: window.location.origin + window.location.pathname + "?ref=" + successData.value.referralCode,
+                      onClick: (e) => e.target.select()
+                    })
+                  ])
+                ]) : formContent
               ])
             ])
           ]
-        )
-      ]);
+        ));
+      }
     };
   }
 });

package/dist/index.mjs

@@ -40,7 +40,13 @@ function useWaitlist(campaign, config) {
     join: stateManager.join.bind(stateManager),
     refresh: stateManager.refresh.bind(stateManager),
     fetchPublicConfig: stateManager.fetchPublicConfig.bind(stateManager),
-    getReferralLink: stateManager.getReferralLink.bind(stateManager),
+    getReferralLink: () => {
+      const code = stateManager.getReferralCode();
+      if (code && typeof window !== "undefined") {
+        return `${window.location.origin}${window.location.pathname}?ref=${code}`;
+      }
+      return stateManager.getReferralLink();
+    },
     getReferralCode: stateManager.getReferralCode.bind(stateManager),
     reset: stateManager.reset.bind(stateManager)
   };
@@ -67,7 +73,7 @@ function createWaitlistPlugin(options) {
 }
 
 // src/WaitlistForm.ts
-import { defineComponent, ref as ref2, computed as computed2, h, reactive } from "vue";
+import { defineComponent, ref as ref2, computed as computed2, h, reactive, onMounted as onMounted2, onUnmounted } from "vue";
 import { FormController } from "queuezero";
 var WaitlistForm = defineComponent({
   name: "WaitlistForm",
@@ -111,6 +117,14 @@ var WaitlistForm = defineComponent({
     modalSize: {
       type: String,
       default: "md"
+    },
+    triggerSelector: {
+      type: String,
+      default: void 0
+    },
+    attachToText: {
+      type: String,
+      default: void 0
     }
   },
   emits: {
@@ -122,6 +136,7 @@ var WaitlistForm = defineComponent({
     const email = ref2("");
     const localError = ref2(null);
     const isModalOpen = ref2(false);
+    const successData = ref2(null);
     const formData = reactive({});
     const displayError = computed2(() => localError.value || contextError.value);
     const branding = computed2(() => publicConfig.value?.branding || {});
@@ -133,6 +148,32 @@ var WaitlistForm = defineComponent({
     const controller = computed2(
       () => new FormController(join, formFields.value, props.referrerCode)
     );
+    const cleanupFns = [];
+    onMounted2(() => {
+      if (props.displayMode !== "modal") return;
+      const attach = (element) => {
+        const handler = (e) => {
+          e.preventDefault();
+          isModalOpen.value = true;
+        };
+        element.addEventListener("click", handler);
+        cleanupFns.push(() => element.removeEventListener("click", handler));
+      };
+      if (props.triggerSelector) {
+        document.querySelectorAll(props.triggerSelector).forEach(attach);
+      }
+      if (props.attachToText) {
+        const lowerText = props.attachToText.toLowerCase();
+        document.querySelectorAll("a, button").forEach((el) => {
+          if (el.textContent?.toLowerCase().includes(lowerText)) {
+            attach(el);
+          }
+        });
+      }
+    });
+    onUnmounted(() => {
+      cleanupFns.forEach((fn) => fn());
+    });
     async function handleSubmit(e) {
       e?.preventDefault();
       localError.value = null;
@@ -141,6 +182,7 @@ var WaitlistForm = defineComponent({
         if (result) {
           email.value = "";
           Object.keys(formData).forEach((key) => delete formData[key]);
+          successData.value = result;
           emit("success", result);
         } else if (contextError.value) {
           emit("error", contextError.value);
@@ -174,7 +216,7 @@ var WaitlistForm = defineComponent({
               formData[field.key] = e.target.value;
             }
           }, [
-            h("option", { value: "" }, field.placeholder || `Select ${field.label}`),
+            h("option", { value: "" }, "Select an option"),
             ...(field.options || []).map(
               (opt) => h("option", { value: opt }, opt)
             )
@@ -307,9 +349,10 @@ var WaitlistForm = defineComponent({
       if (props.displayMode === "inline") {
         return formContent;
       }
-      return h("div", { class: "qz-waitlist-modal-wrapper" }, [
-        // Trigger button
-        h(
+      const isHeadless = !!(props.triggerSelector || props.attachToText);
+      const children = [];
+      if (!isHeadless) {
+        children.push(h(
           "button",
           {
             type: "button",
@@ -320,9 +363,10 @@ var WaitlistForm = defineComponent({
             }
           },
           props.triggerText
-        ),
-        // Modal overlay (only when open)
-        isModalOpen.value && h(
+        ));
+      }
+      if (isModalOpen.value) {
+        children.push(h(
           "div",
           {
             class: "qz-modal-overlay",
@@ -353,12 +397,25 @@ var WaitlistForm = defineComponent({
               // Body
               h("div", { class: "qz-modal-body" }, [
                 h("h2", { class: "qz-modal-title" }, publicConfig.value?.name || "Join Waitlist"),
-                formContent
+                successData.value ? h("div", { class: "qz-success" }, [
+                  h("h3", { style: { fontSize: "1.25rem", fontWeight: "600", marginBottom: "0.5rem", textAlign: "center" } }, "You're on the list!"),
+                  h("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: "0.9" } }, `You're #${successData.value.position || "?"} in line.`),
+                  successData.value.referralLink && h("div", { style: { marginTop: "1.5rem" } }, [
+                    h("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: "0.9", textAlign: "center" } }, "Refer friends to move up:"),
+                    h("input", {
+                      class: "qz-form-input",
+                      style: { textAlign: "center", cursor: "pointer" },
+                      readonly: true,
+                      value: window.location.origin + window.location.pathname + "?ref=" + successData.value.referralCode,
+                      onClick: (e) => e.target.select()
+                    })
+                  ])
+                ]) : formContent
               ])
             ])
           ]
-        )
-      ]);
+        ));
+      }
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/vue",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Vue components and composables for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",