@oneclick.dev/cms-kit 0.0.1

package/components/ui/media-picker/MediaPickerDialog.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import { Plus, Folder, ChevronLeft, Images } from 'lucide-vue-next'
+import Dropzone from './media-picker-dialog/Dropzone.vue'
+import Filters from './media-picker-dialog/Filters.vue'
+import FileItem from './media-picker-dialog/FileItem.vue'
+import { formatFileSize } from '../../../lib/utils'
+import { cn } from '../../../lib/utils'
+
+interface PENDING_FILE {
+  id: string
+  name: string
+  size: number
+  file: File,
+  contentType: string,
+  path: string,
+  url: string,
+  status: 'pending' | 'uploading' | 'error'
+  updated: Date
+}
+
+const route = useRoute()
+
+const emit = defineEmits(['submit'])
+
+const props = defineProps({
+  sources: {
+    type: Array,
+    required: true
+  },
+  maxFiles: {
+    type: Number
+  }
+})
+
+const dialogOpen = ref(false)
+
+const project = ref(route.params.slug as string)
+
+const { getMediaSource } = useMediaLibrary()
+const activeSourceId = ref('')
+const activeSource = ref({});
+
+const folders = ref<any[]>([])
+const files = ref<any[]>([])
+const fileCount = ref(0)
+const currentPath = ref('')
+const navigationHistory = ref<string[]>([])
+const effectiveBasePath = ref('')
+
+const search = ref('')
+const sort: 'name' | 'name-desc' | 'size' | 'size-desc' | 'date' | 'date-desc' = ref('name-asc')
+const selectedFiles = ref<string[]>([])
+provide('search', search)
+provide('sort', sort)
+
+const PENDING_FILES = ref<PENDING_FILE[]>([])
+provide('pendingFiles', PENDING_FILES)
+
+const filteredFolders = computed(() => {
+  let filtered = [...folders.value]
+  if (search.value) {
+    filtered = filtered.filter(folder => folder.name.toLowerCase().includes(search.value.toLowerCase()))
+  }
+  return filtered.sort((a, b) => {
+    if (sort.value === 'name') return a.name.localeCompare(b.name)
+    if (sort.value === 'name-desc') return b.name.localeCompare(a.name)
+    return 0
+  })
+})
+
+const filteredFiles = computed(() => {
+  function formatPath(path: string) {
+    if (path[0] === '/') path = path.substring(1)
+    if (path[path.length - 1] === '/') path = path.substring(0, path.length - 1)
+    return path
+  }
+  
+  const pendingFiles = PENDING_FILES.value.filter(file => formatPath(file.path) === formatPath(currentPath.value))
+
+  let filtered = [...files.value]
+  if (search.value) {
+    filtered = filtered.filter(file => file.name.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  return [...filtered, ...pendingFiles].sort((a, b) => {
+    if (sort.value === 'name') return a.name.localeCompare(b.name)
+    if (sort.value === 'name-desc') return b.name.localeCompare(a.name)
+    if (sort.value === 'size') return a.size - b.size
+    if (sort.value === 'size-desc') return b.size - a.size
+    if (sort.value === 'date') return new Date(a.updated).getTime() - new Date(b.updated).getTime()
+    if (sort.value === 'date-desc') return new Date(b.updated).getTime() - new Date(a.updated).getTime()
+    return 0
+  })
+})
+
+watch(() => activeSourceId.value, async () => {
+  activeSource.value = await getMediaSource(project.value, activeSourceId.value)
+  setEffectiveBasePath()
+  currentPath.value = activeSource.value.path
+  navigationHistory.value = []
+  search.value = ''
+  loadContent(activeSource.value.path)
+})
+
+const addImage = (file) => {
+  emit('select-image', {
+    name: file.name.split('/').pop(),
+    url: file.url,
+    size: file.size,
+    contentType: file.contentType,
+    path: file.name
+  })
+}
+
+const loading = ref(false)
+const error = ref('')
+
+const reload = () => {
+  loadContent(currentPath.value, true)
+}
+provide('reload', reload)
+
+const loadContent = async (path?: string, softReload = false) => {
+  error.value = ''
+  if (!softReload) {
+    loading.value = true
+  }
+
+  if (path?.[0] === '/') {
+    path = path.substring(1)
+  }
+  
+  try {
+    const { getStorageContent } = useMediaLibrary()
+
+    if (effectiveBasePath.value && path !== undefined) {
+      const normalizedPath = path === '' ? '' : (path.endsWith('/') ? path : `${path}/`)
+      const normalizedBasePath = effectiveBasePath.value === '' ? '' : 
+        (effectiveBasePath.value.endsWith('/') ? effectiveBasePath.value : `${effectiveBasePath.value}/`)
+
+      if (path !== '' && !normalizedPath.startsWith(normalizedBasePath)) {
+        currentPath.value = effectiveBasePath.value
+      } else {
+        currentPath.value = path
+      }
+    } else if (path !== undefined) {
+      currentPath.value = path
+    }
+    
+    const res = await getStorageContent(activeSource.value.id, currentPath.value);
+
+    folders.value = (res.folders || []).filter(folder => {
+      const folderPath = folder.path
+      const parentPath = currentPath.value ? currentPath.value : ''
+      
+      const relativePath = folderPath.startsWith(parentPath) ? folderPath.substring(parentPath.length) : folderPath
+      const pathParts = relativePath.split('/').filter(Boolean)
+      
+      return pathParts.length === 1
+    })
+    
+    files.value = (res.files || []).filter(file => {
+      const filePath = file.name
+      const parentPath = currentPath.value ? currentPath.value : ''
+      
+      if (!filePath.startsWith(parentPath)) return false
+      
+      const relativePath = filePath.substring(parentPath.length)
+      const pathParts = relativePath.split('/').filter(Boolean)
+      
+      return pathParts.length === 1
+    })
+    
+    fileCount.value = files.value.length
+  } catch (err) {
+    error.value = 'Failed to load files. Please try again.'
+    folders.value = []
+    files.value = []
+    fileCount.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const navigateToFolder = (folderPath: string) => {
+  search.value = ''
+  navigationHistory.value.push(currentPath.value)
+  loadContent(folderPath)
+}
+
+const navigateBack = () => {
+  search.value = ''
+  if (navigationHistory.value.length > 0) {
+    const previousPath = navigationHistory.value.pop()
+    
+    if (previousPath && (previousPath.startsWith(effectiveBasePath.value) || previousPath === '')) {
+      loadContent(previousPath)
+    } else {
+      navigationHistory.value = []
+      loadContent(effectiveBasePath.value)
+    }
+  }
+}
+
+const toggleFile = (file: any) => {
+  if (selectedFiles.value.includes(file.url)) {
+    selectedFiles.value = selectedFiles.value.filter(url => url !== file.url)
+  } else {
+    if (props.maxFiles !== undefined && selectedFiles.value.length >= props.maxFiles && props.maxFiles === 1) {
+      selectedFiles.value = [file.url]
+    } else {
+      selectedFiles.value.push(file.url)
+    }
+  }
+}
+
+const onSubmit = () => {
+  emit('submit', props.maxFiles === 1 ? selectedFiles.value[0] : selectedFiles.value)
+  dialogOpen.value = false
+  selectedFiles.value = []
+  search.value = ''
+}
+
+const setEffectiveBasePath = () => {
+  effectiveBasePath.value = props.sources?.[0]?.path || ''
+  if (effectiveBasePath.value[0] === '/') {
+    effectiveBasePath.value = effectiveBasePath.value.substring(1)
+  }
+}
+
+onMounted(() => {
+  activeSourceId.value = props.sources?.[0] || ''
+  setEffectiveBasePath()
+})
+</script>
+
+<template>
+  <Dialog v-model:open="dialogOpen">
+    <DialogTrigger asChild>
+      <slot />
+    </DialogTrigger>
+    <DialogScrollContent class="w-[90%] md:w-[90%] sm:max-w-[1500px]">
+      <DialogHeader class="sticky -top-6 pt-10 pb-2 -mt-6 z-10 bg-background">
+        <div class="flex items-center gap-2">
+          <Button 
+            v-if="navigationHistory?.length > 0" 
+            variant="outline" 
+            size="icon" 
+            @click="navigateBack"
+          >
+            <ChevronLeft class="size-4" />
+          </Button>
+          <DialogTitle class="flex items-center gap-2">
+            <MediaSourceSelect :sources="sources" v-model="activeSourceId" />
+          </DialogTitle>
+        </div>
+        <DialogDescription>
+          {{ currentPath !== effectiveBasePath.value ? (currentPath === '' ? 'Root' : "/" + currentPath) : '' }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div>
+        <div v-if="loading" class="py-8 text-center">
+          <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
+          <p class="mt-2 text-gray-500">Loading files...</p>
+        </div>
+        
+        <div v-else-if="error" class="p-4 text-center">
+          <div class="text-red-500 mb-2">{{ error }}</div>
+          <Button @click="loadContent(currentPath)" variant="outline">Retry</Button>
+        </div>
+        
+        <div v-else>
+          <Dropzone :activeSourceId="activeSourceId" :path="currentPath" />
+
+          <template v-if="files.length > 0 || folders.length > 0">
+            <Filters :showNewFolder="activeSource.allowUserFolders" />
+  
+            <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 overflow-y-auto">
+              <div 
+                v-for="folder in filteredFolders"
+                :key="folder.path"
+                @click="navigateToFolder(folder.path)"
+                :class="cn('cursor-pointer border rounded-md p-2 hover:bg-muted dark:hover:bg-muted/30 transition-colors flex items-center gap-2',
+                           selectedFiles
+                )"
+              >
+                <Folder class="size-5 text-blue-600" />
+                <span class="truncate">{{ folder.name }}</span>
+              </div>
+              
+              <FileItem :file="file" v-for="file in filteredFiles" :key="file.url" :selected="selectedFiles.includes(file.url)" @toggle="toggleFile(file)" />
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <DialogFooter class="sticky -bottom-6 pb-10 pt-2 -mb-6 z-10 bg-background">
+        <Button @click="onSubmit" :disabled="selectedFiles?.length === 0">
+          {{selectedFiles?.length > 0 ? `Add ${selectedFiles?.length} ${selectedFiles?.length === 1 ? 'file' : 'files'}` : '0 files selected' }}
+        </Button>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
+</template>

package/components/ui/media-picker/MediaPickerItems.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { inject, computed, ref, onMounted, watch, nextTick } from 'vue'
+import Button from '../button/Button.vue'
+import MediaPickerDialog from './MediaPickerDialog.vue'
+import { Minus, Check, GripVertical, Plus, Upload } from 'lucide-vue-next'
+import gsap from 'gsap'
+import { Draggable } from 'gsap/Draggable'
+
+// Register the Draggable plugin
+gsap.registerPlugin(Draggable)
+
+interface MediaItem {
+  id: string
+  url: string
+  name?: string
+  [key: string]: any
+}
+
+type MediaItemType = string | MediaItem
+
+const sources = inject('sources')
+
+// Get the media items from the provider with proper typing
+const items = inject<{ value: MediaItemType[] }>('media-items', { value: [] })
+const updateItems = inject<(newItems: MediaItemType[]) => void>('update-media-items', () => {})
+
+const selectedItems = ref([])
+const itemsContainer = ref(null)
+const originalItemsArray = ref(null) // Store the original array during dragging
+const draggingItemIndex = ref(-1) // Track which item is being dragged
+const lastHoveredIndex = ref(-1) // Track the last hovered grid position
+
+const showAll = ref(false)
+
+const fileSelectorCheckboxState = computed(() => {
+  if (selectedItems.value.length === items.value.length) return true
+  if (selectedItems.value.length === 0) return false
+  return 'indeterminate'
+})
+
+const updateChecked = (event, id: string) => {
+  // Stop propagation to prevent interfering with drag
+  event.stopPropagation()
+  
+  if (selectedItems.value.includes(id)) {
+    selectedItems.value = selectedItems.value.filter((item) => item !== id)
+    return
+  }
+  selectedItems.value.push(id)
+}
+
+const onFileSelectorCheckboxClick = () => {
+  if (fileSelectorCheckboxState.value === true) {
+    selectedItems.value = []
+    return
+  }
+  selectedItems.value = items.value.map((item) => item.id)
+}
+
+const onRemoveSelectedClick = () => {
+  if (!selectedItems.value.length) return
+  
+  const currentArray = [...items.value]
+  selectedItems.value.forEach((id) => {
+    const index = currentArray.findIndex((item) => item.id === id)
+    if (index !== -1) {
+      currentArray.splice(index, 1)
+    }
+  })
+  updateItems(currentArray)
+  selectedItems.value = []
+}
+
+const getDraggableElements = () => {
+  if (!itemsContainer.value) return []
+  return itemsContainer.value.querySelectorAll('.draggable-item')
+}
+
+let draggableInstances = []
+const firstItemPosition = ref({ row: 0, col: 0 }) // Track the position of the first (2x2) item
+
+
+let rafId = null
+let lastDragEvent = null
+let currentDragTarget = null
+
+const onDragHandler = () => {
+  if (!lastDragEvent || !currentDragTarget) return
+  
+  const e = lastDragEvent
+  const mouseX = e.clientX
+  const mouseY = e.clientY
+  
+  // Find the background grid container
+  const backgroundGrid = document.querySelector('.background-grid');
+  if (!backgroundGrid) return;
+  
+  // Get the grid's position
+  const gridRect = backgroundGrid.getBoundingClientRect();
+  
+  // Check if the mouse is inside the grid
+  if (mouseX >= gridRect.left && mouseX <= gridRect.right &&
+      mouseY >= gridRect.top && mouseY <= gridRect.bottom) {
+      
+    // Get all grid items within the background grid
+    const gridItems = backgroundGrid.querySelectorAll('[data-index]');
+    
+    // Find which grid item the mouse is over
+    for (let i = 0; i < gridItems.length; i++) {
+      const item = gridItems[i];
+      const itemRect = item.getBoundingClientRect();
+      
+      if (mouseX >= itemRect.left && mouseX <= itemRect.right &&
+          mouseY >= itemRect.top && mouseY <= itemRect.bottom) {
+        
+        // Get info about the hovered grid item
+        const dataIndex = parseInt(item.getAttribute('data-index'), 10);
+        const isLarge = item.classList.contains('col-span-2');
+
+        // Only update when hovering over a new grid position
+        if (dataIndex !== lastHoveredIndex.value && originalItemsArray.value) {
+          lastHoveredIndex.value = dataIndex;
+
+          let { x: x1, y: y1 } = document.querySelector('.background-grid [data-index="' + draggingItemIndex.value + '"]').getBoundingClientRect()
+          let { x: x2, y: y2 } = document.querySelector('.background-grid [data-index="' + dataIndex + '"]').getBoundingClientRect()
+          
+          currentDragTarget.style.top = y1 - y2 + 'px'
+          currentDragTarget.style.left = x1 - x2 + 'px'
+          
+          // Create a new array based on the original order
+          const newOrder = [...originalItemsArray.value];
+          
+          // Get the item being dragged
+          const draggedItem = newOrder[draggingItemIndex.value];
+          
+          // Remove the dragged item from its original position
+          newOrder.splice(draggingItemIndex.value, 1);
+          
+          // Insert it at the new position
+          newOrder.splice(dataIndex, 0, draggedItem);
+          
+          // Update the displayed order (this will trigger a reactive update)
+          updateItems(newOrder);
+        }
+        
+        break; // No need to check other items once we found the match
+      }
+    }
+  }
+
+  rafId = requestAnimationFrame(onDragHandler)
+}
+
+const initDraggable = () => {
+  draggableInstances.forEach(instance => {
+    if (instance && instance.kill) {
+      instance.kill()
+    }
+  })
+  draggableInstances = []
+
+  nextTick(() => {
+    const elements = getDraggableElements()
+    if (!elements.length) return
+    
+    try {
+      const instance = Draggable.create(elements, {
+        type: 'x,y',
+        edgeResistance: 0.65,
+        bounds: itemsContainer.value,
+        onPress: function() {
+          // Save the original array and dragging item index when starting drag
+          originalItemsArray.value = [...items.value]
+          draggingItemIndex.value = parseInt(this.target.getAttribute('data-index'), 10)
+          lastHoveredIndex.value = -1 // Reset last hovered
+          this.target.classList.add('dragging')
+          currentDragTarget = this.target
+        },
+        onRelease: function(e) {
+          this.target.classList.remove('dragging')
+          
+          // Cancel any existing animation frame
+          if (rafId) {
+            cancelAnimationFrame(rafId)
+            rafId = null
+          }
+          
+          // Create a GSAP animation for smoothly resetting the transform
+          gsap.to(this.target, {
+            top: 0,
+            left: 0,
+            x: 0,
+            y: 0,
+            duration: 0.3,
+            ease: 'power3.out',
+            clearProps: 'transform',
+            onComplete: () => {
+              originalItemsArray.value = null
+              draggingItemIndex.value = -1
+              lastHoveredIndex.value = -1
+            }
+          });
+        },
+        onDrag: function(e) {
+          lastDragEvent = e
+          if (!rafId) {
+            rafId = requestAnimationFrame(onDragHandler)
+          }
+        }
+      })
+      
+      draggableInstances.push(instance)
+    } catch (err) {
+      console.error('Error initializing draggable:', err)
+    }
+  })
+}
+
+const openMedia = (e, id) => {
+  console.log('open media', id)
+}
+
+const addMedia = (urls: string[]) => {
+  items.value.push(...urls)
+  updateItems(items.value)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    initDraggable()
+  }, 500)
+})
+
+watch(() => items.value.length, () => {
+  setTimeout(() => {
+    initDraggable()
+  }, 100)
+})
+</script>
+
+<template>
+  <div v-if="selectedItems.length" class="flex items-center justify-between gap-2">
+    <Button @click="onFileSelectorCheckboxClick" variant="ghost" size="sm">
+      <Checkbox :model-value="fileSelectorCheckboxState" tabindex="-1" class="pointer-events-none data-[state=checked]:bg-black data-[state=checked]:text-white data-[state=checked]:border-muted border-muted group-focus-visible:ring-0">
+        <Minus class="size-3" v-if="fileSelectorCheckboxState === 'indeterminate'" />
+        <Check class="size-3" v-else />
+      </Checkbox>
+      <p class="text-muted-foreground text-sm ml-1">{{ selectedItems.length }} files selected</p>
+    </Button>
+    <Button variant="outline" size="sm" class="text-red-500 hover:text-red-600" @click="onRemoveSelectedClick">Remove</Button>
+  </div>
+
+  <div class="relative">
+    <!-- Background grid -->
+    <div class="background-grid absolute w-full grid grid-cols-6 gap-2 top-4">
+      <div v-for="(item, index) in showAll ? items : items.slice(0, 8)" :key="item.id" class="relative -m-1 p-1" :data-index="index" :class="{
+        'col-start-1 col-span-2 row-start-1 row-span-2': index === 0
+      }">
+        <div class="w-full h-full bg-muted/80 rounded-md aspect-square"></div>
+        <div @click="showAll = true" v-if="!showAll && items.length > 8 && index === 7" class="absolute top-0 left-0 w-[calc(100%-8px)] h-[calc(100%-8px)] bg-black/30 rounded-md aspect-square z-10 flex items-center justify-center backdrop-blur-sm m-1 cursor-pointer">
+          + {{ items.length - 7 }}
+        </div>
+      </div>
+      <div class="-m-1 p-1 col-start-1 col-span-2 row-start-1 row-span-2" data-index="0" v-if="items.length == 0">
+        <div class="w-full h-full bg-muted/80 rounded-md aspect-square"></div>
+      </div>
+      <div class="-m-1 p-1" v-else>
+        <div class="w-full h-full bg-muted/80 rounded-md aspect-square"></div>
+      </div>
+    </div>
+
+    <!-- Draggable items container -->
+    <div ref="itemsContainer" class="relative grid grid-cols-6 gap-2 mt-4">
+      <!-- Use TransitionGroup for animations during reordering -->
+      <TransitionGroup name="media-item" tag="div" class="contents">
+        <!-- Draggable items -->
+        <div
+          v-for="(url, index) in showAll ? items : items.slice(0, 8)"
+          :key="url || index"
+          :data-index="index"
+          class="draggable-item w-full relative"
+          :class="{ 'col-start-1 col-span-2 row-start-1 row-span-2': index === 0 }"
+        >
+          <button
+            class="relative flex justify-center items-center w-full h-full rounded-md outline outline-border group overflow-hidden focus-visible:outline-none focus-visible:ring-ring/80 focus-visible:ring-[3px] transition-all duration-200 cursor-grab active:cursor-grabbing"
+            @click="(event) => openMedia(event, url)"
+            type="button"
+          >
+            <div class="aspect-square group">
+              <img 
+                :src="url" 
+                draggable="false"
+                class="w-full h-full object-cover group-hover:opacity-75 transition-opacity duration-200 pointer-events-none"
+              />
+            </div>
+            <button @click="(event) => updateChecked(event, url)" class="absolute top-0 left-0 p-1 size-6 flex items-center justify-center" type="button">
+              <Checkbox 
+              :model-value="selectedItems.includes(url)" 
+              tabindex="-1" 
+              class="bg-white outline-gray-300 data-[state=checked]:bg-black data-[state=checked]:text-white data-[state=checked]:border-black shadow-xs pointer-events-none" 
+              />
+            </button>
+
+            <GripVertical class="size-3 absolute top-1 right-1 text-gray-400 hidden group-hover:block" />
+          </button>
+        </div>
+      </TransitionGroup>
+      
+      <!-- New media button -->
+      <MediaPickerDialog :sources="sources" @submit="addMedia">
+        <button
+          class="relative flex justify-center items-center w-full group aspect-square rounded-md cursor-pointer focus-visible:outline-ring focus-visible:outline-[1px] focus-visible:ring-ring/50 focus-visible:ring-[3px] hover:bg-black/10 transition-colors duration-200"
+          :class="{ 'col-start-1 col-span-2 row-start-1 row-span-2': items?.length === 0 }"
+          type="button"
+        >
+          <Plus class="size-8" />
+        </button>
+      </MediaPickerDialog>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.draggable-item {
+  touch-action: none; /* Prevents scrolling while dragging on touch devices */
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out; /* Add a base transition for non-GSAP movements */
+}
+
+.dragging {
+  cursor: grabbing !important;
+  z-index: 100 !important;
+  user-select: none;
+  transition: none; /* Disable transition during dragging */
+}
+
+.media-item-enter-active,
+.media-item-leave-active {
+  transition: all 0.3s ease;
+}
+</style>

package/components/ui/media-picker/index.ts

@@ -0,0 +1,2 @@
+export { default as MediaPicker } from './MediaPicker.vue'
+export { default as MediaPickerDialog } from './MediaPickerDialog.vue'