Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,165 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Select v-model="selectedColumn" @update:model-value="handleColumnToggle">
+      <SelectTrigger class="w-[180px]">
+        <SelectValue placeholder="Toggle columns">
+          <div class="flex items-center gap-2">
+            <Columns class="h-4 w-4" />
+            <span>Columns</span>
+          </div>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="toggle">Toggle Columns</SelectItem>
+        <SelectGroup>
+          <SelectLabel>Basic Columns</SelectLabel>
+          <SelectItem value="thumbnail" @click="toggleColumn('thumbnail')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('thumbnail')" 
+                @change="handleCheckboxChange('thumbnail', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Thumbnail</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="name" @click="toggleColumn('name')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('name')" 
+                @change="handleCheckboxChange('name', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Shot Name</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="episode" @click="toggleColumn('episode')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('episode')" 
+                @change="handleCheckboxChange('episode', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Episode</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="frameRange" @click="toggleColumn('frameRange')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('frameRange')" 
+                @change="handleCheckboxChange('frameRange', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Frame Range</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="status" @click="toggleColumn('status')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('status')" 
+                @change="handleCheckboxChange('status', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Status</span>
+            </div>
+          </SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Task Status Columns</SelectLabel>
+          <SelectItem 
+            v-for="taskType in allTaskTypes"
+            :key="taskType"
+            :value="taskType" 
+            @click="toggleColumn(taskType)"
+          >
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible(taskType)" 
+                @change="handleCheckboxChange(taskType, $event)"
+                class="rounded border-gray-300"
+              />
+              <span>{{ formatTaskType(taskType) }}</span>
+            </div>
+          </SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Other Columns</SelectLabel>
+          <SelectItem value="description" @click="toggleColumn('description')">
+            <div class="flex items-center gap-2">
+              <input 
+                type="checkbox" 
+                :checked="isColumnVisible('description')" 
+                @change="handleCheckboxChange('description', $event)"
+                class="rounded border-gray-300"
+              />
+              <span>Description</span>
+            </div>
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Columns } from 'lucide-vue-next'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { VisibilityState } from '@tanstack/vue-table'
+
+interface Props {
+  columnVisibility: VisibilityState
+  allTaskTypes: string[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:columnVisibility': [visibility: VisibilityState]
+}>()
+
+const selectedColumn = ref('toggle')
+
+const handleColumnToggle = (value: string) => {
+  // Reset selection after interaction
+  selectedColumn.value = 'toggle'
+}
+
+const isColumnVisible = (columnId: string) => {
+  // If not in visibility state, column is visible by default
+  return props.columnVisibility[columnId] !== false
+}
+
+const handleCheckboxChange = (column: string, event: Event) => {
+  const target = event.target as HTMLInputElement
+  updateColumn(column, target.checked)
+}
+
+const toggleColumn = (column: string) => {
+  updateColumn(column, !isColumnVisible(column))
+}
+
+const updateColumn = (column: string, checked: boolean) => {
+  const newVisibility = { ...props.columnVisibility }
+  newVisibility[column] = checked
+  emit('update:columnVisibility', newVisibility)
+}
+
+const formatTaskType = (taskType: string) => {
+  return taskType.charAt(0).toUpperCase() + taskType.slice(1)
+}
+</script>