grav-svelte 0.1.241 → 0.1.246
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/dist/Preview/PhoneMockup.svelte +195 -0
- package/dist/Preview/PhoneMockup.svelte.d.ts +22 -0
- package/dist/Preview/index.d.ts +1 -0
- package/dist/Preview/index.js +1 -0
- package/dist/Sidebar/SidebarWrapper.svelte +13 -29
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +6 -2
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let src: string;
|
|
3
|
+
export let title: string = "Vista previa";
|
|
4
|
+
export let sandbox: string =
|
|
5
|
+
"allow-scripts allow-same-origin allow-popups allow-forms";
|
|
6
|
+
/** Alto del mockup en desktop (p. ej. `90vh`, `90dvh`) */
|
|
7
|
+
export let phoneHeight: string = "90vh";
|
|
8
|
+
/** Ancho del mockup en desktop (p. ej. `auto`, `50vh`, `400px`). `auto` = aspect-ratio 10/19.5 */
|
|
9
|
+
export let phoneWidth: string = "50vh";
|
|
10
|
+
/** Alto del mockup en mobile (p. ej. `70svh`, `500px`) */
|
|
11
|
+
export let mobileHeight: string = "90svh";
|
|
12
|
+
/** Ancho del mockup en mobile (p. ej. `95vw`, `100%`) */
|
|
13
|
+
export let mobileWidth: string = "90vw";
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<!-- Desktop: solo el iframe, proporción tipo móvil, sin marco ni scroll del contenedor -->
|
|
17
|
+
<div class="phone-mockup-wrapper">
|
|
18
|
+
<div
|
|
19
|
+
class="phone-frame"
|
|
20
|
+
class:auto-width={phoneWidth === "auto"}
|
|
21
|
+
class:explicit-width={phoneWidth !== "auto"}
|
|
22
|
+
style:--phone-mockup-h={phoneHeight}
|
|
23
|
+
style:--phone-mockup-w={phoneWidth}
|
|
24
|
+
>
|
|
25
|
+
<div class="phone-notch"></div>
|
|
26
|
+
<div class="phone-mockup-screen">
|
|
27
|
+
<div class="phone-mockup-iframe-clip">
|
|
28
|
+
<iframe {src} {title} {sandbox} loading="lazy" class="phone-mockup-iframe"
|
|
29
|
+
></iframe>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="phone-homebar"></div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Mobile: centrado en viewport -->
|
|
37
|
+
<div class="phone-mockup-mobile-outer">
|
|
38
|
+
<div
|
|
39
|
+
class="phone-frame mobile-frame"
|
|
40
|
+
style:--mobile-h={mobileHeight}
|
|
41
|
+
style:--mobile-w={mobileWidth}
|
|
42
|
+
>
|
|
43
|
+
<div class="phone-notch"></div>
|
|
44
|
+
<div class="phone-mockup-mobile-screen">
|
|
45
|
+
<div class="phone-mockup-iframe-clip">
|
|
46
|
+
<iframe
|
|
47
|
+
{src}
|
|
48
|
+
{title}
|
|
49
|
+
{sandbox}
|
|
50
|
+
loading="lazy"
|
|
51
|
+
class="phone-mockup-iframe-mobile"
|
|
52
|
+
></iframe>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="phone-homebar"></div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
/* ========== Wrapper ========== */
|
|
61
|
+
.phone-mockup-wrapper {
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
box-sizing: border-box;
|
|
66
|
+
width: 100%;
|
|
67
|
+
height: 100dvh;
|
|
68
|
+
max-height: 100dvh;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
padding: 0;
|
|
71
|
+
margin: 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ========== Phone frame ========== */
|
|
75
|
+
.phone-frame {
|
|
76
|
+
position: relative;
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
border: 3px solid #1a1a1a;
|
|
81
|
+
border-radius: 32px;
|
|
82
|
+
background: #1a1a1a;
|
|
83
|
+
padding: 6px 4px;
|
|
84
|
+
box-shadow:
|
|
85
|
+
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
|
|
86
|
+
0 8px 32px rgba(0, 0, 0, 0.25);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.phone-frame.auto-width {
|
|
90
|
+
aspect-ratio: 10 / 20;
|
|
91
|
+
width: min(100vw, calc(var(--phone-mockup-h) * 10 / 19.5));
|
|
92
|
+
height: min(var(--phone-mockup-h), calc(100vw * 19.5 / 10));
|
|
93
|
+
max-width: 100vw;
|
|
94
|
+
max-height: var(--phone-mockup-h);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.phone-frame.explicit-width {
|
|
98
|
+
width: var(--phone-mockup-w);
|
|
99
|
+
height: var(--phone-mockup-h);
|
|
100
|
+
max-width: 100vw;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Notch / dynamic island */
|
|
104
|
+
.phone-notch {
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
width: 80px;
|
|
107
|
+
height: 6px;
|
|
108
|
+
margin: 4px auto 4px;
|
|
109
|
+
border-radius: 99px;
|
|
110
|
+
background: #2a2a2a;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Screen area */
|
|
114
|
+
.phone-mockup-screen {
|
|
115
|
+
position: relative;
|
|
116
|
+
flex: 1;
|
|
117
|
+
min-height: 0;
|
|
118
|
+
border-radius: 4px;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
background: #fff;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Home bar indicator */
|
|
124
|
+
.phone-homebar {
|
|
125
|
+
flex-shrink: 0;
|
|
126
|
+
width: 60px;
|
|
127
|
+
height: 4px;
|
|
128
|
+
margin: 5px auto 3px;
|
|
129
|
+
border-radius: 99px;
|
|
130
|
+
background: #444;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/*
|
|
134
|
+
* El documento embebido es otro origen: no se puede estilizar su scrollbar desde aquí.
|
|
135
|
+
* Recortamos ~20px abajo-derecha (barra clásica en Windows); en overlay puede perderse un borde fino.
|
|
136
|
+
*/
|
|
137
|
+
.phone-mockup-iframe-clip {
|
|
138
|
+
position: absolute;
|
|
139
|
+
inset: 0;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
/* No robar toques: en algunos navegadores el clip queda encima del iframe */
|
|
142
|
+
pointer-events: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.phone-mockup-iframe,
|
|
146
|
+
.phone-mockup-iframe-mobile {
|
|
147
|
+
position: absolute;
|
|
148
|
+
top: 0;
|
|
149
|
+
left: 0;
|
|
150
|
+
width: calc(100% + 20px);
|
|
151
|
+
height: calc(100% + 20px);
|
|
152
|
+
margin-right: -20px;
|
|
153
|
+
margin-bottom: -20px;
|
|
154
|
+
border: none;
|
|
155
|
+
display: block;
|
|
156
|
+
pointer-events: auto;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ========== Mobile: viewport centrado, tarjeta ~70% alto ========== */
|
|
160
|
+
/* svh = viewport “pequeño” estable: dvh cambia al tocar y el flex recentra el iframe a saltos */
|
|
161
|
+
.phone-mockup-mobile-outer {
|
|
162
|
+
display: none;
|
|
163
|
+
box-sizing: border-box;
|
|
164
|
+
width: 100%;
|
|
165
|
+
height: 100svh;
|
|
166
|
+
padding: 0.75rem;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
align-items: center;
|
|
169
|
+
overflow: hidden;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.phone-frame.mobile-frame {
|
|
173
|
+
width: var(--mobile-w, 95vw);
|
|
174
|
+
max-width: calc(100vw - 1.5rem);
|
|
175
|
+
height: var(--mobile-h, 70svh);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.phone-mockup-mobile-screen {
|
|
179
|
+
position: relative;
|
|
180
|
+
flex: 1;
|
|
181
|
+
min-height: 0;
|
|
182
|
+
border-radius: 4px;
|
|
183
|
+
overflow: hidden;
|
|
184
|
+
background: #fff;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@media (max-width: 768px) {
|
|
188
|
+
.phone-mockup-wrapper {
|
|
189
|
+
display: none;
|
|
190
|
+
}
|
|
191
|
+
.phone-mockup-mobile-outer {
|
|
192
|
+
display: flex;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
src: string;
|
|
5
|
+
title?: string;
|
|
6
|
+
sandbox?: string;
|
|
7
|
+
/** Alto del mockup en desktop (p. ej. `90vh`, `90dvh`) */ phoneHeight?: string;
|
|
8
|
+
/** Ancho del mockup en desktop (p. ej. `auto`, `50vh`, `400px`). `auto` = aspect-ratio 10/19.5 */ phoneWidth?: string;
|
|
9
|
+
/** Alto del mockup en mobile (p. ej. `70svh`, `500px`) */ mobileHeight?: string;
|
|
10
|
+
/** Ancho del mockup en mobile (p. ej. `95vw`, `100%`) */ mobileWidth?: string;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export type PhoneMockupProps = typeof __propDef.props;
|
|
18
|
+
export type PhoneMockupEvents = typeof __propDef.events;
|
|
19
|
+
export type PhoneMockupSlots = typeof __propDef.slots;
|
|
20
|
+
export default class PhoneMockup extends SvelteComponentTyped<PhoneMockupProps, PhoneMockupEvents, PhoneMockupSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PhoneMockup } from './PhoneMockup.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PhoneMockup } from './PhoneMockup.svelte';
|
|
@@ -178,35 +178,19 @@
|
|
|
178
178
|
<ul class="sidebar-list">
|
|
179
179
|
{#each sections as section}
|
|
180
180
|
<li class="sidebar-section-item">
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
</button>
|
|
195
|
-
{:else}
|
|
196
|
-
<button
|
|
197
|
-
type="button"
|
|
198
|
-
class="sidebar-section-btn"
|
|
199
|
-
on:click={() => (section.biActivado = !section.biActivado)}
|
|
200
|
-
>
|
|
201
|
-
<i
|
|
202
|
-
class="fas fa-caret-right sidebar-section-icon"
|
|
203
|
-
aria-hidden="true"
|
|
204
|
-
data-fa-processed="true"
|
|
205
|
-
data-fa-i2svg-processed="true"
|
|
206
|
-
></i>
|
|
207
|
-
{section.nombre}
|
|
208
|
-
</button>
|
|
209
|
-
{/if}
|
|
181
|
+
<button
|
|
182
|
+
type="button"
|
|
183
|
+
class="sidebar-section-btn"
|
|
184
|
+
on:click={() => (section.biActivado = !section.biActivado)}
|
|
185
|
+
>
|
|
186
|
+
<i
|
|
187
|
+
class="fas {section.biActivado ? 'fa-caret-down' : 'fa-caret-right'} sidebar-section-icon"
|
|
188
|
+
aria-hidden="true"
|
|
189
|
+
data-fa-processed="true"
|
|
190
|
+
data-fa-i2svg-processed="true"
|
|
191
|
+
></i>
|
|
192
|
+
{section.nombre}
|
|
193
|
+
</button>
|
|
210
194
|
{#if section.biActivado}
|
|
211
195
|
<ul
|
|
212
196
|
class="sidebar-sublist"
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "grav-svelte",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.246",
|
|
4
4
|
"description": "A collection of Svelte components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -48,6 +48,10 @@
|
|
|
48
48
|
"types": "./dist/Alerts/index.d.ts",
|
|
49
49
|
"svelte": "./dist/Alerts/index.js"
|
|
50
50
|
},
|
|
51
|
+
"./Preview": {
|
|
52
|
+
"types": "./dist/Preview/index.d.ts",
|
|
53
|
+
"svelte": "./dist/Preview/index.js"
|
|
54
|
+
},
|
|
51
55
|
"./typography.css": "./dist/typography.css"
|
|
52
56
|
},
|
|
53
57
|
"dependencies": {
|
|
@@ -91,4 +95,4 @@
|
|
|
91
95
|
"publishConfig": {
|
|
92
96
|
"access": "public"
|
|
93
97
|
}
|
|
94
|
-
}
|
|
98
|
+
}
|