@queuezero/vue 0.1.7 → 0.1.8

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

@@ -135,6 +135,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 +157,12 @@ 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 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) ?? [];
     });
@@ -298,7 +314,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 +340,61 @@ 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"),
+                formContent
+              ])
+            ])
+          ]
+        )
+      ]);
     };
   }
 });

package/dist/index.mjs

@@ -99,6 +99,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 +121,12 @@ var WaitlistForm = defineComponent({
     const { join, loading, error: contextError, isJoined, publicConfig } = useWaitlistContext();
     const email = ref2("");
     const localError = ref2(null);
+    const isModalOpen = ref2(false);
     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) ?? [];
     });
@@ -262,7 +278,7 @@ var WaitlistForm = defineComponent({
       formFields.value.forEach((field) => {
         fieldNodes.push(renderField(field));
       });
-      return h(
+      const formContent = h(
         "form",
         {
           class: "qz-form",
@@ -288,6 +304,61 @@ 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"),
+                formContent
+              ])
+            ])
+          ]
+        )
+      ]);
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/vue",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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",