update(docs): fitview on breakpoint change

docs/.vitepress/components/home/Banner.vue

@@ -7,20 +7,20 @@ import Download from '~icons/carbon/download'
 <template>
   <div class="w-full bg-gray-900 text-white">
     <div class="max-w-9/12 md:max-w-3/4 lg:max-w-4xl m-auto py-4 md:py-12">
-      <div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center">
+      <div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center <md:divide-y md:divide-x divide-blue-200">
-        <div class="grid grid-rows-2 gap-2 pb-6 md:pb-0 border-b-1 border-gray-400 md:border-b-0">
+        <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
           <div class="font-bold text-3xl flex gap-2 items-center justify-center">
             <Star /> {{ data.stargazers_count }}
           </div>
         </div>
-        <div class="grid grid-rows-2 gap-2 pb-6 md:pb-0 border-b-1 border-gray-400 md:border-b-0">
+        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Downloads (last month)</div>
           <div class="font-bold text-3xl flex gap-2 items-center justify-center">
             <Download /> {{ data.downloads }}
           </div>
         </div>
-        <div class="grid grid-rows-2 gap-2">
+        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">License</div>
           <div class="font-bold text-3xl">
             {{ data.license.key.toUpperCase() }}

docs/.vitepress/components/home/Basic.vue

@@ -1,14 +1,22 @@
 <script lang="ts" setup>
-import { GraphEdge, GraphNode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow";
+import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from "@braks/vue-flow";
 
-const getStyle = (el: GraphNode) => {
+const getClass: ClassFunc = (el) => {
   const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"];
-  if (el.selected) classes.push(...["!border-green-500/80", "!shadow-md", "!shadow-green-500/50", "!bg-green-100/45", "!text-gray-700"]);
+  if (el.selected) classes.push(
-  if (el.selected && !el.dragging) classes.push("animate-pulse");
+    ...[
+      "!border-green-500/80",
+      "!shadow-md",
+      "!shadow-green-500/50",
+      "!bg-green-100/45",
+      "!text-gray-700"
+    ]
+  );
+
   return classes.join(" ");
 };
 
-const emit = defineEmits(['pane'])
+const emit = defineEmits(["pane"]);
 
 const { onPaneReady } = useVueFlow({
   modelValue: [
@@ -17,21 +25,21 @@ const { onPaneReady } = useVueFlow({
       type: "input",
       label: "input",
       position: { x: 250, y: 5 },
-      class: getStyle
+      class: getClass,
     },
     {
       id: "2",
       label: "default",
       position: { x: 100, y: 100 },
-      class: getStyle
+      class: getClass
     },
-    { id: "3", label: "default", position: { x: 400, y: 100 }, class: getStyle },
+    { id: "3", label: "default", position: { x: 400, y: 100 }, class: getClass },
     {
       id: "4",
       type: "output",
       label: "output",
       position: { x: 250, y: 225 },
-      class: getStyle
+      class: getClass
     },
     {
       id: "e1-2",
@@ -69,7 +77,7 @@ const { onPaneReady } = useVueFlow({
   ]
 });
 
-onPaneReady((i) => emit('pane', i))
+onPaneReady((i) => emit("pane", i));
 </script>
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center">

docs/.vitepress/components/home/Features.vue

@@ -1,28 +1,33 @@
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
-import { useBreakpoints, whenever } from "@vueuse/core";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import { FlowInstance } from "@braks/vue-flow";
 
-const breakpoints = useBreakpoints({
+const breakpoints = useBreakpoints(breakpointsTailwind);
-  mobile: 360,
-  tablet: 640,
-  laptop: 1024,
-  desktop: 1280
-});
 
-const instances = reactive<FlowInstance[]>([])
+const instances = reactive<FlowInstance[]>([]);
 
 const onLoad = (instance: FlowInstance) => {
-  instances.push(instance)
+  instances.push(instance);
-  instance.fitView()
+  instance.fitView();
 };
 
 const fitViews = () => {
-  instances.forEach(i => i.fitView())
+  instances.forEach(i => i.fitView());
-}
+};
 
-whenever(breakpoints.greater("tablet"), fitViews);
+watch(
-whenever(breakpoints.smaller("tablet"), fitViews);
+  [
+    breakpoints.sm,
+    breakpoints.md,
+    breakpoints.lg,
+    breakpoints.xl,
+    breakpoints["2xl"]
+  ],
+  () => setTimeout(() => {
+    fitViews()
+  }, 1)
+);
 </script>
 <template>
   <div class="w-full">
@@ -34,6 +39,9 @@ whenever(breakpoints.smaller("tablet"), fitViews);
       <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-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
+        <Nested @pane="onLoad" />
+      </div>
     </div>
   </div>
 </template>

docs/.vitepress/components/home/Home.vue

@@ -1,17 +1,11 @@
 <script lang="ts" setup>
 import { VueFlow, Handle, Position, useVueFlow } from "@braks/vue-flow";
-import { useBreakpoints } from "@vueuse/core";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import Book from "~icons/codicon/book";
 import BoxNode from "./nodes/Box.vue";
+import { watch } from "vue";
 
-const breakpoints = useBreakpoints({
+const breakpoints = useBreakpoints(breakpointsTailwind);
-  mobile: 320,
-  tablet: 640,
-  laptop: 1024,
-  desktop: 1280
-});
-
-const desktop = breakpoints.greater("tablet");
 
 const { dimensions, instance, onPaneReady, getNode } = useVueFlow({
   nodes: [
@@ -45,6 +39,19 @@ const { dimensions, instance, onPaneReady, getNode } = useVueFlow({
   zoomOnScroll: false
 });
 
+watch(
+  [
+    breakpoints.sm,
+    breakpoints.md,
+    breakpoints.lg,
+    breakpoints.xl,
+    breakpoints["2xl"]
+  ],
+  () => setTimeout(() => {
+    instance.value?.fitView();
+  }, 1)
+);
+
 onPaneReady(({ fitView }) => {
   setTimeout(() => {
     fitView({
@@ -53,12 +60,6 @@ onPaneReady(({ fitView }) => {
     });
   });
 });
-
-const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.fitView({
-  padding,
-  nodes: id,
-  duration
-});
 </script>
 <template>
   <div class="bg-white h-[75vh]">

docs/.vitepress/windi.config.ts

@@ -5,7 +5,10 @@ import scrollbar from '@windicss/plugin-scrollbar'
 
 export default defineConfig({
   extract: {
-    include: [resolve(__dirname, 'components/**/*.{ts,md,vue}'), resolve(__dirname, '../src/**/*.{ts,md,vue}')],
+    include: [
+      resolve(__dirname, 'components/**/*.{ts,md,vue}'),
+      resolve(__dirname, '../src/**/*.{ts,md,vue}')
+    ],
   },
 
   attributify: true,
@@ -15,7 +18,7 @@ export default defineConfig({
     typography({
       dark: true,
     }),
-    scrollbar,
+    scrollbar
   ],
 
   shortcuts: {

yarn.lock

@@ -1430,11 +1430,6 @@
     jiti "^1.13.0"
     windicss "^3.5.1"
 
-"@windicss/plugin-icons@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-icons/-/plugin-icons-1.0.2.tgz#8bc4024ebeb516a9d68b013d8a16db4509f4184f"
-  integrity sha512-PN6+y9TwEFQn+x6hmCUbCH2YzCfLyImcgQZQQAZ3kCZvqvZDyfKgS9TuhHY1Y0vp12lO6ULFUWpH6YIVGOPM6A==
-
 "@windicss/plugin-scrollbar@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-scrollbar/-/plugin-scrollbar-1.2.3.tgz#4796e999e98a4bca6c269fa1faffd2e9b5452cac"