@abcnews/components-builder 0.0.3 → 0.0.4
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/README.md
CHANGED
|
@@ -10,6 +10,31 @@ This project uses global styles in the same way as bootstrap or tailwind. These
|
|
|
10
10
|
|
|
11
11
|
Wrap your application inside of the BuilderStyleRoot component to make use of these styles. Note that all the components in this repository also depend on these styles.
|
|
12
12
|
|
|
13
|
+
## BuilderFrame
|
|
14
|
+
|
|
15
|
+
A two column frame you can use to scaffold your builder.
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { BuilderFrame } from '@abcnews/components-builder';
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#snippet Viz()}
|
|
23
|
+
<svg …>
|
|
24
|
+
{/snippet}
|
|
25
|
+
|
|
26
|
+
{#snippet Sidebar()}
|
|
27
|
+
<fieldset>
|
|
28
|
+
<legend>My builder</legend>
|
|
29
|
+
</fieldset>
|
|
30
|
+
{/snippet}
|
|
31
|
+
|
|
32
|
+
<BuilderStyleRoot>
|
|
33
|
+
<BuilderFrame {Viz} {Sidebar} />
|
|
34
|
+
</BuilderStyleRoot>
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
|
|
13
38
|
## UpdateChecker
|
|
14
39
|
|
|
15
40
|
The update checker extracts the current version number from the URL, and recursively checks for new versions, major, minor, and patch. If a new version is found it will show a modal prompting the user to update.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { Viz, Sidebar } = $props();
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="builder-frame">
|
|
6
|
+
<div class="builder-frame__viz">{@render Viz?.()}</div>
|
|
7
|
+
|
|
8
|
+
<div class="builder-frame__sidebar">{@render Sidebar?.()}</div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.builder-frame {
|
|
13
|
+
display: flex;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
width: 100%;
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: 0;
|
|
18
|
+
top: 0;
|
|
19
|
+
}
|
|
20
|
+
.builder-frame__viz {
|
|
21
|
+
flex: 1;
|
|
22
|
+
min-width: 50%;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
position: relative;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
padding: 1.69rem;
|
|
28
|
+
background: white;
|
|
29
|
+
color: black;
|
|
30
|
+
}
|
|
31
|
+
.builder-frame__sidebar {
|
|
32
|
+
width: 22rem;
|
|
33
|
+
padding: 2rem 1rem;
|
|
34
|
+
background: rgba(0, 0, 0, 0.04);
|
|
35
|
+
border-left: 1px solid var(--border);
|
|
36
|
+
height: 100vh;
|
|
37
|
+
overflow: auto;
|
|
38
|
+
@media (min-width: 1920px) {
|
|
39
|
+
width: 25rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
</style>
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as BuilderStyleRoot } from "./BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
2
|
+
export { default as BuilderFrame } from "./BuilderFrame/BuilderFrame.svelte";
|
|
2
3
|
export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
|
|
3
4
|
export { default as GoogleDocScrollyteller } from "./GoogleDocScrollyteller/GoogleDocScrollyteller.svelte";
|
|
4
5
|
export { default as Modal } from "./Modal/Modal.svelte";
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Reexport your entry components here
|
|
2
2
|
export { default as BuilderStyleRoot } from "./BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
3
|
+
export { default as BuilderFrame } from "./BuilderFrame/BuilderFrame.svelte";
|
|
3
4
|
export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
|
|
4
5
|
export { default as GoogleDocScrollyteller } from "./GoogleDocScrollyteller/GoogleDocScrollyteller.svelte";
|
|
5
6
|
export { default as Modal } from "./Modal/Modal.svelte";
|