feat(client): responsive layout for components panel (#298)

vuejs · Mar 28, 2024 · 7efb026 · 7efb026
1 parent c7097ea
commit 7efb026
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
@@ -259,11 +259,18 @@ watchDebounced(filterName, (v) => {
 }, { debounce: 300 })
 
 const devtoolsState = useDevToolsState()
+
+// responsive layout
+const splitpanesRef = ref<HTMLDivElement>()
+const splitpanesReady = ref(false)
+const { width: splitpanesWidth } = useElementSize(splitpanesRef)
+// prevent `Splitpanes` layout from being changed before it ready
+const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
 </script>
 
 <template>
   <PanelGrids h-screen>
-    <Splitpanes>
+    <Splitpanes ref="splitpanesRef" :horizontal="horizontal" @ready="splitpanesReady = true">
       <Pane flex flex-col border="r base">
         <div w-full flex gap2 px2 py2>
           <VueInput v-if="loaded" v-model="filterName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />