dynamic width

src/views/Issues/IssuesListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useIssueStore } from '@/stores/issue'
 import { useProjectStore } from '@/stores/project.ts'
@@ -10,6 +10,8 @@ import type { Issue } from '@/api/issue.api.ts'
 import IssuesListElement from '@/components/IssuesListElement.vue'
 import IssueStats from '@/components/IssueStats.vue'
 import IssueFilter from '@/components/IssueFilter.vue'
+import SplitHandle from '@/components/SplitHandle.vue'
+import { useSplitPane } from '@/composables/useSplitPane.ts'
 
 const issueStore = useIssueStore()
 const issueDetailsRef = ref<InstanceType<typeof IssueDetails>>()
@@ -90,7 +92,9 @@ onMounted(async () => {
   await load()
   await issueStore.getStat(currentProjectId.value)
 })
-const gridTemplate = computed(() => (selected.value.length ? '1fr 1fr' : '1fr'))
+const splitContainer = useTemplateRef<HTMLElement>('splitContainer')
+const split = useSplitPane(splitContainer, { storageKey: 'issues-list', min: 0.25, max: 0.75 })
+const gridTemplate = computed(() => (selected.value.length ? split.gridTemplate.value : '1fr'))
 const goToIssue = (key: string[]) => router.push(`/issues/${key[0]}`)
 
 async function updatePage(val: number) {
@@ -184,7 +188,7 @@ async function onDeleteBatch() {
 
 <template>
   <div class="d-flex flex-column ga-2 h-100">
-    <div class="u-grid ga-1">
+    <div ref="splitContainer" class="u-grid">
       <div class="u-height">
         <issue-filter
           class="mb-2"
@@ -274,6 +278,8 @@ async function onDeleteBatch() {
         </div>
       </div>
 
+      <split-handle v-if="selected.length" v-bind="split.handleProps.value" />
+
       <v-sheet border v-if="selected.length" class="d-flex flex-column">
         <div class="d-flex align-center ga-2 px-4 py-2">
           <div>Work item</div>