@nuxtify/pages 0.3.3 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -117,74 +117,74 @@ async function handleSubmit() {
117
117
  </script>
118
118
 
119
119
  <template>
120
- <!-- Form -->
121
- <v-form
122
- v-if="!isSubmitted"
123
- ref="form"
124
- validate-on="submit"
125
- @submit.prevent="handleSubmit"
126
- >
127
- <div class="d-sm-flex justify-center">
128
- <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
129
- <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
130
- <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
131
- <v-text-field
132
- :id
133
- v-model="formInput.email"
134
- type="email"
135
- color="secondary"
136
- :placeholder="emailPlaceholder"
137
- :rules="[formRules.required, formRules.validEmail]"
138
- :rounded="xs ? 't-lg' : '0 ts-lg'"
139
- hide-details="auto"
140
- class="text-start"
141
- >
142
- <template #message="{ message }">
143
- <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
144
- </template>
145
- </v-text-field>
146
- <v-btn
147
- type="submit"
148
- variant="flat"
149
- color="secondary"
150
- size="x-large"
151
- class="d-flex align-center py-7 mt-2 mt-sm-0"
152
- :loading
153
- :rounded="rounded()"
154
- :append-icon="appendButtonIcon"
155
- :prepend-icon="prependButtonIcon"
156
- :block="xs"
157
- >
158
- {{ buttonText }}
159
- </v-btn>
160
- </div>
161
-
162
- <!-- Supporting Text -->
163
- <div
164
- v-if="showPrivacy || marketingConsentText"
165
- :class="`text-body-2 ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'} mt-2`"
166
- >
167
- <span v-if="marketingConsentText">
168
- {{ marketingConsentText }}
169
- </span>
170
- <span v-if="showPrivacy">
171
- By signing up you agree to the
172
- <NuxtLink
173
- :to="nuxtifyConfig.policies?.privacyUrl"
174
- :class="`text-decoration-none ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'}`"
175
- >
176
- Privacy Policy</NuxtLink>.
177
- </span>
178
- </div>
179
- </v-form>
180
-
181
- <!-- Thank You -->
182
- <div
183
- v-else
184
- class="text-body-1"
185
- >
186
- {{ thankYouMessage }}
187
- </div>
120
+ <!-- Form -->
121
+ <v-form
122
+ v-if="!isSubmitted"
123
+ ref="form"
124
+ validate-on="submit"
125
+ @submit.prevent="handleSubmit"
126
+ >
127
+ <div class="d-sm-flex justify-center">
128
+ <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
129
+ <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
130
+ <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
131
+ <v-text-field
132
+ :id
133
+ v-model="formInput.email"
134
+ type="email"
135
+ color="secondary"
136
+ :placeholder="emailPlaceholder"
137
+ :rules="[formRules.required, formRules.validEmail]"
138
+ :rounded="xs ? 't-lg' : '0 ts-lg'"
139
+ hide-details="auto"
140
+ class="text-start"
141
+ >
142
+ <template #message="{ message }">
143
+ <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
144
+ </template>
145
+ </v-text-field>
146
+ <v-btn
147
+ type="submit"
148
+ variant="flat"
149
+ color="secondary"
150
+ size="x-large"
151
+ class="d-flex align-center py-7 mt-2 mt-sm-0"
152
+ :loading
153
+ :rounded="rounded()"
154
+ :append-icon="appendButtonIcon"
155
+ :prepend-icon="prependButtonIcon"
156
+ :block="xs"
157
+ >
158
+ {{ buttonText }}
159
+ </v-btn>
160
+ </div>
161
+
162
+ <!-- Supporting Text -->
163
+ <div
164
+ v-if="showPrivacy || marketingConsentText"
165
+ :class="`text-body-2 ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'} mt-2`"
166
+ >
167
+ <span v-if="marketingConsentText">
168
+ {{ marketingConsentText }}
169
+ </span>
170
+ <span v-if="showPrivacy">
171
+ By signing up you agree to the
172
+ <NuxtLink
173
+ :to="nuxtifyConfig.policies?.privacyUrl"
174
+ :class="`text-decoration-none ${dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'}`"
175
+ >
176
+ Privacy Policy</NuxtLink>.
177
+ </span>
178
+ </div>
179
+ </v-form>
180
+
181
+ <!-- Thank You -->
182
+ <div
183
+ v-else
184
+ class="text-body-1"
185
+ >
186
+ {{ thankYouMessage }}
187
+ </div>
188
188
  </template>
189
189
 
190
190
  <style scoped>
@@ -4,33 +4,33 @@ const nuxtifyConfig = useNuxtifyConfig();
4
4
  </script>
5
5
 
6
6
  <template>
7
- <v-row
8
- justify="center"
9
- class="text-center my-4"
10
- >
11
- <v-col
12
- cols="12"
13
- md="7"
14
- lg="6"
15
- xl="4"
16
- >
17
- <div
18
- v-if="nuxtifyConfig.footer?.cta?.title"
19
- :class="`text-h5 text-${nuxtifyConfig.footer.cta.color}-lighten-4`"
20
- >
21
- {{ nuxtifyConfig.footer.cta.title }}
22
- </div>
23
- <div
24
- v-if="nuxtifyConfig.footer?.cta?.subtitle"
25
- :class="`text-subtitle-1 text-${nuxtifyConfig.footer.cta.color}-lighten-3 mb-4`"
26
- >
27
- {{ nuxtifyConfig.footer.cta.subtitle }}
28
- </div>
29
- <EmailSubscribeForm
30
- v-if="nuxtifyConfig.email?.provider?.defaultSubmitUrl"
31
- :submit-url="nuxtifyConfig.email.provider.defaultSubmitUrl"
32
- dark
33
- />
34
- </v-col>
35
- </v-row>
7
+ <v-row
8
+ justify="center"
9
+ class="text-center my-4"
10
+ >
11
+ <v-col
12
+ cols="12"
13
+ md="7"
14
+ lg="6"
15
+ xl="4"
16
+ >
17
+ <div
18
+ v-if="nuxtifyConfig.footer?.cta?.title"
19
+ :class="`text-h5 text-${nuxtifyConfig.footer.cta.color}-lighten-4`"
20
+ >
21
+ {{ nuxtifyConfig.footer.cta.title }}
22
+ </div>
23
+ <div
24
+ v-if="nuxtifyConfig.footer?.cta?.subtitle"
25
+ :class="`text-subtitle-1 text-${nuxtifyConfig.footer.cta.color}-lighten-3 mb-4`"
26
+ >
27
+ {{ nuxtifyConfig.footer.cta.subtitle }}
28
+ </div>
29
+ <EmailSubscribeForm
30
+ v-if="nuxtifyConfig.email?.provider?.defaultSubmitUrl"
31
+ :submit-url="nuxtifyConfig.email.provider.defaultSubmitUrl"
32
+ dark
33
+ />
34
+ </v-col>
35
+ </v-row>
36
36
  </template>
@@ -9,114 +9,114 @@ const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0];
9
9
  </script>
10
10
 
11
11
  <template>
12
- <v-app-bar
13
- :density="smAndDown ? 'compact' : 'default'"
14
- flat
15
- class="px-sm-2 bottom-border"
16
- >
17
- <template #prepend>
18
- <!-- Logo -->
19
- <NuxtLink
20
- to="/"
21
- class="ml-2"
22
- >
23
- <AppLogo />
24
- </NuxtLink>
25
- </template>
26
-
27
- <!-- Desktop navigation -->
28
- <div v-if="!smAndDown">
29
- <!-- Primary links -->
30
- <v-btn
31
- v-for="link in primaryNavLinks"
32
- :key="link.text"
33
- :to="link.to"
34
- :href="link.href"
35
- :active="false"
36
- :prepend-icon="link.icon"
37
- slim
38
- exact
39
- :ripple="false"
40
- size="large"
41
- color="unset"
42
- :target="link.openInNew ? '_blank' : void 0"
43
- :rel="link.openInNew ? 'noopener nofollow' : void 0"
44
- class="nav-items mx-2"
45
- >
46
- {{ link.text }}
47
- <v-icon
48
- v-if="link.openInNew"
49
- :icon="mdiArrowTopRight"
50
- size="x-small"
51
- color="grey"
52
- class="ml-1"
53
- />
54
- </v-btn>
55
- </div>
56
-
57
- <template #append>
58
- <!-- Mobile navigation -->
59
- <v-app-bar-nav-icon
60
- v-if="smAndDown"
61
- :icon="drawer ? mdiClose : mdiMenu"
62
- color="primary"
63
- aria-label="Navigation Menu"
64
- @click="drawer = !drawer"
65
- />
66
-
67
- <!-- Desktop navigation -->
68
- <nav
69
- v-else
70
- class="d-flex align-center"
71
- >
72
- <!-- Secondary links -->
73
- <v-btn
74
- v-for="link in secondaryNavLinks?.slice(1).reverse()"
75
- :key="link.text"
76
- :to="link.to"
77
- :href="link.href"
78
- :prepend-icon="link.icon"
79
- :active="false"
80
- size="large"
81
- color="unset"
82
- :target="link.openInNew ? '_blank' : void 0"
83
- :rel="link.openInNew ? 'noopener nofollow' : void 0"
84
- class="nav-items mx-2"
85
- >
86
- {{ link.text }}
87
- <v-icon
88
- v-if="link.openInNew"
89
- :icon="mdiArrowTopRight"
90
- size="x-small"
91
- color="grey"
92
- class="ml-1"
93
- />
94
- </v-btn>
95
-
96
- <!-- Featured secondary link -->
97
- <v-btn
98
- v-if="featuredSecondaryLink?.text"
99
- :to="featuredSecondaryLink.to"
100
- :href="featuredSecondaryLink.href"
101
- :prepend-icon="featuredSecondaryLink.icon"
102
- :active="false"
103
- variant="flat"
104
- size="large"
105
- :target="featuredSecondaryLink.openInNew ? '_blank' : void 0"
106
- :rel="featuredSecondaryLink.openInNew ? 'noopener nofollow' : void 0"
107
- class="mx-2"
108
- >
109
- {{ featuredSecondaryLink.text }}
110
- <v-icon
111
- v-if="featuredSecondaryLink.openInNew"
112
- :icon="mdiArrowTopRight"
113
- size="small"
114
- class="ml-1"
115
- />
116
- </v-btn>
117
- </nav>
118
- </template>
119
- </v-app-bar>
12
+ <v-app-bar
13
+ :density="smAndDown ? 'compact' : 'default'"
14
+ flat
15
+ class="px-sm-2 bottom-border"
16
+ >
17
+ <template #prepend>
18
+ <!-- Logo -->
19
+ <NuxtLink
20
+ to="/"
21
+ class="ml-2"
22
+ >
23
+ <AppLogo />
24
+ </NuxtLink>
25
+ </template>
26
+
27
+ <!-- Desktop navigation -->
28
+ <div v-if="!smAndDown">
29
+ <!-- Primary links -->
30
+ <v-btn
31
+ v-for="link in primaryNavLinks"
32
+ :key="link.text"
33
+ :to="link.to"
34
+ :href="link.href"
35
+ :active="false"
36
+ :prepend-icon="link.icon"
37
+ slim
38
+ exact
39
+ :ripple="false"
40
+ size="large"
41
+ color="unset"
42
+ :target="link.openInNew ? '_blank' : void 0"
43
+ :rel="link.openInNew ? 'noopener nofollow' : void 0"
44
+ class="nav-items mx-2"
45
+ >
46
+ {{ link.text }}
47
+ <v-icon
48
+ v-if="link.openInNew"
49
+ :icon="mdiArrowTopRight"
50
+ size="x-small"
51
+ color="grey"
52
+ class="ml-1"
53
+ />
54
+ </v-btn>
55
+ </div>
56
+
57
+ <template #append>
58
+ <!-- Mobile navigation -->
59
+ <v-app-bar-nav-icon
60
+ v-if="smAndDown"
61
+ :icon="drawer ? mdiClose : mdiMenu"
62
+ color="primary"
63
+ aria-label="Navigation Menu"
64
+ @click="drawer = !drawer"
65
+ />
66
+
67
+ <!-- Desktop navigation -->
68
+ <nav
69
+ v-else
70
+ class="d-flex align-center"
71
+ >
72
+ <!-- Secondary links -->
73
+ <v-btn
74
+ v-for="link in secondaryNavLinks?.slice(1).reverse()"
75
+ :key="link.text"
76
+ :to="link.to"
77
+ :href="link.href"
78
+ :prepend-icon="link.icon"
79
+ :active="false"
80
+ size="large"
81
+ color="unset"
82
+ :target="link.openInNew ? '_blank' : void 0"
83
+ :rel="link.openInNew ? 'noopener nofollow' : void 0"
84
+ class="nav-items mx-2"
85
+ >
86
+ {{ link.text }}
87
+ <v-icon
88
+ v-if="link.openInNew"
89
+ :icon="mdiArrowTopRight"
90
+ size="x-small"
91
+ color="grey"
92
+ class="ml-1"
93
+ />
94
+ </v-btn>
95
+
96
+ <!-- Featured secondary link -->
97
+ <v-btn
98
+ v-if="featuredSecondaryLink?.text"
99
+ :to="featuredSecondaryLink.to"
100
+ :href="featuredSecondaryLink.href"
101
+ :prepend-icon="featuredSecondaryLink.icon"
102
+ :active="false"
103
+ variant="flat"
104
+ size="large"
105
+ :target="featuredSecondaryLink.openInNew ? '_blank' : void 0"
106
+ :rel="featuredSecondaryLink.openInNew ? 'noopener nofollow' : void 0"
107
+ class="mx-2"
108
+ >
109
+ {{ featuredSecondaryLink.text }}
110
+ <v-icon
111
+ v-if="featuredSecondaryLink.openInNew"
112
+ :icon="mdiArrowTopRight"
113
+ size="small"
114
+ class="ml-1"
115
+ />
116
+ </v-btn>
117
+ </nav>
118
+ </template>
119
+ </v-app-bar>
120
120
  </template>
121
121
 
122
122
  <style scoped>