@nuxtify/pages 0.1.0 → 0.2.1

package/dist/runtime/components/EmailSubscribeForm.vue

@@ -1,213 +1,190 @@
-<script setup lang="ts">
-// Types
-import type { VForm } from 'vuetify/lib/components/VForm/index.mjs'
-
-import { useId, navigateTo, useDisplay, ref, useNuxtifyConfig, getUtmParams, getBaseUrl, submitFormData, formRules, isExternalUrl,
-} from '#imports'
-
-// Props
+<script setup>
+import {
+  useId,
+  navigateTo,
+  useDisplay,
+  ref,
+  useNuxtifyConfig,
+  getUtmParams,
+  getBaseUrl,
+  submitFormData,
+  formRules,
+  isExternalUrl
+} from "#imports";
 const props = defineProps({
   submitUrl: {
     type: String,
-    required: true,
+    required: true
   },
   buttonText: {
     type: String,
-    default: 'Subscribe',
+    default: "Subscribe"
   },
   emailPlaceholder: {
     type: String,
-    default: 'Enter your best email',
+    default: "Enter your best email"
   },
   marketingConsentText: {
     type: String,
-    default: 'Unsubscribe any time.',
+    default: "Unsubscribe any time."
   },
   showPrivacy: {
     type: Boolean,
-    default: false,
+    default: false
   },
   redirectUrl: {
     type: String,
-    default: '',
+    default: ""
   },
   thankYouMessage: {
     type: String,
-    default: 'Thanks for signing up!',
+    default: "Thanks for signing up!"
   },
   dark: {
     type: Boolean,
-    default: false,
+    default: false
   },
   appendButtonIcon: {
     type: String,
-    default: '',
+    default: ""
   },
   prependButtonIcon: {
     type: String,
-    default: '',
-  },
-})
-
-// App state
-const id = useId()
-const nuxtifyConfig = useNuxtifyConfig()
-const { xs } = useDisplay()
-
-// Form state
-const form = ref<VForm>()
-const isSubmitted = ref(false)
-const isError = ref(false)
-const errorMessage = ref('')
-const loading = ref(false)
+    default: ""
+  }
+});
+const id = useId();
+const nuxtifyConfig = useNuxtifyConfig();
+const { xs } = useDisplay();
+const form = ref();
+const isSubmitted = ref(false);
+const isError = ref(false);
+const errorMessage = ref("");
+const loading = ref(false);
 const formInput = ref({
-  email: '',
-})
-
-// Button style
+  email: ""
+});
 const rounded = () => {
   if (nuxtifyConfig.style?.btn?.rounded) {
-    return xs.value ? 'lg' : '0 e-lg'
-  }
-  else {
-    return 0
+    return xs.value ? "lg" : "0 e-lg";
+  } else {
+    return 0;
   }
-}
-
+};
 async function handleSubmit() {
-  loading.value = true
-  const res = await form.value?.validate()
+  loading.value = true;
+  const res = await form.value?.validate();
   if (res?.valid) {
-    const formData = new FormData()
-
-    // Get UTM params
-    const { utmSource, utmMedium, utmCampaign, utmTerm, utmContent }
-      = getUtmParams(window.location.href)
-
-    // Set form field keys
-    // Default
-    let fieldPrepend = ''
-    let fieldAppend = ''
-
-    // Mailerlite
-    if (props.submitUrl.includes('mailerlite')) {
-      fieldPrepend = 'fields['
-      fieldAppend = ']'
+    const formData = new FormData();
+    const { utmSource, utmMedium, utmCampaign, utmTerm, utmContent } = getUtmParams(window.location.href);
+    let fieldPrepend = "";
+    let fieldAppend = "";
+    if (props.submitUrl.includes("mailerlite")) {
+      fieldPrepend = "fields[";
+      fieldAppend = "]";
     }
-
-    // Set form field values
     formData.append(
       `${fieldPrepend}email${fieldAppend}`,
-      formInput.value.email,
-    )
+      formInput.value.email
+    );
     formData.append(
       `${fieldPrepend}referrer${fieldAppend}`,
-      getBaseUrl(window.location.href),
-    )
-
+      getBaseUrl(window.location.href)
+    );
     if (utmSource)
-      formData.append(`${fieldPrepend}utm_source${fieldAppend}`, utmSource)
+      formData.append(`${fieldPrepend}utm_source${fieldAppend}`, utmSource);
     if (utmMedium)
-      formData.append(`${fieldPrepend}utm_medium${fieldAppend}`, utmMedium)
+      formData.append(`${fieldPrepend}utm_medium${fieldAppend}`, utmMedium);
     if (utmCampaign)
-      formData.append(`${fieldPrepend}utm_campaign${fieldAppend}`, utmCampaign)
+      formData.append(`${fieldPrepend}utm_campaign${fieldAppend}`, utmCampaign);
     if (utmTerm)
-      formData.append(`${fieldPrepend}utm_term${fieldAppend}`, utmTerm)
+      formData.append(`${fieldPrepend}utm_term${fieldAppend}`, utmTerm);
     if (utmContent)
-      formData.append(`${fieldPrepend}utm_content${fieldAppend}`, utmContent)
-
-    // Send to email provider
-    const providerResponse = await submitFormData(props.submitUrl, formData)
-    isError.value = providerResponse.isError
-    errorMessage.value = providerResponse.errorMessage
-
-    // Redirect
+      formData.append(`${fieldPrepend}utm_content${fieldAppend}`, utmContent);
+    const providerResponse = await submitFormData(props.submitUrl, formData);
+    isError.value = providerResponse.isError;
+    errorMessage.value = providerResponse.errorMessage;
     if (!isError.value && props.redirectUrl) {
       await navigateTo(props.redirectUrl, {
-        external: isExternalUrl(props.redirectUrl, nuxtifyConfig.brand?.domain ?? ''),
-      })
-    }
-    else {
-      isSubmitted.value = providerResponse.isSubmitted
+        external: isExternalUrl(props.redirectUrl, nuxtifyConfig.brand?.domain ?? "")
+      });
+    } else {
+      isSubmitted.value = providerResponse.isSubmitted;
     }
   }
-  loading.value = false
+  loading.value = false;
 }
 </script>
 
 <template>
-  <!-- Form -->
-  <v-form
-    v-if="!isSubmitted"
-    ref="form"
-    validate-on="submit"
-    @submit.prevent="handleSubmit"
-  >
-    <div class="d-sm-flex justify-center">
-      <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
-      <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
-      <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
-      <v-text-field
-        :id
-        v-model="formInput.email"
-        type="email"
-        color="secondary"
-        :placeholder="emailPlaceholder"
-        :rules="[formRules.required, formRules.validEmail]"
-        :rounded="xs ? 't-lg' : '0 ts-lg'"
-        hide-details="auto"
-        class="text-start"
-      >
-        <template #message="{ message }">
-          <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
-        </template>
-      </v-text-field>
-      <v-btn
-        type="submit"
-        variant="flat"
-        color="secondary"
-        size="x-large"
-        class="d-flex align-center py-7 mt-2 mt-sm-0"
-        :loading
-        :rounded="rounded()"
-        :append-icon="appendButtonIcon"
-        :prepend-icon="prependButtonIcon"
-        :block="xs"
-      >
-        {{ buttonText }}
-      </v-btn>
-    </div>
-
-    <!-- Supporting Text -->
-    <div
-      v-if="showPrivacy || marketingConsentText"
-      :class="`text-body-2  ${
-        dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'
-      } mt-2`"
-    >
-      <span v-if="marketingConsentText">
-        {{ marketingConsentText }}
-      </span>
-      <span v-if="showPrivacy">
-        By signing up you agree to the
-        <NuxtLink
-          :to="nuxtifyConfig.pages?.policies?.privacyUrl"
-          :class="`text-decoration-none ${
-            dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'
-          }`"
-        >
-          Privacy Policy</NuxtLink>.
-      </span>
-    </div>
-  </v-form>
-
-  <!-- Thank You -->
-  <div
-    v-else
-    class="text-body-1"
-  >
-    {{ thankYouMessage }}
-  </div>
+  <!-- Form -->
+  <v-form
+    v-if="!isSubmitted"
+    ref="form"
+    validate-on="submit"
+    @submit.prevent="handleSubmit"
+  >
+    <div class="d-sm-flex justify-center">
+      <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
+      <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
+      <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
+      <v-text-field
+        :id
+        v-model="formInput.email"
+        type="email"
+        color="secondary"
+        :placeholder="emailPlaceholder"
+        :rules="[formRules.required, formRules.validEmail]"
+        :rounded="xs ? 't-lg' : '0 ts-lg'"
+        hide-details="auto"
+        class="text-start"
+      >
+        <template #message="{ message }">
+          <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
+        </template>
+      </v-text-field>
+      <v-btn
+        type="submit"
+        variant="flat"
+        color="secondary"
+        size="x-large"
+        class="d-flex align-center py-7 mt-2 mt-sm-0"
+        :loading
+        :rounded="rounded()"
+        :append-icon="appendButtonIcon"
+        :prepend-icon="prependButtonIcon"
+        :block="xs"
+      >
+        {{ buttonText }}
+      </v-btn>
+    </div>
+
+    <!-- Supporting Text -->
+    <div
+      v-if="showPrivacy || marketingConsentText"
+      :class="`text-body-2  ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'} mt-2`"
+    >
+      <span v-if="marketingConsentText">
+        {{ marketingConsentText }}
+      </span>
+      <span v-if="showPrivacy">
+        By signing up you agree to the
+        <NuxtLink
+          :to="nuxtifyConfig.pages?.policies?.privacyUrl"
+          :class="`text-decoration-none ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'}`"
+        >
+          Privacy Policy</NuxtLink>.
+      </span>
+    </div>
+  </v-form>
+
+  <!-- Thank You -->
+  <div
+    v-else
+    class="text-body-1"
+  >
+    {{ thankYouMessage }}
+  </div>
 </template>
 
 <style scoped>

package/dist/runtime/components/EmailSubscribeForm.vue.d.ts

@@ -0,0 +1,94 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    submitUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    buttonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    emailPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    marketingConsentText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showPrivacy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    thankYouMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    dark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appendButtonIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    prependButtonIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    submitUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    buttonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    emailPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    marketingConsentText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showPrivacy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    thankYouMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    dark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appendButtonIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    prependButtonIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    buttonText: string;
+    emailPlaceholder: string;
+    marketingConsentText: string;
+    showPrivacy: boolean;
+    redirectUrl: string;
+    thankYouMessage: string;
+    dark: boolean;
+    appendButtonIcon: string;
+    prependButtonIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/FooterCallToAction.vue

@@ -1,38 +1,36 @@
-<script setup lang="ts">
-import { useNuxtifyConfig } from '#imports'
-
-// App state
-const nuxtifyConfig = useNuxtifyConfig()
+<script setup>
+import { useNuxtifyConfig } from "#imports";
+const nuxtifyConfig = useNuxtifyConfig();
 </script>
 
 <template>
-  <v-row
-    justify="center"
-    class="text-center my-4"
-  >
-    <v-col
-      cols="12"
-      md="7"
-      lg="6"
-      xl="4"
-    >
-      <div
-        v-if="nuxtifyConfig.footer?.cta?.title"
-        :class="`text-h5 text-${nuxtifyConfig.footer.cta.color}-lighten-4`"
-      >
-        {{ nuxtifyConfig.footer.cta.title }}
-      </div>
-      <div
-        v-if="nuxtifyConfig.footer?.cta?.subtitle"
-        :class="`text-subtitle-1 text-${nuxtifyConfig.footer.cta.color}-lighten-3 mb-4`"
-      >
-        {{ nuxtifyConfig.footer.cta.subtitle }}
-      </div>
-      <EmailSubscribeForm
-        v-if="nuxtifyConfig.email?.provider?.defaultSubmitUrl"
-        :submit-url="nuxtifyConfig.email.provider.defaultSubmitUrl"
-        dark
-      />
-    </v-col>
-  </v-row>
+  <v-row
+    justify="center"
+    class="text-center my-4"
+  >
+    <v-col
+      cols="12"
+      md="7"
+      lg="6"
+      xl="4"
+    >
+      <div
+        v-if="nuxtifyConfig.footer?.cta?.title"
+        :class="`text-h5 text-${nuxtifyConfig.footer.cta.color}-lighten-4`"
+      >
+        {{ nuxtifyConfig.footer.cta.title }}
+      </div>
+      <div
+        v-if="nuxtifyConfig.footer?.cta?.subtitle"
+        :class="`text-subtitle-1 text-${nuxtifyConfig.footer.cta.color}-lighten-3 mb-4`"
+      >
+        {{ nuxtifyConfig.footer.cta.subtitle }}
+      </div>
+      <EmailSubscribeForm
+        v-if="nuxtifyConfig.email?.provider?.defaultSubmitUrl"
+        :submit-url="nuxtifyConfig.email.provider.defaultSubmitUrl"
+        dark
+      />
+    </v-col>
+  </v-row>
 </template>

package/dist/runtime/components/FooterCallToAction.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/app/AppAnnouncementBar.vue

@@ -1,40 +1,36 @@
-<script setup lang="ts">
-import { useDisplay, computed, useNuxtifyConfig, isExternalUrl } from '#imports'
-
-// App state
-const nuxtifyConfig = useNuxtifyConfig()
-const { xs } = useDisplay()
-
-// Component state
-const isExternalLink = computed(() =>
-  isExternalUrl(nuxtifyConfig.announcement?.buttonUrl ?? '', nuxtifyConfig.brand?.domain ?? ''),
-)
+<script setup>
+import { useDisplay, computed, useNuxtifyConfig, isExternalUrl } from "#imports";
+const nuxtifyConfig = useNuxtifyConfig();
+const { xs } = useDisplay();
+const isExternalLink = computed(
+  () => isExternalUrl(nuxtifyConfig.announcement?.buttonUrl ?? "", nuxtifyConfig.brand?.domain ?? "")
+);
 </script>
 
 <template>
-  <v-system-bar
-    :height="xs ? 60 : 40"
-    :order="-100"
-    color="primary"
-    class="justify-center text-start"
-  >
-    <div
-      v-if="nuxtifyConfig.announcement?.message"
-      :class="`${xs ? 'text-subtitle-2' : 'text-subtitle-1'} mr-4`"
-    >
-      {{ nuxtifyConfig.announcement.message }}
-    </div>
-    <v-btn
+  <v-system-bar
+    :height="xs ? 60 : 40"
+    :order="-100"
+    color="primary"
+    class="justify-center text-start"
+  >
+    <div
+      v-if="nuxtifyConfig.announcement?.message"
+      :class="`${xs ? 'text-subtitle-2' : 'text-subtitle-1'} mr-4`"
+    >
+      {{ nuxtifyConfig.announcement.message }}
+    </div>
+    <v-btn
       v-if="
-        nuxtifyConfig.announcement?.buttonText && nuxtifyConfig.announcement.buttonUrl
-      "
-      :to="!isExternalLink ? nuxtifyConfig.announcement.buttonUrl : undefined"
-      :href="isExternalLink ? nuxtifyConfig.announcement.buttonUrl : undefined"
-      size="small"
-      variant="flat"
-      color="secondary"
-    >
-      {{ nuxtifyConfig.announcement.buttonText }}
-    </v-btn>
-  </v-system-bar>
+  nuxtifyConfig.announcement?.buttonText && nuxtifyConfig.announcement.buttonUrl
+"
+      :to="!isExternalLink ? nuxtifyConfig.announcement.buttonUrl : void 0"
+      :href="isExternalLink ? nuxtifyConfig.announcement.buttonUrl : void 0"
+      size="small"
+      variant="flat"
+      color="secondary"
+    >
+      {{ nuxtifyConfig.announcement.buttonText }}
+    </v-btn>
+  </v-system-bar>
 </template>

package/dist/runtime/components/app/AppAnnouncementBar.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;