@oneclick.dev/cms-kit 0.0.2 → 0.0.3

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

@@ -1,342 +0,0 @@
-<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

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

package/components/ui/media-picker/media-picker-dialog/Dropzone.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { useDropZone } from '@vueuse/core'
-import { Check, Loader2, X } from 'lucide-vue-next'
-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 props = defineProps({
-  activeSourceId: {
-    type: String,
-    required: true
-  },
-  path: {
-    type: String,
-    default: ''
-  }
-})
-
-const { uploadFile } = useMediaLibrary()
-
-const dropZoneRef = ref<HTMLDivElement>()
-
-const MAX_CONCURRENT_UPLOADS = 3
-
-const PENDING_FILES = inject('pendingFiles', ref<PENDING_FILE[]>([]))
-const reload = inject('reload')
-
-async function onDrop(files: File[] | null) {  
-  for (let i = 0; i < files?.length; i++) {
-    let randomID = crypto.randomUUID()
-    addToUploadQueue(randomID, files[i])
-    await new Promise((resolve) => setTimeout(resolve, 50));
-  }
-}
-
-const addToUploadQueue = async (id: string, file: File) => {
-  PENDING_FILES.value.push({
-    id,
-    name: file.name,
-    size: file.size,
-    file,
-    contentType: file.type,
-    path: props.path,
-    url: URL.createObjectURL(file),
-    status: 'pending',
-    updated: new Date()
-  })
-  handleQueue()
-}
-
-const handleQueue = () => {
-  const CURRENTLY_UPLOADING = PENDING_FILES.value.filter((f) => f.status === 'uploading')
-  if (CURRENTLY_UPLOADING.length < MAX_CONCURRENT_UPLOADS) {
-    const nextFile = PENDING_FILES.value.find((f) => f.status === 'pending')
-    if (nextFile) {
-      startUploadingFile(nextFile.id)
-    }
-  }
-}
-
-const startUploadingFile = async (id: string) => {
-  try {
-    PENDING_FILES.value.find((f) => f.id === id)!.status = 'uploading'
-    const file = PENDING_FILES.value.find((f) => f.id === id)!.file
-    const res = await uploadFile(props.activeSourceId, file, props.path)
-    PENDING_FILES.value = PENDING_FILES.value.filter((f) => f.id !== id)
-    reload()
-  } catch (error) {
-    console.error(error)
-    PENDING_FILES.value.find((f) => f.id === id)!.status = 'error'
-    PENDING_FILES.value.find((f) => f.id === id)!.updated = new Date()
-  } finally {
-    handleQueue()
-  }
-}
-
-const { isOverDropZone } = useDropZone(dropZoneRef, {
-  onDrop,
-  dataTypes: ['image'],
-  multiple: true,
-  preventDefaultForUnhandled: false,
-})
-</script>
-
-<template>
-  <button
-    ref="dropZoneRef"
-    :class="cn('relative w-[calc(100%-0.5rem)] outline-dashed outline px-4 py-16 mx-1 mb-4 flex items-center justify-center rounded-md text-muted-foreground cursor-pointer transition-colors duration-300 hover:outline-2 hover:outline-ring hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring',
-               isOverDropZone ? 'outline-2 outline-ring bg-muted' : ''
-    )"
-  >
-    Drop file(s) here
-  </button>
-</template>

package/components/ui/media-picker/media-picker-dialog/FileItem.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { Copy, FolderInput, Pencil, Trash2, Image, Square, SquareCheck, Loader2, X, Pause } from 'lucide-vue-next'
-import { formatFileSize } from '../../../../lib/utils'
-import { cn } from '../../../../lib/utils'
-
-const props = defineProps({
-  file: {
-    type: Object,
-    required: true
-  },
-  selected: {
-    type: Boolean,
-    required: true
-  }
-})
-
-const emit = defineEmits(['toggle'])
-
-const focus = ref(false)
-
-const { urlToBase64 } = useUtilsService()
-const openImageEditor = inject('openImageEditor')
-const editImage = async (url: string) => {
-  let res = await urlToBase64(url)
-  openImageEditor(res.base64)
-}
-
-const isImageFile = (contentType: string) => {
-  return contentType && contentType.startsWith('image/') || false
-}
-
-const imageFailed = ref(false)
-const onImageError = () => {
-  imageFailed.value = true
-}
-
-const isPending = computed(() => props.file.status === 'pending' || props.file.status === 'uploading' || props.file.status === 'error')
-</script>
-
-<template>
-  <ContextMenu>
-    <ContextMenuTrigger>
-      <div class="relative group border rounded-xl p-1 select-none" :class="{ 'bg-muted': selected, 'border-ring': focus }">
-        <div class="relative" v-if="isImageFile(file.contentType) && !imageFailed">
-          <img 
-            :src="file.url" 
-            :alt="file.displayName || file.name" 
-            :class="cn('w-full aspect-square object-contain rounded-lg pointer-events-none',
-                      file.status === 'pending' || file.status === 'uploading' ? 'animate-pulse' : '',
-                      file.status === 'error' ? 'opacity-30' : ''
-            )"
-            loading="lazy"
-            draggable="false"
-            @error="onImageError"
-          />
-          
-          <div v-if="isPending" class="absolute inset-0 flex items-center justify-center">
-            <Pause v-if="file.status === 'pending'" class="size-6 text-white" />
-            <Loader2 v-else-if="file.status === 'uploading'" class="size-6 text-white animate-spin" />
-            <X v-else-if="file.status === 'error'" class="size-6 text-red-500" />
-          </div>
-        </div>
-
-        <div
-          v-else
-          :class="cn('w-full h-28 flex items-center justify-center rounded-lg', selected ? 'bg-black/40' : 'bg-muted/50')"
-        >
-          <Image class="size-6 text-muted-foreground" v-if="isImageFile(file.contentType)" />
-        </div>
-        
-        <button v-if="!isPending" @click="emit('toggle', file.url)" class="absolute inset-0 flex items-start justify-end bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl cursor-pointer focus-visible:outline-none" @focus="focus = true" @blur="focus = false">
-          <Square v-if="!selected" class="size-6 mt-2 mr-2 drop-shadow-[0_3px_3px_rgba(0,0,0,0.7)] pointer-events-none" />
-        </button>
-        
-        <SquareCheck v-if="!isPending && selected" class="absolute top-2 right-2 size-6 drop-shadow-[0_3px_3px_rgba(0,0,0,0.7)] pointer-events-none" />
-        <Square v-else-if="!isPending && focus" class="absolute top-2 right-2 size-6 drop-shadow-[0_3px_3px_rgba(0,0,0,0.7)] pointer-events-none" />
-
-        <div class="flex flex-col mt-1 px-1">
-          <span class="text-sm mb-0.5 truncate">{{ file.displayName || file.name.split('/').pop() }}</span>
-          <span class="text-xs text-muted-foreground truncate">{{ formatFileSize(file.size) }}</span>
-        </div>
-      </div>
-    </ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuItem @click="editImage(file.url)">
-        <Image class="size-4" />
-        Edit image
-      </ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuItem>
-        <Copy class="size-4" />
-        Duplicate...
-      </ContextMenuItem>
-      <ContextMenuItem>
-        <FolderInput class="size-4" />
-        Move...
-      </ContextMenuItem>
-      <ContextMenuItem>
-        <Pencil class="size-4" />
-        Rename...
-      </ContextMenuItem>
-      <ContextMenuItem variant="destructive">
-        <Trash2 class="size-4" />
-        Delete
-      </ContextMenuItem>
-    </ContextMenuContent>
-  </ContextMenu>
-</template>

package/components/ui/media-picker/media-picker-dialog/Filters.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ArrowUpDown, FolderPlus, CircleX } from 'lucide-vue-next'
-import { cn } from '../../../../lib/utils'
-
-const props = defineProps({
-  showNewFolder: {
-    type: Boolean,
-    required: true
-  }
-})
-
-const focusSearch = ref(false)
-
-const search = inject('search')
-const sort = inject('sort')
-</script>
-
-<template>
-  <div class="flex items-center justify-between gap-2 mb-4">
-    <div class="group relative w-full max-w-sm">
-      <Input
-        type="text"
-        placeholder="Search..."
-        v-model="search"
-        class="pr-8"
-        @focus="focusSearch = true"
-        @blur="focusSearch = false"
-      />
-      <button class="absolute right-2 top-2.5 opacity-50 hover:opacity-100" @click="search = ''">
-        <CircleX :class="cn('size-4 transition-opacity duration-200 opacity-0',
-                  search ? 'group-hover:opacity-100 cursor-pointer' : '',
-                  focusSearch && search ? 'opacity-100' : '')" />
-      </button>
-    </div>
-    
-    <div class="flex items-center gap-2">
-      <Select v-model="sort">
-        <SelectTrigger class="w-[100px]">
-          <ArrowUpDown class="size-4" />
-          Sort
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectItem value="name">
-              Name (A-Z)
-            </SelectItem>
-            <SelectItem value="name-desc">
-              Name (Z-A)
-            </SelectItem>
-            <SelectItem value="size">
-              Size (smallest first)
-            </SelectItem>
-            <SelectItem value="size-desc">
-              Size (largest first)
-            </SelectItem>
-            <SelectItem value="date">
-              Date (oldest first)
-            </SelectItem>
-            <SelectItem value="date-desc">
-              Date (newest first)
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-
-      <Tooltip v-if="showNewFolder">
-        <TooltipTrigger as-child>
-          <Button variant="outline">
-            <FolderPlus class="size-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>New folder</p>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  </div>
-</template>

package/components/ui/menubar/Menubar.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  MenubarRoot,
-  type MenubarRootEmits,
-  type MenubarRootProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<MenubarRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <MenubarRoot
-    data-slot="menubar"
-    v-bind="forwarded"
-    :class="
-      cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </MenubarRoot>
-</template>