fix: update column width on column resize by dragging

frontend/src/components/ColumnItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
+  >
+    <div class="flex items-center gap-2">
+      <DragIcon class="h-3.5" />
+      <div>{{ column.label }}</div>
+    </div>
+    <div class="flex cursor-pointer items-center gap-1">
+      <Button
+        variant="ghost"
+        class="!h-5 w-5 !p-1"
+        @click="emit('edit', column)"
+      >
+        <EditIcon class="h-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        class="!h-5 w-5 !p-1"
+        @click="emit('remove', column)"
+      >
+        <FeatherIcon name="x" class="h-3.5" />
+      </Button>
+    </div>
+  </div>
+</template>
+<script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import DragIcon from '@/components/Icons/DragIcon.vue'
+import { watchDebounced } from '@vueuse/core'
+
+const props = defineProps({
+  column: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['edit', 'remove', 'update'])
+
+watchDebounced(
+  () => props.column.width,
+  (val, old_val) => {
+    val = val.replace(/[^\d.]/g, '')
+    old_val = old_val.replace(/[^\d.]/g, '')
+    if (Math.abs(val - old_val) > 1) return
+    emit('update')
+  },
+  { debounce: 1000 }
+)
+</script>

frontend/src/components/ColumnSettings.vue

@@ -19,30 +19,12 @@
             class="list-group"
           >
             <template #item="{ element }">
-              <div
+              <ColumnItem
-                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
+                :column="element"
-              >
+                @edit="editColumn"
-                <div class="flex items-center gap-2">
+                @remove="removeColumn"
-                  <DragIcon class="h-3.5" />
+                @update="apply"
-                  <div>{{ element.label }}</div>
+              />
-                </div>
-                <div class="flex cursor-pointer items-center gap-1">
-                  <Button
-                    variant="ghost"
-                    class="!h-5 w-5 !p-1"
-                    @click="editColumn(element)"
-                  >
-                    <EditIcon class="h-3.5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    class="!h-5 w-5 !p-1"
-                    @click="removeColumn(element)"
-                  >
-                    <FeatherIcon name="x" class="h-3.5" />
-                  </Button>
-                </div>
-              </div>
             </template>
           </Draggable>
           <div class="mt-1.5 flex flex-col gap-1 border-t pt-1.5">
@@ -135,8 +117,7 @@
 
 <script setup>
 import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
-import EditIcon from '@/components/Icons/EditIcon.vue'
+import ColumnItem from '@/components/ColumnItem.vue'
-import DragIcon from '@/components/Icons/DragIcon.vue'
 import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'