@queuezero/vue 0.1.9 → 0.1.10

package/README.md

@@ -83,6 +83,11 @@ Ready-to-use signup form.
     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>
 ```
@@ -93,6 +98,7 @@ Ready-to-use signup form.
 |------|------|---------|-------------|
 | `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.

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

@@ -153,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: {
@@ -176,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;
@@ -351,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",
@@ -364,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",
@@ -414,8 +450,8 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
               ])
             ])
           ]
-        )
-      ]);
+        ));
+      }
     };
   }
 });

package/dist/index.mjs

@@ -73,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",
@@ -117,6 +117,14 @@ var WaitlistForm = defineComponent({
     modalSize: {
       type: String,
       default: "md"
+    },
+    triggerSelector: {
+      type: String,
+      default: void 0
+    },
+    attachToText: {
+      type: String,
+      default: void 0
     }
   },
   emits: {
@@ -140,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;
@@ -315,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",
@@ -328,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",
@@ -378,8 +414,8 @@ var WaitlistForm = defineComponent({
               ])
             ])
           ]
-        )
-      ]);
+        ));
+      }
     };
   }
 });

package/package.json

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