@queuezero/vue 0.1.7 → 0.1.9

package/README.md

@@ -77,9 +77,26 @@ 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"
+  />
 </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) |
+| `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

@@ -56,6 +56,12 @@ interface WaitlistFormProps {
     showLabel?: boolean;
     /** Label text */
     labelText?: string;
+    /** Display mode: 'inline' renders form directly, 'modal' renders trigger button */
+    displayMode?: 'inline' | 'modal';
+    /** Text for modal trigger button (only used when displayMode is 'modal') */
+    triggerText?: string;
+    /** Modal size (only used when displayMode is 'modal') */
+    modalSize?: 'sm' | 'md' | 'lg';
 }
 /**
  * Props for WaitlistStatus component
@@ -200,6 +206,18 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    displayMode: {
+        type: PropType<"inline" | "modal">;
+        default: string;
+    };
+    triggerText: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalSize: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | VNode<vue.RendererNode, vue.RendererElement, {
@@ -236,6 +254,18 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    displayMode: {
+        type: PropType<"inline" | "modal">;
+        default: string;
+    };
+    triggerText: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalSize: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
 }>> & Readonly<{
     onSuccess?: ((response: SubmitResponse) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
@@ -247,6 +277,9 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
     loadingText: string;
     showLabel: boolean;
     labelText: string;
+    displayMode: "inline" | "modal";
+    triggerText: string;
+    modalSize: "sm" | "md" | "lg";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 /**

package/dist/index.d.ts

@@ -56,6 +56,12 @@ interface WaitlistFormProps {
     showLabel?: boolean;
     /** Label text */
     labelText?: string;
+    /** Display mode: 'inline' renders form directly, 'modal' renders trigger button */
+    displayMode?: 'inline' | 'modal';
+    /** Text for modal trigger button (only used when displayMode is 'modal') */
+    triggerText?: string;
+    /** Modal size (only used when displayMode is 'modal') */
+    modalSize?: 'sm' | 'md' | 'lg';
 }
 /**
  * Props for WaitlistStatus component
@@ -200,6 +206,18 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    displayMode: {
+        type: PropType<"inline" | "modal">;
+        default: string;
+    };
+    triggerText: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalSize: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | VNode<vue.RendererNode, vue.RendererElement, {
@@ -236,6 +254,18 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    displayMode: {
+        type: PropType<"inline" | "modal">;
+        default: string;
+    };
+    triggerText: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalSize: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
 }>> & Readonly<{
     onSuccess?: ((response: SubmitResponse) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
@@ -247,6 +277,9 @@ declare const WaitlistForm: vue.DefineComponent<vue.ExtractPropTypes<{
     loadingText: string;
     showLabel: boolean;
     labelText: string;
+    displayMode: "inline" | "modal";
+    triggerText: string;
+    modalSize: "sm" | "md" | "lg";
 }, {}, {}, {}, 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)
   };
@@ -135,6 +141,18 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
     labelText: {
       type: String,
       default: "Email"
+    },
+    displayMode: {
+      type: String,
+      default: "inline"
+    },
+    triggerText: {
+      type: String,
+      default: "Join Waitlist"
+    },
+    modalSize: {
+      type: String,
+      default: "md"
     }
   },
   emits: {
@@ -145,8 +163,13 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
     const { join, loading, error: contextError, isJoined, publicConfig } = useWaitlistContext();
     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 || {});
+    const themeColor = (0, import_vue2.computed)(() => branding.value.themeColor || "#10B981");
+    const sizeClasses = { sm: "qz-modal-sm", md: "qz-modal-md", lg: "qz-modal-lg" };
     const formFields = (0, import_vue2.computed)(() => {
       return publicConfig.value?.formFields?.filter((f) => f.enabled) ?? [];
     });
@@ -161,6 +184,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);
@@ -194,7 +218,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)
             )
@@ -298,7 +322,7 @@ var WaitlistForm = (0, import_vue2.defineComponent)({
       formFields.value.forEach((field) => {
         fieldNodes.push(renderField(field));
       });
-      return (0, import_vue2.h)(
+      const formContent = (0, import_vue2.h)(
         "form",
         {
           class: "qz-form",
@@ -324,6 +348,74 @@ 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)(
+          "button",
+          {
+            type: "button",
+            class: "qz-modal-trigger",
+            style: { "--qz-theme-color": themeColor.value },
+            onClick: () => {
+              isModalOpen.value = true;
+            }
+          },
+          props.triggerText
+        ),
+        // Modal overlay (only when open)
+        isModalOpen.value && (0, import_vue2.h)(
+          "div",
+          {
+            class: "qz-modal-overlay",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) isModalOpen.value = false;
+            }
+          },
+          [
+            (0, import_vue2.h)("div", { class: `qz-modal ${sizeClasses[props.modalSize]}`, style: { "--qz-theme-color": themeColor.value } }, [
+              // Header
+              (0, import_vue2.h)("div", { class: "qz-modal-header" }, [
+                branding.value.logoUrl ? (0, import_vue2.h)("img", { src: branding.value.logoUrl, alt: "Logo", class: "qz-modal-logo" }) : (0, import_vue2.h)("span"),
+                (0, import_vue2.h)("button", {
+                  type: "button",
+                  class: "qz-modal-close",
+                  "aria-label": "Close",
+                  onClick: () => {
+                    isModalOpen.value = false;
+                  }
+                }, [
+                  (0, import_vue2.h)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+                    (0, import_vue2.h)("path", { d: "M18 6L6 18M6 6l12 12" })
+                  ])
+                ])
+              ]),
+              // Cover image
+              branding.value.coverImageUrl && (0, import_vue2.h)("img", { src: branding.value.coverImageUrl, alt: "", class: "qz-modal-cover" }),
+              // Body
+              (0, import_vue2.h)("div", { class: "qz-modal-body" }, [
+                (0, import_vue2.h)("h2", { class: "qz-modal-title" }, publicConfig.value?.name || "Join Waitlist"),
+                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)
   };
@@ -99,6 +105,18 @@ var WaitlistForm = defineComponent({
     labelText: {
       type: String,
       default: "Email"
+    },
+    displayMode: {
+      type: String,
+      default: "inline"
+    },
+    triggerText: {
+      type: String,
+      default: "Join Waitlist"
+    },
+    modalSize: {
+      type: String,
+      default: "md"
     }
   },
   emits: {
@@ -109,8 +127,13 @@ var WaitlistForm = defineComponent({
     const { join, loading, error: contextError, isJoined, publicConfig } = useWaitlistContext();
     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 || {});
+    const themeColor = computed2(() => branding.value.themeColor || "#10B981");
+    const sizeClasses = { sm: "qz-modal-sm", md: "qz-modal-md", lg: "qz-modal-lg" };
     const formFields = computed2(() => {
       return publicConfig.value?.formFields?.filter((f) => f.enabled) ?? [];
     });
@@ -125,6 +148,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);
@@ -158,7 +182,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)
             )
@@ -262,7 +286,7 @@ var WaitlistForm = defineComponent({
       formFields.value.forEach((field) => {
         fieldNodes.push(renderField(field));
       });
-      return h(
+      const formContent = h(
         "form",
         {
           class: "qz-form",
@@ -288,6 +312,74 @@ var WaitlistForm = defineComponent({
           )
         ]
       );
+      if (props.displayMode === "inline") {
+        return formContent;
+      }
+      return h("div", { class: "qz-waitlist-modal-wrapper" }, [
+        // Trigger button
+        h(
+          "button",
+          {
+            type: "button",
+            class: "qz-modal-trigger",
+            style: { "--qz-theme-color": themeColor.value },
+            onClick: () => {
+              isModalOpen.value = true;
+            }
+          },
+          props.triggerText
+        ),
+        // Modal overlay (only when open)
+        isModalOpen.value && h(
+          "div",
+          {
+            class: "qz-modal-overlay",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) isModalOpen.value = false;
+            }
+          },
+          [
+            h("div", { class: `qz-modal ${sizeClasses[props.modalSize]}`, style: { "--qz-theme-color": themeColor.value } }, [
+              // Header
+              h("div", { class: "qz-modal-header" }, [
+                branding.value.logoUrl ? h("img", { src: branding.value.logoUrl, alt: "Logo", class: "qz-modal-logo" }) : h("span"),
+                h("button", {
+                  type: "button",
+                  class: "qz-modal-close",
+                  "aria-label": "Close",
+                  onClick: () => {
+                    isModalOpen.value = false;
+                  }
+                }, [
+                  h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+                    h("path", { d: "M18 6L6 18M6 6l12 12" })
+                  ])
+                ])
+              ]),
+              // Cover image
+              branding.value.coverImageUrl && h("img", { src: branding.value.coverImageUrl, alt: "", class: "qz-modal-cover" }),
+              // Body
+              h("div", { class: "qz-modal-body" }, [
+                h("h2", { class: "qz-modal-title" }, publicConfig.value?.name || "Join Waitlist"),
+                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.7",
+  "version": "0.1.9",
   "description": "Vue components and composables for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -34,7 +34,7 @@
     "vue": ">=3.3.0"
   },
   "dependencies": {
-    "queuezero": "^0.1.5"
+    "queuezero": "^0.1.6"
   },
   "devDependencies": {
     "@types/node": "^22.13.11",