vitepress-theme-pm 0.1.0

package/src/components/BoardCard.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { Ticket } from '../types'
+import { countCheckboxes } from '../composables/useMarkdown'
+import { computed } from 'vue'
+import ProgressBar from './ProgressBar.vue'
+
+const props = defineProps<{
+  ticket: Ticket
+  color: string
+  selected: boolean
+  ticketPrefix: string
+}>()
+
+defineEmits<{
+  select: []
+  dragstart: [e: DragEvent]
+  dragend: [e: DragEvent]
+}>()
+
+const priorityColors: Record<string, string> = {
+  critical: '#f56565',
+  high: '#ed8936',
+  medium: '#ecc94b',
+  low: '#68d391',
+}
+
+const checks = computed(() => countCheckboxes(props.ticket.body))
+const displayId = computed(() =>
+  props.ticketPrefix ? `${props.ticketPrefix}-${props.ticket.id}` : String(props.ticket.id)
+)
+</script>
+
+<template>
+  <div
+    draggable="true"
+    :style="{
+      background: selected ? '#2d3748' : '#1a202c',
+      border: selected ? `2px solid ${color}` : '1px solid #2d3748',
+      borderRadius: '7px',
+      padding: '10px 12px',
+      cursor: 'grab',
+      userSelect: 'none',
+      transition: 'border-color 0.15s',
+    }"
+    @click="$emit('select')"
+    @dragstart="$emit('dragstart', $event)"
+    @dragend="$emit('dragend', $event)"
+  >
+    <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px">
+      <span style="font-size: 10px; color: #4a5568; font-family: monospace; font-weight: 600">{{ displayId }}</span>
+      <div
+        :style="{
+          width: '6px',
+          height: '6px',
+          borderRadius: '50%',
+          background: priorityColors[ticket.priority] || '#718096',
+          flexShrink: 0,
+        }"
+      />
+    </div>
+    <div style="font-size: 13px; font-weight: 600; color: #e2e8f0; line-height: 1.3">{{ ticket.title }}</div>
+    <div v-if="ticket.tags.length" style="display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px">
+      <span
+        v-for="tag in ticket.tags"
+        :key="tag"
+        style="font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #2d3748; color: #718096"
+      >{{ tag }}</span>
+    </div>
+    <div v-if="checks.total > 0" style="margin-top: 6px">
+      <ProgressBar :done="checks.done" :total="checks.total" :color="color" />
+    </div>
+  </div>
+</template>

package/src/components/BoardColumn.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { Ticket, Column } from '../types'
+import BoardCard from './BoardCard.vue'
+
+defineProps<{
+  column: Column
+  tickets: Ticket[]
+  selectedId: number | null
+  ticketPrefix: string
+  isOver: boolean
+}>()
+
+defineEmits<{
+  select: [id: number]
+  dragstart: [e: DragEvent, id: number]
+  dragend: [e: DragEvent]
+  dragover: [e: DragEvent]
+  dragleave: []
+  drop: [e: DragEvent]
+}>()
+</script>
+
+<template>
+  <div
+    :style="{
+      flex: 1,
+      minWidth: '190px',
+      display: 'flex',
+      flexDirection: 'column',
+      margin: '0 4px',
+      borderRadius: '8px',
+      padding: '6px',
+      background: isOver ? column.color + '0d' : 'transparent',
+      border: isOver ? `2px dashed ${column.color}55` : '2px solid transparent',
+      transition: 'all 0.15s',
+    }"
+    @dragover.prevent="$emit('dragover', $event)"
+    @dragleave="$emit('dragleave')"
+    @drop.prevent="$emit('drop', $event)"
+  >
+    <div
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '4px 8px',
+        marginBottom: '8px',
+        borderBottom: `2px solid ${column.color}`,
+      }"
+    >
+      <span
+        :style="{
+          fontSize: '11px',
+          fontWeight: 700,
+          color: column.color,
+          textTransform: 'uppercase',
+          letterSpacing: '1px',
+        }"
+      >{{ column.label }}</span>
+      <span
+        :style="{
+          fontSize: '11px',
+          color: column.color,
+          background: column.color + '18',
+          padding: '1px 7px',
+          borderRadius: '10px',
+          fontWeight: 600,
+        }"
+      >{{ tickets.length }}</span>
+    </div>
+
+    <div class="board-column-cards" style="flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-bottom: 12px">
+      <BoardCard
+        v-for="ticket in tickets"
+        :key="ticket.id"
+        :ticket="ticket"
+        :color="column.color"
+        :selected="selectedId === ticket.id"
+        :ticket-prefix="ticketPrefix"
+        @select="$emit('select', ticket.id)"
+        @dragstart="$emit('dragstart', $event, ticket.id)"
+        @dragend="$emit('dragend', $event)"
+      />
+      <div
+        v-if="tickets.length === 0"
+        style="padding: 24px; text-align: center; color: rgba(45, 55, 72, 0.4); font-size: 12px; border: 1px dashed #2d3748; border-radius: 8px"
+      >Drop here</div>
+    </div>
+  </div>
+</template>

package/src/components/MarkdownBody.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+
+const emit = defineEmits<{
+  checkboxToggle: [index: number]
+}>()
+
+interface ParsedLine {
+  type: 'checkbox' | 'heading2' | 'heading3' | 'list' | 'empty' | 'code-fence' | 'paragraph'
+  content: string
+  checked?: boolean
+  checkboxIndex?: number
+  indent?: number
+}
+
+function parseLines(text: string): ParsedLine[] {
+  const lines = text.split('\n')
+  let ci = -1
+  return lines.map(line => {
+    const cb = line.match(/^(\s*)- \[([ x])\] (.+)$/)
+    if (cb) {
+      ci++
+      return {
+        type: 'checkbox' as const,
+        content: cb[3],
+        checked: cb[2] === 'x',
+        checkboxIndex: ci,
+        indent: cb[1].length,
+      }
+    }
+    if (line.startsWith('## ')) return { type: 'heading2' as const, content: line.slice(3) }
+    if (line.startsWith('### ')) return { type: 'heading3' as const, content: line.slice(4) }
+    if (line.startsWith('```')) return { type: 'code-fence' as const, content: '' }
+    if (line.startsWith('- ')) return { type: 'list' as const, content: line.slice(2) }
+    if (line.trim() === '') return { type: 'empty' as const, content: '' }
+    return { type: 'paragraph' as const, content: line }
+  })
+}
+</script>
+
+<template>
+  <div v-if="!text" style="color: #4a5568; font-size: 13px; font-style: italic">No content.</div>
+  <div v-else>
+    <template v-for="(line, i) in parseLines(text)" :key="i">
+      <button
+        v-if="line.type === 'checkbox'"
+        style="display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; background: none; border: none; cursor: pointer; text-align: left; width: 100%"
+        :style="{ paddingLeft: 12 + (line.indent || 0) * 12 + 'px' }"
+        @click="emit('checkboxToggle', line.checkboxIndex!)"
+      >
+        <div
+          :style="{
+            width: '15px',
+            height: '15px',
+            borderRadius: '3px',
+            flexShrink: 0,
+            marginTop: '1px',
+            border: line.checked ? 'none' : '2px solid #4a5568',
+            background: line.checked ? '#2d5a2d' : 'transparent',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '9px',
+            color: '#6bcb6b',
+          }"
+        >
+          <span v-if="line.checked">&#10003;</span>
+        </div>
+        <span
+          :style="{
+            fontSize: '13px',
+            color: line.checked ? '#6bcb6b' : '#cbd5e0',
+            opacity: line.checked ? 0.75 : 1,
+            lineHeight: '1.4',
+          }"
+        >{{ line.content }}</span>
+      </button>
+
+      <h2
+        v-else-if="line.type === 'heading2'"
+        style="font-size: 18px; font-weight: 700; color: #e2e8f0; margin: 24px 0 8px 0; padding-bottom: 6px; border-bottom: 1px solid #2d3748"
+      >{{ line.content }}</h2>
+
+      <h3
+        v-else-if="line.type === 'heading3'"
+        style="font-size: 15px; font-weight: 600; color: #a0aec0; margin: 16px 0 6px 0"
+      >{{ line.content }}</h3>
+
+      <div
+        v-else-if="line.type === 'list'"
+        style="font-size: 13px; color: #cbd5e0; padding: 2px 0 2px 16px; line-height: 1.6"
+      >&bull; {{ line.content }}</div>
+
+      <div v-else-if="line.type === 'empty'" style="height: 8px" />
+      <div v-else-if="line.type === 'code-fence'" style="height: 0" />
+
+      <p
+        v-else
+        style="font-size: 14px; color: #cbd5e0; margin: 3px 0; line-height: 1.7"
+      >{{ line.content }}</p>
+    </template>
+  </div>
+</template>

package/src/components/ProgressBar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  done: number
+  total: number
+  color?: string
+}>()
+
+const percentage = computed(() =>
+  props.total === 0 ? 0 : Math.round((props.done / props.total) * 100)
+)
+
+import { computed } from 'vue'
+</script>
+
+<template>
+  <div style="display: flex; align-items: center; gap: 6px">
+    <div style="flex: 1; height: 4px; background: var(--board-border, #2d3748); border-radius: 2px; overflow: hidden">
+      <div
+        :style="{
+          width: percentage + '%',
+          height: '100%',
+          background: color || '#718096',
+          borderRadius: '2px',
+          transition: 'width 0.3s',
+        }"
+      />
+    </div>
+    <span style="font-size: 10px; color: var(--board-text-muted, #718096)">{{ done }}/{{ total }}</span>
+  </div>
+</template>

package/src/components/TagEditor.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+defineProps<{
+  tags: string[]
+}>()
+
+const emit = defineEmits<{
+  add: [tag: string]
+  remove: [tag: string]
+}>()
+
+const tagInput = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function addTag() {
+  const t = tagInput.value.trim().toLowerCase()
+  if (t) {
+    emit('add', t)
+    tagInput.value = ''
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    addTag()
+  }
+  if (e.key === 'Backspace' && tagInput.value === '') {
+    // Remove last tag on backspace in empty input
+    emit('remove', '')
+  }
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+}
+</script>
+
+<template>
+  <div
+    style="display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; background: #0d1117; border: 1px solid #2d3748; border-radius: 6px; min-height: 32px; cursor: text"
+    @click="focusInput"
+  >
+    <span
+      v-for="tag in tags"
+      :key="tag"
+      style="display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #2d3748; color: #a0aec0; white-space: nowrap"
+    >
+      {{ tag }}
+      <button
+        style="background: none; border: none; color: #718096; cursor: pointer; font-size: 12px; padding: 0; line-height: 1; display: flex; align-items: center"
+        @click.stop="emit('remove', tag)"
+      >&times;</button>
+    </span>
+    <input
+      ref="inputRef"
+      v-model="tagInput"
+      placeholder="Add tag..."
+      style="flex: 1; min-width: 60px; font-size: 12px; padding: 2px 0; background: transparent; border: none; color: #e2e8f0; outline: none"
+      @keydown="onKeydown"
+      @blur="addTag"
+    >
+  </div>
+</template>

package/src/components/TicketDetail.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue'
+import type { Ticket, Column } from '../types'
+import { countCheckboxes, toggleCheckbox } from '../composables/useMarkdown'
+import MarkdownBody from './MarkdownBody.vue'
+import ProgressBar from './ProgressBar.vue'
+import TagEditor from './TagEditor.vue'
+
+const props = withDefaults(defineProps<{
+  ticket: Ticket
+  columns: Column[]
+  ticketPrefix: string
+  createMode?: boolean
+}>(), {
+  createMode: false,
+})
+
+const emit = defineEmits<{
+  close: []
+  update: [id: number, patch: Partial<Ticket>]
+  delete: [id: number]
+  create: []
+}>()
+
+const priorityOptions = ['critical', 'high', 'medium', 'low'] as const
+const priorityColors: Record<string, string> = {
+  critical: '#f56565',
+  high: '#ed8936',
+  medium: '#ecc94b',
+  low: '#68d391',
+}
+
+const editing = ref(false)
+const draft = ref(props.ticket.body)
+const editTitle = ref(false)
+const titleDraft = ref(props.ticket.title)
+const titleRef = ref<HTMLInputElement | null>(null)
+
+const col = computed(() => props.columns.find(c => c.key === props.ticket.status))
+const checks = computed(() => countCheckboxes(props.ticket.body))
+const displayId = computed(() =>
+  props.ticketPrefix ? `${props.ticketPrefix}-${props.ticket.id}` : String(props.ticket.id)
+)
+
+watch(() => props.ticket.id, () => {
+  draft.value = props.ticket.body
+  titleDraft.value = props.ticket.title
+  editing.value = false
+  editTitle.value = false
+})
+
+watch(editTitle, (val) => {
+  if (val) nextTick(() => titleRef.value?.focus())
+})
+
+function onEscape(e: KeyboardEvent) {
+  if (e.key === 'Escape' && !editTitle.value && !editing.value) emit('close')
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onEscape)
+  if (props.createMode) {
+    editTitle.value = true
+  }
+})
+onUnmounted(() => document.removeEventListener('keydown', onEscape))
+
+function saveBody() {
+  emit('update', props.ticket.id, { body: draft.value })
+  editing.value = false
+}
+
+function saveTitle() {
+  if (titleDraft.value.trim()) {
+    emit('update', props.ticket.id, { title: titleDraft.value.trim() })
+  }
+  editTitle.value = false
+}
+
+function onCheckboxToggle(idx: number) {
+  emit('update', props.ticket.id, { body: toggleCheckbox(props.ticket.body, idx) })
+}
+
+function addTag(tag: string) {
+  if (tag && !props.ticket.tags.includes(tag)) {
+    emit('update', props.ticket.id, { tags: [...props.ticket.tags, tag] })
+  }
+}
+
+function removeTag(tag: string) {
+  if (!tag) {
+    if (props.ticket.tags.length > 0) {
+      emit('update', props.ticket.id, { tags: props.ticket.tags.slice(0, -1) })
+    }
+    return
+  }
+  emit('update', props.ticket.id, { tags: props.ticket.tags.filter(t => t !== tag) })
+}
+
+function onBackdropClick(e: MouseEvent) {
+  if ((e.target as HTMLElement).classList.contains('ticket-modal-backdrop')) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <!-- Modal backdrop -->
+  <div
+    class="ticket-modal-backdrop"
+    style="position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px)"
+    @click="onBackdropClick"
+  >
+    <!-- Modal container -->
+    <div style="width: 90vw; max-width: 960px; height: 80vh; max-height: 700px; background: #0d1117; border: 1px solid #2d3748; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.4)">
+
+      <!-- Header bar -->
+      <div style="display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #2d3748; flex-shrink: 0; background: #171923; gap: 12px">
+        <!-- Ticket ID badge -->
+        <span v-if="!createMode" style="font-size: 13px; font-weight: 700; color: #718096; font-family: monospace; white-space: nowrap; flex-shrink: 0">{{ displayId }}</span>
+        <span v-else style="font-size: 13px; font-weight: 700; color: #6bcb6b; font-family: monospace; white-space: nowrap; flex-shrink: 0">NEW</span>
+
+        <!-- Title (selectable text, not click-to-edit) -->
+        <div v-if="editTitle" style="flex: 1; min-width: 0">
+          <input
+            ref="titleRef"
+            v-model="titleDraft"
+            style="width: 100%; font-size: 18px; font-weight: 700; color: #e2e8f0; background: #0d1117; border: 1px solid #e6a817; border-radius: 4px; padding: 4px 10px; outline: none"
+            @blur="saveTitle"
+            @keydown.enter="saveTitle"
+            @keydown.escape.stop="editTitle = false"
+          >
+        </div>
+        <h2
+          v-else
+          style="margin: 0; font-size: 18px; font-weight: 700; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+        >{{ ticket.title }}</h2>
+
+        <!-- Edit title button -->
+        <button
+          v-if="!editTitle"
+          title="Edit title"
+          style="background: none; border: 1px solid #2d3748; color: #718096; cursor: pointer; font-size: 13px; padding: 4px 8px; border-radius: 4px; flex-shrink: 0; line-height: 1"
+          @click="titleDraft = ticket.title; editTitle = true"
+        >&#9998;</button>
+
+        <!-- Close button -->
+        <button
+          style="background: none; border: none; color: #718096; cursor: pointer; font-size: 20px; padding: 4px 8px; flex-shrink: 0; line-height: 1"
+          @click="emit('close')"
+        >&times;</button>
+      </div>
+
+      <!-- Two-column body -->
+      <div style="flex: 1; display: flex; overflow: hidden">
+
+        <!-- Left: Description -->
+        <div style="flex: 1; overflow-y: auto; padding: 24px; min-width: 0">
+          <div v-if="checks.total > 0" style="margin-bottom: 16px">
+            <ProgressBar :done="checks.done" :total="checks.total" :color="col?.color || '#718096'" />
+          </div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
+            <span style="font-size: 12px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700">Description</span>
+            <button
+              v-if="!editing"
+              style="font-size: 12px; color: #e6a817; background: none; border: 1px solid rgba(230, 168, 23, 0.27); border-radius: 4px; padding: 3px 12px; cursor: pointer"
+              @click="draft = ticket.body; editing = true"
+            >Edit</button>
+            <div v-else style="display: flex; gap: 6px">
+              <button
+                style="font-size: 12px; color: #6bcb6b; background: rgba(107, 203, 107, 0.09); border: 1px solid rgba(107, 203, 107, 0.27); border-radius: 4px; padding: 3px 12px; cursor: pointer"
+                @click="saveBody"
+              >Save</button>
+              <button
+                style="font-size: 12px; color: #718096; background: none; border: 1px solid #2d3748; border-radius: 4px; padding: 3px 12px; cursor: pointer"
+                @click="editing = false"
+              >Cancel</button>
+            </div>
+          </div>
+
+          <textarea
+            v-if="editing"
+            v-model="draft"
+            placeholder="Markdown here... Use - [ ] for checkboxes"
+            style="width: 100%; min-height: 300px; padding: 12px; font-size: 13px; background: #171923; color: #e2e8f0; border: 1px solid rgba(230, 168, 23, 0.27); border-radius: 6px; resize: vertical; font-family: 'JetBrains Mono', monospace; line-height: 1.6; outline: none; box-sizing: border-box"
+          />
+          <MarkdownBody v-else :text="ticket.body" @checkbox-toggle="onCheckboxToggle" />
+        </div>
+
+        <!-- Right: Metadata sidebar -->
+        <div style="width: 280px; flex-shrink: 0; border-left: 1px solid #2d3748; overflow-y: auto; padding: 24px; background: #171923">
+
+          <!-- Status -->
+          <div style="margin-bottom: 20px">
+            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">Status</label>
+            <div style="position: relative">
+              <select
+                :value="ticket.status"
+                style="width: 100%; appearance: none; font-size: 13px; padding: 7px 32px 7px 10px; background: #0d1117; border: 1px solid #2d3748; border-radius: 6px; color: #e2e8f0; outline: none; cursor: pointer"
+                @change="emit('update', ticket.id, { status: ($event.target as HTMLSelectElement).value })"
+              >
+                <option
+                  v-for="c in columns"
+                  :key="c.key"
+                  :value="c.key"
+                >{{ c.label }}</option>
+              </select>
+              <div style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #718096; font-size: 10px">&#9660;</div>
+            </div>
+          </div>
+
+          <!-- Priority -->
+          <div style="margin-bottom: 20px">
+            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">Priority</label>
+            <div style="position: relative">
+              <select
+                :value="ticket.priority"
+                style="width: 100%; appearance: none; font-size: 13px; padding: 7px 32px 7px 10px; background: #0d1117; border: 1px solid #2d3748; border-radius: 6px; color: #e2e8f0; outline: none; cursor: pointer"
+                @change="emit('update', ticket.id, { priority: ($event.target as HTMLSelectElement).value as any })"
+              >
+                <option v-for="p in priorityOptions" :key="p" :value="p">{{ p.charAt(0).toUpperCase() + p.slice(1) }}</option>
+              </select>
+              <div style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #718096; font-size: 10px">&#9660;</div>
+            </div>
+          </div>
+
+          <!-- Tags -->
+          <div style="margin-bottom: 20px">
+            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">Tags</label>
+            <TagEditor :tags="ticket.tags" @add="addTag" @remove="removeTag" />
+          </div>
+
+          <!-- Ticket ID -->
+          <div v-if="!createMode" style="margin-bottom: 20px">
+            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">ID</label>
+            <span style="font-size: 13px; color: #4a5568; font-family: monospace">{{ displayId }}</span>
+          </div>
+
+          <!-- Create / Delete -->
+          <div style="padding-top: 20px; border-top: 1px solid #2d3748">
+            <button
+              v-if="createMode"
+              style="font-size: 12px; color: #6bcb6b; background: rgba(107, 203, 107, 0.09); border: 1px solid rgba(107, 203, 107, 0.27); border-radius: 6px; padding: 6px 14px; cursor: pointer; width: 100%; font-weight: 600"
+              @click="emit('create')"
+            >Create ticket</button>
+            <button
+              v-else
+              style="font-size: 12px; color: #f56565; background: none; border: 1px solid rgba(245, 101, 101, 0.27); border-radius: 6px; padding: 6px 14px; cursor: pointer; width: 100%"
+              @click="emit('delete', ticket.id)"
+            >Delete ticket</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/composables/useDragDrop.ts

@@ -0,0 +1,47 @@
+import { ref } from 'vue'
+
+export function useDragDrop(onDrop: (ticketId: string, targetColumn: string) => void) {
+  const dragOverColumn = ref<string | null>(null)
+
+  function handleDragStart(e: DragEvent, ticketId: string) {
+    if (!e.dataTransfer) return
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', ticketId)
+    requestAnimationFrame(() => {
+      const el = e.target as HTMLElement
+      el.style.opacity = '0.4'
+    })
+  }
+
+  function handleDragEnd(e: DragEvent) {
+    const el = e.target as HTMLElement
+    el.style.opacity = '1'
+    dragOverColumn.value = null
+  }
+
+  function handleDragOver(e: DragEvent, columnKey: string) {
+    e.preventDefault()
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+    dragOverColumn.value = columnKey
+  }
+
+  function handleDragLeave() {
+    dragOverColumn.value = null
+  }
+
+  function handleDrop(e: DragEvent, columnKey: string) {
+    e.preventDefault()
+    const ticketId = e.dataTransfer?.getData('text/plain')
+    if (ticketId) onDrop(ticketId, columnKey)
+    dragOverColumn.value = null
+  }
+
+  return {
+    dragOverColumn,
+    handleDragStart,
+    handleDragEnd,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  }
+}