@rocketsearch/nuxt-uappi 0.2.1 → 0.2.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.
package/package.json
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
v-if="showcase || loading || debug"
|
|
4
|
+
:class="['rocket-search', { 'rocket-search--empty': !showcase && !loading }]"
|
|
5
|
+
:data-rocket-showcase-position="position"
|
|
6
|
+
>
|
|
3
7
|
<div v-if="loading" class="rocket-search__showcase rocket-search__showcase--skeleton" :style="columnsStyle">
|
|
4
8
|
<div class="rocket-search__showcase__title rocket-search__product-placeholder__item" />
|
|
5
9
|
<div class="rocket-search__product-placeholder">
|
|
@@ -13,7 +17,7 @@
|
|
|
13
17
|
<RocketBannerItem v-else-if="bannerOnly" :item="showcase" :position="position" />
|
|
14
18
|
|
|
15
19
|
<section
|
|
16
|
-
v-else
|
|
20
|
+
v-else-if="showcase"
|
|
17
21
|
ref="root"
|
|
18
22
|
class="rocket-search__showcase"
|
|
19
23
|
:data-rocket-showcase-id="showcase.id"
|
|
@@ -62,7 +66,7 @@ export default {
|
|
|
62
66
|
mediaSize: { type: String, default: 'medium' }
|
|
63
67
|
},
|
|
64
68
|
data () {
|
|
65
|
-
return { showcase: null, products: [], loading: false };
|
|
69
|
+
return { showcase: null, products: [], loading: false, debug: false };
|
|
66
70
|
},
|
|
67
71
|
computed: {
|
|
68
72
|
columns () {
|
|
@@ -88,6 +92,9 @@ export default {
|
|
|
88
92
|
}
|
|
89
93
|
},
|
|
90
94
|
mounted () {
|
|
95
|
+
// ?rocket-search-debug=true: o slot aparece mesmo vazio. Lido no mounted (não no data)
|
|
96
|
+
// para o HTML do SSR bater com a hidratação.
|
|
97
|
+
this.debug = document.body.classList.contains('rocket-search-debug');
|
|
91
98
|
if (this.pageType || this.$rocket.getPage().section) this.load();
|
|
92
99
|
},
|
|
93
100
|
beforeDestroy () {
|
package/runtime/css/common.css
CHANGED
|
@@ -93,63 +93,76 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
/* DEBUG: ?rocket-search-debug=true contorna e rotula
|
|
96
|
+
/* DEBUG: ?rocket-search-debug=true contorna e rotula toda posição de vitrine — inclusive as
|
|
97
|
+
vazias, que o RocketShowcase só renderiza no debug. Mesmo layout da Linx 2.0.0. */
|
|
97
98
|
body.rocket-search-debug {
|
|
98
99
|
& [data-rocket-showcase-position] {
|
|
100
|
+
--color: #64748b;
|
|
101
|
+
--content: attr(data-rocket-showcase-position);
|
|
99
102
|
position: relative;
|
|
100
|
-
|
|
101
|
-
padding:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
min-height: 140px;
|
|
104
|
+
padding: 52px 16px 16px;
|
|
105
|
+
border: 2px dashed var(--color);
|
|
106
|
+
border-radius: 12px;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
background-color: color-mix(in srgb, var(--color) 6%, transparent);
|
|
109
|
+
|
|
110
|
+
/* Selo com o nome da posição */
|
|
111
|
+
&::before {
|
|
105
112
|
content: var(--content);
|
|
106
113
|
position: absolute;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
114
|
+
top: 12px;
|
|
115
|
+
left: 12px;
|
|
116
|
+
padding: 5px 12px;
|
|
117
|
+
border-radius: 999px;
|
|
118
|
+
color: #fff;
|
|
119
|
+
background-color: var(--color);
|
|
120
|
+
font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
121
|
+
letter-spacing: 0.06em;
|
|
122
|
+
text-transform: uppercase;
|
|
123
|
+
z-index: 2;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Atributo do slot, para quem vai mexer no template */
|
|
127
|
+
&::after {
|
|
128
|
+
content: "data-rocket-showcase-position=\"" attr(data-rocket-showcase-position) "\"";
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 16px;
|
|
131
|
+
right: 14px;
|
|
111
132
|
color: var(--color);
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
text-align: center;
|
|
116
|
-
background-color: #f6f6f6;
|
|
117
|
-
z-index: 1;
|
|
133
|
+
font: 500 11px/1.2 ui-monospace, Consolas, monospace;
|
|
134
|
+
opacity: 0.8;
|
|
135
|
+
z-index: 2;
|
|
118
136
|
}
|
|
119
137
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
&::after {
|
|
126
|
-
bottom: 0;
|
|
127
|
-
transform: translate(-50%, 50%);
|
|
138
|
+
/* Posição sem vitrine (o RocketShowcase só a renderiza no debug) */
|
|
139
|
+
&.rocket-search--empty::before {
|
|
140
|
+
content: var(--content) " · vazia";
|
|
128
141
|
}
|
|
129
142
|
|
|
130
143
|
&[data-rocket-showcase-position="hero"] {
|
|
131
|
-
--color:
|
|
144
|
+
--color: #7c3aed;
|
|
132
145
|
--content: "Hero";
|
|
133
146
|
}
|
|
134
147
|
|
|
135
148
|
&[data-rocket-showcase-position="top"] {
|
|
136
|
-
--color:
|
|
149
|
+
--color: #059669;
|
|
137
150
|
--content: "Topo";
|
|
138
151
|
}
|
|
139
152
|
|
|
140
153
|
&[data-rocket-showcase-position="middle"] {
|
|
141
|
-
--color:
|
|
154
|
+
--color: #d97706;
|
|
142
155
|
--content: "Meio";
|
|
143
156
|
}
|
|
144
157
|
|
|
145
158
|
&[data-rocket-showcase-position="bottom"] {
|
|
146
|
-
--color:
|
|
147
|
-
--content: "
|
|
159
|
+
--color: #dc2626;
|
|
160
|
+
--content: "Rodapé";
|
|
148
161
|
}
|
|
149
162
|
|
|
150
163
|
&[data-rocket-showcase-position="prefooter"] {
|
|
151
|
-
--color:
|
|
152
|
-
--content: "Antes do
|
|
164
|
+
--color: #2563eb;
|
|
165
|
+
--content: "Antes do footer";
|
|
153
166
|
}
|
|
154
167
|
}
|
|
155
168
|
}
|