feat(docs): replace vitepress with vuepress

* vitepress too limited
2022-04-04 21:42:48 +02:00
parent 981511c76f
commit 3bbe92a4ea
31 changed files with 885 additions and 501 deletions
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { FlowInstance } from "@braks/vue-flow";
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const instances = reactive<FlowInstance[]>([]);
+
+const onLoad = (instance: FlowInstance) => {
+  instances.push(instance);
+  instance.fitView();
+};
+
+const fitViews = () => {
+  instances.forEach(i => i.fitView());
+};
+
+watch(
+  [
+    breakpoints.sm,
+    breakpoints.md,
+    breakpoints.lg,
+    breakpoints.xl,
+    breakpoints["2xl"]
+  ],
+  () => setTimeout(() => {
+    fitViews()
+  }, 5)
+);
+</script>
+<template>
+  <div class="w-full bg-gray-50">
+    <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>
+    </div>
+  </div>
+</template>
+<style>
+.button {
+  @apply
+  shadow-lg transition-colors duration-200 hover:bg-black font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500 text-white;
+}
+</style>