From ff2327b140bd75cf06cfc8d380a0cad78ca54999 Mon Sep 17 00:00:00 2001
From: Davlatov Shahzod <shahzod@davlatov.space>
Date: Fri, 8 Mar 2024 18:43:19 +0300
Subject: [PATCH] fix: resizable demo not working

---
 .../registry/default/example/ResizableDemo.vue  | 17 +++++++++--------
 .../default/example/ResizableHandleDemo.vue     |  7 ++++---
 .../default/example/ResizableVerticalDemo.vue   |  7 ++++---
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/ResizableDemo.vue b/apps/www/src/lib/registry/default/example/ResizableDemo.vue
index 375f5cf0..e934503a 100644
--- a/apps/www/src/lib/registry/default/example/ResizableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableDemo.vue
@@ -8,24 +8,25 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="demo-group-1"
     direction="horizontal"
     class="max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="50">
+    <ResizablePanel id="demo-panel-1" :default-size="50">
       <div class="flex h-[200px] items-center justify-center p-6">
-        <span class="font-semibold">One</span>
+        <span class="font-semibold">Test</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="50">
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel :default-size="25">
+    <ResizableHandle id="demo-handle-1" />
+    <ResizablePanel id="demo-panel-2" :default-size="50">
+      <ResizablePanelGroup id="demo-group-2" direction="vertical">
+        <ResizablePanel id="demo-panel-3" :default-size="25">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Two</span>
           </div>
         </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel :default-size="75">
+        <ResizableHandle id="demo-handle-2" />
+        <ResizablePanel id="demo-panel-4" :default-size="75">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Three</span>
           </div>
diff --git a/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue b/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
index 9f1a9568..26d0fe39 100644
--- a/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="handle-demo-group-1"
     direction="horizontal"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="handle-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Sidebar</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle with-handle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="handle-demo-handle-1" with-handle />
+    <ResizablePanel id="handle-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>
diff --git a/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue b/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
index 5395fc8f..04a3adfb 100644
--- a/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="vertical-demo-group-1"
     direction="vertical"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="vertical-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Header</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="vertical-demo-handle-1" />
+    <ResizablePanel id="vertical-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>