@nuxtify/pages 0.4.0 → 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>
@@ -6,137 +6,107 @@ const footerSecondaryLinks = nuxtifyConfig.navigation?.altSecondary;
6
6
  </script>
7
7
 
8
8
  <template>
9
- <v-row
10
- class="px-sm-1 pt-12 pb-4 mb-1"
11
- style="max-width: 1280px"
12
- >
13
- <v-col cols="12">
14
- <FooterCallToAction v-if="nuxtifyConfig.footer?.cta?.show" />
15
-
16
- <v-row class="mb-2">
17
- <!-- Brand -->
18
- <v-col
19
- cols="12"
20
- :lg="footerPrimaryLinks?.length === 4 ? 3 : 4"
21
- >
22
- <!-- Logo -->
23
- <AppLogo dark />
24
-
25
- <!-- Tagline -->
26
- <p class="mt-2 clip-text">
27
- {{ nuxtifyConfig.brand?.tagline }}
28
- </p>
29
- </v-col>
30
-
31
- <v-spacer />
32
-
33
- <!-- Primary Links -->
34
- <v-col
35
- v-for="group in footerPrimaryLinks"
36
- :key="group.title"
37
- cols="6"
38
- md="3"
39
- lg="2"
40
- >
41
- <p class="text-body-1 font-weight-bold mb-3">
42
- {{ group.title }}
43
- </p>
44
- <div
45
- v-for="link in group.links"
46
- :key="link.text"
47
- >
48
- <v-btn
49
- :to="link.to"
50
- :href="link.href"
51
- variant="text"
52
- :active="false"
53
- :ripple="false"
54
- :target="link.openInNew ? '_blank' : void 0"
55
- :rel="link.openInNew ? 'noopener nofollow' : void 0"
56
- class="px-0"
57
- >
58
- {{ link.text }}
59
- <v-icon
60
- v-if="link.openInNew"
61
- :icon="mdiArrowTopRight"
62
- size="small"
63
- color="grey"
64
- class="ml-1"
65
- />
66
- </v-btn>
67
- </div>
68
- </v-col>
69
- </v-row>
70
-
71
- <v-row>
72
- <v-col
73
- cols="12"
74
- sm="9"
75
- >
76
- <small>
77
- <!-- Copyright -->
78
- ©
79
- {{
80
- nuxtifyConfig.footer?.copyright || nuxtifyConfig.brand?.name || nuxtifyConfig.brand?.domain
81
- }}.
82
-
83
- <!-- Credits -->
84
- {{ nuxtifyConfig.credits?.prependText }}
85
- <span v-if="nuxtifyConfig.credits?.creator?.name">
86
- <a
87
- v-if="nuxtifyConfig.credits.creator.domain"
88
- :href="`https://${nuxtifyConfig.credits.creator.domain}/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral&utm_campaign=createdby`"
89
- target="_blank"
90
- rel="noopener nofollow"
91
- class="font-weight-bold"
92
- >{{ nuxtifyConfig.credits?.creator?.name }}</a><span v-else>{{ nuxtifyConfig.credits?.creator?.name }}</span>.
93
- </span>
94
-
95
- <!-- Message -->
96
- {{ nuxtifyConfig.credits?.appendText }}
97
-
98
- <!-- Powered By -->
99
- <span v-if="nuxtifyConfig.credits?.showPoweredBy">
100
- <a
101
- :href="`https://nuxtify.dev/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral&utm_campaign=poweredby`"
102
- target="_blank"
103
- rel="noopener nofollow"
104
- >Powered by Nuxtify</a>.
105
- </span>
106
- </small>
107
-
108
- <v-divider
109
- v-if="footerSecondaryLinks?.length"
110
- class="my-4"
111
- style="width: 50px"
112
- />
113
-
114
- <!-- Secondary Links -->
115
- <v-btn
116
- v-for="link in footerSecondaryLinks"
117
- :key="link.text"
118
- :to="link.to"
119
- :href="link.href"
120
- variant="plain"
121
- size="small"
122
- :ripple="false"
123
- :target="link.openInNew ? '_blank' : void 0"
124
- :rel="link.openInNew ? 'noopener nofollow' : void 0"
125
- class="text-capitalize pl-0 mb-2"
126
- >
127
- {{ link.text }}
128
- <v-icon
129
- v-if="link.openInNew"
130
- :icon="mdiArrowTopRight"
131
- size="small"
132
- color="grey"
133
- class="ml-1"
134
- />
135
- </v-btn>
136
- </v-col>
137
- </v-row>
138
- </v-col>
139
- </v-row>
9
+ <v-row
10
+ class="px-sm-1 pt-12 pb-4 mb-1"
11
+ style="max-width: 1280px"
12
+ >
13
+ <v-col cols="12">
14
+ <FooterCallToAction v-if="nuxtifyConfig.footer?.cta?.show" />
15
+
16
+ <v-row class="mb-2">
17
+ <!-- Brand -->
18
+ <v-col
19
+ cols="12"
20
+ :lg="footerPrimaryLinks?.length === 4 ? 3 : 4"
21
+ >
22
+ <!-- Logo -->
23
+ <AppLogo dark />
24
+
25
+ <!-- Tagline -->
26
+ <p class="mt-2 clip-text">
27
+ {{ nuxtifyConfig.brand?.tagline }}
28
+ </p>
29
+ </v-col>
30
+
31
+ <v-spacer />
32
+
33
+ <!-- Primary Links -->
34
+ <v-col
35
+ v-for="group in footerPrimaryLinks"
36
+ :key="group.title"
37
+ cols="6"
38
+ md="3"
39
+ lg="2"
40
+ >
41
+ <p class="text-body-1 font-weight-bold mb-3">
42
+ {{ group.title }}
43
+ </p>
44
+ <div
45
+ v-for="link in group.links"
46
+ :key="link.text"
47
+ >
48
+ <v-btn
49
+ :to="link.to"
50
+ :href="link.href"
51
+ variant="text"
52
+ :active="false"
53
+ :ripple="false"
54
+ :target="link.openInNew ? '_blank' : void 0"
55
+ :rel="link.openInNew ? 'noopener nofollow' : void 0"
56
+ class="px-0"
57
+ >
58
+ {{ link.text }}
59
+ <v-icon
60
+ v-if="link.openInNew"
61
+ :icon="mdiArrowTopRight"
62
+ size="small"
63
+ color="grey"
64
+ class="ml-1"
65
+ />
66
+ </v-btn>
67
+ </div>
68
+ </v-col>
69
+ </v-row>
70
+
71
+ <v-row>
72
+ <v-col
73
+ cols="12"
74
+ sm="9"
75
+ >
76
+ <AppCredits />
77
+
78
+ <v-divider
79
+ v-if="footerSecondaryLinks?.length"
80
+ class="my-4"
81
+ style="width: 50px"
82
+ />
83
+
84
+ <!-- Secondary Links -->
85
+ <v-btn
86
+ v-for="link in footerSecondaryLinks"
87
+ :key="link.text"
88
+ :to="link.to"
89
+ :href="link.href"
90
+ variant="plain"
91
+ size="small"
92
+ :ripple="false"
93
+ :target="link.openInNew ? '_blank' : void 0"
94
+ :rel="link.openInNew ? 'noopener nofollow' : void 0"
95
+ class="text-capitalize pl-0 mb-2"
96
+ >
97
+ {{ link.text }}
98
+ <v-icon
99
+ v-if="link.openInNew"
100
+ :icon="mdiArrowTopRight"
101
+ size="small"
102
+ color="grey"
103
+ class="ml-1"
104
+ />
105
+ </v-btn>
106
+ </v-col>
107
+ </v-row>
108
+ </v-col>
109
+ </v-row>
140
110
  </template>
141
111
 
142
112
  <style scoped>