docs: replace codesandbox embed with repl (#122)

* docs: Animations

* docs: add confetti gun

* docs: update basic example on home page

* docs(deps): Add stackblitz sdk to deps

* chore: update yarn.lock

* docs: use vue repl

* docs: remove stackblitz sdk

* docs: basic repl example

* docs: use repl for examples/index.md (basic example)

* docs: pass ext to repl

* docs: add copy plugin

* docs: use import map instead of dynamic imports

* docs: use repl for custom node example

* docs: hide repl errors

* docs: use repl for custom connectionline example

* docs: use repl for edges example

* docs: exclude repl from ssr

* docs: use repl for nested example

* docs: use repl for stress example

* docs: rename customNode to custom-node

* docs: use repl for update-edge example

* docs: use repl for update-node example

* docs: use repl for validation example

* docs: use repl for save-restore example

* docs: scale down minimap in repl examples

* docs: use repl for dnd example

* docs: use repl for empty example

* docs: use repl for hidden example

* docs: use repl for interaction example

* docs: use repl for multi example

* docs: add pinia example with stackblitz

* docs: update basic example

* docs: update examples

* docs: remove transition from intro

* docs: update features

* update: README.md

* docs: scope css
This commit is contained in:
Braks
2022-05-26 19:28:25 +02:00
parent 6494b65b3e
commit 98a893108c
95 changed files with 2342 additions and 321 deletions
+24 -11
View File
@@ -28,18 +28,31 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
<div
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
>
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" />
</div>
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<RGB @pane="onLoad" />
</div>
<div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
<Nested @pane="onLoad" />
</div>
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<Additional @pane="onLoad" />
<div ref="basic">
<XyzTransition :appear-visible="true" xyz="fade left ease-out-back">
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" />
</div>
</XyzTransition>
</div>
<XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<RGB @pane="onLoad" />
</div>
</XyzTransition>
<XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
<div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
<Nested @pane="onLoad" />
</div>
</XyzTransition>
<XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<Additional @pane="onLoad" />
</div>
</XyzTransition>
</div>
</div>
</template>