@queuezero/vue 0.1.8 → 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.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)
   };
@@ -158,6 +164,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 || {});
@@ -177,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);
@@ -210,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)
             )
@@ -389,7 +397,20 @@ 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)
   };
@@ -122,6 +128,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 || {});
@@ -141,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);
@@ -174,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)
             )
@@ -353,7 +361,20 @@ 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.9",
   "description": "Vue components and composables for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",