@slicemachine/adapter-nuxt 0.3.18-dev-slice-templates-svelte-nuxt.0 → 0.3.18-dev-slice-templates-svelte-nuxt.2

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.
@@ -0,0 +1,127 @@
1
+ <script setup>
2
+ import { ref } from "vue";
3
+ import { isFilled } from "@prismicio/client";
4
+ import { PrismicLink, PrismicImage, PrismicRichText } from "@prismicio/svelte";
5
+
6
+ defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
7
+
8
+ const alignment = slice.variation === "alignLeft" ? ref("left") : ref("center");
9
+ </script>
10
+
11
+ <template>
12
+ <section
13
+ :data-slice-type="slice.slice_type"
14
+ :data-slice-variation="slice.variation"
15
+ class="es-bounded es-call-to-action"
16
+ >
17
+ <div class="es-bounded__content es-call-to-action__content">
18
+ <PrismicImage
19
+ v-if="isFilled.image(slice.primary.image)"
20
+ :field="slice.primary.image"
21
+ class="es-call-to-action__image"
22
+ />
23
+ <div class="es-call-to-action__content">
24
+ <h2
25
+ v-if="isFilled.richText(slice.primary.title)"
26
+ class="es-call-to-action__content__heading"
27
+ >
28
+ <PrismicRichText :field="slice.primary.title" />
29
+ </h2>
30
+ <div
31
+ v-if="isFilled.richText(slice.primary.paragraph)"
32
+ class="es-call-to-action__content__paragraph"
33
+ >
34
+ <PrismicRichText :field="slice.primary.paragraph" />
35
+ </div>
36
+ </div>
37
+ <PrismicLink
38
+ v-if="isFilled.link(slice.primary.buttonLink)"
39
+ :field="slice.primary.buttonLink"
40
+ class="es-call-to-action__button"
41
+ >
42
+ {{ slice.primary.buttonLabel || "Learn more…" }}
43
+ </PrismicLink>
44
+ </div>
45
+ </section>
46
+ </template>
47
+
48
+ <style>
49
+ .es-bounded {
50
+ padding: 8vw 2rem;
51
+ }
52
+
53
+ .es-bounded__content {
54
+ margin-left: auto;
55
+ margin-right: auto;
56
+ }
57
+
58
+ @media screen and (min-width: 640px) {
59
+ .es-bounded__content {
60
+ max-width: 90%;
61
+ }
62
+ }
63
+
64
+ @media screen and (min-width: 896px) {
65
+ .es-bounded__content {
66
+ max-width: 80%;
67
+ }
68
+ }
69
+
70
+ @media screen and (min-width: 1280px) {
71
+ .es-bounded__content {
72
+ max-width: 75%;
73
+ }
74
+ }
75
+
76
+ .es-call-to-action {
77
+ background-color: #fff;
78
+ color: #333;
79
+ }
80
+
81
+ .es-call-to-action__content {
82
+ display: grid;
83
+ gap: 2rem;
84
+ }
85
+
86
+ .es-call-to-action__image {
87
+ max-width: 14rem;
88
+ height: auto;
89
+ width: auto;
90
+ justify-self: v-bind(alignment);
91
+ }
92
+
93
+ .es-call-to-action__content {
94
+ display: grid;
95
+ gap: 1rem;
96
+ justify-items: v-bind(alignment);
97
+ }
98
+
99
+ .es-call-to-action__content__heading {
100
+ font-size: 2rem;
101
+ font-weight: 700;
102
+ text-align: v-bind(alignment);
103
+ }
104
+
105
+ .es-call-to-action__content__paragraph {
106
+ font-size: 1.15rem;
107
+ max-width: 38rem;
108
+ text-align: v-bind(alignment);
109
+ }
110
+
111
+ .es-call-to-action__button {
112
+ justify-self: v-bind(alignment);
113
+ border-radius: 0.25rem;
114
+ display: inline-block;
115
+ font-size: 0.875rem;
116
+ line-height: 1.3;
117
+ padding: 1rem 2.625rem;
118
+ text-align: v-bind(alignment);
119
+ transition: background-color 100ms linear;
120
+ background-color: #16745f;
121
+ color: #fff;
122
+ }
123
+
124
+ .es-call-to-action__button:hover {
125
+ background-color: #0d5e4c;
126
+ }
127
+ </style>
@@ -0,0 +1,134 @@
1
+ <script setup lang="ts">
2
+ import { ref } from "vue";
3
+ import { Content, isFilled } from "@prismicio/client";
4
+ import { PrismicLink, PrismicImage, PrismicRichText } from "@prismicio/svelte";
5
+
6
+ defineProps(
7
+ getSliceComponentProps<Content.PascalNameToReplaceSlice>([
8
+ "slice",
9
+ "index",
10
+ "slices",
11
+ "context",
12
+ ]),
13
+ );
14
+
15
+ const alignment = slice.variation === "alignLeft" ? ref("left") : ref("center");
16
+ </script>
17
+
18
+ <template>
19
+ <section
20
+ :data-slice-type="slice.slice_type"
21
+ :data-slice-variation="slice.variation"
22
+ class="es-bounded es-call-to-action"
23
+ >
24
+ <div class="es-bounded__content es-call-to-action__content">
25
+ <PrismicImage
26
+ v-if="isFilled.image(slice.primary.image)"
27
+ :field="slice.primary.image"
28
+ class="es-call-to-action__image"
29
+ />
30
+ <div class="es-call-to-action__content">
31
+ <h2
32
+ v-if="isFilled.richText(slice.primary.title)"
33
+ class="es-call-to-action__content__heading"
34
+ >
35
+ <PrismicRichText :field="slice.primary.title" />
36
+ </h2>
37
+ <div
38
+ v-if="isFilled.richText(slice.primary.paragraph)"
39
+ class="es-call-to-action__content__paragraph"
40
+ >
41
+ <PrismicRichText :field="slice.primary.paragraph" />
42
+ </div>
43
+ </div>
44
+ <PrismicLink
45
+ v-if="isFilled.link(slice.primary.buttonLink)"
46
+ :field="slice.primary.buttonLink"
47
+ class="es-call-to-action__button"
48
+ >
49
+ {{ slice.primary.buttonLabel || "Learn more…" }}
50
+ </PrismicLink>
51
+ </div>
52
+ </section>
53
+ </template>
54
+
55
+ <style>
56
+ .es-bounded {
57
+ padding: 8vw 2rem;
58
+ }
59
+
60
+ .es-bounded__content {
61
+ margin-left: auto;
62
+ margin-right: auto;
63
+ }
64
+
65
+ @media screen and (min-width: 640px) {
66
+ .es-bounded__content {
67
+ max-width: 90%;
68
+ }
69
+ }
70
+
71
+ @media screen and (min-width: 896px) {
72
+ .es-bounded__content {
73
+ max-width: 80%;
74
+ }
75
+ }
76
+
77
+ @media screen and (min-width: 1280px) {
78
+ .es-bounded__content {
79
+ max-width: 75%;
80
+ }
81
+ }
82
+
83
+ .es-call-to-action {
84
+ background-color: #fff;
85
+ color: #333;
86
+ }
87
+
88
+ .es-call-to-action__content {
89
+ display: grid;
90
+ gap: 2rem;
91
+ }
92
+
93
+ .es-call-to-action__image {
94
+ max-width: 14rem;
95
+ height: auto;
96
+ width: auto;
97
+ justify-self: v-bind(alignment);
98
+ }
99
+
100
+ .es-call-to-action__content {
101
+ display: grid;
102
+ gap: 1rem;
103
+ justify-items: v-bind(alignment);
104
+ }
105
+
106
+ .es-call-to-action__content__heading {
107
+ font-size: 2rem;
108
+ font-weight: 700;
109
+ text-align: v-bind(alignment);
110
+ }
111
+
112
+ .es-call-to-action__content__paragraph {
113
+ font-size: 1.15rem;
114
+ max-width: 38rem;
115
+ text-align: v-bind(alignment);
116
+ }
117
+
118
+ .es-call-to-action__button {
119
+ justify-self: v-bind(alignment);
120
+ border-radius: 0.25rem;
121
+ display: inline-block;
122
+ font-size: 0.875rem;
123
+ line-height: 1.3;
124
+ padding: 1rem 2.625rem;
125
+ text-align: v-bind(alignment);
126
+ transition: background-color 100ms linear;
127
+ background-color: #16745f;
128
+ color: #fff;
129
+ }
130
+
131
+ .es-call-to-action__button:hover {
132
+ background-color: #0d5e4c;
133
+ }
134
+ </style>
@@ -8,39 +8,52 @@ defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
8
8
  <section
9
9
  :data-slice-type="slice.slice_type"
10
10
  :data-slice-variation="slice.variation"
11
- class="es-bounded es-fullpage-hero es-bounded__content es-fullpage-hero__content"
12
- :class="
13
- slice.variation === 'imageRight'
14
- ? 'es-fullpage-hero__image--right'
15
- : 'es-fullpage-hero__image--left'
16
- "
11
+ class="es-bounded es-fullpage-hero"
17
12
  >
18
- <div>
19
- <PrismicImage
20
- v-if="isFilled.image(slice.primary.image)"
21
- :field="slice.primary.image"
22
- class="es-fullpage-hero__image"
23
- />
24
- </div>
25
- <div class="es-fullpage-hero__content-right">
26
- <div class="es-fullpage-hero__content__intro">
27
- <p
28
- v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
29
- class="es-fullpage-hero__content__intro__eyebrow"
30
- >
31
- {{ slice.primary.eyebrowHeadline }}
32
- </p>
33
- <PrismicRichText
34
- v-if="isFilled.richText(slice.primary.title)"
35
- class="es-fullpage-hero__content__intro__headline"
36
- :field="slice.primary.title"
13
+ <div
14
+ class="es-fullpage-hero__content"
15
+ :class="
16
+ slice.variation === 'imageRight'
17
+ ? 'es-fullpage-hero__image--right'
18
+ : 'es-fullpage-hero__image--left'
19
+ "
20
+ >
21
+ <div>
22
+ <PrismicImage
23
+ v-if="isFilled.image(slice.primary.image)"
24
+ :field="slice.primary.image"
25
+ class="es-fullpage-hero__image"
37
26
  />
38
27
  </div>
39
- <PrismicRichText
40
- v-if="isFilled.richText(slice.primary.description)"
41
- class="es-fullpage-hero__content__intro__description"
42
- :field="slice.primary.description"
43
- />
28
+ <div class="es-fullpage-hero__content-right">
29
+ <div class="es-fullpage-hero__content__intro">
30
+ <p
31
+ v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
32
+ class="es-fullpage-hero__content__intro__eyebrow"
33
+ >
34
+ <PrismicText :field="slice.primary.eyebrowHeadline" />
35
+ </p>
36
+ <div
37
+ v-if="isFilled.richText(slice.primary.title)"
38
+ class="es-fullpage-hero__content__intro__headline"
39
+ >
40
+ <PrismicRichText :field="slice.primary.title" />
41
+ </div>
42
+ <div
43
+ v-if="isFilled.richText(slice.primary.description)"
44
+ class="es-fullpage-hero__content__intro__description"
45
+ >
46
+ <PrismicRichText :field="slice.primary.description" />
47
+ </div>
48
+ <PrismicLink
49
+ v-if="isFilled.link(slice.primary.callToActionLink)"
50
+ class="es-call-to-action__link"
51
+ :field="slice.primary.callToActionLink"
52
+ >
53
+ {{ slice.primary.callToActionLabel || "Learn more…" }}
54
+ </PrismicLink>
55
+ </div>
56
+ </div>
44
57
  </div>
45
58
  </section>
46
59
  </template>
@@ -52,12 +65,6 @@ defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
52
65
  position: relative;
53
66
  }
54
67
 
55
- .es-bounded__content {
56
- min-width: 0px;
57
- max-width: 90%;
58
- margin: 0px auto;
59
- }
60
-
61
68
  .es-fullpage-hero {
62
69
  font-family: system-ui, sans-serif;
63
70
  background-color: #fff;
@@ -163,45 +170,6 @@ defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
163
170
  }
164
171
  }
165
172
 
166
- .es-fullpage-hero__content__items {
167
- display: grid;
168
- gap: 2rem;
169
- }
170
-
171
- @media (min-width: 640px) {
172
- .es-fullpage-hero__content__items {
173
- grid-template-columns: repeat(2, 1fr);
174
- }
175
- }
176
-
177
- .es-fullpage-hero__item {
178
- display: grid;
179
- align-content: start;
180
- }
181
-
182
- .es-fullpage-hero__item__icon {
183
- max-height: 3rem;
184
- }
185
-
186
- .es-fullpage-hero__item__heading {
187
- font-weight: 700;
188
- font-size: 1.17rem;
189
- margin-top: 0;
190
- margin-bottom: 0.5rem;
191
- }
192
-
193
- .es-fullpage-hero__item__heading > * {
194
- margin: 0;
195
- }
196
-
197
- .es-fullpage-hero__item__description {
198
- font-size: 0.9rem;
199
- }
200
-
201
- .es-fullpage-hero__item__description > * {
202
- margin: 0;
203
- }
204
-
205
173
  .es-call-to-action__link {
206
174
  justify-self: flex-start;
207
175
  border-radius: 0.25rem;
@@ -15,39 +15,52 @@ defineProps(
15
15
  <section
16
16
  :data-slice-type="slice.slice_type"
17
17
  :data-slice-variation="slice.variation"
18
- class="es-bounded es-fullpage-hero es-bounded__content es-fullpage-hero__content"
19
- :class="
20
- slice.variation === 'imageRight'
21
- ? 'es-fullpage-hero__image--right'
22
- : 'es-fullpage-hero__image--left'
23
- "
18
+ class="es-bounded es-fullpage-hero"
24
19
  >
25
- <div>
26
- <PrismicImage
27
- v-if="isFilled.image(slice.primary.image)"
28
- :field="slice.primary.image"
29
- class="es-fullpage-hero__image"
30
- />
31
- </div>
32
- <div class="es-fullpage-hero__content-right">
33
- <div class="es-fullpage-hero__content__intro">
34
- <p
35
- v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
36
- class="es-fullpage-hero__content__intro__eyebrow"
37
- >
38
- {{ slice.primary.eyebrowHeadline }}
39
- </p>
40
- <PrismicRichText
41
- v-if="isFilled.richText(slice.primary.title)"
42
- class="es-fullpage-hero__content__intro__headline"
43
- :field="slice.primary.title"
20
+ <div
21
+ class="es-fullpage-hero__content"
22
+ :class="
23
+ slice.variation === 'imageRight'
24
+ ? 'es-fullpage-hero__image--right'
25
+ : 'es-fullpage-hero__image--left'
26
+ "
27
+ >
28
+ <div>
29
+ <PrismicImage
30
+ v-if="isFilled.image(slice.primary.image)"
31
+ :field="slice.primary.image"
32
+ class="es-fullpage-hero__image"
44
33
  />
45
34
  </div>
46
- <PrismicRichText
47
- v-if="isFilled.richText(slice.primary.description)"
48
- class="es-fullpage-hero__content__intro__description"
49
- :field="slice.primary.description"
50
- />
35
+ <div class="es-fullpage-hero__content-right">
36
+ <div class="es-fullpage-hero__content__intro">
37
+ <p
38
+ v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
39
+ class="es-fullpage-hero__content__intro__eyebrow"
40
+ >
41
+ <PrismicText :field="slice.primary.eyebrowHeadline" />
42
+ </p>
43
+ <div
44
+ v-if="isFilled.richText(slice.primary.title)"
45
+ class="es-fullpage-hero__content__intro__headline"
46
+ >
47
+ <PrismicRichText :field="slice.primary.title" />
48
+ </div>
49
+ <div
50
+ v-if="isFilled.richText(slice.primary.description)"
51
+ class="es-fullpage-hero__content__intro__description"
52
+ >
53
+ <PrismicRichText :field="slice.primary.description" />
54
+ </div>
55
+ <PrismicLink
56
+ v-if="isFilled.link(slice.primary.callToActionLink)"
57
+ class="es-call-to-action__link"
58
+ :field="slice.primary.callToActionLink"
59
+ >
60
+ {{ slice.primary.callToActionLabel || "Learn more…" }}
61
+ </PrismicLink>
62
+ </div>
63
+ </div>
51
64
  </div>
52
65
  </section>
53
66
  </template>
@@ -59,12 +72,6 @@ defineProps(
59
72
  position: relative;
60
73
  }
61
74
 
62
- .es-bounded__content {
63
- min-width: 0px;
64
- max-width: 90%;
65
- margin: 0px auto;
66
- }
67
-
68
75
  .es-fullpage-hero {
69
76
  font-family: system-ui, sans-serif;
70
77
  background-color: #fff;
@@ -170,45 +177,6 @@ defineProps(
170
177
  }
171
178
  }
172
179
 
173
- .es-fullpage-hero__content__items {
174
- display: grid;
175
- gap: 2rem;
176
- }
177
-
178
- @media (min-width: 640px) {
179
- .es-fullpage-hero__content__items {
180
- grid-template-columns: repeat(2, 1fr);
181
- }
182
- }
183
-
184
- .es-fullpage-hero__item {
185
- display: grid;
186
- align-content: start;
187
- }
188
-
189
- .es-fullpage-hero__item__icon {
190
- max-height: 3rem;
191
- }
192
-
193
- .es-fullpage-hero__item__heading {
194
- font-weight: 700;
195
- font-size: 1.17rem;
196
- margin-top: 0;
197
- margin-bottom: 0.5rem;
198
- }
199
-
200
- .es-fullpage-hero__item__heading > * {
201
- margin: 0;
202
- }
203
-
204
- .es-fullpage-hero__item__description {
205
- font-size: 0.9rem;
206
- }
207
-
208
- .es-fullpage-hero__item__description > * {
209
- margin: 0;
210
- }
211
-
212
180
  .es-call-to-action__link {
213
181
  justify-self: flex-start;
214
182
  border-radius: 0.25rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slicemachine/adapter-nuxt",
3
- "version": "0.3.18-dev-slice-templates-svelte-nuxt.0",
3
+ "version": "0.3.18-dev-slice-templates-svelte-nuxt.2",
4
4
  "description": "Slice Machine adapter for Nuxt 3.",
5
5
  "keywords": [
6
6
  "typescript",
@@ -61,7 +61,7 @@
61
61
  "dependencies": {
62
62
  "@prismicio/simulator": "^0.1.4",
63
63
  "@prismicio/types-internal": "^2.0.0",
64
- "@slicemachine/plugin-kit": "^0.4.18-dev-slice-templates-svelte-nuxt.0",
64
+ "@slicemachine/plugin-kit": "^0.4.18-dev-slice-templates-svelte-nuxt.2",
65
65
  "common-tags": "^1.8.2",
66
66
  "fp-ts": "^2.13.1",
67
67
  "io-ts": "^2.2.20",
@@ -103,5 +103,5 @@
103
103
  "engines": {
104
104
  "node": ">=14.15.0"
105
105
  },
106
- "gitHead": "f605a87ec7467b4dd4313abdce3c9bfbc27a7e75"
106
+ "gitHead": "05b44b17ff484cad9891ac03ab4f9a489cb31960"
107
107
  }